Eliminating the Odd

Eliminating The Odd

Eliminating
The Odd

An Introduction toInterface Design Concepts

October 26, 2009BAWorld Vancouver

Kirk BridgerMcKesson Medical Imaging

Learning Points

Describe a number of interface design concepts

Relate interface design concepts to business analysis activities

Discuss the relationship between usability requirements and interface design

What is an
Odd Interface?

Motorola Razr

Clippythe Office Assistant

Motorola Razr http://my.opera.com/usability/blog/show.dml/169470 Meant to be used in conjunction with phone

Forces same interface limitations on user If buttons were sufficient on phone, wouldn't need application

phones are designed for calling ppl, not interacting with phone specifics

Subtle and unexpected differences in buttonsDifferent results when inputting via same interface

Some buttons are nonfunctional (no consistency)

Some new buttons

Unnecessary display of phone interface (no benefits)

Slide-out doesn't exist on phone, but provides most of the functionality

Icons are difficult to understand

Large amount of screen space wasted on non-functional interface

Clippy http://xenon.stanford.edu/~lswartz/paperclip/paperclip.pdf

Designed for basic users, but basic users don't use software to help them

Often found to be intrusive, useless, and entertainment vs. useful

Session Outline

Interface Design Concepts8 Golden Rules

Business Analysis and UsabilityWhat Is Usability

3 Key Considerations

Usability And UI DesignSoftware Requirements

Usability Testing

8 Golden Rules
of Interface Design

Strive for consistency

12345678Interface design conceptsReduce short-term memory load

Support internal locus of control

Permit easy reversal of actions

Offer error prevention and simple error handling

Design dialogues to yield closure

Offer informative feedback

Enable frequent users to use shortcuts

Links for fleshing out explanationshttp://www.ja-sig.org/wiki/display/UPC/Usability+Heuristics

Professor Shneidermans rules were chosen:Applicability across mediums and technology

His desire to include context in design

Universal usability

Conducted fundamental research in field of human-computer interaction

http://en.wikipedia.org/wiki/Ben_Shneiderman

Strive For
Consistency

Similar situations = consistent sequences of actions

Leverage user's pre-existing knowledge

Internal consistencyTerminology used throughout product

Consistent text attributes throughout interface

External consistencyAcross products/applications

1Interface design conceptsInternal consistencyScreen layout from one screen to another

operations behave the same way

External consistencyFrom one application to another

Terminology used throughout productPrompts

Menus

Help screens

Documentation

Consistent text attributes throughout interfacecolor,

Layout

Capitalization

fonts

Screenshot by Brandon Walkinhttp://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/

GIMP Image EditorEvolution Mail ClientExternal ConsistencyClosing with unsaved data

GThumb Image Viewer

Interface design conceptshttp://www.actsofvolition.com/include/savealerts/screenshots.html (2005)

Bad:Button icon variety

Options are different

Dialogue icon different

GoodOrder of buttons

Microsoft Word

Microsoft Excel

Microsoft PowerPointExternal ConsistencyMicrosoft OfficesRibbon Interface

Why doesnt everyone like it?Internal consistency?Interface design conceptshttp://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/

Enable Frequent Users to
Use Shortcuts

As frequency of use increases, users desire to

Reduce number of interactions

Increase pace of interaction

Basically break some Golden Rules for the elite users

2Interface design conceptsIncrease the pace of interactionAbbreviations

Special keys

Hidden commands

Macros

Examples of
Shortcuts

Winkey+D = Show Desktop

Winkey+L = Lock screen

Sticky Keys (Shift x5)

Accelerators

Tab order in web forms

MS Excel's magic lasso

Interface design concepts

Informative Feedback

Inform user their action was received

Include feedback when something is complete

Make sure the feedback is

Informative

Clear

Concise

Scale degree of feedback based on action

Frequency

Importance

3Interface design concepts

Examples of
Feedback

Audible clue

Spinners

Hourglass cursor

Visible changes to interface elements

Progress bar


GThumb Image ViewerGIMP Image EditorEvolution Mail ClientDegree of FeedbackClosing with unsaved dataInterface design conceptshttp://www.actsofvolition.com/include/savealerts/screenshots.html (2005)

GThumbNo cancel

No title in window

Unclear what the checkbox does just this image or for ever?

Design Dialogues to
Yield Closure

Organize sequences of actions

Beginning

Middle

End

Ensure user knows when a conversation or task is at an endThey feel it is complete

Allows them to drop contingency plans

Puts them at ease

4Interface design concepts

Examples of
Closure

Delivery Information is doneThen Payment InformationThen Confirmation


