the journey to build a more usable toolbar for drupal 8

THE JOURNEY TO BUILD A MORE USABLE TOOLBARFOR DRUPAL 8

Dharmesh Mistry Drupal.org / Twitter: dcmistry

UXPA Boston Annual Conference May 29, 2013Thursday, May 30, 13

BACKGROUNDPROBLEM SPACERESEARCHEVOLVED PROBLEM SPACEMORE RESEARCHDESIGN VALIDATIONKEY HIGHLIGHTS

Thursday, May 30, 13

Dharmesh MistryUX Researcher

WELCOME

UX for Acquia and DrupalUXPA Boston, Board of DirectorBoston Design Jam, Design 4 Drupal, UX/UI Summit Speaker at Drupal & UX conferencesBentley UniversityDesserts & Photography

Thursday, May 30, 13

Open Source Content Management SystemOver 800,000 registered users

BACKGROUND

Thursday, May 30, 13

Private, fast-growth companySupports enterprises that use DrupalOptimized Drupal hostingMonitoring sitesSaaS enabled Drupal sites

BACKGROUND

Thursday, May 30, 13

Improve the content authoring experience for Drupal 8

BACKGROUND

Thursday, May 30, 13

Drupal GardensDrupal modulesAdmin toolbarDrupal.org & Groups.Drupal.orgIssue queueDrupal Users

Site BuildersThemers (Designers)Content AdministratorsEnd Users

BACKGROUND ...

Thursday, May 30, 13

PROBLEMSPACE

Thursday, May 30, 13

PROBLEM SPACE

Thursday, May 30, 13

PROBLEM SPACE

Doesn’t accommodate Drupal personasSteepens learning curve

High barrier for new usersCumbersome 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

Research ConsiderationsDesigners are usersHallway conversations Issues in the issue queue

Design ConsiderationsMinimize intimidationAccelerate orientation and time/clicks

to destinationEliminate the “Structure” versus

“Content” confusion for end users, site builders and site administrators

Provide in context help

CONSIDERATIONS

Thursday, May 30, 13

REDESIGN (V3)

Thursday, May 30, 13

Usability testing methodology3 rounds of comparative iterative

design & testing with order effect

Tasks:Create a blog entryPublish an unpublished contentTo 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

Usability testing3 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

Usability testing3 rounds of iterative design & testing

DESIGN VALIDATION

Thursday, May 30, 13

Usability testing issuesScalability of the toolbarDoes 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 configurationsUnclear how to hide the toolbarDashboard icon is unclear

DESIGN VALIDATION

Thursday, May 30, 13

PROBLEMSPACEREDEFINED

Thursday, May 30, 13

“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

MOBILE FIRST ?

Thursday, May 30, 13

Research Considerations v2Why many users override the

default toolbar with the admin toolbar?

Designers are usersHallway conversations Issues in the issue queueResearch 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

LewisnymanFirst design

DESIGN DIVERGENCE

Thursday, May 30, 13

jeffburnsDesign for android

dodoramaDesign for android

tkolearyMobile

DESIGN DIVERGENCE

Thursday, May 30, 13

bojhanDesign evaluation

DESIGN DIVERGENCE

Thursday, May 30, 13

DESIGN DIVERGENCE ...

Thursday, May 30, 13

DESIGN CONVERGENCE

Thursday, May 30, 13

Scope redefined - unified prototype for desktops and mobilePerformance concernsInteraction pattern concernsVertical versus horizontal menusMenu options seem “random”Model assumes there are no “overlays”Navigation too prominent; takes 30% real estate on desktop

ROADBLOCKS

Thursday, May 30, 13

“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

DESIGN TO BE VALIDATED

Thursday, May 30, 13

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

Stakeholder goals of the study on the issue queueDraft of the study script on google docs

Encouraging first round of editsDraft of the study posted on groups.drupal.org and issue queueSoliciting feedback; giving a deadlineSoliciting volunteers to help with conducting the study

USABILITY STUDY PROCESS

Thursday, May 30, 13

USABILITY FINDINGSExecutive SummaryOverall, 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 discoverableTrouble 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

CURRENT STATE

Thursday, May 30, 13

CURRENT STATE

Thursday, May 30, 13

KEYHIGH LIGHTS

What does this mean to you?Thursday, May 30, 13

KEYHIGH LIGHTS

Prototype, iterate the design and the process early.

Thursday, May 30, 13

A TRADITIONAL PROCESS

Identify problem Design Prototype Test Develop

Internal review

Thursday, May 30, 13

A MODIFIED PROCESS Sketch

Prototype

Test Develop

Identify problem

Sketch

Prototype

Test Develop

Identify problem

Thursday, May 30, 13

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

Invision provides rapid prototyping based on hotspots on images and basic one-off interactions.

Invision App High Fidelity PrototypingHigh-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

TWO DIMENSIONS OF AGILE

Sketch

Prototype

Test Develop

Identify problem

Sketch

Prototype

Test Develop

Identify problem

Agile

Thursday, May 30, 13

AGILEAdvantages Multiple iterative points Quick testing Community feedback

DisadvantagesMultiple iterative points introduces bottlenecksSmall, resource constrained teamCommunity feedback introduces bottlenecks

Thursday, May 30, 13

A FURTHER MODIFIED PROCESS

Sketch

Prototype

Test Develop

Identify problem

Sketch

Prototype

Test Develop

Identify problem

Design in browser

Thursday, May 30, 13

KEYHIGH LIGHTS

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

Thursday, May 30, 13

KEYHIGH LIGHTS

This is not design by committee.

Thursday, May 30, 13

KEYHIGH LIGHTS

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

Thursday, May 30, 13

KEYHIGH LIGHTS

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

Thursday, May 30, 13

KEYHIGH LIGHTS

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

Thursday, May 30, 13

KEYHIGH LIGHTS

Invest time in communicating.

Thursday, May 30, 13

KEYHIGH LIGHTS

Be upfront about what UX research can uncover.

Thursday, May 30, 13

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

THANK YOUPlease 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