Interaction patterns: NOT your Average Design Patterns

May 2012

Interaction Patterns
NOT your average design patterns

978.823.0100

David B. Rondeau, Design Chair 2352 Main Street, Suite 302
Concord, MA 01742
david.rondeau@incontextdesign.com
Twitter: dbrondeau www.incontextdesign.com
www.innovationincool.com
Twitter: incontextdesign
© 2012 InContext Enterprises Inc. All rights reserved.


Design patterns

What are Interaction Patterns?



What is interaction design?

 Space



 Space

 Controls


Patterns – 6 notes

Back/Forward View Sync Usage Trunk New Note Search

Hide All Notes Notebooks Tags Web Clips Mobile Files

Account Shared Created Title Updated
Today, 10:46 AM LukeW | Multi-Device Layout Patterns Today, 10:52 AM

 Space
NOTEBOOKS Today, 10:47 AM LukeW | 12 Standard Screen Patterns Today, 10:51 AM
All Notebooks 543 Sep 23, 2011 3:52 PM Components Versus Patterns September 23, 2011 3:52 P
dbrondeau’s notebook 10 Sep 23, 2011 3:38 PM Using interaction design patterns to clarify and push September 23, 2011 3:38 P
Design Stack July 23, 2010 10:50 AM Dark Patterns: dirty tricks designers use to make people do stuff– 90 Percent of Ev… July 23, 2011 10:50 AM

 Controls Blog 21
Design 63
May 20, 2010 12:05 AM A List Apart: Articles: Design Patterns: Faceted Navigation May 20, 2010 12:05 AM

Design Curriculum 13

 Content
Design Log 38
Patterns 6
Genealogy 12
LukeW | Multi-Device Layout Patterns
Personal Stack
To Read 28 Patterns click to add tags
To Share 31
Created: May 4, 2012 Updated: May 4, 2012 www.lukew.com
TAGS
3D Printing 3
Advertising 4
Aesthetics 2
Augmented Reality 23 Image
Automobiles 11
SAVED SEARCHES Logo

Multi-Device Layout Patterns
March 14, 2012 by Luke Wroblewski

Image Through fluid grids and media query adjustments, responsive design enables W eb page
layouts to adapt to a variety of screen sizes. As more designers embrace this
technique, we're not only seeing a lot of innovation but the emergence of clear patterns
as well. I cataloged what seem to be the most popular of these patterns for adaptable


Patterns – 6 notes

Back/Forward View Sync Usage Trunk New Note Search

Hide All Notes Notebooks Tags Web Clips Mobile Files

Account Shared Created Title Updated
Today, a tag AM
Find 10:46 LukeW | Multi-Device Layout Patterns Today, 10:52 AM

 Space
NOTEBOOKS Today, 10:47 AM LukeW | 12 Standard Screen Patterns Today, 10:51 AM
All Notebooks 543 Sep3D printing 3:52 PM
23, 2011 Components Versus Patterns September 23, 2011 3:52 P
dbrondeau’s notebook 10 Sep 23, 2011 3:38 PM Using interaction design patterns to clarify and push September 23, 2011 3:38 P
Advertising
Design Stack July 23, 2010 10:50 AM Dark Patterns: dirty tricks designers use to make people do stuff– 90 Percent of Ev… July 23, 2011 10:50 AM

 Controls
Aesthetics
Blog 21 May 20, 2010 12:05 AM A List Apart: Articles: Design Patterns: Faceted Navigation May 20, 2010 12:05 AM
Augmented Reality
Design 63
Automobiles
Design Curriculum 13
behavior

 Content
Design Log 38
books
Patterns 6
charity
Genealogy 12
LukeW | Multi-Device Layout Patterns
Coaching
Personal Stack

 Interaction To Read 28
To Share 31
Conference
Patterns
Constraints
click to add tags

Consumer
Created: May 4, 2012 Updated: May 4, 2012 www.lukew.com
TAGS
cool
3D Printing 3
Course
Advertising 4
creativity
Aesthetics 2
criticism
Augmented Reality 23 Image
Css3
Automobiles 11
design share
SAVED SEARCHES Logo
design thinking
edge cases
Education

Multi-Device Layout Patterns
Elderly
Frameworks
Gesture
March 14, 2012 by Luke Wroblewski

Image Through fluid grids and media query adjustments, responsive design enables W eb page
layouts to adapt to a variety of screen sizes. As more designers embrace this
technique, we're not only seeing a lot of innovation but the emergence of clear patterns
as well. I cataloged what seem to be the most popular of these patterns for adaptable


Components of design
Logo f with Facebook Join | About | Login

GO
All Technology World & Business Science Gaming Lifestyle Entertainment Sports Offbeat
Artist/Group advanced search

Popular Upcoming | News Videos Images | Customize

NOTEBOOKS Worse, the touch screen is balky and nonresponsive, even for the
All Notebooks 543 Nook product manager who demonstrated it for me. The only
thing slower than the color strip is the main screen above it. Even
dbrondeau’s notebook 10
though it’s exactly the same E Ink technology that the Kindle and
Design Stack Sony Readers use, the Nook’s screen is achingly slower than the
Blog 21 Kindle’s. It takes nearly three seconds to turn a page — three
Design 63
Arial 14 A
times longer than the Kindle — whichAis really disruptive if you’re
A
in midsentence.
Design Curriculum 13 B I ABC A
Design Log 38 Often, you tap some button on the color strip — and nothing
Patterns 6 happens. You wait for the Nook to respond, but there’s no
Genealogy 12 progress bar, no hourglass, no indication that the Nook ―heard‖
you. So you tap again — but now you’ve just triggered a second PLAY
Personal Stack
command that you didn’t want.
To Read 28
To Share 31 It takes four seconds for the Settings panel to open, 18 seconds
for the bookstore to appear (over Wi-Fi), and 8 to 15 seconds to
open a book or newspaper for the first time, during which you
stare at a message that says ―Formatting.‖

