Transcript Soarian™ User Interface

1
Managing Design Processes

Designs should be based on:
 Observation of users
 Task frequencies and sequences
 Validation via early usability testing and acceptance tests

Iterative Design
 Early test of low-fidelity prototypes
 Revisions based on user feedback
 Incremental refinements based on usability testing

Organizational Support of Usability
 When competing products have similar functionality usability is often a
differentiator
2
Managing Design Processes

Developing support for User Centered Design
 ROI – Return on investment
 Decreased training time (transfer of training)
 Faster task completion time (e.g., short-cuts, Intellisense, navigation)
 Fewer errors (required fields, error correction)
 Increased customer retention
 Increased market share
 Fewer returned products
3
Managing Design Processes

Know you audience or “The 7 Habits of Spectacularly Unsuccessful Executives”
1.
They see themselves and their companies as dominating their environment
– A lack of respect
2.
They identify so completely with the company that there is no clear boundary between
their personal interests and their corporation’s interests
– A question of character
3.
They think they have all the answers
– Leader without followers
4.
They ruthlessly eliminate anyone who isn’t completely behind them
– Executive departures
5.
They are consummate spokespersons, obsessed with the company image
– Blatant attention-seeking
6.
They underestimate obstacles
– Excessive hype
7.
They stubbornly rely on what worked for them in the past
– Constantly referring to what worked in the past
4
Managing Design Processes

Waterfall
 Analysis
 Development
 Test
 Deploy

Agile
 Integrated team
 Sprints & Releases
 Backlog
 Points
Scrumming
http://www.youtube.com/watc
h?v=kYajjGi5qM&kw=agile&ad=791400673
1&feature=pyv
http://www.youtube.com/watch
?v=OJflDE6OaSc&feature=rela
ted
Analysis
Develop
Test
Deploy
5
Managing Design Processes

UI Group Organization
 Centralized vs. Decentralized
• The analysis work
• Usability testing
• Resource allocation
• Budgets & schedules
• Guidelines
– Education
– Enforcement
– Exemption
– Enhancement
• International Teams
6
Patterns in the Design Process
A
B
B
E
G
C
C
A
D
B
C
D
E
A
F
D
F
H
G
H
7
Managing Design Processes
Pattern for multi-tasking across windows
Pattern for multi-tasking across windows
8
Managing Design Processes
Pattern for multi-tasking across windows
9
Managing Design Processes
Start-Menu Pattern – Launch Applications
Launch Applications Pattern - XP
10
Patterns in the Design Process
Context
The user goal (e.g., add
a new patient)
Workflow
Chain of behaviors (e.g.,
add a phone number)
Pattern
Specific behaviors
(e.g., click on Edit
button to edit fields)
Grouping
A collection of
components
Component
What is design efficiency of a pattern?
How does it relate to time and errors?
Patterns in the Design Process
Pt. Demographics:
Personal Information
Add New PCP
Adding a Pt’s HP
Select Role
Searching for an HP
Populate
Select
Find
Add New
Results of Search
HP Details
Add New HP
Populate
Enter Data/OK
Foreign Addr.
11
Patterns in the Design Process
12
13
Managing Design Processes

The Three Pillars of Design (Pillar 1)

Guidelines, Documents and Processes
•
Apple/Windows
•
Words, Icons and Graphics
– Terminology, Character Set
– Icons, Buttons, Color
•
Screen Layout
– Menu selection, Form Fillin, Dialog Formats
– Wording, Spacing
•
Input/Output Devices (Mouse, Keyboard)
•
Action Sequences and Patterns
– Direct Manipulation, drag/drop
– Short-cuts
– Error Handling

User Interface Software Tools

Expert Reviews & Usability Testing
14
Managing Design Processes

Guidelines (Pillar 1)
 Social process involving developers
 Records decisions
 Promotes consistency and completeness
 Levels
• Rigid standards
• Accepted practices
• Flexible guidelines
 Policies
• Education – how to provide it
• Enforcement – who reviews
• Exemption – who decides (e.g., new technology)
• Enhancement – how often
15
Managing Design Processes

User-interface software tools (Pillar 2)
 Macromedia Flash
 Microsoft Visual Basic
 Revolution

Expert Reviews and Usability Testing (Pillar 3)
 Controlled experiments
16
Managing Design Processes

Development Methodologies

Ethnographic Observation
• Preparation
– Understand policies and work culture
– Learn about the system and its history
– Prepare questions
– Get permission to observe/interview
• Field Study
– Establish rapport with managers and users
– Observe/Interview users in the workplace
» Collect subjective/objective, quantitative/qualitative data
» Rating scales, rankings, critical incidents
• Analysis
– Compile data in numerical, textual and multimedia databases
– Reduce and interpret data
• Reporting
17
Managing Design Processes

