Talk held at RoCHI 2008, Iasi, 18-19 September 2008

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, built­in 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 object­oriented
“Design Patterns:
Elements of Reusable
Object­Oriented
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

15. Patterns Collections
http://students.info.uaic.ro/~evalica/patterns/
Interaction Design Patterns

16. Statistics
●Study made on 50 top blogs (July 2008) looking
for statistics on navigation design, information
architecture, advertisements and functionality.
Navigation menu: top, left or right?
●
58% use right­hand side (vertical) navigation
52% use a primary horizontal navigation at the
top (often combined with a right­hand side
secondary navigation)
12% use left­hand side (vertical) navigation.
Since 70­95% of people are right­handed
Interaction Design Patterns

17. Statistics
●What information is placed in the footer?
90% copyright, legal, privacy, terms of service,
terms of use
40% link to the “about us”­page
38% link to advertising­page
30% link to the contact information
22% links to RSS­feeds
●Are related and popular posts displayed?
54% of top blogs display related posts
48% of top blogs display popular posts
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

19. Conclusions
● Serves as a learning tool
● Creates a shared language
● Contains a gallery of design solutions
● Helps structural thinking
● Helps identifying relationships
● Manages complexity
● Creates a predictable user interface
Interaction Design Patterns

20. Conclusions
Users demand software that is:
●
● well­behaved,
● good­looking,
● 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

22. Thank you
Interaction Design Patterns