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
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
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
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
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
Notas do Editor
Interaction Design Patterns
Since prehistoric times, people have invented technologies to help them remember things over long periods: notched sticks, knotted ropes, mnemonics, verbal stories and histories retold around campfires, writing, scrolls, books, number systems, shopping lists, checklists, phone directories, datebooks, accounting ledgers, oven timers, computers, portable digital assistants (PDAs), online shared calendars, etc.
THE WEB DESIGNER’S ROADMAP (pp. 100-112)
Aquest llibre comprat el tinc en PDF