optimizing the user experience through integrated information design

© 2

007

The

Mat

hWor

ks, I

nc.

® ®

Optimizing the User Experience Through Integrated Information Design

Sowmini Sampath and Richard Ellis

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

3

® ®

The MathWorks Products

The MathWorks produces software for engineers and researchers in a variety of industries: Automotive Electronics Industrial equipment Telecommunications

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.

5

® ®

6

® ®

7

® ®

Task ComplexityUser tasks often require configuring a number of complex dialogs.

Each element represents a decision that the user must make.

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.

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?

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.

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.

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.

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.

14

® ®

The On Ramp – Provided by Help Button

Purpose

High-level workflow

Information gateway

15

® ®

Field-Level Help

Right-click context menu displays a popup window with help on individual item.

Purpose

Relevant details

Link to related information

16

® ®

Embedding Help in the User Interface

Application starts with instructions displayed

Start by doing this

Built in on ramp

17

® ®

Procedures Update as Work ProgressesThe help always matches the tool’s current state.

Close help pane

GUI has reconfigured

Help automatically updates

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.

19

® ®

The CSH model integrates all help

CSH becomes an entry point into our knowledge base User tasks

Product workflow

20

® ®

Introduction

Brief description of the SimBiology® application Challenges posed to the writing team by the software Implementation of the solution Summary

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.

22

® ®

Interface

Description

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

24

® ®

Selecting a Solution

Selected embedded procedures as the solution to documenting subtasks

25

® ®

26

® ®

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.

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

29

® ®

30

® ®

Research Workflow

31

® ®

SimBiology User Workflow

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

33

® ®

Observation

Experienced users require more in-depth information but want this in the context of their task.

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.

35

® ®

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

37

® ®

CSH becomes an entry point into our information system

Conceptual topics

Tutorials

Reference