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


Open Source Content Management SystemOver 800,000 registered users

BACKGROUND


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

BACKGROUND


Improve the content authoring experience for Drupal 8

BACKGROUND


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

Site BuildersThemers (Designers)Content AdministratorsEnd Users

BACKGROUND ...


PROBLEMSPACE


PROBLEM SPACE


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”


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


REDESIGN (V3)


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


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


Usability testing3 rounds of iterative design & testing

DESIGN VALIDATION


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


PROBLEMSPACEREDEFINED


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


MOBILE FIRST ?


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


LewisnymanFirst design

DESIGN DIVERGENCE


jeffburnsDesign for android

dodoramaDesign for android

tkolearyMobile

DESIGN DIVERGENCE


bojhanDesign evaluation

DESIGN DIVERGENCE


DESIGN DIVERGENCE ...


DESIGN CONVERGENCE


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


“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


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


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


CURRENT STATE


CURRENT STATE


KEYHIGH LIGHTS

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

KEYHIGH 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

Test Develop

Identify problem

Sketch

Prototype

Test Develop

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 PrototypingHigh-fidelity 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

Test Develop

Identify problem

Sketch

Prototype

Test Develop

Identify problem

Agile


AGILEAdvantages Multiple iterative points Quick testing Community feedback

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


A FURTHER MODIFIED PROCESS

Sketch

Prototype

Test Develop

Identify problem

Sketch

Prototype

Test Develop

Identify problem

Design in browser


KEYHIGH LIGHTS

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


KEYHIGH LIGHTS

This is not design by committee.


KEYHIGH LIGHTS

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


KEYHIGH LIGHTS

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


KEYHIGH LIGHTS

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


KEYHIGH LIGHTS

Invest time in communicating.


KEYHIGH 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 YOUPlease evaluate the session https://www.surveymonkey.com/s/Z5Z2WYR

Dharmesh Mistry Drupal.org / Twitter: dcmistry [email protected]

To all our volunteers at UXPA Boston. You rock!


https://www.surveymonkey.com/s/Z5Z2WYR

mailto:[email protected]

mailto:[email protected]

Technology

The journey to build a more usable toolbar for Drupal 8