INTERACTION DESIGN

PATTERNSGrau 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

Interaction Design Patterns - User Centred Design 3 / 23

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

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

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]

Interaction Design Patterns - User Centred Design

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.

Interaction Design Patterns - User Centred Design 8 / 23

• 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

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

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

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 Safferhttp://www.odannyboy.com

http://designinginterfaces.com/patterns

12 / 23

Pattern Collections

• Martijn van Welie

• http://www.welie.com

Interaction Design Patterns - User Centred Design 13 / 23

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

“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

Interaction Design Patterns - User Centred Design 16 / 23

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

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

For mobile UI design

Interaction Design Patterns - User Centred Design

Example: http://www.androidpatterns.com

19 / 23

For mobile UI design

Interaction Design Patterns - User Centred 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

Interaction Design Patterns - User Centred Design 21 / 23

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

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