to the max
play

to the max Jang F.M. Graat JANG Communication Amsterdam 2 whos - PDF document

1 minimalism to the max Jang F.M. Graat JANG Communication Amsterdam 2 whos talking ? Jang F.M. Graat Physics, Psychology, Philosophy 25+ years in Tech Comm Adobe Fm, Rh, Dw, Ps, Ai, ESTK, oXygen, Flare, etc.


  1. � 1 minimalism 
 to the max Jang F.M. Graat JANG Communication Amsterdam � 2 who’s talking ? • Jang F.M. Graat • Physics, Psychology, Philosophy • 25+ years in Tech Comm • Adobe Fm, Rh, Dw, Ps, Ai, ESTK, oXygen, Flare, etc. • DITA, XSLT, CSS, HTML, SVG, JS, PHP, SQL, etc. • Minimalist

  2. � 3 minimalism basic principles � 4 reading is never the goal

  3. � 5 action-oriented � 6 give the users only the information they need

  4. � 7 support error recovery � 8 the problem what do the users already know ?

  5. � 9 various user levels � 10 which personas ?

  6. � 11 education, experience, ... � 12 only the user knows what s/he doesn't know

  7. � 13 progressive disclosure putting the users in control � 14 users know when to ask for more info

  8. � 15 interactive media � 16 links change the context

  9. � 17 wild goose chase � 18 disclosable content

  10. � 19 progressive disclosure � 20 UA meets UX meets UG

  11. � 21 Wikipedia: � "Progressive disclosure is an interaction design technique often used in human computer interaction to help maintain the focus of a user's attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand." � 22 basic techniques using web technology

  12. � 23 tooltips � 24 expanding text

  13. � 25 drop-down content � 26 layered content

  14. � 27 some guidelines � 28 for more information click here. � more information � more information: + security settings + firewall options + privacy protection � import/export options styling and wording create expectations

  15. � 29 focus of user's attention � 30 consistency in styling and location of elements

  16. � 31 always supply a way back � 32 things to avoid

  17. � 33 stating the obvious � 34 too many options

  18. � 35 dynamic menus � 36 unhelpful advice

  19. � 37 progressive disclosure how to implement it (manually) � 38 minimal information that is always shown

  20. � 39 RoboHelp allows drop-down text � 40 inserting and editing hidden information

  21. � 41 text is marked as hotspot � 42 the same process can be nested

  22. � 43 drop-down content may include images � 44 the end result in a browser: only minimal info is visible

  23. � 45 the user can click on triggers to reveal drop-down content � 46 progressive disclosure

  24. � 47 this method takes time � 48 progressive disclosure let's automate the process * the described automation will be available as a plug-in for the DITA Open Toolkit

  25. � 49 structure + XSLT = magic � 50 XPath : semantic search

  26. � 51 XSLT : makeover � 52 task title a DITA task shortdesc red: mandatory prolog green: optional taskbody context steps step step step cmd cmd cmd info substeps info substeps substeps stepresult

  27. � 53 DITA task in the editor � 54 standard HTML output

  28. � 55 XSL allows automatic transformation � 56 CSS makes specified elements initially hidden

  29. � 57 JavaScript links triggers to their target content � 58 result of the XSLT

  30. � 59 output in a browser � 60 clicking a + symbols opens the <substeps>

  31. � 61 other symbols open <info> and <result> � 62 moving mouse over title reveals <shortdesc>

  32. � 63 + symbol top right opens <context> � 64 questions ? www.jang.nl jang@jang.nl 4everJang blogs.jang.nl

Recommend


More recommend