Error Prevention
and Handling

Prevent errors

Avoid serious error possibilities

Opportunity to make your system look smart

Handle errors

Simple, constructive and specific instructions for recovery

5Interface design conceptsDisallowing input will typically conflict with giving the user the locus of control, particularly expert users

http://ethics.csc.ncsu.edu/risks/safety/killer_robot/killer_news5.html

Opportunity to make your system look smartData selection rather than typing

Autocomplete

Disallow alphabetic characters in numeric data fields

Directive text associated with date entry fields

E.g. Credit card: do not enter dashes

Caps lock notice when typing in hidden field

Error Handling
What Not To Do

Interface design conceptsUI Hall of Shame (oldie but a goodie) - http://homepage.mac.com/bradster/iarchitect/shame.htm

Tension Between
People and Errors

A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.Douglas Adams

Examine error contextFocus on serious errors

No user action should be considered an error that is beyond the ability of the system to manage.

Dr. Horace Gritty


Permit Easy
Reversal of Actions

Reduce anxiety of user via undo option

Ensure appropriate units of reversibility

Encourage exploration of interfaceHelps user become an expert

Provides Wow opportunities

To err is human, but to really foul things up requires a computer.Farmer's Almanac, 1978

6Interface design conceptshttp://ethics.csc.ncsu.edu/risks/safety/killer_robot/killer_news5.html

Reduces anxiety of user, as they know anything can be undone if they make a mistake.

Units of reversibility could be single action, data entry, or complete group of actions

Example of
Reversal

Photo editing application's undo options

Thumbnail

Action description

Instant access


Support an
Internal Locus of Control

Experienced users want to be in charge

Avoid tension and dissatisfaction

Surprising system actions

Tedious data entry

Make users the initiators of actions rather than responders.

Allow interruptions

People are just as happy as they make up their minds to be.Abraham Lincoln

7Interface design conceptsAvoid tension and dissatisfaction:Surprising system actionse.g. stealing focus unexpectedly

Tedious data entry

Inability or difficulty in obtaining necessary information

Inability to produce action desired

Examples of
Internal Locus of Control

Budget and Avis are going 100% smoke free!

Feedback form online

Auto-fill does not behave as expected

Error Dialogue how can I cancel here?


Reduce
Short-term Memory Load

Focus of attention = short term memory

Who's heard of the 7 +/- 2 rule?George Miller's The Magical Number Seven, Plus or Minus Two

Published in Psychology Review in 1956

8Interface design conceptshttp://wiki.linuxquestions.org/wiki/Usabilityhttp://www.humanfactors.com/downloads/sep00.asphttp://www.webword.com/moving/memory.htmlhttp://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two

Human mind can typically recall 7 +/- 2 items in short term memory

dont design with this assumption (Millers Magic 7 paper from 1956)

recent research shows more like 2 to 4 chunks


Find the most important ideas and present those to the user

Look for chunks of familiarity that leverage recognition not recall (familiarity and uniformity) (e.g. phone numbers prefix)

Design to facilitate recognition rather than recall memory

Begs the question what will they recognize?

Answer with mental models, metaphors

Provide a means to drill down to further-nested ideasVisible options, dropdown menus, etc

Take into account the ability to reduce memory load via proper training and practice

Back in 1956


Short-term Memory Load
(cont)

Users tend to ChunkGroup related items

Recode information

Recent research shows more like 2 4 chunks

Present the most important ideas to the user

Provide a means to drill down to further-nested ideas

Look for chunks of familiarity that leverage recognition not recallFamiliarity

Uniformity

8Interface design conceptshttp://wiki.linuxquestions.org/wiki/Usabilityhttp://www.humanfactors.com/downloads/sep00.asphttp://www.webword.com/moving/memory.htmlhttp://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two

Human mind can typically recall 7 +/- 2 items in short term memory

dont design with this assumption (Millers Magic 7 paper from 1956)

recent research shows more like 2 to 4 chunks


Find the most important ideas and present those to the user

Look for chunks of familiarity that leverage recognition not recall (familiarity and uniformity) (e.g. phone numbers prefix)

Design to facilitate recognition rather than recall memory

Begs the question what will they recognize?

Answer with mental models, metaphors

Provide a means to drill down to further-nested ideasVisible options, dropdown menus, etc

Take into account the ability to reduce memory load via proper training and practice

Examples of
Reducing Memory Load

Population stereotypes can be cuesLink colour (unvisited, visited)

Think twice about passwordsUses a chunk up

Pagination

Can make long articles easier to digest, reference

Consider cross-page recall

Makes finding, searching, scanning difficult

Hard to print or save

