From UA to UG 
Information Apps 
Jang F.M. Graat 
Amsterdam 
© 2014 - JANG Communication - Amsterdam, Netherlands
© 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
© 2014 - JANG Communication - Amsterdam, Netherlands 
what is this tutorial about ? 
user assistance 
user guidance 
business intelligence 
information apps 
procedure apps
user assistance
© 2014 - JANG Communication - Amsterdam, Netherlands 
rules of minimalism 
only what users need 
action-oriented 
support error recovery
© 2014 - JANG Communication - Amsterdam, Netherlands 
optimizing user assistance 
printed manual 
help file 
context-sensitive help 
user analysis/personas 
progressive disclosure 
embedded help
© 2014 - JANG Communication - Amsterdam, Netherlands 
optimizing production 
topic-based authoring 
single-sourcing 
automated transforms 
conditional content 
personalizing info 
feedback mechanisms
© 2014 - JANG Communication - Amsterdam, Netherlands 
what is the real problem? 
interpretations differ 
overestimating skills 
conditional/optional items 
outdated knowledge 
agile development
user guidance
© 2014 - JANG Communication - Amsterdam, Netherlands 
optimizing the work 
user & task analysis 
procedure leads the user 
reduce learning curve 
standardize the work 
basis for planning
© 2014 - JANG Communication - Amsterdam, Netherlands 
procedural knowledge 
operating manuals 
online tutorials 
training courses 
learning from colleagues 
learning by trial and error
© 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
© 2014 - JANG Communication - Amsterdam, Netherlands 
procedures in real life 
cutting corners 
skipping steps 
local circumstances 
emergency situations 
full/reliable reporting ?
let’s become modern
© 2014 - JANG Communication - Amsterdam, Netherlands 
modern technology 
interactive media 
dynamic content 
only show applicable steps 
usage & input tracking 
automatically collect data
© 2014 - JANG Communication - Amsterdam, Netherlands 
progressive disclosure 
true minimalist info 
show info step by step 
force sign-offs 
avoid skipping steps 
track performance
© 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
© 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
modeling procedures
© 2014 - JANG Communication - Amsterdam, Netherlands 
quite a challenge
© 2014 - JANG Communication - Amsterdam, Netherlands 
keeping track of steps 
like programming 
check all possible paths 
exponential complexity 
“spaghetti code” 
very hard to maintain
© 2014 - JANG Communication - Amsterdam, Netherlands 
creating flowcharts
© 2014 - JANG Communication - Amsterdam, Netherlands 
basic nodes 
start 
process 
decision 
yes/no 
multiple choices 
end
© 2014 - JANG Communication - Amsterdam, Netherlands 
start : first step 
<div id=“step1”> 
<p class="mybutton" 
onClick=“showStep(next);”> 
Start 
</p> 
</div>
© 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>
© 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>
© 2014 - JANG Communication - Amsterdam, Netherlands 
end : no further actions 
<div id=“step10”> 
<title>You are done.</title> 
</div>
© 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>!
© 2014 - JANG Communication - Amsterdam, Netherlands 
time for a demo !
business intelligence
© 2014 - JANG Communication - Amsterdam, Netherlands 
optimizing the business 
product improvement 
predictive maintenance 
service staff planning 
equipment optimization 
service staff education 
customer training
© 2014 - JANG Communication - Amsterdam, Netherlands 
how to get the data 
usability research 
customer feedback 
helpdesk history 
service staff reports 
surveys
UA UG BI
© 2014 - JANG Communication - Amsterdam, Netherlands 
<DIB> 
app building blocks
© 2014 - JANG Communication - Amsterdam, Netherlands 
one server connects all
© 2014 - JANG Communication - Amsterdam, Netherlands 
capturing/reusing data
© 2014 - JANG Communication - Amsterdam, Netherlands 
questions ? 
Jang F.M. Graat 
Amsterdam, NL 
jang@jang.nl 
@4everJang 
www.jang.nl

From user assistance to user guidance: Information apps

  • 1.
    From UA toUG 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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