Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing and building for the editor experience


Published on

Session presentation held during Frontend United conference for Drupal in Amsterdam on 22.04.2012.
Topics: User experience and interface strategy for content authors and editors in Drupal. Overview of common pitfalls and best practices. Available contributed modules and thoughts on solving common issues.

Published in: Technology
  • Be the first to comment

Designing and building for the editor experience

  1. Designing and building for theEDITOR EXPERIENCE Andreas Sahle - @pixelmord
  2. Who is an editor?★Roles in real life• Content Author• Editor• Translator• Asset Manager Andreas Sahle - @pixelmord
  3. Design for roles Andreas Sahle - @pixelmord
  4. Roles• Set up roles like editor and translator ...• Start testing early with user stories and personas• the permission system is no replacement for an interface strategy Andreas Sahle - @pixelmord
  5. What does an editor want?• create pages• add/edit content• find and select content / link content• add menu item• translate text Andreas Sahle - @pixelmord
  6. How do editors think?★editors think in pages• how shall a “page” look like? Andreas Sahle - @pixelmord
  7. Automatic vs. manual pages• most websites are a mixture of automatic and manual page creation• the hard part is defining the separation of editable and „automatic“ Andreas Sahle - @pixelmord
  8. How do editors think?★everything is content• „I want to add a picture here”• „I want to translate this text”• „I want to add another item to the list“ Andreas Sahle - @pixelmord
  9. everything is content Andreas Sahle - @pixelmord
  10. Is there an editing mode?• One theme for everything vs. separation in „admin“ and „frontend“ theme• Crossing the line between „backend” and „frontend”• Seven is not enough Andreas Sahle - @pixelmord
  11. Where Drupal makes our life• chronological order is often reverse• no distinct system for structuring content• to much interface – total control• the configuration and editing options are all over the place Andreas Sahle - @pixelmord
  12. Where Drupal makes our life★more additional functionality leads to loss of consistency • Taxonomy for categorizing, for menu structure, for switching options • standard menu, menu block, taxonomy menu • drupal blocks, views blocks, views content panes, node blocks , minipanels Andreas Sahle - @pixelmord
  13. Where Drupal makes our life★we are building with a framework• great architecture• hook_world_alter• there’s a module for that• a big community Andreas Sahle - @pixelmord
  14. Interface should besimple and intuitive Andreas Sahle - @pixelmord
  15. simple and intuitive• fast & efficient• avoid confusion• remove „clutter“ Andreas Sahle - @pixelmord
  16. Do editors need HELP?★Sometimes less help is more• don’t think help text, think „wizard”• don’t think help text, think „action button”• rubik style help tips Andreas Sahle - @pixelmord
  17. No help here.... Andreas Sahle - @pixelmord
  18. Heeeeeeeelp!• help - Andreas Sahle - @pixelmord
  19. Most important action Andreas Sahle - @pixelmord
  20. ready for action Andreas Sahle - @pixelmord
  21. ready for action Andreas Sahle - @pixelmord
  22. buttons FTW Andreas Sahle - @pixelmord
  23. help when needed Andreas Sahle - @pixelmord
  24. Visual guidance Andreas Sahle - @pixelmord
  25. Step by step Andreas Sahle - @pixelmord
  26. finally..... Andreas Sahle - @pixelmord
  27. Node forms• long forms• „advanced“ options• content vs. attributes• content vs. meta data Andreas Sahle - @pixelmord
  28. separate content from attributes Andreas Sahle - @pixelmord
  29. what is important? Andreas Sahle - @pixelmord
  30. Content editing form for D8 Andreas Sahle - @pixelmord
  31. WYSI(N)WYG• naming of input formats is important: “text editor” vs. FilteredHTML• do we really need more than one text format?• just 10 buttons, show all of them Andreas Sahle - @pixelmord
  32. Form widgets• text - placeholder• selectbox from hell• client side validation• autocomplete - yes or no? Andreas Sahle - @pixelmord
  33. add placeholder support Andreas Sahle - @pixelmord
  34. Finding the right widget or „the select box from hell“ Andreas Sahle - @pixelmord
  35. multiselect •• Andreas Sahle - @pixelmord
  36. multiple selectsselect or other • • Andreas Sahle - @pixelmord
  37. pick a date prevent validation failure• Andreas Sahle - @pixelmord
  38. Finding and selecting content• I wish we had an autocomplete....• autocomplete is not always the best solution Andreas Sahle - @pixelmord
  39. not complete Andreas Sahle - @pixelmord
  40. autocomplete with meta data • Andreas Sahle - @pixelmord
  41. putting things in the „right“ order +enhancing the autocomplete•• Andreas Sahle - @pixelmord
  42. one step further: select using a view • Andreas Sahle - @pixelmord
  43. create content in the processof placing it into a panel • Andreas Sahle - @pixelmord
  44. create menu item and a new content in one Andreas Sahle - @pixelmord
  45. Validation and errors• see errors fast• connect error messages with the field in which they occurred Andreas Sahle - @pixelmord
  46. client side validation• why wait for a page reload to find out that you forgot filling in a field?•• HTML5 elements• Andreas Sahle - @pixelmord
  47. See the messages right where the error occurred• Andreas Sahle - @pixelmord
  48. simple and intuitive• fast & efficient• avoid confusion★remove „clutter“ Andreas Sahle - @pixelmord
  49. Streamlining the interface• clutter keyboard - Andreas Sahle - @pixelmord
  50. Admin menu is made for admins Andreas Sahle - @pixelmord
  51. avoid „dead“ links Andreas Sahle - @pixelmord
  52. Only what an editor needs★Give the editor role a seperate menu• what are the (most recent) edits?• where can I change the menu?• what translation tasks are unfinished? Andreas Sahle - @pixelmord
  53. dashboard overview• Andreas Sahle - @pixelmord
  54. Build custom admin pages• context_admin Andreas Sahle - @pixelmord
  55. Thank You !See you in Munich @Drupalcon Andreas Sahle - @pixelmord