Designing and  building for theEDITOR EXPERIENCE         Andreas Sahle - @pixelmord
Who is an editor?★Roles in real life• Content Author• Editor• Translator• Asset Manager                   Andreas Sahle - ...
Design for roles        Andreas Sahle - @pixelmord
Roles• Set up roles like editor and  translator ...• Start testing early with user stories  and personas• the permission s...
What does an editor      want?• create pages• add/edit content• find and select content / link  content• add menu item• tra...
How do editors      think?★editors think in pages• how shall a “page” look like?                   Andreas Sahle - @pixelm...
Automatic vs.    manual pages• most websites are a mixture of  automatic and manual page creation• the hard part is definin...
How do editors      think?★everything is content• „I want to add a picture here”• „I want to translate this text”• „I want...
everything is contenthttp://drupal.org/node/1175694                                 Andreas Sahle - @pixelmord
Is there an editing      mode?• One theme for everything vs.  separation in „admin“ and  „frontend“ theme• Crossing the li...
Where Drupal    makes our life• chronological order is often reverse• no distinct system for structuring  content• to much...
Where Drupal    makes our life★more additional functionality leads  to loss of consistency • Taxonomy for categorizing, fo...
Where Drupal    makes our life★we are building with a  framework• great architecture• hook_world_alter• there’s a module f...
Interface should besimple and intuitive          Andreas Sahle - @pixelmord
simple and intuitive• fast & efficient• avoid confusion• remove „clutter“                     Andreas Sahle - @pixelmord
Do editors need      HELP?★Sometimes less help is more• don’t think help text, think „wizard”• don’t think help text, thin...
No help here....                   Andreas Sahle - @pixelmord
Heeeeeeeelp!•   help - http://www.flickr.com/photos/loop_oh/4541019515/                                                    ...
Most important action                        Andreas Sahle - @pixelmord
ready for action                   Andreas Sahle - @pixelmord
ready for action                   Andreas Sahle - @pixelmord
buttons FTW              Andreas Sahle - @pixelmord
help when needed                   Andreas Sahle - @pixelmord
Visual guidance                  Andreas Sahle - @pixelmord
Step by step               Andreas Sahle - @pixelmord
finally.....      Andreas Sahle - @pixelmord
Node forms• long forms• „advanced“ options• content vs. attributes• content vs. meta data                   Andreas Sahle ...
separate content from attributes                       Andreas Sahle - @pixelmord
what is important?                     Andreas Sahle - @pixelmord
Content editing form for D8                      Andreas Sahle - @pixelmord
WYSI(N)WYG• naming of input formats is  important:  “text editor” vs. FilteredHTML• do we really need more than one  text ...
Form widgets• text - placeholder• selectbox from hell• client side validation• autocomplete - yes or no?                  ...
add placeholder support                      Andreas Sahle - @pixelmord
Finding the right     widget  or „the select box from hell“                 Andreas Sahle - @pixelmord
multiselect                               • http://drupal.org/project/multiselectchosen• http://drupal.org/project/chosen ...
multiple selectsselect or other • http://drupal.org/project/select_or_other      • http://drupal.org/project/multiple_sele...
pick a datehttp://drupal.org/project/date_popup_authored prevent validation failure• http://drupal.org/project/maxlength  ...
Finding and selecting content• I wish we had an autocomplete....• autocomplete is not always the best  solution           ...
not complete               Andreas Sahle - @pixelmord
autocomplete with meta data • http://drupal.org/project/linkit                                      Andreas Sahle - @pixel...
putting things in the „right“ order +enhancing the autocomplete•   http://drupal.org/project/nodeconnect•   http://drupal....
one step further: select using a view  •   http://drupal.org/sandbox/floretan/1478684                               Andreas...
create content in the processof placing it into a panel  •   http://drupal.org/sandbox/floretan/1478684                    ...
create menu item and a new content in one                      Andreas Sahle - @pixelmord
Validation and        errors• see errors fast• connect error messages with the  field in which they occurred               ...
client side validation• why wait for a page reload to find    out that you forgot filling in a field?•   http://drupal.org/pr...
See the messages right where the error occurred•   http://drupal.org/project/inline_messages                              ...
simple and intuitive• fast & efficient• avoid confusion★remove „clutter“                     Andreas Sahle - @pixelmord
Streamlining the interface•   clutter keyboard - http://www.flickr.com/photos/abhi_ryan/2444817523/                        ...
Admin menu is made for admins                    Andreas Sahle - @pixelmord
avoid „dead“ links                     Andreas Sahle - @pixelmord
Only what an editor needs★Give the editor role a seperate   menu• what are the (most recent) edits?• where can I change th...
dashboard overview• http://drupal.org/project/workbench                                        Andreas Sahle - @pixelmord
Build custom admin       pages•http://drupal.org/project/ context_admin                 Andreas Sahle - @pixelmord
Thank You !See you in Munich   @Drupalcon        Andreas Sahle - @pixelmord
Upcoming SlideShare
Loading in …5
×

Designing and building for the editor experience

4,732
-1

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.
http://frontendunited.org/2012/program#editorexperience
http://www.wunderkraut.com

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,732
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
37
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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 contenthttp://drupal.org/node/1175694 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 - http://www.flickr.com/photos/loop_oh/4541019515/ 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 • http://drupal.org/project/multiselectchosen• http://drupal.org/project/chosen Andreas Sahle - @pixelmord
    36. multiple selectsselect or other • http://drupal.org/project/select_or_other • http://drupal.org/project/multiple_selects Andreas Sahle - @pixelmord
    37. pick a datehttp://drupal.org/project/date_popup_authored prevent validation failure• http://drupal.org/project/maxlength 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 • http://drupal.org/project/linkit Andreas Sahle - @pixelmord
    41. putting things in the „right“ order +enhancing the autocomplete• http://drupal.org/project/nodeconnect• http://drupal.org/project/references_dialog Andreas Sahle - @pixelmord
    42. one step further: select using a view • http://drupal.org/sandbox/floretan/1478684 Andreas Sahle - @pixelmord
    43. create content in the processof placing it into a panel • http://drupal.org/sandbox/floretan/1478684 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?• http://drupal.org/project/clientside_validation• HTML5 elements• http://drupal.org/project/html5_tools Andreas Sahle - @pixelmord
    47. See the messages right where the error occurred• http://drupal.org/project/inline_messages Andreas Sahle - @pixelmord
    48. simple and intuitive• fast & efficient• avoid confusion★remove „clutter“ Andreas Sahle - @pixelmord
    49. Streamlining the interface• clutter keyboard - http://www.flickr.com/photos/abhi_ryan/2444817523/ 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• http://drupal.org/project/workbench Andreas Sahle - @pixelmord
    54. Build custom admin pages•http://drupal.org/project/ context_admin Andreas Sahle - @pixelmord
    55. Thank You !See you in Munich @Drupalcon Andreas Sahle - @pixelmord
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×