Development Methodologies
 Participatory Design
• Plastic Interface for Collaborative Technology Initiatives through Video
Exploration (PICTIVE)
• Physical cut-outs of UI objects
• Walk through a scenario and video tape
• User develops a stake in the design
• Cost of time
 Druin’s Model of Four Levels of User Participation
• User
• Tester
• Informant
• Design Partner
18
Managing Design Processes

Development Methodologies
 Scenario Development – Task Frequency
Role
Collects
Demo Info
Collects Ins.
Info
Accesses
National DBs
Face-to-Face
with Pt.
Bed Board
User
EMS
Interaction
IP Reg
Yes
Yes
No
7 minutes
No
No
ER Reg
Yes
Yes
No
4 minutes
No
No
Pt. Loc
No
No
No
No
Yes
Yes
Med Rec
No
No
Yes
No
No
No
IDX Sched
Yes
Yes
No
No
No
No
Enc Prep
Yes
Yes
No
No
No
No
Financial
Counseling
No
No
Yes
Yes
No
No
Radiology
Reg
Yes
Yes
No
7 minutes
No
No
Transplants
No
No
Yes
No
No
No
Dispatch
No
No
No
No
No
Yes
19
Managing Design Processes

Development Methodologies
 Scenario Development – App Frequency
20
Managing Design Processes

Development Methodologies
 Scenario Development
• A day-in-the-life scenario (users performing a typical task)
• Collect data regarding current performance
• New systems – write scenarios and then act them out
• Tognazzini at Sun Microsystems - Starfire Project
– http://www.idemployee.id.tue.nl/g.w.m.rauterberg/movies/SUN-Starfire.mpg
• What functions are being portrayed in the video?
• What are the alternatives today?
21
Managing Design Processes

Development Methodologies
 Diary Study
•
Participants go about their normal lives
•
Except that they report (in an electronic or paper diary) at some interval, signal, or event, what
they’ve done or experienced (via questionnaire or freeform),
•
They do this multiple times over days or weeks.
22
Managing Design Processes

Development Methodologies
 Social Impact Statements for Early Design Review
• “Technopoly eliminates alternatives to itself. It consists in the deification of technology,
which means that the culture seeks its authorization in technology, finds its satisfactions
in technology, and takes its orders from technology” (Postman 1993)
• Issues to consider:
– Convey the high level goals of the new system
– Identify the stakeholders
– Identify the benefits
– Anticipate changes in job functions and potential layoffs
– Address security and privacy issues
– Preserve democratic principles
– Review the impact statement with a panel with authority for enforcement (GAO,
NRC, FAA)
23
Managing Design Processes

Development Methodologies

Legal Issues
• Privacy related to data storage or monitoring by computers
• Avoid illegal tampering, inadvertent loss, malicious mischief
– Medical, Legal, Financial
• Safety and Reliability
– Aircraft, automobiles, medical equipment, utility control rooms
– Copyright or patent protection for software
» Open Source Initiative – “when programmers can read, redistribute, and
modify the source code for a piece of software, the software evolves.”
– Copyright protection for online information, images or music
– Freedom of speech in electronic environments
» Should network operators be responsible for or prohibited from
eliminating offensive or obscene jokes, stories, or images?
– Equal access to computers for disabled users

Consider the legal implications of your design decisions (intellectual property)
24
Managing Design Processes

Speaking of legal

Apple, Samsung, Google patent war (Oct 2011)

Steve Jobs: ”I’m going to destroy Android, because
it’s a stolen product. I’m willing to go thermonuclear
war on this.”

Google co-founder Eric Schmidt sat on the board of
Apple for many years

The future of many phone makers, especially
Samsung, and the future of Google’s rising influence
in the mobile OS business would all be at stake

OR - Apple’s underhanded attempt to stymie
competition in the mobile and tablet markets and
protect its iPad and iPhone dominance
25
Graphical Screen Design
by Saul Greenberg
CRAP – contrast, repetition, alignment, proximity
Grids are an essential tool for graphical design
Other visual design concepts
consistency
relationships
organization
navigational cues
legibility and readability
appropriate imagery
familiar idioms
Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press
Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained.
Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.
Contrast, Repetition, Alignment and Proximity
 Contrast

make different things different

brings out dominant elements

mutes lesser elements
 Repetition

repeat design throughout the interface

consistency

creates unity
 Alignment

visually connects elements

creates a visual flow
 Proximity

groups related elements

