Designing and building for the editor experience
Upcoming SlideShare
Loading in...5
×
 

Designing and building for the editor experience

on

  • 4,250 views

Session presentation held during Frontend United conference for Drupal in Amsterdam on 22.04.2012. ...

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

Statistics

Views

Total Views
4,250
Views on SlideShare
2,784
Embed Views
1,466

Actions

Likes
4
Downloads
32
Comments
0

20 Embeds 1,466

http://frontendunited.org 1203
http://ticsbachilleratos.blogspot.com.es 68
http://icommunity-v2.local 49
http://filosofeandoconmigo.blogspot.com.es 45
http://mohdshamsudinabdhamid.blogspot.com 16
http://ticsbachilleratos.blogspot.com 14
http://lanyrd.com 13
http://moez.icommunity-v2.eqx 13
http://fro1-001.dev.atomicant.co.uk 9
http://www.onlydoo.com 7
https://si0.twimg.com 6
http://filosofeandoconmigo.blogspot.com 6
https://twimg0-a.akamaihd.net 5
http://dev.frontendunited.org 4
http://us-w1.rockmelt.com 2
http://the-refreshing-sip.blogspot.in 2
http://www.medinfo.bg 1
http://the-refreshing-sip.blogspot.com 1
http://og.lc 1
http://www.lukeseager.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Designing and building for the editor experience Presentation Transcript

  • 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 - @pixelmord
  • Design for roles Andreas Sahle - @pixelmord
  • 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
  • What does an editor want?• create pages• add/edit content• find and select content / link content• add menu item• translate text Andreas Sahle - @pixelmord
  • How do editors think?★editors think in pages• how shall a “page” look like? Andreas Sahle - @pixelmord
  • 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
  • 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
  • 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 line between „backend” and „frontend”• Seven is not enough Andreas Sahle - @pixelmord
  • 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
  • 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
  • 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
  • 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, think „action button”• rubik style help tips Andreas Sahle - @pixelmord
  • No help here.... Andreas Sahle - @pixelmord
  • Heeeeeeeelp!• help - http://www.flickr.com/photos/loop_oh/4541019515/ Andreas Sahle - @pixelmord
  • 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 - @pixelmord
  • 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 format?• just 10 buttons, show all of them Andreas Sahle - @pixelmord
  • Form widgets• text - placeholder• selectbox from hell• client side validation• autocomplete - yes or no? Andreas Sahle - @pixelmord
  • 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 Andreas Sahle - @pixelmord
  • multiple selectsselect or other • http://drupal.org/project/select_or_other • http://drupal.org/project/multiple_selects Andreas Sahle - @pixelmord
  • pick a datehttp://drupal.org/project/date_popup_authored prevent validation failure• http://drupal.org/project/maxlength Andreas Sahle - @pixelmord
  • Finding and selecting content• I wish we had an autocomplete....• autocomplete is not always the best solution Andreas Sahle - @pixelmord
  • not complete Andreas Sahle - @pixelmord
  • autocomplete with meta data • http://drupal.org/project/linkit Andreas Sahle - @pixelmord
  • putting things in the „right“ order +enhancing the autocomplete• http://drupal.org/project/nodeconnect• http://drupal.org/project/references_dialog Andreas Sahle - @pixelmord
  • one step further: select using a view • http://drupal.org/sandbox/floretan/1478684 Andreas Sahle - @pixelmord
  • create content in the processof placing it into a panel • http://drupal.org/sandbox/floretan/1478684 Andreas Sahle - @pixelmord
  • 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 Andreas Sahle - @pixelmord
  • 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
  • See the messages right where the error occurred• http://drupal.org/project/inline_messages Andreas Sahle - @pixelmord
  • 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/ Andreas Sahle - @pixelmord
  • 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 the menu?• what translation tasks are unfinished? Andreas Sahle - @pixelmord
  • 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