Patterns Revisited Connecting 07 San Francisco, CA, USA October 19, 2007 Barbara Ballard David Malouf

Who are we? Barbara Ballard Little Springs Design Designing the Mobile User Experience (Wiley 2007) Mobile User Experience Consultant David Malouf Motorola Enterprise Mobility VP/Founder Interaction Design Association (IxDA) Interaction Designer

Barbara Ballard

Little Springs Design

Designing the Mobile User Experience (Wiley 2007)

Mobile User Experience Consultant

David Malouf

Motorola Enterprise Mobility

VP/Founder Interaction Design Association (IxDA)

Interaction Designer

The talk Defining patterns Where they come from What they are What they aren’t Examples of patterns Software patterns Hardware patterns Context patterns Case Study

Defining patterns

Where they come from

What they are

What they aren’t

Examples of patterns

Software patterns

Hardware patterns

Context patterns

Case Study

Patterns through time Christopher Alexander Canonical Solutions If-then proposition String patterns together to create a pattern language Software Engineers use it for “re-use” UX Designers use it for “best practices” Standards, guidelines, styles, patterns Not the same thing

Christopher Alexander

Canonical Solutions

If-then proposition

String patterns together to create a pattern language

Software Engineers use it for “re-use”

UX Designers use it for “best practices”

Standards, guidelines, styles, patterns

Not the same thing

The beginning Christopher Alexander Patterns organize implicit knowledge about how people solve recurring problems when they go about building things. Language When you build something you can put patterns together to form a language. Changing the world http://patternlanguage.com/

Christopher Alexander

Patterns organize implicit knowledge about how people solve recurring problems when they go about building things.

Language When you build something you can put patterns together to form a language.

Changing the world http://patternlanguage.com/

Examples – Squares

Examples – Entries

Evolution of Patterns Software Engineers 1995 Focus on Re-use

Software Engineers

1995

Focus on Re-use

Evolution of Patterns User Interface Design Collection of best practices Other sources: Mobile Pattern Library http://patterns.littlespringsdesign.com/ Yahoo Pattern Library http://developer.yahoo.com/ypatterns/ Interaction Design Patterns http://www.welie.com/patterns/

User Interface Design

Collection of best practices

Other sources:

Mobile Pattern Library http://patterns.littlespringsdesign.com/

Yahoo Pattern Library http://developer.yahoo.com/ypatterns/

Interaction Design Patterns http://www.welie.com/patterns/

What aren’t patterns … Standards Design constraints for interfacing between separately built components Kitchens Electrical Requirements What you have to do. Sometimes these are standards; often not. They are also sometimes called “design constraints” Logo police Guidelines Suggestions to maintain relationships between separately built components Style Guide Heuristics Individual judgment used to justify decisions

Standards

Design constraints for interfacing between separately built components

Kitchens

Electrical

Requirements

What you have to do. Sometimes these are standards; often not. They are also sometimes called “design constraints”

Logo police

Guidelines

Suggestions to maintain relationships between separately built components

Style Guide

Heuristics

Individual judgment used to justify decisions

How we want to use it Suggestions Reflections Points of reference Collaborative communication Used to maintain “the box” or move out from it. To be useful patterns have to explain “why?” (and why not?)

Suggestions

Reflections

Points of reference

Collaborative communication

Used to maintain “the box” or move out from it.

To be useful patterns have to explain “why?” (and why not?)

Let’s look at some examples

Software Examples Sports Scores score on left for easy scanning home team second victorious team bold (if available)‏ ranking after team name to avoid confusion with score

Sports Scores

score on left for easy scanning

home team second

victorious team bold (if available)‏

ranking after team name to avoid confusion with score

Software Examples Game Flow splash screen, main menu easy pause design focus on play of the game, not details Link different color (esp. blue)‏ underlined http://www.alink.com

Game Flow

splash screen, main menu

easy pause

design focus on play of the game, not details

Link

different color (esp. blue)‏

underlined

http://www.alink.com

Example: Signposting

Hardware patterns – Input types Keypads QWERTY/AZERTY Double-type 5-way/D-pad Shifting Phone number vs. calculator number Pointing devices Mouse Pen/Tablet Finger/Touch screen Click Wheel Touch pad Scroll wheel Buttons, knobs, switches, slider Soft keys

Keypads

