UI design for Drupal modules

DZone 's Guide to

UI design for Drupal modules

· Web Dev Zone ·
Free Resource

[Note: Thanks to Hubert Florin of Raincity Studios for allowing us to repost this article! --Joe]

With it's 6th version, Drupal was unveiled with some very welcoming improvements in usability, and if you ask me.. it's about time! As a new Drupal user ( after all, I've known about Drupal for only a year.. ) I would have to say that the usability done in Drupal 5 was only fulfilling the minimum requirements that were needed.

[img_assist|nid=1497|title=|desc=|link=none|align=right|width=83|height=100] A great example would be in regards to form submission during content creation: a never-ending journey of page scrolling. In my opinion, the majority of contributed modules end their development when functionality is completed. Generally, a very small amount of time is dedicated into improving the user experience.

Now that contributed modules and their functionality are becoming more complex, the packaging of a good UI is not just an added featured anymore but is becoming mandatory.

Views 2

The upcoming module, Views 2 is a prime example. The latest release brings with it a huge amount of improvements, and new features, but without an equal amount of consideration to the UI, configuration of views would be an onerous task indeed.

Merlinofchaos, the talented developer of the Views module, enlisted help from the Drupal community to create an improved user interface.This wasn't his first attempt to improve the usability of his modules – Panels 2 is already a great example of how good a drupal UI can get.

I've been helping the work on the Views 2 UI (under the name couzinhub, on drupal.org) by grabbing all the interesting ideas showing up on the threads, and lay them down in some UI drafts. It is pretty interesting to notice how draft after draft, the UI gets simpler, smaller and easier to understand. No more scrolling down for ages, no more searching for the information. Everything is just a click away, and that might be the only downside of the new UI... too much clicking!

[img_assist|nid=1498|title=|desc=|link=none|align=right|width=100|height=66]The long list of settings has been replaced by a clickable preview. If you want to modify any of the settings, just click on the preview and an edit area will appear on the bottom. Also, the new UI is using something that should be more and more common in the future versions of Drupal : vertical tabs.

Future UI in Drupal

I personally think that tabs are a great addition to any submission form when used with AJAX or Jquery instead of a page reload. The new views 2 module does a great job of avoiding the need to reload the page each time a setting is changed and makes a huge difference in the user experience. Not only for views 2, but even for the standard node add/edit form (by Bevan), tabs are a very easy and promising alternative.

Also, another advantageous addition to views 2 is the ability to use a 'short version' for each setting. The concept is that the user has the ability to see all of their settings at once, but only need to edit one of them at a time. By displaying all the settings in a very short version and making them clickable ('click on what you want to modify'), you end up with a very light-weight form that is extremely clear and easy to use.

Currently I'm working on drafts for the imagecache and imagefield modules, by the ingenious Dopry. By adapting concepts that were put in place with Views 2 into imagecache and imagefield, I can already see the results being a vast improvement over the current UI.

Tabs, Drag & drops, previews, and a better use of visual elements like icons can considerably improve the Drupal experience. Improve your UI and they will come. Let's not forget about our end-users so that we can widen the audience on this already amazing CMS.

[Note: Thanks again to Hubert Florin of Raincity Studios for allowing us to repost this article! --Joe]


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}