Your SlideShare is downloading. ×
The journey to build a more usable toolbar for Drupal 8
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The journey to build a more usable toolbar for Drupal 8


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. THE JOURNEYTO BUILD AMORE USABLE TOOLBARFOR DRUPAL 8Dharmesh Mistry / Twitter: dcmistryUXPA Boston Annual Conference May 29, 2013Thursday, May 30, 13
  • 3. Dharmesh MistryUX ResearcherWELCOMEUX for Acquia and DrupalUXPA Boston, Board of DirectorBoston Design Jam, Design 4 Drupal,UX/UI SummitSpeaker at Drupal & UX conferencesBentley UniversityDesserts & PhotographyThursday, May 30, 13
  • 4. Open SourceContent Management SystemOver 800,000 registered usersBACKGROUNDThursday, May 30, 13
  • 5. Private, fast-growth companySupports enterprises that use DrupalOptimized Drupal hostingMonitoring sitesSaaS enabled Drupal sitesBACKGROUNDThursday, May 30, 13
  • 6. Improve the content authoringexperience for Drupal 8BACKGROUNDThursday, May 30, 13
  • 7. Drupal GardensDrupal modulesAdmin & Groups.Drupal.orgIssue queueDrupal UsersSite BuildersThemers (Designers)Content AdministratorsEnd UsersBACKGROUND ...Thursday, May 30, 13
  • 8. PROBLEMSPACEThursday, May 30, 13
  • 9. PROBLEM SPACEThursday, May 30, 13
  • 10. PROBLEM SPACEDoesn’t accommodate Drupal personasSteepens learning curveHigh barrier for new usersCumbersome for established usersLack of contextual help“It is too wordy. I don’t like a lot ofwords. [Instead] I like to click and thenbreak down”“The order is not the way I think”“Busy, convoluted”Thursday, May 30, 13
  • 11. Research ConsiderationsDesigners are usersHallway conversationsIssues in the issue queueDesign ConsiderationsMinimize intimidationAccelerate orientation and time/clicksto destinationEliminate the “Structure” versus“Content” confusion for end users,site builders and site administratorsProvide in context helpCONSIDERATIONSThursday, May 30, 13
  • 12. REDESIGN (V3)Thursday, May 30, 13
  • 13. Usability testing methodology3 rounds of comparative iterativedesign & testing with order effectTasks:Create a blog entryPublish an unpublished contentTo change permissions of a roleFocus on beginner/ intermediateDrupal site buildersUsability testing results“Much cleaner ... a huge improvement ...wonderful.”“It’s a better design.”“It’s utilitarian.”DESIGN VALIDATIONThursday, May 30, 13
  • 14. Usability testing3 rounds of iterative design & testingNumber of participants Prefer new design Prefer current designStudy 1 (Feb 2011) 8* 5 2Study 2 (May 2011) 7 6 1Study 3 (Aug 2011) 5 5 0* 1 participant data discardedDESIGN VALIDATIONThursday, May 30, 13
  • 15. Usability testing3 rounds of iterative design & testingDESIGN VALIDATIONThursday, May 30, 13
  • 16. 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” asyou are still on the mercy of contribute module configurationsUnclear how to hide the toolbarDashboard icon is unclearDESIGN VALIDATIONThursday, May 30, 13
  • 17. PROBLEMSPACEREDEFINEDThursday, May 30, 13
  • 18. “Drupal 7’s default administration toolswere not designed in a “mobile first” way,and as such difficult to work with ontablets and smartphones.”- Dries Buytaert, Drupal Project Lead“We can’t ship Drupal 8 like this.”- Angela Byron, Drupal 7 co-maintainerMOBILE FIRST ?Thursday, May 30, 13
  • 19. MOBILE FIRST ?Thursday, May 30, 13
  • 20. Research Considerations v2Why many users override thedefault toolbar with the admintoolbar?Designers are usersHallway conversationsIssues in the issue queueResearch from previous designs we work with the previous design?Previous designs did notaccommodate the new problemspacePrevious design was focused more onIA and less on interaction patterns;harder to validate the toolbar with themingling of IA, design and interactionpatternsThursday, May 30, 13
  • 21. LewisnymanFirst designDESIGN DIVERGENCEThursday, May 30, 13
  • 22. jeffburnsDesign for androiddodoramaDesign for androidtkolearyMobileDESIGN DIVERGENCEThursday, May 30, 13
  • 23. bojhanDesign evaluationDESIGN DIVERGENCEThursday, May 30, 13
  • 24. DESIGN DIVERGENCE ...Thursday, May 30, 13
  • 25. DESIGN CONVERGENCEThursday, May 30, 13
  • 26. 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 desktopROADBLOCKSThursday, May 30, 13
  • 27. “Sorry, but I dont 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 itgoes in.” - sun“The usability testing done, identified serious issues - mostly attributed to the IA. Proposals by Jeff andDharmesh, focused on providing better navigation to actions, and tools in structure. How is that reflectedin the new design?” - bojhanROADBLOCKSThursday, May 30, 13
  • 28. DESIGN TO BE VALIDATEDThursday, 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 FOCUSThursday, May 30, 13
  • 30. Stakeholder goals of the study on the issue queueDraft of the study script on google docsEncouraging first round of editsDraft of the study posted on and issue queueSoliciting feedback; giving a deadlineSoliciting volunteers to help with conducting the studyUSABILITY STUDY PROCESSThursday, May 30, 13
  • 31. USABILITY FINDINGSExecutive SummaryOverall, the toolbar prototype testedwell on desktop and iPhones.Would improve productivity andperceived to be “clean”, “nice icons”,“usable”, and “visually appealing”“This is a big improvement fromwhere we are at [right now]” (P4)Usability IssuesCollapsing menu items through “>” andthe link “Edit shortcuts” are notdiscoverableTrouble discoveringDrop down arrow which eliminates pagerefreshSwitching between horizontal andvertical toolbarEdit shortcutLegacy IA issues persist from D7Thursday, May 30, 13
  • 32. CURRENT STATEThursday, May 30, 13
  • 33. CURRENT STATEThursday, May 30, 13
  • 34. KEYHIGHLIGHTSWhat does this mean to you?Thursday, May 30, 13
  • 35. KEYHIGHLIGHTSPrototype, iterate the design and the process early.Thursday, May 30, 13
  • 36. A TRADITIONAL PROCESSIdentifyproblemDesign Prototype Test DevelopInternal reviewThursday, May 30, 13
  • 37. A MODIFIED PROCESSSketchPrototypeTestDevelopIdentifyproblemSketchPrototypeTestDevelopIdentifyproblemThursday, May 30, 13
  • 38. WHAT & HOW WE TEST ?InitialdesignActionabledesignNorthstardesignInvision &high-fidelityInvision &high-fidelityInvision &high-fidelity(if resourcespermit)Prototyping yields technical issues.Testing yields usability issues.Thursday, May 30, 13
  • 39. Invision provides rapidprototyping based on hotspotson images and basic one-offinteractions.Invision App High Fidelity PrototypingHigh-fidelity prototyping entails rapidcoding of HTML, CSS, andJavaScript, allowing for the fullbreadth of interactions to betested.PROTOTYPESThursday, May 30, 13
  • 40. TWO DIMENSIONS OF AGILESketchPrototypeTestDevelopIdentifyproblemSketchPrototypeTestDevelopIdentifyproblemAgileThursday, May 30, 13
  • 41. AGILEAdvantagesMultiple iterative pointsQuick testingCommunity feedbackDisadvantagesMultiple iterative points introducesbottlenecksSmall, resource constrained teamCommunity feedback introducesbottlenecksThursday, May 30, 13
  • 42. A FURTHER MODIFIED PROCESSSketchPrototypeTestDevelopIdentifyproblemSketchPrototypeTestDevelopIdentifyproblemDesign inbrowserThursday, May 30, 13
  • 43. KEYHIGHLIGHTSEngaging with the community is a huge plus, howeverthe habitat isn’t ideal for design process.Thursday, May 30, 13
  • 44. KEYHIGHLIGHTSThis is not design by committee.Thursday, May 30, 13
  • 45. KEYHIGHLIGHTSWork with what you have; it’s not always going to beperfect.Thursday, May 30, 13
  • 46. KEYHIGHLIGHTSEngage with the stakeholders at every step; makethem a part of the process.Thursday, May 30, 13
  • 47. KEYHIGHLIGHTSBeing transparent helps buy-in; builds credibility.Record/ Live Stream when possible.Built tighter feedback loops.Thursday, May 30, 13
  • 48. KEYHIGHLIGHTSInvest time in communicating.Thursday, May 30, 13
  • 49. KEYHIGHLIGHTSBe upfront about what UX research can uncover.Thursday, May 30, 13
  • 50. Special thanks to Bojhan Somers, Kevin O’Leary and JesseBeach, Jeff Noyes, Lewis Nyman and many othercontributors.THANKYOUThursday, May 30, 13
  • 51. THANKYOUPlease evaluate the session Mistry / Twitter: dcmistry dharmesh.mistry@acquia.comTo all our volunteers at UXPA Boston. You rock!Thursday, May 30, 13