Interface design conceptshttp://www.webword.com/moving/memory.html

Bad: Pagination

Splitting content across multiple pagesConsider cross-page recall

annoying, purpose is ad revenue

does not work if have to recall info from other pages

Makes printing difficult

Makes finding/searching/scanning difficult

Possibly dilutes SEO incoming links

Avoid forcing users to memorize passwords Uses a chunk up

Browsers can do this unless explicitly not allowed to by site (banks etc)

Search engines shift recall to recognition

Link colour (blue unvisited, purple visited) population stereotype. Purple is a memory cue.

Present list of available files rather than ask them to type in the filename. Auto completion. Gallerys add items list of recently used folders?

A Very Powerful
Recognition Tool

Interface design conceptsNo need to recall website addressesSuggestions provide for tangential or indirect recallIf searching documents, no need to recall location or title

Golden Rule
Caveats

Schneiderman's 8 Golden Rules are widely-used

This is merely an introductionBroadly applicable

Fairly intuitive

Memorable

Other rules and lists exist


Session Outline





Usability Testing

How do we apply the design rules we've chosen to adhere to or use?

Business Analysis
And Usability

Business Analysis

Usability Analysis

B.A. & Usability

Usability
A Hot Topic

Do you Do It?

B.A. & Usability

Pop Quiz

Are any Golden Rules broken here?

B.A. & UsabilityConsistency does not exist between icons, both in appearance, visual style, as well as in metaphors usedColour usage may come up the colour is not relied upon to deliver the message though. Discussed later.

What Is Usability?

It dependsWhos asking?

Whos answering?

My usability is not your usability

Lets define it for this session

B.A. & Usability

Usability Is

A quality attribute that assesses how easy user interfaces are to use.

The study of the principles behind an object's perceived efficiency or elegance.

A technique used to evaluate a product by testing it on users.

A design philosophy rooted in the idea that users must take center-stage in the design of any computer system.

B.A. & Usability Jacob Nielsen - http://www.useit.com/alertbox/20030825.html

Usability - Wikipedia - http://en.wikipedia.org/wiki/Usability

Usability testing Wikipedia - http://en.wikipedia.org/wiki/Usability_testing

UCD Wikipedia - http://en.wikipedia.org/wiki/User-centered_design

Usability Is
(cont)

A technique meant to make the user's interaction as simple and efficient as possible.

1) and 5)

All of the above, excluding 4)

B.A. & Usabilitye) UI Design Wikipedia - http://en.wikipedia.org/wiki/User_interface_design

Was That Poll
Usable?

Not just the screen layout, widgets, font size, colours,etc

Also involved:

Application used to display it

Context of use

Nature of the interactions between the user and the system

Number of items

Complexity of each item

Item descriptions are difficult to differentiate

B.A. & UsabilityGolden Rules how many broken?Consistency

Shortcuts

Informative feedback

Yield closure

Error prevention and handling

Easy reversal of actions

Internal locus of control

Reduce short-term memory load

Also involved:The application used to display itUsers expectation for how presentation slides work and are typically presented

The settinglarge enough to see

only one screen visible at a time

The nature of the interactions between the user and the system1 slide on a screen at a time

Requiring people to remember items without giving them time to memorize or advance notice

The number of items was too large to remember them, and they weren't clearly different

Reflection

Usability is not (just) about widgets on the screen

Usability incorporates the user, their environment, other tools and systems, workflow, and their goals/tasks.

B.A. & Usability

Usability
Our Definition

The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.

ISO 9241-11

B.A. & Usability

Business Analysis typically incorporates elements of Usability Analysis

Usability Analysis should focus on 3 general considerationsUsers

Tasks

Context

Business Analysis
And Usability

B.A. & Usability

Understand
Your Users

Who are the users?

General background

What do they know?

What can they realistically learn?

Cognitive approach considerations

Physical ability

Accessibility

B.A. & Usability - Users

Examples of
Accessibility

Colour blindnessInability to differentiate specific colours

Genetic basis

Design impactDo not rely on colour coding alone

Motion blindnessMotion perceived as a series of frames

Caused by brain injury

Design impactDo not assume motion is visible

Note: slow computers can result in a similar effect

B.A. & Usability - UsersRed/GreenBlue/yellowMonochromacy

Colour blindnessInability to differentiate specific colours

Genetic basis

Design impact:Do not rely on colour coding alone

Maybe the world is gray

Motion blindnessPerception of motion as a series of frames instead of fluid motion

Not genetic, caused by brain injury

Design impact:Motion is a very powerful visual attractant

Do not assume full motion is visible