QWERTY/AZERTY

Double-type

5-way/D-pad

Shifting

Phone number vs. calculator number

Pointing devices

Mouse

Pen/Tablet

Finger/Touch screen

Click Wheel

Touch pad

Scroll wheel

Buttons, knobs, switches, slider

Soft keys

Hardware patterns - Layouts Display over input Laptop handhelds Control left of display Car audio Steering wheel layout Wheel with horn Left side Turn signal Headlights Right side Wipers Watch layouts Analog Pin to the right of face, in line with data Digital Face surrounded by 4 buttons Sometimes 2 buttons under face

Display over input

Laptop

handhelds

Control left of display

Car audio

Steering wheel layout

Wheel with horn

Left side

Turn signal

Headlights

Right side

Wipers

Watch layouts

Analog

Pin to the right of face, in line with data

Digital

Face surrounded by 4 buttons

Sometimes 2 buttons under face

A new type of pattern

Context patterns Environmental elements Location Temperature Surrounding elements People/relationships Types of activities Description of user focus Stationary Transient Time Duration Period Concurrency

Environmental elements

Location

Temperature

Surrounding elements

People/relationships

Types of activities

Description of user focus

Stationary

Transient

Time

Duration

Period

Concurrency

Contextual Pattern - clinical Shared attributes Used on patient Sterile Mission critical

Shared attributes

Used on patient

Sterile

Mission critical

Context Pattern – Fixed > portable Device has 2 modal states of use Primarily fixed into a single location for stationary focused use Secondary portable use for short term, usually with transient focus Fixed state can also be mobile Mounted on a vehicle

Device has 2 modal states of use

Primarily fixed into a single location for stationary focused use

Secondary portable use for short term, usually with transient focus

Fixed state can also be mobile

Mounted on a vehicle

A pattern case study

Story of a Pattern Client had great content but uninspiring application Informational No engagement Not scalable Entertainment and commerce application Fun Purchase opportunities “ Take it to the next level” Standard list-based design not great Explored alternate concepts

Client had great content but uninspiring application

Informational

No engagement

Not scalable

Entertainment and commerce application

Fun

Purchase opportunities

“ Take it to the next level”

Standard list-based design not great

Explored alternate concepts

Pattern: carousels used for media and navigation

Constraints: Need to Modify Pattern Low processor & memory no image transformations only two image sizes Pre-loaded on handset any screen size (down to 128 x 128)‏ naïve users doesn't violate device conventions Transitory content purchase or delete Primary use of application

Low processor & memory

no image transformations

only two image sizes

Pre-loaded on handset

any screen size (down to 128 x 128)‏

naïve users

doesn't violate device conventions

Transitory content

purchase or delete

Primary use of application

Implemented Pattern

Benefits of Using Pattern Intuitive use of pattern Pattern not from “library” Had to fully explore pattern implications Facilitated competitive search Coverflow wouldn't work Discovered problems with small carousels Accelerated design process Examples of what worked elsewhere Provided structure within which to explore Enabled comparison against alternate solutions at a meta level

Intuitive use of pattern

Pattern not from “library”

Had to fully explore pattern implications

Facilitated competitive search

Coverflow wouldn't work

Discovered problems with small carousels

Accelerated design process

Examples of what worked elsewhere

Provided structure within which to explore

Enabled comparison against alternate solutions at a meta level

More Benefits Documentation & Collection Make sure that those who come after you understand the sources, inspirations, and reasons for your design Give future designers working on related projects the ability to create a stronger relationship with your work Build consistency within your products Create a language that can be tied to brand communication

Documentation & Collection

Make sure that those who come after you understand the sources, inspirations, and reasons for your design

Give future designers working on related projects the ability to create a stronger relationship with your work

Build consistency within your products

Create a language that can be tied to brand communication

Thank you Questions & Answers Barbara Ballard – [email_address] http://littlespringsdesign.com/ David Malouf – [email_address] http://synapticburn.com/ Interaction08 Join the international interaction design Community of IxDA at our inaugural conference. Savannah College of Art & Design (SCAD) Alan Cooper, Bill Buxton, Sigi Moeslinger, and Malcolm McCullough (and many more)

Questions & Answers

Barbara Ballard – [email_address]

http://littlespringsdesign.com/

David Malouf – [email_address]

http://synapticburn.com/