designing for information consumption at varied distances in the operating room: a cross-functional...

We UX’ers Like a Challenge

Multi-Disciplinary Team Approach

Human Factors

EngineerInteracti

on Designer

Visual Designer

User Research

er

Better for the project• The right people doing the right tasks• More ideas considered• More eyes to catch problems

Better for us• More fun• Increased support• Increased

motivation

FusionCharts Patient Monitoring System

FusionCharts Patient Monitoring System

FusionCharts Patient Monitoring System

Multi-Distance Viewing

2 feet(~.6 meters)

5 feet(~1.5 meters)

>15 feet(~4.6 meters)

Each distance presents its own unique user experience

Multi-Distance Viewing in the OR

Supplies

Tech

nolo

gy Z

one

Anesthesiologist

Sterile Field

Our Product

Circulating Nurse Desk

Our Project

❖ Design a medical device display to be used

❖ by different users

❖ for different tasks

❖ at different distances

❖ in the OR

The OR Environment Mistakes = Lives

Speed and Accuracy are Crucial

Our Approach

~2 year project

The Temptation

+

-65

BUT WAIT!!

The Result

Top 25 Biggest Product Flops of All Time

Understanding Use

❖ Identifying user needs❖ Creating design requirement to meet

user needs

UNDERSTANDING & VISION PHASE

Understanding & Vision Phase Overview

USERS TASKS &NEEDS

USER SCENARIOS

INDUSTRY & INTERNALREQUIREMENTS

DESIGN REQUIREMENTSTASK ANAYSIS

ENVIRONMENT

Understanding Phase Methods

1. Gather internal knowledge, data, & specifications

BUSINESS REQUIREMENTS

BRANDING REQUIREMENTS

FDA / AAMI GUIDELINES

USER RESEARCH DATA

Understanding Phase Methods

2. Conduct formative research

• Ethnography / Field research

• User Interviews

• Focus Groups

• User Surveys

• Mental Model Research

Understanding Phase Methods

2. Conduct formative research

• Conversations with in-house subject matter experts (SMEs) and end-users

• Expert reviews of first generation product & competing product

• In-house user surveys

Product Vision Phase Methods

3. Define and document design requirements• Create user scenarios using the SSNiF technique

• Information mapping exercise

SSNiF Technique

❖ Developed by Philip Haine (Steal This Idea Blog)❖ A method for turning user experience research into design

requirements through user scenarios❖ Short user scenarios which identify

❖ Stakeholders in a …

❖ Situation who have a …

❖ Need which can be addressed by a …

❖ Feature

SSNiF Technique

Stakeholder (user/customer)

Situation Need Feature/Solution

Daily mass transit commuter

Commutes daily for 60 minutes or more by bus or train.

Long, repetitive journey becomes boring

…something to make the idle time more stimulating, fun, enjoyable, or enriching.

Portable audio player with headphones (e.g., iPod)

Big SSNiFs: Identify a core need

SSNiF Technique

Little SSNiFs: Identify specific needs within a product or feature

Stakeholder (user/customer)

Situation Need Feature/Solution

Daily mass transit commuter

Has to stand while holding a handrail, leaving only one hand free

Be able to operate the device with one hand

Scroll wheel and buttons that can be operated with one hand

Sometimes has to hold a bag as well as a handrail, leaving no hands free

Be able to operate the device without holding it

Remote control on the headphone wire to control playback

Information Mapping

Screen Element

User Viewing Distance

Setup Initial Use

Steady Use

Tear Down

Power Setting

Circulating Nurse

2 feet Always Sometimes

Sometimes

Never

Power Setting

Surgeon 6 feet Never Sometimes

Sometimes

Never

Pulse Ox Status

Circulating Nurse

6 feet Never Often Often Never

❖ Data-driven design: using research as scaffolding for design

DESIGN PHASE

Designing the Product

Function vs Form

Function vs Form

OK

❖ Minimize content

❖ Reduce visual clutter

❖ Use a consistent visual language

❖ Select a palette to highlight elements function and aid visual grouping

❖ Create a visual hierarchy

Design principles

Tab 3Tab 2

Settings

FunctionFunction

15

Function

Function

Function

FunctionLABEL

Tab 1

!

Our Case Study

Minimize Content❖ Reference use scenario and

task analysis❖ Prioritize content based on

information maps

Circulating Nurse (2 feet distance)

Tab 3Tab 2

Settings

FunctionFunction

15

Function

Function

Function

FunctionLABEL

Tab 1

!

Circulating Nurse (15 feet distance)

Tab 3Tab 2

Settings

FunctionFunction

15

Function

Function

Function

FunctionLABEL

Tab 1

!

Scrub Nurse (5 feet distance)

Tab 3Tab 2

Settings

FunctionFunction

15

Function

Function

Function

FunctionLABEL

Tab 1

!

Surgeon (5 feet distance)

Tab 3Tab 2

Settings

FunctionFunction

15

Function

Function

Function

FunctionLABEL

Tab 1

!

Tab 3Tab 2

FunctionFunction

15

Function

Function

FunctionLABEL

!

Minimize content through task analysis

FunctionSettings

Tab 1

15FunctionLABEL

!

Minimize content through task analysis

Function

Tab 1

Settings

Minimize Content

15

FunctionLABEL

! FunctionSettings

Content has been minimized to reflect use tasks and work flows

Align Elements

❖ Apply a grid❖ Provide margins

❖ We scan vertically but read horizontally.

❖ Horizontal alignment critical in non-scrollable, landscape oriented displays.

❖ Use margins

Align Elements

❖ We scan vertically but read horizontally.

