Designing and building for the editor experience
Download as KEY, PDF
4 likes6,404 views
This document discusses designing content management interfaces for editors. It emphasizes that editors think in pages and see everything as content. Interfaces should be simple, intuitive, and avoid clutter. Forms should separate content from attributes and validation errors should be displayed next to the relevant fields. Widgets like autocomplete need to provide relevant metadata. The goal is to streamline interfaces and only present what editors need through custom menus and dashboards.
Designing and building for the editor experience
- 1. Designing and building for the EDITOR 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 鍖nd 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 de鍖ning 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 http://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 con鍖guration 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 theres a module for that a big community Andreas Sahle - @pixelmord
- 14. Interface should be simple 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 dont think help text, think wizard dont 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.鍖ickr.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. 鍖n温鉛鉛霞..... 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/multiselect chosen http://drupal.org/project/chosen Andreas Sahle - @pixelmord
- 36. multiple selects select or other http://drupal.org/project/select_or_other http://drupal.org/project/multiple_selects Andreas Sahle - @pixelmord
- 37. pick a date http://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/鍖oretan/1478684 Andreas Sahle - @pixelmord
- 43. create content in the process of placing it into a panel http://drupal.org/sandbox/鍖oretan/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 鍖eld in which they occurred Andreas Sahle - @pixelmord
- 46. client side validation why wait for a page reload to 鍖nd out that you forgot 鍖lling in a 鍖eld? 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.鍖ickr.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 un鍖nished? 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
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n