The document summarizes Dharmesh Mistry's presentation on redesigning the toolbar for Drupal 8. Initial research found issues with Drupal 7's toolbar not being mobile-friendly. Multiple designs were proposed and tested iteratively. Testing showed overall improvements but uncovered discoverability issues. The key highlights emphasized prototyping and testing early, engaging stakeholders throughout the process, and communicating transparently to build credibility and buy-in.

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

2. BACKGROUND
PROBLEM SPACE
RESEARCH
EVOLVED PROBLEM SPACE
MORE RESEARCH
DESIGN VALIDATION
KEY HIGHLIGHTS
Thursday, May 30, 13

3. 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
Thursday, May 30, 13

4. Open Source
Content Management System
Over 800,000 registered users
BACKGROUND
Thursday, May 30, 13

5. Private, fast-growth company
Supports enterprises that use Drupal
Optimized Drupal hosting
Monitoring sites
SaaS enabled Drupal sites
BACKGROUND
Thursday, May 30, 13

6. Improve the content authoring
experience for Drupal 8
BACKGROUND
Thursday, May 30, 13

7. Drupal Gardens
Drupal modules
Admin toolbar
Drupal.org & Groups.Drupal.org
Issue queue
Drupal Users
Site Builders
Themers (Designers)
Content Administrators
End Users
BACKGROUND ...
Thursday, May 30, 13

8. PROBLEM
SPACE
Thursday, May 30, 13

9. PROBLEM SPACE
Thursday, May 30, 13

10. 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”
Thursday, May 30, 13

11. 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
Thursday, May 30, 13

12. REDESIGN (V3)
Thursday, May 30, 13

13. 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
Thursday, May 30, 13

14. 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
Thursday, May 30, 13

15. Usability testing
3 rounds of iterative design & testing
DESIGN VALIDATION
Thursday, May 30, 13

16. 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 configurations
Unclear how to hide the toolbar
Dashboard icon is unclear
DESIGN VALIDATION
Thursday, May 30, 13

17. PROBLEM
SPACE
REDEFINED
Thursday, May 30, 13

18. “Drupal 7’s default administration tools
were not designed in a “mobile first” way,
and as such difficult 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 ?
Thursday, May 30, 13

19. MOBILE FIRST ?
Thursday, May 30, 13

20. 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
Thursday, May 30, 13

21. Lewisnyman
First design
DESIGN DIVERGENCE
Thursday, May 30, 13

22. jeffburns
Design for android
dodorama
Design for android
tkoleary
Mobile
DESIGN DIVERGENCE
Thursday, May 30, 13

23. bojhan
Design evaluation
DESIGN DIVERGENCE
Thursday, May 30, 13

24. DESIGN DIVERGENCE ...
Thursday, May 30, 13

25. DESIGN CONVERGENCE
Thursday, May 30, 13

26. Scope redefined - unified 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
Thursday, May 30, 13

27. “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, identified 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 reflected
in the new design?” - bojhan
ROADBLOCKS
Thursday, May 30, 13

28. DESIGN TO BE VALIDATED
Thursday, May 30, 13

29. 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
Thursday, May 30, 13

30. Stakeholder goals of the study on the issue queue
Draft of the study script on google docs
Encouraging first 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
Thursday, May 30, 13

31. 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
Thursday, May 30, 13

32. CURRENT STATE
Thursday, May 30, 13

33. CURRENT STATE
Thursday, May 30, 13

34. KEY
HIGH
LIGHTS
What does this mean to you?
Thursday, May 30, 13

35. KEY
HIGH
LIGHTS
Prototype, iterate the design and the process early.
Thursday, May 30, 13

36. A TRADITIONAL PROCESS
Identify
problem
Design Prototype Test Develop
Internal review
Thursday, May 30, 13

37. A MODIFIED PROCESS
Sketch
Prototype
TestDevelop
Identify
problem
Sketch
Prototype
TestDevelop
Identify
problem
Thursday, May 30, 13

38. 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.
Thursday, May 30, 13

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

40. TWO DIMENSIONS OF AGILE
Sketch
Prototype
TestDevelop
Identify
problem
Sketch
Prototype
TestDevelop
Identify
problem
Agile
Thursday, May 30, 13

41. AGILE
Advantages
Multiple iterative points
Quick testing
Community feedback
Disadvantages
Multiple iterative points introduces
bottlenecks
Small, resource constrained team
Community feedback introduces
bottlenecks
Thursday, May 30, 13

42. A FURTHER MODIFIED PROCESS
Sketch
Prototype
TestDevelop
Identify
problem
Sketch
Prototype
TestDevelop
Identify
problem
Design in
browser
Thursday, May 30, 13

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

44. KEY
HIGH
LIGHTS
This is not design by committee.
Thursday, May 30, 13

45. KEY
HIGH
LIGHTS
Work with what you have; it’s not always going to be
perfect.
Thursday, May 30, 13

46. KEY
HIGH
LIGHTS
Engage with the stakeholders at every step; make
them a part of the process.
Thursday, May 30, 13

47. KEY
HIGH
LIGHTS
Being transparent helps buy-in; builds credibility.
Record/ Live Stream when possible.
Built tighter feedback loops.
Thursday, May 30, 13

48. KEY
HIGH
LIGHTS
Invest time in communicating.
Thursday, May 30, 13

49. KEY
HIGH
LIGHTS
Be upfront about what UX research can uncover.
Thursday, May 30, 13

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

51. 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!
Thursday, May 30, 13