Interaction Design Patterns

43 %
57 %
Information about Interaction Design Patterns

Published on September 25, 2008

Author: valicac



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

Interaction Design Patterns Ecaterina Valicã “A. I. Cuza” University of Iaşi, Romania  Faculty of Computer Science Interaction Design Patterns

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

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

“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

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

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

Software Patterns ● Became popular with  the object­oriented  “Design Patterns:  Elements of Reusable  Object­Oriented  Software” (1995)  book.  Interaction Design Patterns

● 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

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

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

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

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

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

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

Patterns Collections Interaction Design Patterns

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

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

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

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

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

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

Thank you Interaction Design Patterns

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Interaction Design Pattern Library -

Interaction Design pattern library. More than 120 patterns for web designers. All patterns include examples, explanations and even links to literature and code
Read more

Interaction design pattern - Wikipedia, the free encyclopedia

A design pattern is a formal way of documenting a solution to a common design problem. The idea was introduced by the architect Christopher Alexander for ...
Read more

Interaction Design Patterns » Interaction Design Foundation

An interaction design (ID) pattern is a general repeatable solution to a commonly-occurring usability problem in interface design or interaction design.
Read more

Interaction Design Patterns - Wer befasst sich in der ...

Hallo zusammen In der Schweiz befassen sich verschiedene Leute mit Interaction Design Patterns und wir sind daran, für die Fachgruppe Software Ergonomics ...
Read more - Patterns in Interaction Design A pattern library with over 125 patterns for Interaction Design. All patterns are illustrated with examples and links to literature and ...
Read more

10 Great Sites for UI Design Patterns » Interaction Design ...

You don’t want to spend your whole life redesigning the wheel do you? No, neither do we. If you are looking for a design that solves a problem that has ...
Read more

User Interface Design Pattern Library. UI patterns for web designers. See screenshot examples and learn how to do great design like the pros.
Read more


This is, a set of interaction patterns that can help you design Android apps. An interaction pattern is a short hand summary of a ...
Read more

Umfrage zu Interaction-Design-Patterns

Vielen Dank für Ihre Bereitschaft, an unserer Umfrage teilzunehmen! Die benötigten Daten wurden jedoch bereits erhoben und die Umfrage abgeschlossen.
Read more

User-Centered Interaction Design Patterns for Interactive ...

Lesen Sie User-Centered Interaction Design Patterns for Interactive Digital Television Applications von Tibor Kunert mit Kobo. Technology is meant to make ...
Read more