designing for information consumption at varied distances in the operating room: a cross-functional...
TRANSCRIPT
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 [email protected] [email protected]
Sage Research & Design, LLC