Home / Comment permalink

UX improvements in Drupal 6: Interaction Design

According to Wikipedia, "Interaction design defines the behavior (the "interaction") of an artifact or system in response to its users." In previous versions, Drupal has mostly used static interfaces that update when the user submits a form, or navigates to a new page. Beginning with Drupal 5, Jquery was added to the core and Drupal core developers began using this javascript library to improve the user experience of Drupal through improved user interactions. With Drupal 6, significant improvements were added to the core with the combination of web page elements and Jquery to add AJAX (Asynchronous Javascript and XML) behaviors called AHAH. In short, AHAH gives the user interaction power of Javascript to Drupal's legion of PHP programmers.

In Drupal 6 there were at least 29 patches from 29 contributors that helped improved interaction design. Many of the improvements focused on the introduction of AHAH, and drag and drop behaviors for sorting and selecting lists. Some interaction design improvements involved making it easer to log into a Drupal site using OpenID. Other improvements included more accurate linking of new comments and adding interface widgets to deal with lists with no options or too many options.

###How can we improve Drupal's interaction design?
Interaction design improvements require an iterative process of user research. The current Drupal development process focuses on user testing with other core developers. In that sense we have an iterative user research process already. One technique Drupal contributors can use to include content publishers and non-developer administrators user research is the cognitive walk-through. "The Cognitive walk-through method is a usability inspection method used to identify usability issues in a piece of software or web site, focusing on how easy it is for new users to accomplish tasks with the system." This method is popular because it does not require formal usability testing equipment.

In 2008, we had two formal usability tests conducted for Drupal 6 which made use of the cognitive walk through. The first test was at the University of Minnesota, and the results are posted here. The second test was conducted at the University of Baltimore by graduate students in the interaction design and information architecture program. The final report is yet to be released, but I had access to an early preview. The tests reveal confusion between the public website and the administration portion of Drupal, the ability to find content once published, a desire to have a better workflow after the site is first installed, and the ability to have workflow through site building.

We now have a significant number of interaction design contributors, a track record of improvements, and enabling technologies such as AHAH, but we need more user research to inform core developers how to make interaction design improvements. If designers and user experience practitioners can develop goals, tasks, and then conduct a cognitive walk through, the Drupal community has the talent, track-record, and motivation to incorporate this user research into Drupal 7 interaction design improvements.

Contributors to Drupal 6 interaction design improvements include Rob Roy Barreca, Steven Wittens, Andrew Morton, Darrel O'Pry, James Walker, Amr Mostafa, Moshe Weitzman, Nathan Haug, Jeff Eaton, Peter Woalin, Franz Heinzmann, Nedjo Rogers, Henrique Recidive, Angela Byron, "Dmitri01", Jeff Eaton, "Snufkin", Károly Négyesi, John VanDyk, Alexander Hass, Yves Chedemois, Dries Buytaert, Gábor Hojtsy, Gurpartap Singh, Chris Kennedy, Joakim Stai, and Bernd Oliver Sünderhauf.

Here is a list of 29 patches to Drupal 6 that I have identified which improved Drupal 6 interaction design.

  1. - Patch #92630 by RobRoy: simplify adding new blocks.
  2. - Patch #107061 by Steven et al: add jQuery teaser splitter.
  3. "Usability" - Kieran

  4. - Patch #115267 by drewish, dopry et al: simplified file uploads code, improved file API, centralized file validation, implemented quotas and fixed file previews.
  5. - Patch #131026 by James et al: OpenID client support for Drupal!
  6. #133028 by alienbrain and Moshe Weitzman: allow positioned submit buttons in node forms via form_alter by not hard-coding the button order
  7. - Patch #154398 by quicksketch et al: add dynamic AHAH submission properties to Forms API. This patch was ready for a long time and is somewhat of a usability improvement (enabler).
  8. #6162 by various people: actually point new anchors to the page the first new comment is displayed (in a multipage comment view)
  9. Need to add actions patches

  10. #172773 by numerous contributors: Make the actions interface usable by mere mortals (including rename of actions.module to trigger, but keeping the actions themselfs).
  11. #157752 by quicksketch: extend AHAH functionality to most types of form elements, without writing JavaScript. Also AHAH enable the blocks admin page.
  12. #181741 by quicksketch: fix AHAH throbber/progress bar issues and generalize progress display configuration to allow module developers to choose from the throbber and progress bar
  13. #181125 by quicksketch and dmitrig01: AHAH usability improvements for book module
    - book outline form reordering in real-time
    - better context sensitive book parent editing
  14. - Patch #155870 by quicksketch et al: AHAH-ification of the poll module.
  15. - Patch #181066 by quicksketch et al: drag and drop of table rows on the block adminsitration page.
  16. #193274 by dmitrig01 and quicksketch: send submit button data with AHAH submissions
  17. #181126 by quicksketch et al: drag and drop support for menus
  18. - Patch #192736 by quicksketch et al: drag and drop for book module.
  19. #193333 by quicksketch et al: taxonomy drag and drop support
  20. #193998 by Rob Loach and quicksketch: profile fields drag and drop
  21. - Patch #181066 by quicksketch et al: drag and drop of table rows on the block adminsitration page.
  22. #193105 by dmitrig01, quicksketch: add weights and drag and drop ordering support to uploads
  23. #200370 by quicksketch: fixes to drag and drop support to make it usable by CCK
  24. #205334 by hass: if more then 5 languages are available, use a dropdown not a radio button list (usability)
  25. #127539: progressive operation support, refactoring update.php code to a generic batch API to support runnning operations in multiple HTTP requests
    - update.php is already on the batch API
    - node access rebuilding is in the works
    - automatic locale importing is in the works
  26. - Modified patch #141526 by Gurpartap Singh: added a filter form on the path alias table.
  27. #185209 by ChrisKennedy: only provide picture deletion option if there is an actual user picture present
  28. #119038 by ximo, Pancho: user role editing usability: include disabled checkbox for authenticated role


Posted on by doka (not verified).

I propose also this one: http://drupal.org/node/222829

This UX initiative is very promising, thanks for that!