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

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

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

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

� 9 various user levels � 10 which personas ?

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

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

� 15 interactive media � 16 links change the context

� 17 wild goose chase � 18 disclosable content

� 19 progressive disclosure � 20 UA meets UX meets UG

� 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

� 23 tooltips � 24 expanding text

� 25 drop-down content � 26 layered content

� 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

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

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

� 33 stating the obvious � 34 too many options

� 35 dynamic menus � 36 unhelpful advice

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

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

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

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

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

� 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

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

� 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

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

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

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

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

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

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