Interaction design patterns

INTERACTION DESIGN
PATTERNS
Grau en Enginyeria Informàtica
User Centred Design

Introduction
• Patterns were architectural concepts that
captured recurring design problems in urban
architecture.
• original definition of a pattern introduced by
architect Christopher Alexander.
• “Each pattern describes a problem which
occurs over and over again in our
environment, and then describes the core of
the solution to that problem, allowing the
designer to re-use this solution a million times
over“
Interaction Design Patterns - User Centred Design 2 / 23

• Patterns (and pattern languages for describing patterns)
are ways to describe best practices, explain
good designs, and capture experience in a way
that it is possible for others to reuse this experience
• Design pattern (computer science,
object-oriented Design Patterns) are
extensively used by software engineers
for design process as well as for
communicating a design to others

Memoria de Largo Plazo (MLP).
Long-Term Memory (LTM)
• The main thing that the characteristics of long-term
memory imply is that people need tools to augment it.
• Humankind has a need for technologies that augment
memory
• software designers should try to provide software that fulfills
that need.
• designers should avoid developing systems that burden
longterm memory
• Familiar paths (patterns):
• well-learned routes can be done fairly automatically and does not
consume attention and short-term memory.
• They are stored in LTM

Types of Design Patterns
• Visual Patterns
• In many ways, are the same as patterns in all visual design. Color patterns, the principles and
elements of design, and Gestalt theory are all sources of visual patterns, but a few are specific to
interactive design
• Layout Patterns
• Used in the arrangement of content on the page
• Common configurations and structures that make a design familiar and navigable for a wide
range of users
• Architectural Patterns
• Deal with the internal information architecture and any interactions that are designed to parse
that information
Hard relation with Information Architecture
• Interaction Patterns
• Communicate how an onscreen element can be manipulated to achieve a particular task or to
produce a desired result
• Conceptual Patterns
• Help the user build a mental model of the site and its functionality
• Are those that communicate the intended purpose and functionality of an interactive element
Difficult to explain: incorporated into all patterns (they may be completely visible …)

Interaction Design Patterns - User Centred Design
http://blog.teamtreehouse.com/10-user-interface-design-fundamentals#!
6 / 23