separates unrelated ones
Robin Williams Non-Designers Design Book, Peachpit Press
26
27
Contrast, Repetition, Alignment and Proximity
Original
28
Contrast, Repetition, Alignment and Proximity
Proximity
•Groups related elements
•Separate unrelated ones
Move
Separate
Separate
Group
Group
Group
29
Contrast, Repetition, Alignment and Proximity
Alignment
•visually connect elements
•create a visual flow
Move
Move
Move
30
Contrast, Repetition, Alignment and Proximity
Contrast
•make different things
different
•brings out dominant
Elements
Font
•mutes lesser elements
Font
Font
Font
Color
31
Contrast, Repetition, Alignment and Proximity
Repetition
•repeat design throughout
the interface
•consistency
Font
Font
32
Grids
 Horizontal and vertical lines to locate window components
 aligns related components
Format of
variable
contents
 Organization
 contrast for dominant elements
 element groupings by proximity
 organizational structure
Standard
icon set
 alignment
 Consistency
Message text in
Arial 14, left
adjusted
Widget to
widget
spacing
 location
No
Ok
 format
 element repetition
 organization
window to
widget
spacing
Fixed
components
33
Grids
Two-level Hierarchy
•indentation
•contrast
Alignment connects
visual elements in a
sequence
Logic of organizational
flow
Grouping
by white
space
34
Visual Consistency (Repetition)
 internal consistency
 elements follow same conventions and rules
 set of application-specific grids enforce this
 external consistency
 follow platform and interface style conventions
 use platform and widget-specific grids

deviate only when it provides a clear benefit to user
Warning
Help
?
mmmm mmm
mmm mmm
Okay
!
mmmm mmm
mmm
Okay

Tip of the day: Monday, Mar 12
mmmm mmm
mmm
Dismiss

35
Relating Screen Elements
 proximal clusters
 alignment
 white (negative) space
 explicit structure
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:

Mmmm:
Mmmm:
Mmmm:

36
Example of Bad Layout
No regard for order and
organization
Mullet & Sano
37
Example of Bad Layout
Mullet & Sano
38
Improved Layout
39
Example of Bad Design
Overuse of 3-d effects makes the window unnecessarily cluttered
WebForms
40
Example of Bad Design
How do you chose when you cannot discriminate
screen elements from each other?
GIF Construction Set
Microsoft Access 2.0
41
Navigational cues
 Provide initial focus
 Direct attention as appropriate to important secondary, or peripheral
items as appropriate
 Order should follow a user’s conceptual model of sequences


42
Economy of Visual Elements
 minimize number of controls
 include only those that are necessary
 eliminate, or relegate others to secondary windows
 minimize clutter
 so information is not hidden
MMMM
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
NNNN
MMMM
xxx: ____
xxx: ____
xxx: ____
NNNN
xxx: ____
xxx: ____
xxx: ____

xxx: ____

Mullet & Sano
43
Reduce Excessive Display Density
44
Legibility and Readability
 Characters, symbols, graphical elements should be easily noticable
and distinguishable
Text set in
Helvetica
Text set in
Times Roman

TEXT SET IN
CAPITOLS
Text set in
Braggadocio
Text set in
Courier

45
Legibility and Readability
 Proper use of typography
 1-2 typefaces (3 max)
 normal, italics, bold
 1-3 sizes max
Large
Medium
Small
Readable
Unreadable
Design components to be
inviting and attractive
Design components to be
inviting and attractive
Design components to be
inviting and attractive
Design components to be
inviting and attractive


46
Legibility and Readability
 typesetting
 point size
 word and line spacing
 line length
 Indentation
 color
Readable
Design components to be
inviting and attractive
Design components to be
inviting and attractive

Unreadable: Design components
to be easy to interpret and
understand. Design components to
be inviting and attractive

47
Legibility and Readability and Significance
These choices must be really important,
or are they?
Time & Chaos
48
Legibility and Readability and Significance
Regional preferences in Windows 95
Greyed-out example text hard to read.
Why not make it black?
49
Legibility and Readability
Microsoft Word
Text orientation
difficult to read
50
Imagery
 Signs, icons, symbols
 right choice within spectrum from concrete to abstract
 Icon design very hard
 except for most familiar, always label them
 Image position and type should be related
 image “family”
 Consistent and relevant image use
 identifies situations, offerings...
Partial icon family
51
Imagery
What do these images mean?
• no tooltips included
• one of the tabs is a glossary explaining these images!
which one?
Novell GroupWise 5.1
52
Idioms
 Familiar ways of using GUI components
 appropriate for casual to expert users
 builds upon computer literacy
 must be applied carefully in walk up and use systems
Window manipulation
Files
Standard
typographic controls
Toolbars and tooltips
What you see is what you get
displays
Microsoft Powerpoint
Pulldown menus
Dialog box item
Cascading menu