05:02
HD

Add Bookmark
Name Genre Artist Album by Artist Time Rating
Add to Home Screen 1 Blue Thunder Indie Pop Galaxie 500 On Fire 3:48
2 Tell Me Indie Pop Galaxie 500 On Fire 3:52
*****
3 Snowstorm Indie Pop Galaxie 500 On Fire 5:13 ****
Mail Link to this Page 4 Strange Indie Pop Galaxie 500 On Fire 3:18 *****
5 When Will You Come Home Indie Pop Galaxie 500 On Fire 5:22 *****
Print 6 Decomposing Trees Indie Pop Galaxie 500 On Fire 4:07 *****
7 Another Day Indie Pop Galaxie 500 On Fire 3:43 *****
8 Leave The Planet Indie Pop Galaxie 500 On Fire 2:42 ****
9
10
Plastic Bird
Isn’t It A Pity
Indie Pop
Indie Pop
Galaxie
Galaxie
500
500
On Fire
On Fire
3:18
5:11
****
****
*****


A screen is made up of components


A screen is made up of components

Assorted Tools Simple Search

Filter Content
Section Navigation

Item List (Table)

Collection List

Item Summary Info

Tag List

Save Searches List

Content Item

Advertising

Toolbar


Components are organized into sections
Tool Section

Filter Content
Section Navigation
Navigation Navigation Section
Section
Item List (Table)

Collection List

Primary Content Section
Item Summary Info

Tag List

Save Searches List

Content Item

Advertising

Toolbar


Screen patterns
Name of pattern: Collected Content

Tool Section

Filter Content
Components
+ Sections Navigation Section Navigation Section
Section Navigation Item List (Table)
= Screen
Collection List
Pattern

Tag List Primary Content Section

Saved Searches Item Summary Info

Content Item
Advertising

Toolbar

Purpose: Collect and manage digital content
Used by: Collect Content – List View


Combine to create subsystems
Manage Content Subsystem
Add/Edit Item Utility
Collected Content Collected Content
Tool Section
Tool Section Tool Section
Navigation Navigation Section

 Component Section
Navigation Navigation Section Navigation
Section
Navigation
Section
Primary
Content
Section
Add/Edit Item Section

 Section
Section
Primary Content Section
or
 Screen
Searchable Filter Utility
 Subsystem Tool Section

Searchable Item List
• List View • Detail List View
•Thumbnail View

Any Screen External Content
Customize Utility
Tool Section
Customize Toolbar

Any Screen


Combine to create whole systems

System Pattern
Sharing Subsystem
Manage Content Subsystem
 Component Add/Edit Item Collected Content
Manage
Sharing
Sharing Invite &
Confirmation
Invitation Email
Utility

 Section

 Screen Searchable Filter
Utility

 Subsystem Registration
Utility
Usage Info Utility
 System Customize Utility

External Content

Marketplace Subsystem

Marketplace Product
Detail


Interaction patterns apply everywhere

How Do You Use Them?



Our design process

Step of Process Interaction Design Patterns
Heuristic evaluation Reveal structural problems
Provide focus for user interviews
Vision new concepts Help define scope
Create storyboards Push design thinking
Improve structural thinking
Document system functions Provide way to organize functions by place,
section, and component
Build paper prototypes Maintain coherent structure
Reveal structural problems
Make design changes Provide way to organize issues by place,
section, and component
Help resolve high-level structural issues first
Deliver design recommendations Communicate structure of design for
implementation and future expansion


Identify structural problems


Understand new interaction paradigms

Primary Navigation
Sketch the structure and transitions Item List Author Info

Ask yourself:
 What is it?
• Sliding content panels
 How is it different?
• Don’t go to content, it’s brought to me
 Why does it behave this way?
• There’s a lot of drilldown and linking
 Is this a good solution to this problem?
• Yes
 Why is it a good solution?
• It maximizes space and makes it easy to
browse content
 Does it fit my situation?
 Where else might it apply?


Push your design thinking

Decide where you need fresh thinking
 Typically screen or component level
Identify 3-4 products in different
domains that support same intent
 For example: Designing search application
for lawyers and adding ability to create and
share collections of content
• Analyze Amazon’s Wish List, Evernote, and
Picasa

Quickly sketch interaction patterns
 Focus only on what is relevant, not entire
system
Identify what works and what doesn’t
 Look for new structure, function, and
interaction styles
 Based on understanding user needs


Other benefits

Better communication
 Create shared understanding
 Using a common design language
 Faster and more productive design discussions
Maintain a coherent and consistent design
 Across products, systems, and devices
Create designs faster
 Easier to modify and extend your design without breaking it
 Don’t have to start from scratch or reinvent the wheel


Do what works

Sketch the patterns yourself

Think structurally

Don’t start from scratch

Create shared understanding

Design from principles, not rules


Don’t miss our upcoming workshop:
What Makes Things Cool
Intentionally Design for Cool — Create a
transformative experience with your products

When: June 20th – June 21st
Where: San Francisco, CA
Presenter: Karen Holtzblatt
For more information go to:
www.incontextdesign.com

“The only method I have seen that really tells you how
to go out and collect customer data, and then what to
do about it.‖ - Don Norman
“The only generative method in the field.”
- Ben Shneiderman

David B. Rondeau, Design Chair
david.rondeau@incontextdesign.com
twitter: dbrondeau


Interaction patterns: NOT your Average Design Patterns

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Recently uploaded

Recently uploaded (20)

Interaction patterns: NOT your Average Design Patterns