from user assistance to user guidance: information apps
TRANSCRIPT
© 2014 - JANG Communication - Amsterdam, Netherlands
From UA to UG Information Apps
Jang F.M. Graat Amsterdam
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
who's talking ?Jang F.M. Graat
Psychology, Philosophy
25+ years Tech Comm
self-taught professional
DITA, XSLT, JS, PHP, AJAX
addicted to challenge
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
what is this tutorial about ?
user assistance
user guidance
business intelligence
information apps
procedure apps
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
rules of minimalism
only what users need
action-oriented
support error recovery
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
optimizing user assistanceprinted manual
help file
context-sensitive help
user analysis/personas
progressive disclosure
embedded help
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
optimizing productiontopic-based authoring
single-sourcing
automated transforms
conditional content
personalizing info
feedback mechanisms
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
what is the real problem?
interpretations differ
overestimating skills
conditional/optional items
outdated knowledge
agile development
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
optimizing the work
user & task analysis
procedure leads the user
reduce learning curve
standardize the work
basis for planning
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
procedural knowledge
operating manuals
online tutorials
training courses
learning from colleagues
learning by trial and error
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
implicit assumptions
people follow rules
all products are identical
all workers are equal
there is no time pressure
the sun is always shining
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
procedures in real life
cutting corners
skipping steps
local circumstances
emergency situations
full/reliable reporting ?
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
modern technology
interactive media
dynamic content
only show applicable steps
usage & input tracking
automatically collect data
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
progressive disclosure
true minimalist info
show info step by step
force sign-offs
avoid skipping steps
track performance
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
only show applicable steps
allowing user input
highlight choice
hide non-applicable steps
reveal only next step
reset states on changes
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
other input types & sources
html5 input elements
sanity checks on input
using other data sources
hidden input methods
check device specs/settings
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
keeping track of steps
like programming
check all possible paths
exponential complexity
“spaghetti code”
very hard to maintain
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
basic nodesstart
process
decision
yes/no
multiple choices
end
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
start : first step
<div id=“step1”> <p class="mybutton" onClick=“showStep(next);”> Start </p> </div>
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
process : step with sign-off
<div id=“step2”> <title>Do something</title> <p class="mybutton" onClick=“showStep(next);”> OK </p> </div>
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
decision : choices
<step id=“step3”><title>Does it work ?</title>
<p class=“mybutton” onClick=“showStep(A)”>Yes</p>
<p class=“mybutton” onClick=“showStep(B)”>No</p>
</step>
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
end : no further actions
<div id=“step10”> <title>You are done.</title></div>
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
transformation! <title>Replacing the oil</title> <body> <div class=“context”> <p>Checking the oil level will prevent serious !! damage and does not require tools.</p> </div> <div class=“procedure”> <div class=“step” id="step1"> <p class=“cmd”>Remove the oil inlet cap</p> <p class=“info”>The oil inlet cap is on the bottom !! right side of the engine.</p> </div> <div class=“step” id="step2"> <p class=“cmd”>Remove dipstick.</p> </div> <div class=“step” id="step3"> <p class=“cmd”>What is the bike model?</p> <table> <tr> <td>Softail</td> <td>Continue with step 4</td> </tr> <tr> <td>FSCWC</td> <td>Continue with step 5</td> </tr> </table> </div>!
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
optimizing the businessproduct improvement
predictive maintenance
service staff planning
equipment optimization
service staff education
customer training
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
how to get the data
usability research
customer feedback
helpdesk history
service staff reports
surveys
© 20
14 - J
ANG
Comm
unica
tion -
Amste
rdam
, Neth
erlan
ds
questions ?
Jang F.M. Graat
Amsterdam, NL
@4everJang
www.jang.nl