SlideShare una empresa de Scribd logo
1 de 33
When Worlds Collide:
Improving the User Experience by
Applying Progressive Information
Disclosure
Presented by
Andrea L. Ames @aames
IBM Senior Technical Staff Member /
Total Information Experience Strategist & Architect
at 2013 Intelligent Content Conference (#ICC2013)
on 8 February 2013
in San Francisco, CA USA
About Andrea
   Technical communicator since 1983
   Areas of expertise
     Information architecture and design and interaction design for
      products and interactive information
     Information and product usability—from analysis through
      validation
     User-centered design and development process
   IBM Senior Technical Staff Member
   UCSC in Silicon Valley Extension Tech Comm and
    Writing certificate coordinator and instructor
   STC Fellow, past president (2004-05), and past member
    of Board of Directors (1998-2006)
   ACM Distinguished Engineer
                       (c) Andrea L. Ames, 2006-2013   2               2
Agenda
   Progressive disclosure (PD)
   Traditional information PD
   The new twist – applying it to the information
    experience, in particular the UI
   Workshop: Quick steps to PD
    and group heuristic evaluation
   …And more!
   Resources

                   (c) Andrea L. Ames, 2006-2013   3   3
According to Wikipedia…
progressive disclosure (PD):
   “To move complex and less frequently used options out of the main user interface
    and into secondary screens“
   An interaction design technique
   Often used in human computer interaction
   Helps maintain the focus of a user's attention by reducing clutter, confusion, and
    cognitive workload
   Improves usability by presenting only the minimum data required for the task at hand
   Sequences actions across several screens
   Reduces feelings of overwhelm for the user
   Reveals only the essentials and helps the user manage the complexity of feature-rich
    sites or applications
   Moves from "abstract to specific" via “ramping up” the user from simple to more
    complex actions




                             (c) Andrea L. Ames, 2006-2013         4
PD for interaction isn’t new
   Around since at least the early 1980s (Jack Carroll, IBM)
   Jakob Nielsen has been discussing it for ages

"Progressive disclosure is the best tool so far: show people
    the basics first, and once they understand that, allow
      them to get to the expert features. But don't show
  everything all at once or you will only confuse people and
   they will waste endless time messing with features that
                      they don't need yet".
   In information development, PD can be applied to
    content, as well

                     (c) Andrea L. Ames, 2006-2013   5
What is progressive
information disclosure?
   In an information experience, enables you (the author) to
    provide the right information in the right place at the right
    time
   Assumes “competent performer” to “proficient performer”
    is stage of use (backup) in which users will spend most
    of their time when using the product–not novices; not
    experts
   Defer display of novice information, background,
    concepts, extended reference material and examples,
    etc., until the user needs and requests it
   Reduces complexity by revealing only the essentials for
    a current task and then reveals more as users advance
    through tasks

                      (c) Andrea L. Ames, 2006-2013   6
What is progressive
information disclosure? (cont.)
   Reveals information in an ordered manner
      Each layer builds on the previous one in a flow that provides
         progressively more information
      Provides only the details that are necessary at a given time, in a
         specific context
      Provides assistance when necessary--not information created just to
         cover an empty widget
      Do not repeat information; for example, do not repeat field labels in
         hover text.
      “A guided journey, not a scavenger hunt"
   Designed around the ideal information experience–with no resource
    or time constraints
   Implemented realistically with necessary constraints
                         (c) Andrea L. Ames, 2006-2013   7
A rose by any other name…
 Technical communicators have been
  “doing” PD for a long time
 We might not call it PD
 The best example of traditional PD:
  Well-architected, traditional, online help
     Primary  “layer”: Contextual and task topics
     Secondary “layers”: prereqs, background,
      related concepts and reference, etc.

                  (c) Andrea L. Ames, 2006-2013   8
Traditional, contextual help




           (c) Andrea L. Ames, 2006-2013   9
The problem with traditional assistance and
traditional information development methods
   Typical UI-text development process:
        Written by developers of the UI
        Edited by tech pubs (best case; often copy edit capturing only capitalization and punctuation
         issues and typos)
   Typical help development process:
        Writers attend (some) design meetings, keeping track of the number of UI panels in the
         product, which typically include one help button per panel
        Writers develop one help topic for each UI panel in the product
        Pop-up help/hover help provided for all, or no, controls
        Task help describes how to complete the fields in the UI panel :
            Pop-up/hover help content repeated in task help
            Writers cut and paste from specs

   Typical library design and development process:
        Deliverables developed based on development expectations and history vs. user needs
        Other (non-help) deliverable content identified without regard for task help also being created
   Extensive redundancy across UI text, help, and other deliverables (like books)
   Design process accomplished within resource and time constraints, not
    according to ideal or customer needs

                                 (c) Andrea L. Ames, 2006-2013                10
What’s wrong with this picture?




          (c) Andrea L. Ames, 2006-2013   11
The next PD
evolution/revolution
 The   UI
 Add value
 Get even closer to the task than the help
 Influence the design of the task and task
  ecosystem
 Drive reductions in words
 Prioritize resources around client value


               (c) Andrea L. Ames, 2006-2013   12
Workshop

Let’s get our hands dirty! 
Quick survey…do you know:
 DITA?
 information architecture?
 topics?
 topic-based content architecture?
 topic-based content development?




              (c) Andrea L. Ames, 2006-2013   14
Quick steps to PD
1.        Consider your user and their stages of use (backup)

2.      Start with the product: Is the UI as obvious and self-evident as possible
     1.     Consider the types of content you need to provide
                    Control assistance
                    Panel assistance
     2.      And the types of mechanisms available
                    Persistent UI text that doesn’t require
                     a user gesture
                    Simple UI gestures your users will tolerate

3.        Can you improve “help?”

4.        How are you supporting use of the product with
          non-UI, task-oriented deliverables?

5.        What issues will keep you from implementing
          this kind of approach?

                                (c) Andrea L. Ames, 2006-2013      15
User, scenario
 Content creator/technical writer
 Information architect


   Use IA Workbench to create a topic model
    for a DITA document

   Expectations, needs

                (c) Andrea L. Ames, 2006-2013   16
UI 
   First view: “welcome”
   Task flow
   All assistance about the UI should be in the UI

   Persistent – absolutely necessary
   User controllable – useful, might be needed by some
    users (obvious to get to)

   Imagine you are a consultant or advisor, looking over the
    user’s shoulder; what does she need to know?


                     (c) Andrea L. Ames, 2006-2013   17
Just beyond the UI:
Various flavors of “help” 
 Stop yelling!
 Repeating the same thing, over and over,
  does not make the message more
  valuable, useful, or enhance users’
  comprehension




              (c) Andrea L. Ames, 2006-2013   18
Completely divorced from the UI…
or is it? 
 Doc library
 Another form of help?
 What kind of content delivered in this
  way?
 Is the content we’re delivering this way
  valuable (at all)? Or the most valuable for
  the delivery mechanism?

               (c) Andrea L. Ames, 2006-2013   19
The biggest stumbling block(s)…
What keeps us from applying this approach?
 We didn’t know about it or how to do it
 We don’t think it’s the right thing to do
 Others (non-content people, like engineers)
  don’t understand it and/or buy into it
 Processes and process artifacts don’t support it
 Tools don’t support it
 Other issues?



                 (c) Andrea L. Ames, 2006-2013   20
Need we say more?

Probably 
PD revolution prerequisite:
Think More, Write Less
“Think more” means…                        “Write less” means…
                                              Ensuring that the UI is as easy to
   Owning and being responsible for           explain as possible by contributing
    the information experience                 to designing interaction the right
                                               way the first time
   Not making our users think about          Starting from the user’s immediate
    how to use the product                     task context and working your way
   Not falling back on old paradigms:         out to more general information—
                                               make “looking for” the answer a
      One help topic per UI screen            last resort (because it is)
      How many books are we going to         Not forcing users to read more
       write?                                  than they have to
   Not letting the developers think for      Prioritizing what you cover and
    you                                        where—for example, using
                                               scenarios
   Being assertive – making sure             Not just “papering the product”
    you’re involved throughout the             with traditional documentation
    design process
                            (c) Andrea L. Ames, 2006-2013     22
Why do we need to change?
   Traditional deliverables, developed by traditional methods, are not working:
        Reference that “papers the product”
        Generalized user-guide info
        “Type your name in the Name field” help
        Most documentation focuses on functional information, not domain information, or the
         mapping from domain to product function—written from the inside out
        Much of that information covers the large number of tasks users need to do – such as
         installing, migrating, etc. – that are not business goals
        Online libraries stuffed with everything we produce
   Documentation is often compensation for unusable products—a finger in an
    eroding dam of bad product design
   Customers and users don’t read documentation—reading documentation is
    never a business goal 
   Information is difficult to find and often does not address the user’s issue
   Customers do not perceive information as separate from product
   Customers look more and more to forums, knowledge bases, and other
    social sources of info vs. product doc
   Can you afford not to change—do you have the resource to continue
    building and maintaining content that customers don’t need or use?
                              (c) Andrea L. Ames, 2006-2013 23
How can we think more
and write less?
   Prioritize using deep understanding of users
    (scenarios, use cases, etc.)
      Sometimes this means not writing something
      Most often, it means covering it in an unfamiliar
        way (to the team, customers, and even you)
   Design deliverables to support users’ efficient and
    effective use of information in the context of their
    tasks (embedded assistance, contextual
    information, examples, samples, concrete
    information, take cues from community-written
    info)
   Own your portion of the responsibility for the
    usability of the product—the information
    experience begins in the product



                         (c) Andrea L. Ames, 2006-2013     24
How can we think more and
write less? (cont.)
   If the design discussion around an aspect of the product seems
    complicated or difficult to you, it probably is—this is where your
    customers most need you!
      In the design discussion, raise the issue with the dev team, contribute ideas for
       improving the design.
      Look for gaps in user-goal and user-task flows: between UI panels, between
       tasks, between different UIs (admin versus end user client, e.g.), between
       products.
      Ask questions about what you don’t know (they are probably the same as user’s
       questions).
      If you can’t get product changes, or get them right away, find ways to improve the
       user experience without adding topics… embedded information, “show me”
       demo, or tutorial.
   Start with the user and provide the right information within the UI’s
    task flow (embedded assistance).
   Determine what’s highest-value for your users—examples, samples,
    tasks, tutorials—and focus on those; don’t try to cover every part of
    the product with every kind of info and deliverable.
                             (c) Andrea L. Ames, 2006-2013         25
How can we think more and
write less? (cont.)
   Document the UI in the UI
        Don’t rewrite what’s in the UI in hover help and help pane
        Don’t include unnecessary hover help and help-pane content
   When considering additional documentation
      Focus on user tasks—not UI tasks—and then on supporting reference and conceptual
       information
      Focus concepts on the user’s task domain, not the tool
      Don’t duplicate UI help and hover-help content in other deliverables
   When testing information, take user input into consideration, but don’t just
    do whatever they say
      Understand the root causes of their concerns
      Design the right solution for the issue at hand and validate it
      Typically, users don’t know what the root cause is; they only know how to articulate
       what they like and don’t like; base design decisions on observable performance, if
       possible

   What we do requires thinking! There is no cookbook or recipe for
    implementing it!

                               (c) Andrea L. Ames, 2006-2013           26
Resources
Jakob Nielsen, Alertbox
Demystifying Usability blog
Time-Tripper UI patterns
InteractionDesign.org
This presentation on slideshare:
   http://www.slideshare.net/aames/201302-worlds-collide-
   improveuxthrupid-workshop-aames
STC proceedings paper on stages of use (backup):
   http://www.stc.org/images/proceedings/Documents/enabl
   ingprogressivei1.htm


                  (c) Andrea L. Ames, 2006-2013   27   27
Questions?




         (c) Andrea L. Ames, 2006-2013   28   28
Contacting/following/connecting
with Andrea
E-mail: aames@pobox.com
Twitter: @aames, @TMWLala, @strategicIA
Facebook: www.facebook.com/alames,
   http://www.facebook.com/pages/The-Strategic-IA/313151912099313
LinkedIn: http://www.linkedin.com/in/andreaames
Blog: thinkmorewriteless.wordpress.com/




                      (c) Andrea L. Ames, 2006-2013   29            29
Backup

Stages of Use
“Stages of use” in designing and writing
embedded assistance layers of PD




             (c) Andrea L. Ames, 2006-2013   31
“Stages of use” in designing and writing
embedded assistance layers of PD , cont.




                 (c) Andrea L. Ames, 2006-2013   32
Cautionary note about stages of use in
EA design
   Stages of use apply to multiple user dimensions; for example:
        Domain knowledge
        Computer use
        Your tool
        Tools like your tool
   A user who is a novice in your tool and tools like your tool might be an
    expert in the domain and the use of computers in general.
   The same user might be an expert with most parts of your UI and a novice
    in some, or might be an expert in some parts of a task flow and a novice in
    others.
   You must consider the many dimensions of your users before arbitrarily
    applying a single “stage of use” label to them
   Consider the appropriate information for the point in time for which you are
    designing: does the user need tool information, domain information, or
    both?
   Thankfully, progressive disclosure enables you to support multiple levels of
    users throughout their use of the various parts of the product and through
    their growth in domain and tool knowledge and experience
                           (c) Andrea L. Ames, 2006-2013 33

Más contenido relacionado

La actualidad más candente

Interaction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction DesignInteraction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction DesignDave Malouf
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction DesignGraeme Smith
 
Design Issues with Microsft Word
Design Issues with Microsft WordDesign Issues with Microsft Word
Design Issues with Microsft WordAbdullah Shiam
 
Human computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemHuman computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemN.Jagadish Kumar
 
Introduction to HCI (UCC)
Introduction to HCI (UCC)Introduction to HCI (UCC)
Introduction to HCI (UCC)apppsych
 
What is interaction design
What is interaction designWhat is interaction design
What is interaction designMohamed Shalash
 
More than a Moment.
More than a Moment. More than a Moment.
More than a Moment. Alan Dix
 
Design issues and processes
Design issues and processesDesign issues and processes
Design issues and processesDavid Lamas
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentationjsokohl
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 
Interaction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital productsInteraction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital productsDavid Little
 
Enterprise User Experience in Higher Education
Enterprise User Experience in Higher EducationEnterprise User Experience in Higher Education
Enterprise User Experience in Higher EducationTarik (Rick) Dzekman
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User ExerienceTanya Zavialova
 
Human-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
Human-Centered Artificial Intelligence: Reliable, Safe & TrustworthyHuman-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
Human-Centered Artificial Intelligence: Reliable, Safe & TrustworthyJalnaAfridi
 

La actualidad más candente (20)

Interaction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction DesignInteraction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction Design
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
Design Issues with Microsft Word
Design Issues with Microsft WordDesign Issues with Microsft Word
Design Issues with Microsft Word
 
Introduction To HCI
Introduction To HCIIntroduction To HCI
Introduction To HCI
 
Human computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemHuman computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco system
 
Introduction to HCI (UCC)
Introduction to HCI (UCC)Introduction to HCI (UCC)
Introduction to HCI (UCC)
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
 
What is interaction design
What is interaction designWhat is interaction design
What is interaction design
 
Making Design Actionable
Making Design ActionableMaking Design Actionable
Making Design Actionable
 
More than a Moment.
More than a Moment. More than a Moment.
More than a Moment.
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
Design issues and processes
Design issues and processesDesign issues and processes
Design issues and processes
 
Hci unit 1& 2
Hci unit 1& 2Hci unit 1& 2
Hci unit 1& 2
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
Usability basics
Usability basicsUsability basics
Usability basics
 
Interaction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital productsInteraction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital products
 
Enterprise User Experience in Higher Education
Enterprise User Experience in Higher EducationEnterprise User Experience in Higher Education
Enterprise User Experience in Higher Education
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
Human-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
Human-Centered Artificial Intelligence: Reliable, Safe & TrustworthyHuman-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
Human-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
 

Similar a When Worlds Collide: Improving UX by Applying Progressive Info Disclosure

PRINCIPLE OF HUMAN COMPUTER INTERACTION.docx
PRINCIPLE OF HUMAN COMPUTER INTERACTION.docxPRINCIPLE OF HUMAN COMPUTER INTERACTION.docx
PRINCIPLE OF HUMAN COMPUTER INTERACTION.docxharrisonhoward80223
 
Lavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & AschwandenLavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & AschwandenJames Smith
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design Saqib Raza
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1studiokandm
 
Remember the User without videos
Remember the User without videosRemember the User without videos
Remember the User without videosDave Robbins
 
Topic 3 Human Computer Interaction
Topic 3 Human Computer InteractionTopic 3 Human Computer Interaction
Topic 3 Human Computer Interactionnur ezzaty
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDPreeti Chopra
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1Sameer Chavan
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To UsabilityOvidiu Von M
 
Importance of User eXperience
Importance of User eXperienceImportance of User eXperience
Importance of User eXperienceguest1bcbc9
 
Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013Patrick Hays
 
User interfaces presentation
User interfaces presentationUser interfaces presentation
User interfaces presentationsomipam1
 
UCD / IxD Introduction - User centric design, interaction design
UCD / IxD Introduction - User centric design, interaction designUCD / IxD Introduction - User centric design, interaction design
UCD / IxD Introduction - User centric design, interaction designsdavis6b
 
Alex wright mons_workshop_051214
Alex wright mons_workshop_051214Alex wright mons_workshop_051214
Alex wright mons_workshop_051214LeMundaneum
 
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introductionEPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introductionhendrikknoche
 
NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1studiokandm
 

Similar a When Worlds Collide: Improving UX by Applying Progressive Info Disclosure (20)

PRINCIPLE OF HUMAN COMPUTER INTERACTION.docx
PRINCIPLE OF HUMAN COMPUTER INTERACTION.docxPRINCIPLE OF HUMAN COMPUTER INTERACTION.docx
PRINCIPLE OF HUMAN COMPUTER INTERACTION.docx
 
Lavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & AschwandenLavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
 
UCIDesign.ppt
UCIDesign.pptUCIDesign.ppt
UCIDesign.ppt
 
Hci Overview
Hci OverviewHci Overview
Hci Overview
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
 
Remember the User without videos
Remember the User without videosRemember the User without videos
Remember the User without videos
 
Topic 3 Human Computer Interaction
Topic 3 Human Computer InteractionTopic 3 Human Computer Interaction
Topic 3 Human Computer Interaction
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To Usability
 
Importance of User eXperience
Importance of User eXperienceImportance of User eXperience
Importance of User eXperience
 
Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013
 
User interfaces presentation
User interfaces presentationUser interfaces presentation
User interfaces presentation
 
The Science behind Good UIs and UXs
The Science behind Good UIs and UXsThe Science behind Good UIs and UXs
The Science behind Good UIs and UXs
 
UCD / IxD Introduction - User centric design, interaction design
UCD / IxD Introduction - User centric design, interaction designUCD / IxD Introduction - User centric design, interaction design
UCD / IxD Introduction - User centric design, interaction design
 
Alex wright mons_workshop_051214
Alex wright mons_workshop_051214Alex wright mons_workshop_051214
Alex wright mons_workshop_051214
 
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introductionEPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
 
NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1
 
Slides chapter 12
Slides chapter 12Slides chapter 12
Slides chapter 12
 

Más de Andrea L. Ames

Developing Your Organizational Power and Infuence
Developing Your Organizational Power and InfuenceDeveloping Your Organizational Power and Infuence
Developing Your Organizational Power and InfuenceAndrea L. Ames
 
Design Thinking for Content
Design Thinking for ContentDesign Thinking for Content
Design Thinking for ContentAndrea L. Ames
 
Design Thinking Workshop - LavaCon 2018 New Orleans
Design Thinking Workshop - LavaCon 2018 New OrleansDesign Thinking Workshop - LavaCon 2018 New Orleans
Design Thinking Workshop - LavaCon 2018 New OrleansAndrea L. Ames
 
[Mini-Workshop] Content Architecture: Where Humans and Machines Agree
[Mini-Workshop] Content Architecture: Where Humans and Machines Agree[Mini-Workshop] Content Architecture: Where Humans and Machines Agree
[Mini-Workshop] Content Architecture: Where Humans and Machines AgreeAndrea L. Ames
 
[Handout for Mini-Workshop] Content Architecture: Where Humans and Machines A...
[Handout for Mini-Workshop] Content Architecture: Where Humans and Machines A...[Handout for Mini-Workshop] Content Architecture: Where Humans and Machines A...
[Handout for Mini-Workshop] Content Architecture: Where Humans and Machines A...Andrea L. Ames
 
[Keynote] Human vs Machine: Conflict or Collaboration?
[Keynote] Human vs Machine: Conflict or Collaboration?[Keynote] Human vs Machine: Conflict or Collaboration?
[Keynote] Human vs Machine: Conflict or Collaboration?Andrea L. Ames
 
Design Thinking for Content
Design Thinking for ContentDesign Thinking for Content
Design Thinking for ContentAndrea L. Ames
 
Managing Stakeholders Across the Content Ecosystem: The Key to Implementing a...
Managing Stakeholders Across the Content Ecosystem: The Key to Implementing a...Managing Stakeholders Across the Content Ecosystem: The Key to Implementing a...
Managing Stakeholders Across the Content Ecosystem: The Key to Implementing a...Andrea L. Ames
 
Structured Content ... Sexy? Strategic? Or Both?
Structured Content ... Sexy? Strategic? Or Both?Structured Content ... Sexy? Strategic? Or Both?
Structured Content ... Sexy? Strategic? Or Both?Andrea L. Ames
 
Influencing Up through Personal Leadership
Influencing Up through Personal LeadershipInfluencing Up through Personal Leadership
Influencing Up through Personal LeadershipAndrea L. Ames
 
Post-Sales Content and the Future of Marketing
Post-Sales Content and the Future of MarketingPost-Sales Content and the Future of Marketing
Post-Sales Content and the Future of MarketingAndrea L. Ames
 
Modeling the Content Experience: Delivering the Right Content, to the Right P...
Modeling the Content Experience: Delivering the Right Content, to the Right P...Modeling the Content Experience: Delivering the Right Content, to the Right P...
Modeling the Content Experience: Delivering the Right Content, to the Right P...Andrea L. Ames
 
Closing the Gap Without Falling Into It: Creating an Ecosystem to Unify Conte...
Closing the Gap Without Falling Into It: Creating an Ecosystem to Unify Conte...Closing the Gap Without Falling Into It: Creating an Ecosystem to Unify Conte...
Closing the Gap Without Falling Into It: Creating an Ecosystem to Unify Conte...Andrea L. Ames
 
Design: Prereq to Tech! Deliver the right content using design thinking
Design: Prereq to Tech! Deliver the right content using design thinkingDesign: Prereq to Tech! Deliver the right content using design thinking
Design: Prereq to Tech! Deliver the right content using design thinkingAndrea L. Ames
 
Design Thinking for Content
Design Thinking for ContentDesign Thinking for Content
Design Thinking for ContentAndrea L. Ames
 
Measuring Content Effectiveness
Measuring Content EffectivenessMeasuring Content Effectiveness
Measuring Content EffectivenessAndrea L. Ames
 
You Mean You Don't Have to Start Over Every Time?
You Mean You Don't Have to Start Over Every Time?You Mean You Don't Have to Start Over Every Time?
You Mean You Don't Have to Start Over Every Time?Andrea L. Ames
 
Technical Communicators: Breaking Boundaries and Driving Change
Technical Communicators: Breaking Boundaries and Driving ChangeTechnical Communicators: Breaking Boundaries and Driving Change
Technical Communicators: Breaking Boundaries and Driving ChangeAndrea L. Ames
 
Quilts: A metaphor for content
Quilts: A metaphor for contentQuilts: A metaphor for content
Quilts: A metaphor for contentAndrea L. Ames
 
Forget "Predict" the Future -- Create the Future! keynote
Forget "Predict" the Future -- Create the Future! keynoteForget "Predict" the Future -- Create the Future! keynote
Forget "Predict" the Future -- Create the Future! keynoteAndrea L. Ames
 

Más de Andrea L. Ames (20)

Developing Your Organizational Power and Infuence
Developing Your Organizational Power and InfuenceDeveloping Your Organizational Power and Infuence
Developing Your Organizational Power and Infuence
 
Design Thinking for Content
Design Thinking for ContentDesign Thinking for Content
Design Thinking for Content
 
Design Thinking Workshop - LavaCon 2018 New Orleans
Design Thinking Workshop - LavaCon 2018 New OrleansDesign Thinking Workshop - LavaCon 2018 New Orleans
Design Thinking Workshop - LavaCon 2018 New Orleans
 
[Mini-Workshop] Content Architecture: Where Humans and Machines Agree
[Mini-Workshop] Content Architecture: Where Humans and Machines Agree[Mini-Workshop] Content Architecture: Where Humans and Machines Agree
[Mini-Workshop] Content Architecture: Where Humans and Machines Agree
 
[Handout for Mini-Workshop] Content Architecture: Where Humans and Machines A...
[Handout for Mini-Workshop] Content Architecture: Where Humans and Machines A...[Handout for Mini-Workshop] Content Architecture: Where Humans and Machines A...
[Handout for Mini-Workshop] Content Architecture: Where Humans and Machines A...
 
[Keynote] Human vs Machine: Conflict or Collaboration?
[Keynote] Human vs Machine: Conflict or Collaboration?[Keynote] Human vs Machine: Conflict or Collaboration?
[Keynote] Human vs Machine: Conflict or Collaboration?
 
Design Thinking for Content
Design Thinking for ContentDesign Thinking for Content
Design Thinking for Content
 
Managing Stakeholders Across the Content Ecosystem: The Key to Implementing a...
Managing Stakeholders Across the Content Ecosystem: The Key to Implementing a...Managing Stakeholders Across the Content Ecosystem: The Key to Implementing a...
Managing Stakeholders Across the Content Ecosystem: The Key to Implementing a...
 
Structured Content ... Sexy? Strategic? Or Both?
Structured Content ... Sexy? Strategic? Or Both?Structured Content ... Sexy? Strategic? Or Both?
Structured Content ... Sexy? Strategic? Or Both?
 
Influencing Up through Personal Leadership
Influencing Up through Personal LeadershipInfluencing Up through Personal Leadership
Influencing Up through Personal Leadership
 
Post-Sales Content and the Future of Marketing
Post-Sales Content and the Future of MarketingPost-Sales Content and the Future of Marketing
Post-Sales Content and the Future of Marketing
 
Modeling the Content Experience: Delivering the Right Content, to the Right P...
Modeling the Content Experience: Delivering the Right Content, to the Right P...Modeling the Content Experience: Delivering the Right Content, to the Right P...
Modeling the Content Experience: Delivering the Right Content, to the Right P...
 
Closing the Gap Without Falling Into It: Creating an Ecosystem to Unify Conte...
Closing the Gap Without Falling Into It: Creating an Ecosystem to Unify Conte...Closing the Gap Without Falling Into It: Creating an Ecosystem to Unify Conte...
Closing the Gap Without Falling Into It: Creating an Ecosystem to Unify Conte...
 
Design: Prereq to Tech! Deliver the right content using design thinking
Design: Prereq to Tech! Deliver the right content using design thinkingDesign: Prereq to Tech! Deliver the right content using design thinking
Design: Prereq to Tech! Deliver the right content using design thinking
 
Design Thinking for Content
Design Thinking for ContentDesign Thinking for Content
Design Thinking for Content
 
Measuring Content Effectiveness
Measuring Content EffectivenessMeasuring Content Effectiveness
Measuring Content Effectiveness
 
You Mean You Don't Have to Start Over Every Time?
You Mean You Don't Have to Start Over Every Time?You Mean You Don't Have to Start Over Every Time?
You Mean You Don't Have to Start Over Every Time?
 
Technical Communicators: Breaking Boundaries and Driving Change
Technical Communicators: Breaking Boundaries and Driving ChangeTechnical Communicators: Breaking Boundaries and Driving Change
Technical Communicators: Breaking Boundaries and Driving Change
 
Quilts: A metaphor for content
Quilts: A metaphor for contentQuilts: A metaphor for content
Quilts: A metaphor for content
 
Forget "Predict" the Future -- Create the Future! keynote
Forget "Predict" the Future -- Create the Future! keynoteForget "Predict" the Future -- Create the Future! keynote
Forget "Predict" the Future -- Create the Future! keynote
 

When Worlds Collide: Improving UX by Applying Progressive Info Disclosure

  • 1. When Worlds Collide: Improving the User Experience by Applying Progressive Information Disclosure Presented by Andrea L. Ames @aames IBM Senior Technical Staff Member / Total Information Experience Strategist & Architect at 2013 Intelligent Content Conference (#ICC2013) on 8 February 2013 in San Francisco, CA USA
  • 2. About Andrea  Technical communicator since 1983  Areas of expertise  Information architecture and design and interaction design for products and interactive information  Information and product usability—from analysis through validation  User-centered design and development process  IBM Senior Technical Staff Member  UCSC in Silicon Valley Extension Tech Comm and Writing certificate coordinator and instructor  STC Fellow, past president (2004-05), and past member of Board of Directors (1998-2006)  ACM Distinguished Engineer (c) Andrea L. Ames, 2006-2013 2 2
  • 3. Agenda  Progressive disclosure (PD)  Traditional information PD  The new twist – applying it to the information experience, in particular the UI  Workshop: Quick steps to PD and group heuristic evaluation  …And more!  Resources (c) Andrea L. Ames, 2006-2013 3 3
  • 4. According to Wikipedia… progressive disclosure (PD):  “To move complex and less frequently used options out of the main user interface and into secondary screens“  An interaction design technique  Often used in human computer interaction  Helps maintain the focus of a user's attention by reducing clutter, confusion, and cognitive workload  Improves usability by presenting only the minimum data required for the task at hand  Sequences actions across several screens  Reduces feelings of overwhelm for the user  Reveals only the essentials and helps the user manage the complexity of feature-rich sites or applications  Moves from "abstract to specific" via “ramping up” the user from simple to more complex actions (c) Andrea L. Ames, 2006-2013 4
  • 5. PD for interaction isn’t new  Around since at least the early 1980s (Jack Carroll, IBM)  Jakob Nielsen has been discussing it for ages "Progressive disclosure is the best tool so far: show people the basics first, and once they understand that, allow them to get to the expert features. But don't show everything all at once or you will only confuse people and they will waste endless time messing with features that they don't need yet".  In information development, PD can be applied to content, as well (c) Andrea L. Ames, 2006-2013 5
  • 6. What is progressive information disclosure?  In an information experience, enables you (the author) to provide the right information in the right place at the right time  Assumes “competent performer” to “proficient performer” is stage of use (backup) in which users will spend most of their time when using the product–not novices; not experts  Defer display of novice information, background, concepts, extended reference material and examples, etc., until the user needs and requests it  Reduces complexity by revealing only the essentials for a current task and then reveals more as users advance through tasks (c) Andrea L. Ames, 2006-2013 6
  • 7. What is progressive information disclosure? (cont.)  Reveals information in an ordered manner  Each layer builds on the previous one in a flow that provides progressively more information  Provides only the details that are necessary at a given time, in a specific context  Provides assistance when necessary--not information created just to cover an empty widget  Do not repeat information; for example, do not repeat field labels in hover text.  “A guided journey, not a scavenger hunt"  Designed around the ideal information experience–with no resource or time constraints  Implemented realistically with necessary constraints (c) Andrea L. Ames, 2006-2013 7
  • 8. A rose by any other name…  Technical communicators have been “doing” PD for a long time  We might not call it PD  The best example of traditional PD: Well-architected, traditional, online help  Primary “layer”: Contextual and task topics  Secondary “layers”: prereqs, background, related concepts and reference, etc. (c) Andrea L. Ames, 2006-2013 8
  • 9. Traditional, contextual help (c) Andrea L. Ames, 2006-2013 9
  • 10. The problem with traditional assistance and traditional information development methods  Typical UI-text development process:  Written by developers of the UI  Edited by tech pubs (best case; often copy edit capturing only capitalization and punctuation issues and typos)  Typical help development process:  Writers attend (some) design meetings, keeping track of the number of UI panels in the product, which typically include one help button per panel  Writers develop one help topic for each UI panel in the product  Pop-up help/hover help provided for all, or no, controls  Task help describes how to complete the fields in the UI panel :  Pop-up/hover help content repeated in task help  Writers cut and paste from specs  Typical library design and development process:  Deliverables developed based on development expectations and history vs. user needs  Other (non-help) deliverable content identified without regard for task help also being created  Extensive redundancy across UI text, help, and other deliverables (like books)  Design process accomplished within resource and time constraints, not according to ideal or customer needs (c) Andrea L. Ames, 2006-2013 10
  • 11. What’s wrong with this picture? (c) Andrea L. Ames, 2006-2013 11
  • 12. The next PD evolution/revolution  The UI  Add value  Get even closer to the task than the help  Influence the design of the task and task ecosystem  Drive reductions in words  Prioritize resources around client value (c) Andrea L. Ames, 2006-2013 12
  • 13. Workshop Let’s get our hands dirty! 
  • 14. Quick survey…do you know:  DITA?  information architecture?  topics?  topic-based content architecture?  topic-based content development? (c) Andrea L. Ames, 2006-2013 14
  • 15. Quick steps to PD 1. Consider your user and their stages of use (backup) 2. Start with the product: Is the UI as obvious and self-evident as possible 1. Consider the types of content you need to provide  Control assistance  Panel assistance 2. And the types of mechanisms available  Persistent UI text that doesn’t require a user gesture  Simple UI gestures your users will tolerate 3. Can you improve “help?” 4. How are you supporting use of the product with non-UI, task-oriented deliverables? 5. What issues will keep you from implementing this kind of approach? (c) Andrea L. Ames, 2006-2013 15
  • 16. User, scenario  Content creator/technical writer  Information architect  Use IA Workbench to create a topic model for a DITA document  Expectations, needs (c) Andrea L. Ames, 2006-2013 16
  • 17. UI   First view: “welcome”  Task flow  All assistance about the UI should be in the UI  Persistent – absolutely necessary  User controllable – useful, might be needed by some users (obvious to get to)  Imagine you are a consultant or advisor, looking over the user’s shoulder; what does she need to know? (c) Andrea L. Ames, 2006-2013 17
  • 18. Just beyond the UI: Various flavors of “help”   Stop yelling!  Repeating the same thing, over and over, does not make the message more valuable, useful, or enhance users’ comprehension (c) Andrea L. Ames, 2006-2013 18
  • 19. Completely divorced from the UI… or is it?   Doc library  Another form of help?  What kind of content delivered in this way?  Is the content we’re delivering this way valuable (at all)? Or the most valuable for the delivery mechanism? (c) Andrea L. Ames, 2006-2013 19
  • 20. The biggest stumbling block(s)… What keeps us from applying this approach?  We didn’t know about it or how to do it  We don’t think it’s the right thing to do  Others (non-content people, like engineers) don’t understand it and/or buy into it  Processes and process artifacts don’t support it  Tools don’t support it  Other issues? (c) Andrea L. Ames, 2006-2013 20
  • 21. Need we say more? Probably 
  • 22. PD revolution prerequisite: Think More, Write Less “Think more” means… “Write less” means…  Ensuring that the UI is as easy to  Owning and being responsible for explain as possible by contributing the information experience to designing interaction the right way the first time  Not making our users think about  Starting from the user’s immediate how to use the product task context and working your way  Not falling back on old paradigms: out to more general information— make “looking for” the answer a  One help topic per UI screen last resort (because it is)  How many books are we going to  Not forcing users to read more write? than they have to  Not letting the developers think for  Prioritizing what you cover and you where—for example, using scenarios  Being assertive – making sure  Not just “papering the product” you’re involved throughout the with traditional documentation design process (c) Andrea L. Ames, 2006-2013 22
  • 23. Why do we need to change?  Traditional deliverables, developed by traditional methods, are not working:  Reference that “papers the product”  Generalized user-guide info  “Type your name in the Name field” help  Most documentation focuses on functional information, not domain information, or the mapping from domain to product function—written from the inside out  Much of that information covers the large number of tasks users need to do – such as installing, migrating, etc. – that are not business goals  Online libraries stuffed with everything we produce  Documentation is often compensation for unusable products—a finger in an eroding dam of bad product design  Customers and users don’t read documentation—reading documentation is never a business goal   Information is difficult to find and often does not address the user’s issue  Customers do not perceive information as separate from product  Customers look more and more to forums, knowledge bases, and other social sources of info vs. product doc  Can you afford not to change—do you have the resource to continue building and maintaining content that customers don’t need or use? (c) Andrea L. Ames, 2006-2013 23
  • 24. How can we think more and write less?  Prioritize using deep understanding of users (scenarios, use cases, etc.)  Sometimes this means not writing something  Most often, it means covering it in an unfamiliar way (to the team, customers, and even you)  Design deliverables to support users’ efficient and effective use of information in the context of their tasks (embedded assistance, contextual information, examples, samples, concrete information, take cues from community-written info)  Own your portion of the responsibility for the usability of the product—the information experience begins in the product (c) Andrea L. Ames, 2006-2013 24
  • 25. How can we think more and write less? (cont.)  If the design discussion around an aspect of the product seems complicated or difficult to you, it probably is—this is where your customers most need you!  In the design discussion, raise the issue with the dev team, contribute ideas for improving the design.  Look for gaps in user-goal and user-task flows: between UI panels, between tasks, between different UIs (admin versus end user client, e.g.), between products.  Ask questions about what you don’t know (they are probably the same as user’s questions).  If you can’t get product changes, or get them right away, find ways to improve the user experience without adding topics… embedded information, “show me” demo, or tutorial.  Start with the user and provide the right information within the UI’s task flow (embedded assistance).  Determine what’s highest-value for your users—examples, samples, tasks, tutorials—and focus on those; don’t try to cover every part of the product with every kind of info and deliverable. (c) Andrea L. Ames, 2006-2013 25
  • 26. How can we think more and write less? (cont.)  Document the UI in the UI  Don’t rewrite what’s in the UI in hover help and help pane  Don’t include unnecessary hover help and help-pane content  When considering additional documentation  Focus on user tasks—not UI tasks—and then on supporting reference and conceptual information  Focus concepts on the user’s task domain, not the tool  Don’t duplicate UI help and hover-help content in other deliverables  When testing information, take user input into consideration, but don’t just do whatever they say  Understand the root causes of their concerns  Design the right solution for the issue at hand and validate it  Typically, users don’t know what the root cause is; they only know how to articulate what they like and don’t like; base design decisions on observable performance, if possible  What we do requires thinking! There is no cookbook or recipe for implementing it! (c) Andrea L. Ames, 2006-2013 26
  • 27. Resources Jakob Nielsen, Alertbox Demystifying Usability blog Time-Tripper UI patterns InteractionDesign.org This presentation on slideshare: http://www.slideshare.net/aames/201302-worlds-collide- improveuxthrupid-workshop-aames STC proceedings paper on stages of use (backup): http://www.stc.org/images/proceedings/Documents/enabl ingprogressivei1.htm (c) Andrea L. Ames, 2006-2013 27 27
  • 28. Questions? (c) Andrea L. Ames, 2006-2013 28 28
  • 29. Contacting/following/connecting with Andrea E-mail: aames@pobox.com Twitter: @aames, @TMWLala, @strategicIA Facebook: www.facebook.com/alames, http://www.facebook.com/pages/The-Strategic-IA/313151912099313 LinkedIn: http://www.linkedin.com/in/andreaames Blog: thinkmorewriteless.wordpress.com/ (c) Andrea L. Ames, 2006-2013 29 29
  • 31. “Stages of use” in designing and writing embedded assistance layers of PD (c) Andrea L. Ames, 2006-2013 31
  • 32. “Stages of use” in designing and writing embedded assistance layers of PD , cont. (c) Andrea L. Ames, 2006-2013 32
  • 33. Cautionary note about stages of use in EA design  Stages of use apply to multiple user dimensions; for example:  Domain knowledge  Computer use  Your tool  Tools like your tool  A user who is a novice in your tool and tools like your tool might be an expert in the domain and the use of computers in general.  The same user might be an expert with most parts of your UI and a novice in some, or might be an expert in some parts of a task flow and a novice in others.  You must consider the many dimensions of your users before arbitrarily applying a single “stage of use” label to them  Consider the appropriate information for the point in time for which you are designing: does the user need tool information, domain information, or both?  Thankfully, progressive disclosure enables you to support multiple levels of users throughout their use of the various parts of the product and through their growth in domain and tool knowledge and experience (c) Andrea L. Ames, 2006-2013 33