Home / The journey to build a better Drupal toolbar

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

Comments

Posted on by Gyorgy Chityil.

Admin module has 32000 installs, Admin Menu (http://drupal.org/project/ admin_menu) has almost 200 000. How come that was not considered as the de facto standard for this study? 200 000 webmasters cannot be wrong...

Posted on by Steve Purkiss.

...probably because admin_menu is great for us site builders but toolbar is far better for end users, especially as you can customise it for different roles/users.

Posted on by Scott Jordison.

As a minority that only uses admin module I think there are 200000 people missing out. That being said the bar pictured here would definitely get a good try from me. I would hope that it will become a contrib module to drupal 7 soon.

Posted on by Dharmesh Mistry.

Hello,

Thanks for the comment.

We are no way hinting that the webmasters are wrong. The goal of the toolbar redesign was to address the problems (listed in the post) that we found from user research. The ‘admin’ toolbar was the inspiration for this project because we think, modifications to it would help address those issues and improve the UX.

For D7, there was a lot of discussion about which toolbar should go in core. The admin_menu toolbar was a choice but after a lot of discussion, it was decided by the community to go with the existing toolbar. So, we want to build a toolbar that was well received by the community. We also think that the admin_menu toolbar’s IA and the flyout menus were not helping us in addressing the issues we wanted to get resolved.

Hope this answers your concern.

-Dharmesh

Posted on by Robert Dean.

Is there a module for this new menu that was created and shown in the screencast? If there is not one, and insight how to go about building this?

Posted on by Dharmesh Mistry.

Hello rdean,

At this point, we don't have a module. The idea was to share this toolbar with the community, get feedback and ultimately build a module. If you would be interested in helping us with this, I could keep you posted.

-Dharmesh

Posted on by Adam Moore.

I ripped out the toolbar from admin v1 and made a separate module. Which is somewhat similar to this module. You can have a look at http://drupal.org/project/qu ickbar I like how this toolbar looks it would be nice to compare notes.

Posted on by Daniel Espendiller.

some idea:

implement a searchbox to search menu and pages which belogs to the toolbar. i am navigation much faster on my page.

find example with screens and patch here:

http://drupal.org/node/806350
ht tp://drupal.org/files/issues/admin_menu_patch_search_2.png
ht tp://drupal.org/files/issues/admin_menu_patch_search_1.png

Posted on by Dharmesh Mistry.

Hello Haehnchen,

That's a good point. I have a few others also ask for this. I have documented it and we are giving it a serious consideration.

Thank you for the feedback.

-Dharmesh

Posted on by Guy Saban.

I notice that you moved away from the vertical listing of "lists".

Example: the "Toolbar with additional content types" has all the content type names laid out horizontally. In general, I and a number of people I have consulted with find lists easier/quicker to read down (vertically) not horizontally. In general a horizontal list requires more work from the eye to read, scanning back and forth (from it start position).

Have you tested a vertical listing of say the content types?

Were there other considerations for going with a horizontal (multi-level) listing?

Posted on by Tamás Hajas.

+1 for vertical listings. Otherwise it's is a good work and good to know you are working on it. Looking for downloadable D7 version. :)

Posted on by Jen Lampton.

+1 for this effort. The admin link structure is something that Drupal has struggled with for a good long while, and I think this is a huge step in the right direction, so thank you for working on it :)

The first thing that comes to mind when I see the menu, though, is that the word "site" is virtually meaningless. The only more-generic word I could think of might be "web". Why not call it what it is: "Configuration"?

Also - the scope of what you asked people to do in these tests was fairly limited, in the real world I'd like to see a fourth top level item "Plugins" for the modules page.

I'm interested to see where this leads, good work so far!

Posted on by Dharmesh Mistry.

Thanks Jen for the feedback.

Yes, all fair points. I personally like it as "Configuration" instead of "Site". Yes, we need to chew more on "Plugins" as a separate tab. But it might make more sense for Drupal and less for Drupal Gardens.

This is an iterative process and that's why such feedback is so crucial.

-Dharmesh

Posted on by Thomas Moseler.

I mixed this up with the toolbar module http://drupal.org/project/too lbar which even more for tricking you is working on "Toolbar 3". I guess the two modules are not related.

If I get it right, the thing you are showing is not yet published as a module.
Maybe you wanna clear this up in the main post, as others might get confused, too.

Posted on by Dharmesh Mistry.

Ops! I should have made that clear in the post. I will do that.
Thank you!

Posted on by mandor usaha.

Thanks for the information. For the first time use Drupal and i think it's easy and powerful.

Posted on by Dharmesh Mistry.

Appreciate your encouragement!

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

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.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.