UI design for Drupal modules
created on 周二, 2008-02-26 09:48
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.
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!
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.
w00t!
It's GREAT to see so much time, thought and talent being put into this area - it's much needed, and your contributions are outstanding.
Looking forward to more great things in Drupal UI/UX
Thanks!
Usability, accessibility
"By displaying all the settings in a very short version and making them clickable, you end up with a very light-weight form that is extremely clear and easy to use."
Shrinking a form by moving all the options closer together won't inherently make it easier to use, it just makes the configuration process faster and more convenient for the experienced user. In my opinion, this approach of compressing configuration pages isn't likely to help with improving the usability of Views.
By presenting every setting in a single screen you risk overwhelming the user with too many choices, which was the problem with Views 1 and the Drupal 5 vocabulary-add page. It's great that there's less visual clutter than in Views 1, but there's still a significant problem that needs to be addressed.
The Views 2 UI doesn't answer these two important questions for the user.
- Where do I begin?
- What do I do next?
With all the settings spread out across (and down) the page it's hard to figure out which setting to start with and which one to move to next. The user has no guidance. This is the only implication I see with the new UI and it doesn't mean the end of the world, but I don't expect this approach to help with other modules (Views may be the exception).
As for the actual forms in Views 2, I think they work very well and I like how they guide the user through multiple steps (although the forms can look a little messy, why is everything squashed together?).
The vertical tabs idea is also something that could work very well for Drupal and I support the idea as a permanent replacement of collapsible fieldsets. The tabs should always start at the top though, unlike in Bevan's example.
I look forward to seeing some real-world usability testing with Views 2.
The tabs should always
I don't understand, could you elaborate? Your involvement in the discussion at http://groups.drupal.org/node/8365 would also be appreciated, if you have time.
I look forward to seeing some real-world usability testing with Views 2.This is something Chad and Cody at UMN have expressed interest in following up last week's testing with, sometime.
Reply to Rowen
I don't understand, could you elaborate? Your involvement in the discussion at http://groups.drupal.org/node/8365 would also be appreciated, if you have time.
I look forward to seeing some real-world usability testing with Views 2.This is something Chad and Cody at UMN have expressed interest in following up last week's testing with, sometime.
Clarification
Sorry I forgot to check back for replies when I made the previous comment.
I meant that the tabs (ideally) should be at the top-left of the page, so they sit beside the Title and Body fields. The user shouldn't have to scroll down just to get to the other options, they should be more obvious and integrated in the overall layout. There would also have to be a tab to hold the Title and Body fields, perhaps labeled 'Content' or something or rather.
Wonderful
I love what you're doing - please keep it up :)
Great article
I really enjoyd reading this article. And I've been looking for some background on how the Views UI evolved. I always forget to look on g.d.o, thanks for that thread!
And the vertical tabs brings back sweet memories, I posted this one (Redesign permissions page) in sep 2005.
Really great to see so much UI discussion going on in the community.
Great post, interesting to
Great post, interesting to see where imagecache and imagefield modules are going. I agree completely that "the majority of contributed modules end their development when functionality is completed."
Just a little note
Just a reminder..
The work presented on this post is my personnal contribution to the modules, but cannot be considered as the future UI of the modules. The final UI is only chosen by the developpers of the modules and might be very different from my work.
Thanks!
Thanks for your excellent post Hubert. Building momentum and encouraging contrib (and core too sometimes) developers to spend time on usable interfaces is an important part of making drupal more usable. It was great to work with you on Views2 and would love to collaborate this way in future wireframing sessions.
Are you at Drupalcon? I think KarenS would like to see this happen for CCK sometime. BoF?
Thanks!
Thanks for your excellent post Hubert. Building momentum and encouraging contrib (and core too sometimes) developers to spend time on usable interfaces is an important part of making drupal more usable. It was great to work with you on Views2 and would love to collaborate this way in future wireframing sessions.
Are you at Drupalcon? I think KarenS would like to see this happen for CCK sometime. BoF?
I think a few UI libraries
I think a few UI libraries ought to be available that developers could follow to make developing UI's easier and quicker.
I'd favor multiple UI libraries initially and let survival of the fittest (or most adaptive) library decide which library becomes the main guideline for developing Drupal module interfaces.
Anyway for starters, I have noticed images, page widths, spacing etc. seem to work best if the number of pixels are divisible by 4. Page grid patterns could follow similar guidelines.
While there have been discussions on icon sets (off topic but somewhat relevant) I am in favor of the silk set of icons because they seem to be standard (and more importantly very well constructed, no other icon set that I've used could be integrated as cleanly into back grounds of any color as well as the silk icon set does) around the web and having the silk set of icons integrated into Drupal could bring Drupal sites more and more into the mainstream.