The journey to build a more usable toolbar for Drupal 8

THE JOURNEY
TO BUILD A
MORE USABLE TOOLBAR
FOR DRUPAL 8
Dharmesh Mistry Drupal.org / Twitter: dcmistry
UXPA Boston Annual Conference May 29, 2013
Thursday, May 30, 13

BACKGROUND
PROBLEM SPACE
RESEARCH
EVOLVED PROBLEM SPACE
MORE RESEARCH
DESIGN VALIDATION
KEY HIGHLIGHTS

Dharmesh Mistry
UX Researcher
WELCOME
UX for Acquia and Drupal
UXPA Boston, Board of Director
Boston Design Jam, Design 4 Drupal,
UX/UI Summit
Speaker at Drupal & UX conferences
Bentley University
Desserts & Photography

Open Source
Content Management System
Over 800,000 registered users
BACKGROUND

Private, fast-growth company
Supports enterprises that use Drupal
Optimized Drupal hosting
Monitoring sites
SaaS enabled Drupal sites
BACKGROUND

Improve the content authoring
experience for Drupal 8
BACKGROUND

Drupal Gardens
Drupal modules
Admin toolbar
Drupal.org & Groups.Drupal.org
Issue queue
Drupal Users
Site Builders
Themers (Designers)
Content Administrators
End Users
BACKGROUND ...

PROBLEM
SPACE

PROBLEM SPACE

PROBLEM SPACE
Doesn’t accommodate Drupal personas
Steepens learning curve
High barrier for new users
Cumbersome for established users
Lack of contextual help
“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”

Research Considerations
Designers are users
Hallway conversations
Issues in the issue queue
Design Considerations
Minimize intimidation
Accelerate orientation and time/clicks
to destination
Eliminate the “Structure” versus
“Content” confusion for end users,
site builders and site administrators
Provide in context help
CONSIDERATIONS

REDESIGN (V3)

Usability testing methodology
3 rounds of comparative iterative
design & testing with order effect
Tasks:
Create a blog entry
Publish an unpublished content
To change permissions of a role
Focus on beginner/ intermediate
Drupal site builders
Usability testing results
“Much cleaner ... a huge improvement ...
wonderful.”
“It’s a better design.”
“It’s utilitarian.”
DESIGN VALIDATION

Usability testing
3 rounds of iterative design & testing
Number of participants Prefer new design Prefer current 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 discarded
DESIGN VALIDATION

Usability testing
3 rounds of iterative design & testing
DESIGN VALIDATION

Usability testing issues
Scalability of the toolbar
Does this work for a small site and a big site?
Doesn’t address the problem of “Structure” versus “Content” as
you are still on the mercy of contribute module conﬁgurations
Unclear how to hide the toolbar
Dashboard icon is unclear
DESIGN VALIDATION

PROBLEM
SPACE
REDEFINED

“Drupal 7’s default administration tools
were not designed in a “mobile ﬁrst” way,
and as such difﬁcult to work with on
tablets and smartphones.”
- Dries Buytaert, Drupal Project Lead
“We can’t ship Drupal 8 like this.”
- Angela Byron, Drupal 7 co-maintainer
MOBILE FIRST ?

MOBILE FIRST ?

Research Considerations v2
Why many users override the
default toolbar with the admin
toolbar?
Designers are users
Hallway conversations
Issues in the issue queue
Research from previous designs
http://drupal.org/node/1137920Issue
Can we work with the previous design?
Previous designs did not
accommodate the new problem
space
Previous design was focused more on
IA and less on interaction patterns;
harder to validate the toolbar with the
mingling of IA, design and interaction
patterns

Lewisnyman
First design
DESIGN DIVERGENCE

jeffburns
Design for android
dodorama
Design for android
tkoleary
Mobile
DESIGN DIVERGENCE

bojhan
Design evaluation
DESIGN DIVERGENCE

DESIGN DIVERGENCE ...

DESIGN CONVERGENCE

Scope redeﬁned - uniﬁed prototype for desktops and mobile
Performance concerns
Interaction pattern concerns
Vertical versus horizontal menus
Menu options seem “random”
Model assumes there are no “overlays”
Navigation too prominent; takes 30% real estate on desktop
ROADBLOCKS

