Taming Complexity: Drupal 8 UX

2,343 views
2,227 views

Published on

User experience improvements for content creators and site builders in Drupal 8.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,343
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Taming Complexity: Drupal 8 UX

  1. 1. Taming complexity: Drupal 8 UX Drupalcamp Finland, May 2013 Roy Scholten @royscholten yoroy on drupal.org
  2. 2. Drupal UX Drupal 6 usability tests: disaster! Drupal 7 usability: fxed many basic critical flaws Drupal 8 usability: hitting the really hard to solve issues
  3. 3. Drupal 8 UX Author experience Site builder improvements Mobile Style guide Process
  4. 4. Author experience
  5. 5. WYSIWYG!
  6. 6. Edit in place
  7. 7. Content creation page
  8. 8. Author UX WYSIWYG Edit in place Content creation page
  9. 9. Site builder tools
  10. 10. Views in core!
  11. 11. Modules, D7
  12. 12. Modules, D8
  13. 13. Translation UI
  14. 14. Site builder UX Views Modules page Translation
  15. 15. Mobile
  16. 16. Respon sive toolbar
  17. 17. Installer
  18. 18. Bartik & Seven responsive
  19. 19. Mobile UX Responsive toolbar Bartik and Seven are responsive Not yet 100% of admin UI: inline edit, drag&drop, feld UI…
  20. 20. Seven style guide
  21. 21. Needs work: ● Mobile issues ● Style guide ● Blocks UI ● Views UI
  22. 22. Join UX team ● Groups.drupal.org/usability ● http://drupal.org/project/issues/ search/drupal? issue_tags=Usability ● #drupal-usability in IRC
  23. 23. Thank you! Roy Scholten @royscholten yoroy on drupal.org
  24. 24. Links, resources ● Usability group – http://groups.drupal.org/usability ● Usability issues – http://drupal.org/project/issues/search/drupal? issue_tags=Usability ● Style guide proposal – http://groups.drupal.org/node/283223 ● Style guide implementation – http://drupal.org/node/1953374 ● Mobile issues – http://drupal.org/project/issues/search/drupal?issue_tags=mobile ● Views usability test – http://groups.drupal.org/node/267508 ● Blocks UI – http://drupal.org/node/187525 ● Spark – http://drupal.org/project/spark ● Content page research – http://groups.drupal.org/node/214898 ● Content page designs – http://groups.drupal.org/node/217434 ● Content page usability test – http://groups.drupal.org/node/229038 ● Content page implementation – http://drupal.org/node/1510532
  25. 25. Encore: UX process
  26. 26. How we work
  27. 27. Taming complexity: Drupal 8 UX Drupalcamp Finland, May 2013 Roy Scholten @royscholten yoroy on drupal.org
  28. 28. Drupal UX Drupal 6 usability tests: disaster! Drupal 7 usability: fxed many basic critical flaws Drupal 8 usability: hitting the really hard to solve issues
  29. 29. Drupal 8 UX Author experience Site builder improvements Mobile Style guide Process
  30. 30. Author experience Why is this important? You work on a site a couple of months. Your clients might be spending years with the solution you delivered. These people are getting more influence in choosing the CMS. Author UX is important! Previous presentation mentioned that once in core, functionality freezes. That's why it's important that core provides good defaults, because it's likely not extended with contrib modules
  31. 31. WYSIWYG! Not news anymore, but yes, D8 ships with a wysiwyg editor. This is a mixed blessing of course, but at least this saves some time in setting things up. Up to you to apply it wisely.
  32. 32. Edit in place A basic general rule for good interaction design is to expose operations directly on the object that can be manipulated. D7 introduced contextual links as a first step D8 will have edit in place where not only the link but also the actual editing takes place on the object itself.
  33. 33. Demo in firefox: customize teaser
  34. 34. Content creation page Edit in place is what it is: you edit existing content more easily. Creating new content is something else. The content creation page is a very important interface for content creator. Obviously. We spent a lot of time researching, designing, implementing an updated UI for this page
  35. 35. I can tell some more about the design process later, to clarify how we get stuff done in core, but this is the design we ended up with and have been implementing.
  36. 36. Author UX WYSIWYG Edit in place Content creation page So, WYSIWYG, Edit in place, Content creation page. This also means that things like configurable editorial workflows or content staging didn't really make it in core. Enough room for contributed modules to improve things!
  37. 37. Site builder tools Which brings us to another category of user interfaces. And this is actually an important point to consider: it's crucial to know for which kind of role you want to improve things. Design is about making trade-offs. No use to strive for perfection. Know that when you optimize for X, you are likely to make Y a bit harder to achieve.
  38. 38. Views in core! This means a big increase of useful functionality available out of the box. Talk about managing complexity It also means we still have a lot to do to bring more consistency and efficiency to the user interface. Usability testing showed that besides many parts of the ui are (needlessly) complex and wordy, the biggest issue is that it is not clear what you can actually do with it. Anyway…
  39. 39. Modules, D7 Ah, modules page. The page everybody loves to hate. This is the D7 version. - list gets very long, hard to find stuff. Dependency info clutters the page. - Categories do not really help This was a really tough page to redesign, lots of opinions and some of the issues can't really be solved.
  40. 40. Modules, D8 I think this whole design process got some 1000+ comments across multiple issues. The trick is to get a proposal into a patch, not only design Usability test to provide data and prevent opinion wars. Two fixes: - simpler first impression, less data up front - live filter to reduce the list DEMO
  41. 41. Translation UI Translation UI and workflow has seen some changes as well.
  42. 42. Site builder UX Views Modules page Translation This also means we did not: - Redesign the Fields UI - Made building menus/navigation easier - Improve the Blocks UI significantly (but maybe) Definately enough interesting challenges to work on for Drupal 9 :)
  43. 43. Mobile And of course, making the whole of the Drupal toolset work on smaller screens provides some interesting challenges.
  44. 44. Respon sive toolbar One big obvious flaw with D7 admin on small screens is that the toolbar breaks the layout completely. A lot of energy went into making the toolbar work on small screens. It works! The UX is not completely smooth yet. And it makes an excellent show case of the amount of admin page we have. DEMO
  45. 45. Installer When discussing mobile use cases, you often hear the argument that people wont do this or that on a phone. Maybe. But I think, if you 'can't imagine x or y, it's more often a lack of imagination then that the scenario is not feasible. Maybe not now, but Drupal 8 is a tool for the next 4 years or so. And, as a framework, Drupal can't be too specific about what parts to leave out. Aim is to make 100% of admin responsive and usable on small screens.
  46. 46. Bartik & Seven responsive DEMO: Responsive tables
  47. 47. Mobile UX Responsive toolbar Bartik and Seven are responsive Not yet 100% of admin UI: inline edit, drag&drop, feld UI… This also means we did not: - Redesign the Fields UI - Made building menus/navigation easier - Improve the Blocks UI significantly (but maybe) Definately enough interesting challenges to work on for Drupal 9 :)
  48. 48. Seven style guide Dedicated admin theme Seven introduced in D7. Big win, fixed one of the most fundamental critical usability issues. But it needed to be extended to
  49. 49. Needs work: ● Mobile issues ● Style guide ● Blocks UI ● Views UI
  50. 50. Join UX team ● Groups.drupal.org/usability ● http://drupal.org/project/issues/ search/drupal? issue_tags=Usability ● #drupal-usability in IRC
  51. 51. Thank you! Roy Scholten @royscholten yoroy on drupal.org
  52. 52. Links, resources ● Usability group – http://groups.drupal.org/usability ● Usability issues – http://drupal.org/project/issues/search/drupal? issue_tags=Usability ● Style guide proposal – http://groups.drupal.org/node/283223 ● Style guide implementation – http://drupal.org/node/1953374 ● Mobile issues – http://drupal.org/project/issues/search/drupal?issue_tags=mobile ● Views usability test – http://groups.drupal.org/node/267508 ● Blocks UI – http://drupal.org/node/187525 ● Spark – http://drupal.org/project/spark ● Content page research – http://groups.drupal.org/node/214898 ● Content page designs – http://groups.drupal.org/node/217434 ● Content page usability test – http://groups.drupal.org/node/229038 ● Content page implementation – http://drupal.org/node/1510532
  53. 53. Encore: UX process
  54. 54. Keynote showed Dries talking about distributions in 2006. This is me sketching a UI pattern similar to what ended up as the new modules page design. In 2009. On the one hand, the pace of innovation is very high. At the same time it can years to change (improve) fundamentals
  55. 55. How we work

×