Search form

The journey to build a better Drupal toolbar

Posted on Thu, Nov 10, 2011 by Dharmesh Mistry

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

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.

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.

“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.

Comments

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...

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.

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.

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.

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.

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?

+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.

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.

Plain text

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.