designing and building for the editor experience
play

Designing and building for the EDITOR EXPERIENCE Andreas Sahle - - PowerPoint PPT Presentation

Mar 02, 2023 •570 likes •1.16k views

Designing and building for the EDITOR EXPERIENCE Andreas Sahle - @pixelmord Samstag, 16. Juni 12 Who is an editor? Roles in real life Content Author Editor Translator Asset Manager Andreas Sahle - @pixelmord Samstag, 16.

  1. Designing and building for the EDITOR EXPERIENCE Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  2. Who is an editor? ★ Roles in real life • Content Author • Editor • Translator • Asset Manager Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  3. Design for roles Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  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 Samstag, 16. Juni 12

  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 Samstag, 16. Juni 12

  6. How do editors think? ★ editors think in pages • how shall a “page” look like? Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  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 Samstag, 16. Juni 12

  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 Samstag, 16. Juni 12

  9. everything is content http://drupal.org/node/1175694 Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  10. Is there an editing mode? • One theme for everything vs. separation in „admin“ and „frontend“ theme • Crossing the line between „backend” and „frontend” • How much „backend“ does an editor need? Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  11. Where Drupal makes our life harder • 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 Samstag, 16. Juni 12

  12. Where Drupal makes our life harder ★ 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 etc. Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  13. Where Drupal makes our life easier ★ we are building with a framework • great architecture • hook_world_alter • there’s a module for that • a big community Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  14. Interface should be simple and intuitive Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  15. simple and intuitive • fast & efficient • avoid confusion • remove „clutter“ Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  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” Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  17. No help here.... Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  18. Heeeeeeeelp! • help - http:/ /www.flickr.com/photos/loop_oh/4541019515/ Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  19. Most important action Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  20. Most important action Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  21. ready for action Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  22. ready for action Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  23. buttons FTW Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  24. help when needed Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  25. Visual guidance for the task at hand Visual guidance Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  26. Step by step Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  27. finally..... Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  28. Node forms • long forms • „advanced“ options • content vs. attributes • content vs. meta data Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  29. how to deal with long forms - configuration vs content Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  30. separate content from attributes Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  31. what is important? Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  32. Content editing form for D8 http://drupal.org/node/1510532 http://bojhan.nl/author-ux-known-problems Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  33. It is easy to get confused by an interface with many controls Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  34. Streamlining the interface • clutter keyboard - http:/ /www.flickr.com/photos/abhi_ryan/2444817523/ Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  35. Show all controls needed for a specific role Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  36. Form widgets • selectbox from hell • client side validation • autocomplete - yes or no? Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  37. Finding the right widget or „the select box from hell“ Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  38. multiselect • http:/ /drupal.org/project/multiselect chosen • http:/ /drupal.org/project/chosen Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  39. multiple selects select or other • http:/ /drupal.org/project/select_or_other • http:/ /drupal.org/project/multiple_selects Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  40. pick a date http://drupal.org/project/date_popup_authored prevent validation failure • http:/ /drupal.org/project/maxlength Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  41. Validation and errors • see errors fast • connect error messages with the field in which they occurred Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  42. 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 Samstag, 16. Juni 12

  43. See the messages right where the error occurred • http:/ /drupal.org/project/inline_messages • http:/ /drupal.org/project/ife Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  44. Finding and selecting content • I wish we had an autocomplete.... • autocomplete is not always the best solution Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  45. not complete Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  46. autocomplete with meta data • http:/ /drupal.org/project/linkit Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  47. putting things in the „right“ order + enhancing the autocomplete • http:/ /drupal.org/project/nodeconnect • http:/ /drupal.org/project/references_dialog Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  48. one step further: select using a view • http:/ /drupal.org/sandbox/floretan/1478684 Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  49. create content in the process of placing it into a panel • http:/ /drupal.org/sandbox/floretan/1478684 Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  50. What is the path? Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  51. Content menu EXAMPLE Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  52. standard menu interface: isolated Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  53. content menu interface: integrated Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  54. create menu item and a new content in one flow Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  55. create menu item with new content Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  56. create menu item with existing content Andreas Sahle - @pixelmord Samstag, 16. Juni 12

  57. Thank You ! See you in Munich @Drupalcon Andreas Sahle - @pixelmord Samstag, 16. Juni 12

