What a pattern is in the context of a User Interface Design?? You will see in this slides together with the most useful pattern collections

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

2. 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

3. • 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
Interaction Design Patterns - User Centred Design 3 / 23

4. 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
Interaction Design Patterns - User Centred Design 4 / 23

5. 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 5 / 23

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

7. 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]
Interaction Design Patterns - User Centred Design
Be aware, here
problem ≠ error, instead
problem = challenge
7 / 23

8. 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.
Interaction Design Patterns - User Centred Design 8 / 23

9. • 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]
Interaction Design Patterns - User Centred Design 9 / 23

10. 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 !!
Interaction Design Patterns - User Centred Design 10 / 23

11. 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
Interaction Design Patterns - User Centred Design 11 / 23

12. Pattern Collections
• Designing Interfaces
• Jenifer Tidwell
• O'Reilly Media; Second Edition edition
(January 6, 2011)
• http://designinginterfaces.com/firstedition
Interaction Design Patterns - User Centred Design
“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

13. Pattern Collections
• Martijn van Welie
• http://www.welie.com
Interaction Design Patterns - User Centred Design 13 / 23

14. Pattern Collections
• http://developer.yahoo.com/ypatt
erns
• http://ui-patterns.com
• http://patternry.com
• http://quince.infragistics.com
Interaction Design Patterns - User Centred Design 14 / 23

15. “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?
• .....
Interaction Design Patterns - User Centred Design 15 / 23

16. Interaction Design Patterns - User Centred Design 16 / 23

17. 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
Interaction Design Patterns - User Centred Design
http://www.welie.comhttp://designinginterfaces.com
17 / 23

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

19. For mobile UI design
Interaction Design Patterns - User Centred Design
Example: http://www.androidpatterns.com
19 / 23

20. For mobile UI design
Interaction Design Patterns - User Centred Design
http://pttrns.com
http://ios-patterns.com
20 / 23

21. 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
Interaction Design Patterns - User Centred Design 21 / 23

22. 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
Interaction Design Patterns - User Centred Design 22 / 23

23. Other bibliography
Interaction Design Patterns - User Centred Design
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