© 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

user assistance

© 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

user guidance

© 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 ?

let’s become modern

© 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

modeling procedures

© 20

14 - J

ANG

Comm

unica

tion -

Amste

rdam

, Neth

erlan

ds

quite a challenge

© 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

creating flowcharts

© 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

time for a demo !

business intelligence

© 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

UA UG BI

© 20

14 - J

ANG

Comm

unica

tion -

Amste

rdam

, Neth

erlan

ds

<DIB>

app building blocks

© 20

14 - J

ANG

Comm

unica

tion -

Amste

rdam

, Neth

erlan

ds

one server connects all

© 20

14 - J

ANG

Comm

unica

tion -

Amste

rdam

, Neth

erlan

ds

capturing/reusing data

© 20

14 - J

ANG

Comm

unica

tion -

Amste

rdam

, Neth

erlan

ds

questions ?

Jang F.M. Graat

Amsterdam, NL

jang@jang.nl

@4everJang

www.jang.nl