Recommend

Designing User Experience (UX) This work is licensed under a Creative Commons

Designing User Experience (UX) This work is licensed under a Creative Commons

Designing User Experience (UX) This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. It was originally created by Apps for Good (www.appsforgood.org ) as S18 Designing User Experience.

757 views • 16 slides
Designing Technology from Everyday Experience Jill Fantauzzacoffin Artist-inventor Georgia

Designing Technology from Everyday Experience Jill Fantauzzacoffin Artist-inventor Georgia

Designing Technology from Everyday Experience Jill Fantauzzacoffin Artist-inventor Georgia Institute of Technology bber (plant) elastomer polymer fiber textile Designing from Everyday Experience Everyday experience expands

419 views • 13 slides
Building the Right to Health Movement Writing Letters to the Editor Agenda What is a LTE

Building the Right to Health Movement Writing Letters to the Editor Agenda What is a LTE

Building the Right to Health Movement Writing Letters to the Editor Agenda What is a LTE Making your LTE EPIC Lets write a LTE! How to get Published Youre published, now what? Letters to the Editor What is a LTE?

483 views • 27 slides
Some thoughts on publishing in AOS Galway March 2019 Caveat: I was editor-in-chief, I am an

Some thoughts on publishing in AOS Galway March 2019 Caveat: I was editor-in-chief, I am an

Prof. Chris Chapman Some thoughts on publishing in AOS Galway March 2019 Caveat: I was editor-in-chief, I am an editor, but I 2 make these comments based on personal experience not as a statement of journal policy Some pieces I have

265 views • 7 slides
1 Collaborative Project Collaborative EMD Overview J-DSP J-DSP Editor Editor PLANNED IN THIS

1 Collaborative Project Collaborative EMD Overview J-DSP J-DSP Editor Editor PLANNED IN THIS

J-DSP: A Distance Learning Paradigm J-DSP J-DSP Editor Editor Existing J-DSP Prototype Java-DSP Online Virtual Laboratories Run simulation Evaluate lecture DSP Simulations J-DSP streaming video Streaming Extensions to other

552 views • 7 slides
September 2020 INVESTOR PRESENTATION DESIGNING, BUILDING, MANAGING AND INVESTING in cities,

September 2020 INVESTOR PRESENTATION DESIGNING, BUILDING, MANAGING AND INVESTING in cities,

007 BUILDING Pont de Flandre business park (Paris, 19 th district) September 2020 INVESTOR PRESENTATION DESIGNING, BUILDING, MANAGING AND INVESTING in cities, neighbourhoods and buildings that are innovative, diverse, inclusive and

697 views • 47 slides
WORDPRESS Lesson 02.02 WordPress Editor WordPress Editor WordPress uses a simple HTML editor

WORDPRESS Lesson 02.02 WordPress Editor WordPress Editor WordPress uses a simple HTML editor

WORDPRESS Lesson 02.02 WordPress Editor WordPress Editor WordPress uses a simple HTML editor that allows users to create and update content for blog posts, pages, comments, and other content types that require a rich editing environment.

766 views • 17 slides
Designing and building a distributed data store in Go 3 February 2018 Matt Bostock Who am I?

Designing and building a distributed data store in Go 3 February 2018 Matt Bostock Who am I?

Designing and building a distributed data store in Go 3 February 2018 Matt Bostock Who am I? Platform Engineer working for Cloudare in London. Interested in distributed systems and performance. Bulding and designing a distributed data

841 views • 68 slides
Conservatory Garden Designing an Education Experience Matthew S . Dickens, MP A Resource

Conservatory Garden Designing an Education Experience Matthew S . Dickens, MP A Resource

