Minimalism in technical documentation ultimately leads to using interactive procedures. The advantages of moving control from the user's head to a connected device are countless. But there has to be an easier way of building these so-called information apps (or procedure apps). This presentation shows how the implicit flowchart the designers have in their minds when writing a procedure can be made explicit in a graphical interface, which produces the HTML5 code. Easy design, easy error correction, no more reasons to not use procedures instead of relying on service manuals, training service staff, and the absence of stress on the work floor, where safety-critical procedures are required.

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

4. user assistance

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

9. user guidance

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 ?

14. let’s become modern

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

19. modeling procedures

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 !

30. business intelligence

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

33. UA UG BI

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