Weitere ähnliche Inhalte Ähnlich wie From user assistance to user guidance: Information apps (20) Mehr von Jang F.M. Graat (20) Kürzlich hochgeladen (20) From user assistance to user guidance: Information apps1. From UA to UG
Information Apps
Jang F.M. Graat
Amsterdam
© 2014 - JANG Communication - Amsterdam, Netherlands
2. © 2014 - JANG Communication - Amsterdam, Netherlands
who's talking ?
Jang F.M. Graat
Psychology, Philosophy
25+ years Tech Comm
self-taught professional
DITA, XSLT, JS, PHP, AJAX
addicted to challenge
3. © 2014 - JANG Communication - Amsterdam, Netherlands
what is this tutorial about ?
user assistance
user guidance
business intelligence
information apps
procedure apps
5. © 2014 - JANG Communication - Amsterdam, Netherlands
rules of minimalism
only what users need
action-oriented
support error recovery
6. © 2014 - JANG Communication - Amsterdam, Netherlands
optimizing user assistance
printed manual
help file
context-sensitive help
user analysis/personas
progressive disclosure
embedded help
7. © 2014 - JANG Communication - Amsterdam, Netherlands
optimizing production
topic-based authoring
single-sourcing
automated transforms
conditional content
personalizing info
feedback mechanisms
8. © 2014 - JANG Communication - Amsterdam, Netherlands
what is the real problem?
interpretations differ
overestimating skills
conditional/optional items
outdated knowledge
agile development
10. © 2014 - JANG Communication - Amsterdam, Netherlands
optimizing the work
user & task analysis
procedure leads the user
reduce learning curve
standardize the work
basis for planning
11. © 2014 - JANG Communication - Amsterdam, Netherlands
procedural knowledge
operating manuals
online tutorials
training courses
learning from colleagues
learning by trial and error
12. © 2014 - JANG Communication - Amsterdam, Netherlands
implicit assumptions
people follow rules
all products are identical
all workers are equal
there is no time pressure
the sun is always shining
13. © 2014 - JANG Communication - Amsterdam, Netherlands
procedures in real life
cutting corners
skipping steps
local circumstances
emergency situations
full/reliable reporting ?
15. © 2014 - JANG Communication - Amsterdam, Netherlands
modern technology
interactive media
dynamic content
only show applicable steps
usage & input tracking
automatically collect data
16. © 2014 - JANG Communication - Amsterdam, Netherlands
progressive disclosure
true minimalist info
show info step by step
force sign-offs
avoid skipping steps
track performance
17. © 2014 - JANG Communication - Amsterdam, Netherlands
only show applicable steps
allowing user input
highlight choice
hide non-applicable steps
reveal only next step
reset states on changes
18. © 2014 - JANG Communication - Amsterdam, Netherlands
other input types & sources
html5 input elements
sanity checks on input
using other data sources
hidden input methods
check device specs/settings
20. © 2014 - JANG Communication - Amsterdam, Netherlands
quite a challenge
21. © 2014 - JANG Communication - Amsterdam, Netherlands
keeping track of steps
like programming
check all possible paths
exponential complexity
“spaghetti code”
very hard to maintain
22. © 2014 - JANG Communication - Amsterdam, Netherlands
creating flowcharts
23. © 2014 - JANG Communication - Amsterdam, Netherlands
basic nodes
start
process
decision
yes/no
multiple choices
end
24. © 2014 - JANG Communication - Amsterdam, Netherlands
start : first step
<div id=“step1”>
<p class="mybutton"
onClick=“showStep(next);”>
Start
</p>
</div>
25. © 2014 - JANG Communication - Amsterdam, Netherlands
process : step with sign-off
<div id=“step2”>
<title>Do something</title>
<p class="mybutton"
onClick=“showStep(next);”>
OK
</p>
</div>
26. © 2014 - JANG Communication - Amsterdam, Netherlands
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>
27. © 2014 - JANG Communication - Amsterdam, Netherlands
end : no further actions
<div id=“step10”>
<title>You are done.</title>
</div>
28. © 2014 - JANG Communication - Amsterdam, Netherlands
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>!
29. © 2014 - JANG Communication - Amsterdam, Netherlands
time for a demo !
31. © 2014 - JANG Communication - Amsterdam, Netherlands
optimizing the business
product improvement
predictive maintenance
service staff planning
equipment optimization
service staff education
customer training
32. © 2014 - JANG Communication - Amsterdam, Netherlands
how to get the data
usability research
customer feedback
helpdesk history
service staff reports
surveys
34. © 2014 - JANG Communication - Amsterdam, Netherlands
<DIB>
app building blocks
35. © 2014 - JANG Communication - Amsterdam, Netherlands
one server connects all
36. © 2014 - JANG Communication - Amsterdam, Netherlands
capturing/reusing data
37. © 2014 - JANG Communication - Amsterdam, Netherlands
questions ?
Jang F.M. Graat
Amsterdam, NL
jang@jang.nl
@4everJang
www.jang.nl