Interaction Design (ID) PATTERN
• An interaction design (ID) pattern is a general repeatable
solution to a commonly-occurring usability problem in
interface design or interaction design
[http://www.interaction-design.org/encyclopedia/interaction_design_patterns.html]
• User Interface Design patterns are recurring solutions
that solve common design problems. Design patterns
are standard reference points for the experienced user
interface designer.
[http://ui-patterns.com]
Be aware, here
problem ≠ error, instead
problem = challenge
7 / 23

Interaction Design (ID) PATTERN
• Also known as
• Interaction patterns
• User interface (UI) patterns
• Usability patterns
• Web design patterns
• Workflow patterns
• These patterns share a lot of similarities and basically all
provide solutions to usability problems in interaction
and interface design.
• Some patterns are known under different names (or even
the same name) in different pattern collections.

• A Pattern capture a common structure without being too
concrete on the details which gives the designer flexibility
to be creative
 it enables to put together something which “feels
familiar” while remaining original
• But ... Patterns ARE NOT
• Off-the-shelf components
• Each implementation of a pattern differs a little from every other
• Simple rules or heuristics (not a checklist)
• A step-by-step description of how to design an interface
[Jenifer Tydwell]

Requirements (to use UI Patterns)
• Field research
• System requirements
• Goal and Task Analysis
• to describe and clarify what users will do with what you’re building
• Design models, such as
• Personas (models of users)
• Scenarios (models of common task situations)
• Prototypes (models of the user interface itself)
• Empirical testing
• Usability testing, in/situ observations, …
• Time to iterate over several versions of the design
• You won-t get it right the first time !!

Usual Elements that describe a UI pattern
• Problem/s
• Problems are related to the usage of the system and are relevant to
the user or any other stakeholder that is interested in usability
• Use when
• a situation (in terms of the tasks, the users and the context of use)
giving rise to a usability problem.
• describing situations in which the problems occur
• Principle/s
• a pattern is usually based on one or more ergonomic principles such
as user guidance, or consistency, or error management
• Solution/s
• a proven solution to the problem
• the designer has the freedom to implement it in many ways
• Why
• a reasonable argument for the specified impact on usability when the
pattern is applied
• Examples and Implementation details

Pattern Collections
• Designing Interfaces
• Jenifer Tidwell
• O'Reilly Media; Second Edition edition
(January 6, 2011)
• http://designinginterfaces.com/firstedition
“Anyone who’s serious about designing
interfaces should have this book on their
shelf for reference. It’s the most
comprehensive cross-platform examination
of common interface patterns anywhere. ”
Dan Saffer
http://www.odannyboy.com
http://designinginterfaces.com/patterns
12 / 23

Pattern Collections
• Martijn van Welie
• http://www.welie.com

Pattern Collections
• http://developer.yahoo.com/ypatt
erns
• http://ui-patterns.com
• http://patternry.com
• http://quince.infragistics.com

“what users DO”
human behaviors patterns, not interface elements
• Safe exploration
• Let me explore without getting lost or getting into trouble
• Instant gratification
• I want to accomplish something now, not later
• Satisficing
• This is good enough. I don’t want to spend more time learning to do
it better
• Satisfying+sufficing: people accept “good enough” instead “best”
if learning the alternatives might cost time or effort
• Changes in midstream
• I changed my mind about what I was doing
• Habituation
• That works everywhere else; why doesn’t work here, too?
• .....

Pattern organization
• Organizing the Content
• Information Architecture and Application
Architecture
• Getting Around
• Navigation, Signposts and Wayfinding
• Organizing the Page
• Layout of Page Elements
• Doing things: Commands and
Actions
• Showing Complex Data
• Trees, Tables and Other Information
Graphics
• Getting Input From Users
• Forms and Controls
• Builders and Editors
• Making It Look Good
• Visual Style Aesthetics
• User needs
• Navigating around
• Basic interactions
• Searching
• Dealing with data
• Personalizing
• Shopping
• Making choices
• Giving input
• Miscelleaneous
• Application needs
• Drawing attention
• Feedback
• Simplifying interaction
• Context of design
• Site types
• Experiences
• Page types
http://www.welie.comhttp://designinginterfaces.com
17 / 23

Interaction Design Patterns - User Centred Designhttp://www.emdezine.com/how-to-write-an-interaction-design-pattern 18 / 23

For mobile UI design
Example: http://www.androidpatterns.com
19 / 23

For mobile UI design
http://pttrns.com
http://ios-patterns.com
20 / 23

Interesting readings
• 6 Popular Content Presentation Design Patterns
• http://sixrevisions.com/user-interface/6-popular-content-
presentation-design-patterns
• Progressive Disclosure in User Interfaces
• http://sixrevisions.com/user-interface/progressive-disclosure-in-
user-interfases
• Responsive Navigation Patterns
• http://bradfrost.com/blog/web/responsive-nav-patterns

https://delicious.com/tgranollers/patterns
• http://mobile.smashingmagazine.com/tag/design-patterns
• http://sixrevisions.com/user-interface/mobile-ui-design-
patterns-inspiration
• http://www.interaction-
design.org/encyclopedia/interaction_design_patterns.html
• http://en.wikipedia.org/wiki/Interaction_design_pattern
• 40+ Helpful Resources On User Interface Design Patterns
• http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-
on-user-interface-design-patterns
• 20+ articles on why and how to use design patterns
• http://blog.patternry.com/post/9878279797/20-articles-on-why-and-
how-to-use-design-patterns
• YUI is a free, open source JavaScript and CSS library for
building richly interactive web applications
• http://yuilibrary.com
• http://delicious.com/willhacker/patterns

Other bibliography
Android Design
Patterns: Interaction
Design Solutions for
Developers Paperback
by Greg Nudelman
2013
The Design of Sites:
Patterns for Creating
Winning Web Sites (2nd
Edition)
By Douglas K. van Duyne,
James A. Landay & Jason
I. Hong
December 24, 2006 Mobile Design Pattern Gallery: UI
Patterns for Smartphone Apps
by Theresa Neil
2nd Edition edition (May 17, 2014)
23 / 23
In general, a pattern is
a tested solution to
give an answer at
common design
problems, which
happen again and
again

Interaction design patterns

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Interaction design patterns (20)

More from DCU_MPIUA (20)

Recently uploaded (20)

Interaction design patterns

Editor's Notes