June 2, 2020 Conservatory Garden Designing an Education Experience Matthew S . Dickens, MP A Resource Conservation Manager Primary Objectives 1. Authorization of Design Support Services 2. Communicate Value Proposition 3. Overview of

421 views • 22 slides
Designing an e-mental health intervention for Indigenous workers a Hackathon experience

Designing an e-mental health intervention for Indigenous workers a Hackathon experience

Designing an e-mental health intervention for Indigenous workers a Hackathon experience Audrey Gilbeau Meaning of the Logo The image depicts an Infant, Child, Adult & Elder in a traditional canoe denoting a return to cultural

216 views • 19 slides
Project Plan AutoHook Editor The Capstone Experience Team Urban Science Jon Stover Ben LaFleur

Project Plan AutoHook Editor The Capstone Experience Team Urban Science Jon Stover Ben LaFleur

Project Plan AutoHook Editor The Capstone Experience Team Urban Science Jon Stover Ben LaFleur Daiwei Zhang Jeff Fallon Zach Lewis Department of Computer Science and Engineering Michigan State University From Students Fall 2019 to

283 views • 13 slides
Highlights of the work J-DSP J-DSP Editor Editor Online DSP Quiz integrated with J-DSP

Highlights of the work J-DSP J-DSP Editor Editor Online DSP Quiz integrated with J-DSP

Highlights of the work J-DSP J-DSP Editor Editor Online DSP Quiz integrated with J-DSP Java-DSP Current and Future Improvements environment. Quiz statistics to better understand students J-DSP Editor performance. Shalin

156 views • 4 slides
What is vi ? The visual editor initially developed on Unix. Before vi the primary editor used on

What is vi ? The visual editor initially developed on Unix. Before vi the primary editor used on

Arvind Maskara 2/15/16 What is vi ? The visual editor initially developed on Unix. Before vi the primary editor used on Unix was The vi editor (vee eye) the line editor n User was able to see/edit only one line of the text NOTE: You will

455 views • 8 slides
Building a Visual Editor for Wikipedia Trevor Parscal and Roan Kattouw Wikimania D.C. 2012

Building a Visual Editor for Wikipedia Trevor Parscal and Roan Kattouw Wikimania D.C. 2012

Building a Visual Editor for Wikipedia Trevor Parscal and Roan Kattouw Wikimania D.C. 2012 (Introduce yourself) (Introduce yourself) Wed like to talk to you about how weve been building a visual editor for Wikipedia Trevor Parscal Roan

982 views • 62 slides
Capturing Cataloger Expectations in an RDF Editor SHACL, Lookups, and VitroLib Steven Folsom /

Capturing Cataloger Expectations in an RDF Editor SHACL, Lookups, and VitroLib Steven Folsom /

Capturing Cataloger Expectations in an RDF Editor SHACL, Lookups, and VitroLib Steven Folsom / Huda Khan / Lynette Rayle / Jason Kovari / Rebecca Younes / Simeon Warner Building an RDF editor for catalogers, with catalogers How should the

931 views • 57 slides
ON A CONTINUUM OF OPENNESS: ROYAL ROADS EXPERIENCE DESIGNING A GRADUATE PROGRAM IN THE OPEN

ON A CONTINUUM OF OPENNESS: ROYAL ROADS EXPERIENCE DESIGNING A GRADUATE PROGRAM IN THE OPEN

ON A CONTINUUM OF OPENNESS: ROYAL ROADS EXPERIENCE DESIGNING A GRADUATE PROGRAM IN THE OPEN April 25, 2017 BCNET Conference Jo Axe, PhD Elizabeth Childs, PhD Vivian Forssman ACKNOWLEDGEMENT We would like to begin by acknowledging that

617 views • 32 slides
Designing and Building Efficient HPC Cloud with Modern Networking Technologies on Heterogeneous

Designing and Building Efficient HPC Cloud with Modern Networking Technologies on Heterogeneous