“Sorry, but I don't think it is reasonable to put in a massive change to the UX of navigating for all users
(desktop), with almost no discussion nor user testing data. Could you please read this sentence again,
and think about how ridiculous that sounds.” - bojhan
“I also agree with Bojhan that this needs some more serious usability testing and discussing before it
goes in.” - sun
“The usability testing done, identiﬁed serious issues - mostly attributed to the IA. Proposals by Jeff and
Dharmesh, focused on providing better navigation to actions, and tools in structure. How is that reﬂected
in the new design?” - bojhan
ROADBLOCKS

DESIGN TO BE VALIDATED

How do users use the toolbar on their mobile devices and on their desktops?
Are the users able to easily navigate to the tasks that they want to perform?
Do users understand the interaction pattern of the toolbar?
How does the experience differ when on mobile and when on desktop?
USABILITY STUDY FOCUS

Stakeholder goals of the study on the issue queue
Draft of the study script on google docs
Encouraging ﬁrst round of edits
Draft of the study posted on groups.drupal.org and issue queue
Soliciting feedback; giving a deadline
Soliciting volunteers to help with conducting the study
USABILITY STUDY PROCESS

USABILITY FINDINGS
Executive Summary
Overall, the toolbar prototype tested
well on desktop and iPhones.
Would improve productivity and
perceived to be “clean”, “nice icons”,
“usable”, and “visually appealing”
“This is a big improvement from
where we are at [right now]” (P4)
Usability Issues
Collapsing menu items through “>” and
the link “Edit shortcuts” are not
discoverable
Trouble discovering
Drop down arrow which eliminates page
refresh
Switching between horizontal and
vertical toolbar
Edit shortcut
Legacy IA issues persist from D7

CURRENT STATE

KEY
HIGH
LIGHTS
What does this mean to you?

KEY
HIGH
LIGHTS
Prototype, iterate the design and the process early.

A TRADITIONAL PROCESS
Identify
problem
Design Prototype Test Develop
Internal review

A MODIFIED PROCESS
Sketch
Prototype
TestDevelop
Identify
problem
Sketch
Prototype
TestDevelop
Identify
problem

WHAT & HOW WE TEST ?
Initial
design
Actionable
design
North
star
design
Invision &
high-fidelity
Invision &
high-fidelity
Invision &
high-fidelity
(if resources
permit)
Prototyping yields technical issues.
Testing yields usability issues.

Invision provides rapid
prototyping based on hotspots
on images and basic one-off
interactions.
Invision App High Fidelity Prototyping
High-ﬁdelity prototyping entails rapid
coding of HTML, CSS, and
JavaScript, allowing for the full
breadth of interactions to be
tested.
PROTOTYPES

TWO DIMENSIONS OF AGILE
Sketch
Prototype
TestDevelop
Identify
problem
Sketch
Prototype
TestDevelop
Identify
problem
Agile

AGILE
Advantages
Multiple iterative points
Quick testing
Community feedback
Disadvantages
Multiple iterative points introduces
bottlenecks
Small, resource constrained team
Community feedback introduces
bottlenecks

A FURTHER MODIFIED PROCESS
Sketch
Prototype
TestDevelop
Identify
problem
Sketch
Prototype
TestDevelop
Identify
problem
Design in
browser

KEY
HIGH
LIGHTS
Engaging with the community is a huge plus, however
the habitat isn’t ideal for design process.

KEY
HIGH
LIGHTS
This is not design by committee.

KEY
HIGH
LIGHTS
Work with what you have; it’s not always going to be
perfect.

KEY
HIGH
LIGHTS
Engage with the stakeholders at every step; make
them a part of the process.

KEY
HIGH
LIGHTS
Being transparent helps buy-in; builds credibility.
Record/ Live Stream when possible.
Built tighter feedback loops.

KEY
HIGH
LIGHTS
Invest time in communicating.

KEY
HIGH
LIGHTS
Be upfront about what UX research can uncover.

Special thanks to Bojhan Somers, Kevin O’Leary and Jesse
Beach, Jeff Noyes, Lewis Nyman and many other
contributors.
THANK
YOU

THANK
YOU
Please evaluate the session https://www.surveymonkey.com/s/Z5Z2WYR
Dharmesh Mistry Drupal.org / Twitter: dcmistry dharmesh.mistry@acquia.com
To all our volunteers at UXPA Boston. You rock!

The journey to build a more usable toolbar for Drupal 8

More Related Content

Similar to The journey to build a more usable toolbar for Drupal 8 (20)

Recently uploaded (20)

The journey to build a more usable toolbar for Drupal 8