Note: slow computers can result in a similar effect

Beware of
Colour Assumptions

A ubiquitous logo

Which letter(s) is/are red? Which letter(s) is/are green? Red/green deficitBlue/yellow deficit

B.A. & Usability - UsersThe colours here are not imperative to using GoogleThe point though is that colour should not be solely relied upon as it is not a constant across all users, particularly in emergent situations.

Deuteranope (red/green deficit)Tritanope (blue/yellow deficit)

Pop Quiz

Are there problems with these colours?

B.A. & Usability - UsersThe colour is not relied upon to deliver the message. Therefore is can be considered supplementary to the message. So essential question is about design choices.

Capturing
User Information

If is more important than HowPersonas

Actor definitions

User definitions

Demographic summaries

...

B.A. & Usability - Users

Usability
Our Definition


ISO 9241-11

B.A. & Usability

Understand
The Tasks

What do they need or want to do?Not a simple question

How much training is needed?

Can users easily accomplish their tasks?

Can users recover from errors?

What and how many errors do users make?

B.A. & Usability - TasksWhat do they need or want to do?

How much training is needed?

Can users easily accomplish their tasks

Can users recover from errors or does someone die?

What and how many errors do users make when interacting with the product or product to be replaced/improved?

Example of
Tasks

Cardiac defibrillatorLayman user

No training

Error recovery

Emergency situation

B.A. & Usability - Taskshttp://www.defibtech.com/products/index.html

Usability
Our Definition


ISO 9241-11

B.A. & Usability

Understand
The Context

What is the user's context?

Supporting materials available

What has to be left to the machine

Criticality of use

Physical influences

B.A. & Usability - ContextWhat is the user's context?

Supporting materials available

What has to be left to the machineInteractions with other systems

Criticality of useHow important is it to have it work right the first time? All the time?

Physical influencesPortability

Temperatures

Environment

Example of
Context

SA80 RifleB.A. & Usability - ContextSmall Arms for the 1980s intended to be standard issue for British Armed Forces

Gun designed without field tests and consideration for how and where it would be used

Gun design began in 1960s, prototypes trialed in mid 70s, production completed in 1994. Over 30 years in development and over 470 million pounds spent on design alone.

Quiz: what do these people all have in common?Stationary ammunition clip typically caught on clothing and fell out while soldier was running (e.g. during testing the full ammunition clip was only inserted once gun was at firing range)

Shooting from right side of body hot clips firing out one side of the gun made it impossible to shoot from the left shoulder

Other issues:Plastic would swell in rain, jamming safety switch on/off

Lubrication did not work in sandy conditions, causing jams

Went off when dropped

Safety catch broke when trigger pulled hard

Sent back for redesign rifles must be dependable and safe

Well-Designed
Interfaces

Reflect the user'sCapabilities

Needs

Tasks

Incorporate any physical constraints imposed by hardware and context of use

Achieve the business objectives of the system for which it is designed

Design withUsability in mind

B.A. & Usability

Session Outline





Usability Testing

Usability And
Software Requirements

Can usability be captured in software requirements?Business requirements seem too high level

User requirements seem too esoteric

What about software/system requirements?

User Interface Design!

Usability & UI Design

Interface Design
And Usability

Embed usability analysis/knowledge into every aspect of your system designPrototyping

Wireframes

UI Specs & Rationale

Information architecture

Layout, templates

Impact assessments of change requests

Etc


Usability Testing

UI Design can be testedPrototypes

Formal and informal usability testing

Usability Analysis feeds these activitiesUser selection

Test goals

Success criteria

Determine areas of focus


Dont Design
In The Dark

Business analysis usability information

Usability information software specifications

Usability information usability testing

Q: How do you create a successful design without usability information?

A: You don't, or you end up with something a little Odd


Learning Points

Describe a number of interface design concepts

Relate interface design concepts to business analysis activities

Discuss the relationship between usability requirements and interface design

Speaker Tool
Handout

User Experience Honeycomb(Peter Morville)

Design and User Experience Approach Links Design @ IBM

User Experience Design at Google

Microsoft User Experience Interaction Guidelines

Apple Human Interface Guidelines

Gnome Human Interface Guidelines

KDE Development Guidelines

Jacob Nielsen's Ten Usability Heuristics

Conclusions

Design Concepts exist and are useful in Business Analysis

Business analysis typically involves Usability analysis

Usability analysis results are an important part of your interface design

Thank You &
Questions

OK/Cancel - Cultural Sensibilities

Resources

VisCheck - Colour Blindness Website Filter

Eliminating the Odd

Entertainment & Humor

Transcript of Eliminating the Odd