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

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

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
1:1

1:1

1:1 1:111 1A1 :1:

401 views • 12 slides
Preperiodic points for families of polynomials Dragos Ghioca . . . . . . A special case of

Preperiodic points for families of polynomials Dragos Ghioca . . . . . . A special case of

Preperiodic points for families of polynomials Dragos Ghioca . . . . . . A special case of the Manin-Mumford Conjecture The Manin-Mumford Conjecture asks that only special subvarieties of semiabelian varieties S may contain a Zariski dense

1.41k views • 117 slides
Cryptographic Protocols 3. Broadcast 4. Blockchain Spring 2020 Part 1 Broadcast / Byzantine

Cryptographic Protocols 3. Broadcast 4. Blockchain Spring 2020 Part 1 Broadcast / Byzantine

Cryptographic Protocols 1. Interactive Proofs and Zero-Knowledge Protocols 2. Secure Multi-Party Computation Cryptographic Protocols 3. Broadcast 4. Blockchain Spring 2020 Part 1 Broadcast / Byzantine Agreement Secure Multi-Party

170 views • 3 slides
Conditions score > 90 Conditions and if/else Evaluates to true (1) or false (0)

Conditions score > 90 Conditions and if/else Evaluates to true (1) or false (0)

Conditions score > 90 Conditions and if/else Evaluates to true (1) or false (0) Generally variable operator variable variable operator constant Comparison Operators Examples x=5 y=8 z=5 MAX=10

282 views • 3 slides
AUTOMATED REASONING background information on unifiers. The theorems in A1b and A1c are important

AUTOMATED REASONING background information on unifiers. The theorems in A1b and A1c are important

Some Useful Proofs A1ai The slides Appendix1 (A1) contain various proofs about resolution and a little AUTOMATED REASONING background information on unifiers. The theorems in A1b and A1c are important as they give the basis for the soundness of

421 views • 3 slides
Heterogeneous Stream Processing and Crowdsourcing for Urban Traffic Management Alexander Artikis 1

Heterogeneous Stream Processing and Crowdsourcing for Urban Traffic Management Alexander Artikis 1

Heterogeneous Stream Processing and Crowdsourcing for Urban Traffic Management Alexander Artikis 1 , Matthias Weidlich 2 , Francois Schnitzler 3 , Ioannis Boutsis 4 , Thomas Liebig 5 , Nico Piatkowski 5 , Christian Bockermann 5 , Katharina Morik 5

198 views • 19 slides
on conflicts and strategies in qbf Nikolaj Bjrner 1 Mikol Janota 2 William Klieber 3 LPAR-20

on conflicts and strategies in qbf Nikolaj Bjrner 1 Mikol Janota 2 William Klieber 3 LPAR-20

on conflicts and strategies in qbf Nikolaj Bjrner 1 Mikol Janota 2 William Klieber 3 LPAR-20 2015, Suva, Fiji 1 Microsoft Research, Redmond, USA 2 Microsoft Research, Cambridge, UK 3 CERT/SEI, Carnegie Mellon University Bjrner, Janota,

507 views • 26 slides
On Friedberg Splits Peter Cholak June, 2015 Germany Computably Enumerable Sets W e is the e

On Friedberg Splits Peter Cholak June, 2015 Germany Computably Enumerable Sets W e is the e

On Friedberg Splits Peter Cholak June, 2015 Germany Computably Enumerable Sets W e is the e th c.e. set under some nice acceptable uniform standard enumeration of all c.e. sets. W e,s { 0 , 1 , . . . s } . A c.e. set R is

442 views • 19 slides

More recommend