![Page 1: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/1.jpg)
© 2
007
The
Mat
hWor
ks, I
nc.
® ®
Optimizing the User Experience Through Integrated Information Design
Sowmini Sampath and Richard Ellis
![Page 2: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/2.jpg)
2
® ®
What We’ll Be Talking About
In this talk, we’ll describe our approach to developing help solutions that:
Integrate context sensitive help (CSH) into product user interfaces
Integrate CSH with our existing knowledge base Derive content from interaction analysis
![Page 3: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/3.jpg)
3
® ®
The MathWorks Products
The MathWorks produces software for engineers and researchers in a variety of industries: Automotive Electronics Industrial equipment Telecommunications
![Page 4: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/4.jpg)
4
® ®
How People Use Our Products?
Users create computer models Run simulations Perform data analysis and visualization Create new tools and applications using our software.
![Page 5: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/5.jpg)
5
® ®
![Page 6: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/6.jpg)
6
® ®
![Page 7: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/7.jpg)
7
® ®
Task ComplexityUser tasks often require configuring a number of complex dialogs.
Each element represents a decision that the user must make.
![Page 8: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/8.jpg)
8
® ®
Designing Help for Graphical User Interfaces (GUIs)
Increasing use of GUIs by products required better help design
Design goals: Integrate user assistance into product interfaces. Provide targeted information for each decision Make CSH an entry point into the existing user documentation.
![Page 9: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/9.jpg)
9
® ®
Initial Investigations
Needed to partner with engineers to integrate the help into the interface.
Many people thought context sensitive help was of little value. Why had people rarely found it useful?
![Page 10: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/10.jpg)
10
® ®
What Was Not WorkingTooltips were often used to provide scant information
Help button dove into usage topics and often required you to wade through a pool information to find the answer.
![Page 11: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/11.jpg)
11
® ®
Why it Was Not Working
Tooltips lack: Enough information Linking Formatting Not persistent
Help browser: Overwhelming amount of information Deep hierarchy of information Is cumbersome – starting another application
Need to provide the right amount and type of information.
![Page 12: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/12.jpg)
12
® ®
Analysis of User Help Requirements
We developed use cases, observed usability test, and brainstormed to develop a model of user information needs.
A “critical mass” of information necessary. A progression from specific details to general concepts –
information escalation. Avoid quantum leaps in your information escalation path.
![Page 13: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/13.jpg)
13
® ®
User Interactions We Support with Help
New users tend to explore before doing actual work. Users need to map their task onto the products features Experienced users often wanted to be reminded of details. All users wanted unobtrusive, on-demand information.
![Page 14: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/14.jpg)
14
® ®
The On Ramp – Provided by Help Button
Purpose
High-level workflow
Information gateway
![Page 15: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/15.jpg)
15
® ®
Field-Level Help
Right-click context menu displays a popup window with help on individual item.
Purpose
Relevant details
Link to related information
![Page 16: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/16.jpg)
16
® ®
Embedding Help in the User Interface
Application starts with instructions displayed
Start by doing this
Built in on ramp
![Page 17: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/17.jpg)
17
® ®
Procedures Update as Work ProgressesThe help always matches the tool’s current state.
Close help pane
GUI has reconfigured
Help automatically updates
![Page 18: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/18.jpg)
18
® ®
Tying It All Together
A well planned information escalation path – information must stay in context. We know what users are doing because they have requested help
from a particular location in a GUI. Through task analysis the writer has determined what supporting
information needs to be in the user’s manual. Our metaphor – the link opens the user’s manual at just the right
page.
![Page 19: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/19.jpg)
19
® ®
The CSH model integrates all help
CSH becomes an entry point into our knowledge base User tasks
Product workflow
![Page 20: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/20.jpg)
20
® ®
Introduction
Brief description of the SimBiology® application Challenges posed to the writing team by the software Implementation of the solution Summary
![Page 21: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/21.jpg)
21
® ®
SimBiology®
SimBiology is a product from the MathWorks that lets biologists visualize and analyze biochemical reactions.
The SimBiology application extends MATLAB® for use by scientists in academia, and in the biotech and pharmaceutical industry.
![Page 22: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/22.jpg)
22
® ®
Interface
Description
![Page 23: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/23.jpg)
23
® ®
How to Begin?
We started by analyzing the user’s workflow: Took a user’s task and mapped it out in the SimBiology GUI Created task scenarios and did usability testing Noted user interactions with the GUI to help drive the design
process Observed that there were many sub tasks within the overall
workflow
![Page 24: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/24.jpg)
24
® ®
Selecting a Solution
Selected embedded procedures as the solution to documenting subtasks
![Page 25: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/25.jpg)
25
® ®
![Page 26: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/26.jpg)
26
® ®
![Page 27: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/27.jpg)
27
® ®
Observation
Novice user asks “Where do I begin?
Having these multiple tasks confront the user posed a different challenge: Users may not know what they need before and what they must
do after in the overall workflow.
![Page 28: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/28.jpg)
28
® ®
Solution
Provide an on-ramp to the GUI Provide an overall view of the general workflow, and show how
to map tasks to product features
![Page 29: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/29.jpg)
29
® ®
![Page 30: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/30.jpg)
30
® ®
Research Workflow
![Page 31: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/31.jpg)
31
® ®
SimBiology User Workflow
![Page 32: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/32.jpg)
32
® ®
Process of Creating the Diagram
Helped us conceptualize the workflow Learned about user task scenarios Help us understand what information the target audience needs
![Page 33: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/33.jpg)
33
® ®
Observation
Experienced users require more in-depth information but want this in the context of their task.
![Page 34: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/34.jpg)
34
® ®
Solution
A path to more in depth information that is closely related to users’ tasks – information must stay in context or users do not read it.
![Page 35: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/35.jpg)
35
® ®
![Page 36: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/36.jpg)
36
® ®
Summary of SimBiology Help
SimBiology documentation includes: Embedded-help pane
Procedures to accomplish typical tasks in the GUI Cross-references to supporting information
Usage Topics An overall view of the general workflow, and how to map tasks to
product features In-depth information – conceptual topics, tutorials, reference materials
with lots of examples
![Page 37: Optimizing The User Experience Through Integrated Information Design](https://reader034.vdocuments.us/reader034/viewer/2022042613/5474c4bdb4af9fa90a8b577d/html5/thumbnails/37.jpg)
37
® ®
CSH becomes an entry point into our information system
Conceptual topics
Tutorials
Reference