� 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
Recommend
More recommend