Reactie toevoegen

The journey to build a better Drupal toolbar

Drupal is known for its power and flexibility, but it is also known for its steep learning curve. Over the last few years, Drupal has taken this concern seriously. For Drupal 7, significant attention was paid to the user experience. The Drupal 8 user experience team aims to continue this effort. To make these efforts effective, more work is needed in multiple areas.

One such area is the toolbar. Trying to gauge the effectiveness of a toolbar is tricky. Over the last year, I have conducted several usability task-based studies for Drupal Gardens. The issue of not knowing where to go on the toolbar to find relevant information has been a common issue for new and beginner users. Even the experienced users are often confused between “Site Configuration” and “Structure” in Drupal 7. Some of these concerns are seen in user comments:

  • “It is too wordy. I don’t like a lot of words. [Instead] I like to click and then break down”
  • “The order is not the way I think”
  • “Busy, convoluted”

What did we do?

With these concerns in mind, Jeff Noyes from Acquia started investigating ways to improve the toolbar by:

  • Minimize intimidation
  • Accelerate orientation and time/clicks to destination
  • Eliminate the Structure versus Content confusion for end users and module developers
  • Provide in context help

One toolbar that met many of these goals out of the box was the 'Admin' toolbar (http://drupal.org/project/admin),however it wasn't a perfect fit in that it was based on a problematic information architecture, lacked contextual help, was too different from the existing toolbar, and had some interaction patterns the design team felt would be problematic to users - specifically stacking tags and the lack of key words like Add Content and Find Content (which showed up in user testing). Despite these shortcomings, it was a major source of inspiration for the design we arrived at: http://screencast.com/t/2CyrTMCUzh

Redesigned toolbar (Version 3)
Screenshot: Redesigned toolbar (Version 3)

This toolbar is “pluggable” like the “admin” toolbar. That is, you can plug in Blocks or Menus (Shortcuts are menus). The design also takes into consideration as to how additional content types would be displayed. This design decision was based on research that suggested that 80% of all large Drupal websites use no more than 20 content types.

Toolbar with additional content types
Screenshot: Toolbar with additional content types

Since February 2011, I conducted three comparative studies between the current toolbar and the redesigned toolbar asking real people who are site builders (new and existing users) to perform common tasks. Findings from the previous studies were implemented in the next iteration of the design, and were then retested.
To keep the studies consistent, participants were asked to perform the same set of tasks in all the studies (create a blog entry, publish an unpublished piece of content, and change permissions). We decided to focus on common tasks that forced participants to explore different areas of the toolbar. We also picked permissions task because we were aware of how hard the feature is to find. To avoid any bias towards the designs, the order in which the participants were shown the designs were interchanged and kept unnamed (for new users).

What did we find?

In each of the iterations, we found that participants preferred the redesigned toolbar over the current toolbar. The issues discovered for the redesigned toolbar were taken back to the drawing board and at the end of the third iteration, we were convinced that we had a solution that worked very well.

Here are some of the quotes for the new design from the participants:

  • “Much cleaner … a huge improvement … wonderful”
  • “It’s a better design”
  • “It’s utilitarian”
  • “Good changes here... no concerns as of now”
Number of Participants Prefer New Design Prefer Old Design
Study 1 (Feb 2011) 8* 5 2
Study 2 (May 2011) 7 6 1
Study 3 (Aug 2011) 5 5 0

* 1 participant data was discarded

At the end of each study, participants were asked to split 100 points between the designs, giving more points to the design they like. This was done to understand how much they preferred one design over the other. It is worth noting that all the participants in the latest study preferred the proposed toolbar and gave it the highest number of points (76/100) compared to the previous designs.

Point distribution preference to design

“I am struggling to find a reason to give any points to the old menu [toolbar]. I guess, just familiarity. But even with that, I would give all 100 points to the new menu [toolbar]” (Existing user)

While some may have concerns that Drupal users will have to relearn how to use Drupal, the data strongly suggests the redesigned toolbar will have improve the experience for our users after the initial acclimatization and will help us progress towards our goal of making Drupal easier to use.

Next Steps

At the DrupalCon London 2011 mobile sprint, testing revealed that the Drupal admin interface has many challenges to overcome (http://groups.drupal.org/node/188744). Not only does the admin interface need a more thorough review for accessibility, but it is also worth considering merging the redesigned toolbar with the “admin” toolbar, and making it a super set of all high-profile, high-use features. But for all this to happen, your help is needed. We need to have more discussions between the “admin” module maintainers and Drupal core contributors.

Note: I would like to clarify that this design is not a module yet. Also, this is a different module from http://drupal.org/project/toolbar

Plain text

  • Geen HTML toegestaan.
  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.
  • Regels en alinea's worden automatisch gesplitst.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.
  • Toegelaten HTML-tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Regels en alinea's worden automatisch gesplitst.
Bij het indienen van dit fomulier gaat u akkoord met het privacybeleid van Mollom.