Designing and Building Efficient HPC Cloud with Modern Networking Technologies on Heterogeneous HPC Clusters Jie Zhang Dr. Dhabaleswar K. Panda (Advisor) Department of Computer Science & Engineering The Ohio State University Outline

283 views • 25 slides
Designing and Building an Imaging Spectrometer to Study Angular Dependence of Fluorescence of

Designing and Building an Imaging Spectrometer to Study Angular Dependence of Fluorescence of

Designing and Building an Imaging Spectrometer to Study Angular Dependence of Fluorescence of Aligned Gas Molecules David Hensle 2013 REU at Kansas State University Supervisors: Varun Makija and Dr. Vinod Kumarappan Abstract This paper

450 views • 7 slides
6/23/09 J-DSP: An Online DSP Laboratory Overview J-DSP J-DSP Editor Editor J-DSP blocks

6/23/09 J-DSP: An Online DSP Laboratory Overview J-DSP J-DSP Editor Editor J-DSP blocks

6/23/09 J-DSP: An Online DSP Laboratory Overview J-DSP J-DSP Editor Editor J-DSP blocks to generate, process and understand analog signals. Application of J-DSP to courses in Arts, Media and Engineering Department at Arizona State

539 views • 4 slides
DESIGNING EMPLOYEE EXPERIENCE ENGAGEMENT & RETENTION ANDY PARTRIDGE | APRIL 29-30 We selected

DESIGNING EMPLOYEE EXPERIENCE ENGAGEMENT & RETENTION ANDY PARTRIDGE | APRIL 29-30 We selected

DESIGNING EMPLOYEE EXPERIENCE ENGAGEMENT & RETENTION ANDY PARTRIDGE | APRIL 29-30 We selected few slides to give you an understanding of some of the information & tools you will be taking away from the session. We know it is not much but

653 views • 6 slides
Wall Performance by Design: Role of Rainscreens in Moisture Management ~ Designing and Building

Wall Performance by Design: Role of Rainscreens in Moisture Management ~ Designing and Building

Wall Performance by Design: Role of Rainscreens in Moisture Management ~ Designing and Building Resilient Wall Systems with Engineered Rainscreens Building Enclosure Moisture Management Institute (BEMMI) Founded in 2009 Founding

1.06k views • 80 slides
CPSC 121: Models of Computation 2017S Building & Designing Sequential Circuits Meghan

CPSC 121: Models of Computation 2017S Building & Designing Sequential Circuits Meghan

CPSC 121: Models of Computation 2017S Building & Designing Sequential Circuits Meghan Allen, based on notes by Steve Wolfman, Patrice Belleville and others 1 This work is licensed under a Creative Commons Attribution 3.0 Unported License.

1.24k views • 84 slides
Aquaponics Upgrade: Designing and Building Max Hornick, Jennifer Lyon, Collin Cronin, Amy

Aquaponics Upgrade: Designing and Building Max Hornick, Jennifer Lyon, Collin Cronin, Amy

Aquaponics Upgrade: Designing and Building Max Hornick, Jennifer Lyon, Collin Cronin, Amy Kobylarz, Sean Westley Design Goal: Create a durable, low maintenance, highly efficient, low energy/resource usage, and adaptable aquaponics system

341 views • 9 slides
BIG IDEAS : BUILDING-SCALE DESIGNING FOR FAMILIES Maya Age 8 Visions of a fun place to play!

BIG IDEAS : BUILDING-SCALE DESIGNING FOR FAMILIES Maya Age 8 Visions of a fun place to play!

BIG IDEAS : BUILDING-SCALE DESIGNING FOR FAMILIES Maya Age 8 Visions of a fun place to play! Presentation by: THE PLAY COLLECTIVE Skill-Testing Question: How are Babies Made? Downtown West Population Growth ENTERTAINMENT 2001 to 2016

240 views • 21 slides

More recommend