![Page 1: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/1.jpg)
maximising the effect of progressive disclosure
Jang F.M. Graat
!1
![Page 2: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/2.jpg)
who is talking ?• Jang F.M. Graat
• 25+ years in Tech Comm
• FM, RH, oXygen
• DITA, XSLT, JS, CSS
• Minimalist
• Psychology, Philosophy
• Dutch world citizen
!2
![Page 3: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/3.jpg)
minimalismbasic principles
!3
![Page 4: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/4.jpg)
reading is never the goal
!4
![Page 5: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/5.jpg)
action-oriented
!5
![Page 6: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/6.jpg)
give the users only the information they need
!6
![Page 7: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/7.jpg)
support error recovery
!7
![Page 8: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/8.jpg)
the problem
!8
what do the users already know ?
![Page 9: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/9.jpg)
various user levels
!9
![Page 10: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/10.jpg)
which personas ?
!10
![Page 11: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/11.jpg)
education, experience, ...
!11
![Page 12: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/12.jpg)
only the user knows what s/he doesn't know
!12
![Page 13: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/13.jpg)
progressive disclosureputting the users in control
!13
![Page 14: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/14.jpg)
users know when to ask for more info
!14
![Page 15: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/15.jpg)
interactive media allow triggers and targets
!15
![Page 16: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/16.jpg)
problem: changing context
!16
![Page 17: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/17.jpg)
wild goose chase
!17
![Page 18: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/18.jpg)
option: disclosable content
!18
![Page 19: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/19.jpg)
progressive disclosure
!19
![Page 20: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/20.jpg)
UA meets UX meets UG
!20
GUI and UA design go hand in hand
![Page 21: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/21.jpg)
Wikipedia: !
"Progressive disclosure is an interaction design technique often
used in human computer interaction to help maintain the focus of a user's
attention by reducing clutter, confusion, and cognitive workload.
This improves usability by presenting only the minimum data
required for the task at hand."
!21
![Page 22: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/22.jpg)
basic techniques
!22
using web technology
![Page 23: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/23.jpg)
tooltips
!23
![Page 24: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/24.jpg)
expanding text
!24
![Page 25: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/25.jpg)
drop-down content
!25
![Page 26: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/26.jpg)
layered content
!26
![Page 27: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/27.jpg)
embedded videos
!27
![Page 28: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/28.jpg)
staged information
!28
![Page 29: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/29.jpg)
guided tours
!29
![Page 30: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/30.jpg)
some guidelines
!30
![Page 31: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/31.jpg)
styling and wording create expectations
!31
for more information click here. !more information !more information: + security settings + firewall options + privacy protection !
import/export options
![Page 32: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/32.jpg)
focus of user's attention
!32
![Page 33: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/33.jpg)
consistency in styling and location of elements
!33
![Page 34: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/34.jpg)
always supply a way back
!34
![Page 35: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/35.jpg)
things to avoid
!35
![Page 36: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/36.jpg)
stating the obvious
!36
![Page 37: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/37.jpg)
too many options
!37
![Page 38: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/38.jpg)
unhelpful advice
!38
![Page 39: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/39.jpg)
expanding menus
!39
![Page 40: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/40.jpg)
dynamic menus
!40
![Page 41: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/41.jpg)
what makes it work ?some good and bad examples
!41
![Page 42: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/42.jpg)
getting started
!42
![Page 43: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/43.jpg)
!43
![Page 44: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/44.jpg)
!44
![Page 45: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/45.jpg)
!45
![Page 46: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/46.jpg)
!46
![Page 47: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/47.jpg)
!47
![Page 48: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/48.jpg)
!48
![Page 49: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/49.jpg)
!49
![Page 50: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/50.jpg)
!50
![Page 51: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/51.jpg)
embedded user assistance
!51
![Page 52: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/52.jpg)
!52
![Page 53: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/53.jpg)
!53
![Page 54: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/54.jpg)
!54
![Page 55: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/55.jpg)
!55
![Page 56: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/56.jpg)
!56
![Page 57: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/57.jpg)
!57
![Page 58: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/58.jpg)
!58
![Page 59: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/59.jpg)
!59
![Page 60: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/60.jpg)
progressive disclosurehow to implement it (manually)
!60
![Page 61: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/61.jpg)
!61
minimal information that is always shown
![Page 62: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/62.jpg)
!62
RoboHelp allows drop-down text
![Page 63: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/63.jpg)
!63
inserting and editing hidden information
![Page 64: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/64.jpg)
!64
text is marked as hotspot
![Page 65: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/65.jpg)
!65
the same process can be nested
![Page 66: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/66.jpg)
!66
drop-down content may include images
![Page 67: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/67.jpg)
!67
the end result in a browser: only minimal info is visible
![Page 68: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/68.jpg)
!68
the user can click on triggers to reveal drop-down content
![Page 69: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/69.jpg)
!69
progressive disclosure
![Page 70: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/70.jpg)
!70
this method takes time
![Page 71: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/71.jpg)
progressive disclosurelet's automate the process
!71
* the described automation will be available as a plug-in
for the DITA Open Toolkit
![Page 72: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/72.jpg)
structure + XSLT = magic
!72
![Page 73: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/73.jpg)
XPath : semantic search
!73
![Page 74: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/74.jpg)
XSLT : makeover
!74
![Page 75: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/75.jpg)
!75
task
title
shortdesc
prolog
taskbody
context
steps
step
cmd
info
substeps
stepresult
step
cmd
substeps
step
cmd
info
substeps
a DITA task red: mandatory green: optional
![Page 76: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/76.jpg)
!76
DITA task in the editor
![Page 77: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/77.jpg)
!77
standard HTML output
![Page 78: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/78.jpg)
!78
XSL allows automatic
transformation
![Page 79: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/79.jpg)
!79
<shortdesc> is changed into
a tooltip
![Page 80: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/80.jpg)
!80
CSS makes specified elements
initially hidden
![Page 81: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/81.jpg)
!81
JavaScript links triggers to their target content
![Page 82: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/82.jpg)
!82
result of the XSLT
![Page 83: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/83.jpg)
!83
output in a browser
![Page 84: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/84.jpg)
!84
clicking a + symbols opens the <substeps>
![Page 85: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/85.jpg)
!85
other symbols open <info> and <result>
![Page 86: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/86.jpg)
!86
moving mouse over title reveals <shortdesc>
![Page 87: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/87.jpg)
!87
+ symbol top right opens <context>
![Page 88: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/88.jpg)
!88
further learning
![Page 89: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/89.jpg)
Nielsen Norman group
!89
www.nngroup.com
![Page 90: Maximising the effect of progressive disclosure](https://reader033.vdocuments.mx/reader033/viewer/2022052617/546c539aaf795971298b4ebc/html5/thumbnails/90.jpg)
questions ?www.jang.nl
4everJang
blogs.jang.nl
!90