❖ Horizontal alignment critical in non-scrollable, landscape oriented displays.

❖ Use margins

Align Elements

❖ We scan vertically but read horizontally.

❖ Horizontal alignment critical in non-scrollable, landscape oriented displays.

❖ Use margins Menu

15

LABEL

Feature

Align Elements

Align Elements

15

FunctionLABEL

!Settings Function

Align Elements

15

Function

LABEL

!

Settings

Function

Align Elements

15

Function

LABEL

!

Settings

Function

❖ Select a visual language❖ Use similar elements

consistently❖ Sweat the details

Create Visual Consistency

Settings

!

Function Function

15

LABEL

Create Visual Consistency

Settings

!

FunctionFunction

LABEL

Create Visual Consistency

15

Settings

!

Function

15

Label

Create Visual Consistency

Function

!

Function

15

Create Visual Consistency

Label

Function

Settings

!

FunctionFunction

15

Create Visual Consistency

LabelSettings

!15Function

Create Visual Consistency

Settings Label

Function

Settings

!15Function

Create Visual Consistency

Label

Function

❖ Use color to reduce complexity

❖ Attribute colors to functions

Leverage Color

❖ Use color to reduce complexity

❖ Attribute specific colors to functions

❖ Select a palette while keeping in mind:

❖ Industry conventions

❖ Unique environmental factors

❖ Less is more

Leverage Color

!15

LabelSettings

Function Function

Leverage Color

Settings

!

Function

15

Label

Function

Leverage Color

Settings

!

Function

15

Label

Function

Leverage Color

Settings

!

Function

15

Label

Function

Leverage Color

Settings

!

Function

15

Label

Function

Leverage Color

Settings

!

Function

15

Label

Function

Leverage Color

!

Settings

Function

15

Label

Function

Leverage Color

!

Settings

Function

15

Label

Function

Leverage Color

❖ Prioritize your content❖ Test your design

continually

Visual Hierarchy

Visual Hierarchy

!

Settings

Function

15

Label

Function

Visual Hierarchy

!

Settings

Function

15

Label

Function

Visual Hierarchy

!

Settings

Function

15

Label

Function

Visual Hierarchy

!

Settings

Function

15

Label

Function

!

Settings

Function

15

Label

Function

Constantly evaluate and iterate your design: do a squint test

Visual Hierarchy

Settings

Function

15

Label

Function

!

Push your chair back!

Constantly evaluate and iterate your design

Visual Hierarchy

Visual Hierarchy - Prioritize Content

!

Settings

Function

15Label

Function

Visual Hierarchy - Prioritize Content

!

Settings

Function

15Label

Function

Visual Hierarchy - Prioritize Content

!

Settings

Function

15

Label

Function

Visual Hierarchy - Prioritize Content

Settings

Function

15

Label

Function

!

Push your chair back!

Before & After

Before

Tab 3Tab 2

Settings

FunctionFunction

15

Function

Function

Function

FunctionLABEL

Tab 1

!

After

!

Settings

Function

15

Label

Function

Evaluation Phase❖ Design validation from

team❖ Design validation from

users

EVALUATION PHASE

Evaluation Phase

❖ Continuous design reviews with our UX team

❖ Early design reviews with product team and in-house experts and end uses

❖ Formal Usability Testing

❖ Formal Visual Acuity Test

Formal Usability Testing

❖ Participants

❖ 26 OR nurses

❖ 3 US cities

❖ Validation Measures

5 feet15 feet

2 feet

Simulated Use

2 feet

User created OR environment

Visual Acuity Test

5 feet15 feet

6 screens per distance 8 content readings per screen

Design Variables

Font Size

Status

15Label

!

FunctionFunction

Status

15Label

!

Function Function

Large Small

Design Variables

Control Design

Graphics Only Graphics + Text

Status

Label

FunctionFunction

Status

Label

FunctionFunction

LOW

Function Function

Design Variables

Status

15Label

!

FunctionFunction

Top & Bottom Bottom Only

Control Design

Status

15Label

!

FunctionFunction

- +

Formal Usability Testing: Visual Acuity

❖ Design Variables

Status Design

BA

2 Label

Function Function

Label

Function Function

2Label

FunctionFunction

1 2 3

C

Function Function Function

Study Controls

❖ Randomized Screen Order

❖ Randomized Readings

❖ Varied content across screens

Status 1

15Label

!

FunctionFunction 1

A B

Status 2

34Label

FunctionFunction 2

Results

Font Size

Large – 94.4% Small – 94.2%

Both font sizes were read accurately

Status

15Label

!

FunctionFunction

Status

15Label

!

Function Function

Results

Top & Bottom – 96% Bottom Only – 94%

Control DesignTop & Bottom was slightly easier to read

Status

15Label

!

FunctionFunction

Status

15Label

!

FunctionFunction

- +

Results

Control Design

Graphics Only – 96% Graphics + Text – 100%

Graphics + Text was read most accurately

Status

Label

FunctionFunction

Status

Label

FunctionFunction

LOW

Function Function

Results

Status Design

BA C

Simple, high contrast indicators were read more accurately

83% to 96% accuracy

2 Label

Function Function

Label

Function Function

2Label

FunctionFunction

1 2 3

Function Function Function

❖ ds

In Summary❖ Multi-Disciplinary Team❖ User Centered Design

Process❖ Design Principles❖ Design Evaluation

❖ ds

Thank You!

Shannon Halgren, PhD Lea Cuniberti-DuranChief HF/UX Consultant Sr. UX Designershannon@sage-research.com lea@sage-research.com

Sage Research & Design, LLC