minimalism

to the maxJang F.M. Graat

JANG Communication Amsterdam

!1

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

minimalismbasic principles

!3

reading is never the goal

!4

action-oriented

!5

give the users only the information they need

!6

support error recovery

!7

the problem

!8

what do the users already know ?

various user levels

!9

which personas ?

!10

education, experience, ...

!11

only the user knows what s/he doesn't know

!12

progressive disclosureputting the users in control

!13

users know when to ask for more info

!14

interactive media

!15

links change the context

!16

wild goose chase

!17

disclosable content

!18

progressive disclosure

!19

UA meets UX meets UG

!20

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

!21

basic techniques

!22

using web technology

tooltips

!23

expanding text

!24

drop-down content

!25

layered content

!26

some guidelines

!27

styling and wording create expectations

!28

for more information click here. !more information !more information: + security settings + firewall options + privacy protection !

import/export options

focus of user's attention

!29

consistency in styling and location of elements

!30

always supply a way back

!31

things to avoid

!32

stating the obvious

!33

too many options

!34

dynamic menus

!35

unhelpful advice

!36

progressive disclosurehow to implement it (manually)

!37

!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

progressive disclosurelet's automate the process

!48

* the described automation will be available as a plug-in

for the DITA Open Toolkit

structure + XSLT = magic

!49

XPath : semantic search

!50

XSLT : makeover

!51

!52

task

title

shortdesc

prolog

taskbody

context

steps

step

cmd

info

substeps

stepresult

step

cmd

substeps

step

cmd

info

substeps

a DITA task red: mandatory green: optional

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

questions ?www.jang.nl

jang@jang.nl

4everJang

blogs.jang.nl

!64