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

Maximising the effect of progressive disclosure

561 views

Published on

Minimalism in technical documentation states that we should only deliver info that the user needs. But how can we know what each individual user already knows (and does not need)? The answer is: we cannot. And this is why we should use progressive disclosure techniques to optimize the help we offer to our customers, so that each individual customer can decide for himself whether more info is needed or not, and on which aspects more info is needed.

There is one important catch: Implementing progressive disclosure can be a lot of work and be too costly to do. The solution to this budgetary problem is to use a well-defined structure in your content (preferably DITA) and an XSLT that automatically adds the required hooks and handles (triggers and targets) to make progressive disclosure work.

Published in: Technology
  • Be the first to comment

Maximising the effect of progressive disclosure

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

×