1. Interaction Design Patterns
Ecaterina Valicã
http://students.info.uaic.ro/~evalica/patterns
“A. I. Cuza” University of Iaşi, Romania
Faculty of Computer Science
Interaction Design Patterns
2. Origins
● The original definition of a pattern was
introduced by architect Christopher Alexander.
● Patterns were architectural concepts that captured
recurring design problems in urban architecture.
Interaction Design Patterns
3. Origins
“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, in such a way that you can use this
solution a million times over, without ever doing
it the same way twice. “
Christopher Alexander
Interaction Design Patterns
4. “A Pattern Language” (1977)
● Methods for constructing practical, safe and
attractive designs at every scale, from entire
regions, through cities, neighborhoods, gardens,
buildings, rooms, builtin furniture, etc.
● Main entrance ( “Entrances, gardens,
courtyards, roofs and terraces” )
● A place to wait ( “The most important areas and
rooms (in offices, workshops and public
buildings)” )
Interaction Design Patterns
5. Origins
quot;A pattern language is nothing more than a precise
way of describing someone's experience...quot;
“A universal solution to a common problem”
Christopher Alexander
specific situations: architecture, software, interaction, etc.
Interaction Design Patterns
6. Origins
● Alexander’s patterns of urban architecture
describe aspects of the physical environment in
which people live and work.
● The architect is the “designer”, and the
inhabitants are the “users” of these environments.
● The artefact that the architect designs is
something that its inhabitants directly interact
with and live in.
Interaction Design Patterns
7. Software Patterns
● Became popular with
the objectoriented
“Design Patterns:
Elements of Reusable
ObjectOriented
Software” (1995)
book.
Interaction Design Patterns
8. ● User Interface design is much closer to
architecture than software design, because it deals
more directly with spatial relationships and
visual aesthetics.
● One of Alexander's original goals was to allow
the inhabitants (that is, the users) to participate in
designing their environments (redefine,
customize and improve their own private
computing environments)
Interaction Design Patterns
9. Interaction design pattern
● is a general repeatable solution to a commonly
occurring usability or accessibility problem in
interface design or interaction design.
● Problems:
● many designers involves higher complexity
● “just talking” won’t help much
● designs couldn't be created quickly
● designs were (unintentionally) inconsistent
● people were always reinventing the wheel
Interaction Design Patterns
10. Communication
● Designing successful interactive systems requires
an interdisciplinary team (developers, user
interface experts, users, etc. )
● The group usually miss a common terminology
to exchange ideas, opinions, and values (a format
also understandable for nonprofessionals).
● The design experience and paradigms can be
expressed as a design pattern language.
Interaction Design Patterns
11. Productivity
● Teams have a natural tendency to design different
solutions to similar problems.
● Reducing development time spent on
“reinventing the wheel.”
● Train and educate new designers, avoiding
repeating errors
Interaction Design Patterns
12. Patterns Collections
● The first substantial set of
interaction design patterns
was the Common
Ground (1999) pattern
collection, developed by
Jenifer Tidwell, at MIT
● “Designing Interfaces”
(2005)
Interaction Design Patterns
13. Patterns Collections
● In early 2006, Yahoo! began releasing their
internal pattern catalog to the public for general
use, feedback, and commentary.
● Many other collections and languages followed,
such as Martijn van Welie's Interaction Design
Patterns (2007).
Interaction Design Patterns
14. Pattern elements
● Metadata: • Related Resources:
– Name of Pattern
• Supporting Research
– Author & Contributors
– Terms (tags, categories, facets) • associated Toolkit (if any)
– Related patterns
• Code
(parent, child, related)
– Rating • Stencils, Templates, Wireframes,
specs, other documentation
● Main Elements:
– Sensitizing example (illustration) • More examples / Pattern Gallery
– Problem Summary • Similar Patterns in Other Libraries
– Use When
• Further Reading (blog posts, etc.)
– Solution
– Rationale • Contacts
– Special Cases
Interaction Design Patterns
18. Statistics
●Tag clouds in use?
90% don’t have tag clouds
●Pagination in use?
22% of sites use pagination
60% standard navigation with “next” and
“previous”
●Where to place the search box?
62% in the right upper corner of the site layout
16% in the middle or lower part of the sidebar
Interaction Design Patterns
20. Conclusions
Users demand software that is:
●
● wellbehaved,
● goodlooking,
● and easy to use
Keeping touch with design patterns you'll get:
●
● recommendations,
● design alternatives,
● and warnings on when not to use them
Interaction Design Patterns
21. Pedagogical Patterns
“The intent [of pedagogical patterns] is to capture the
essence of the practice in a compact form that can be easily
communicated to those who need the knowledge. Presenting
this information in a coherent and accessible form can mean
the difference between every new instructor needing to
relearn what is known by senior faculty and easy
transference of knowledge of teaching within the
community“.
Joseph Bergin
Interaction Design Patterns