Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interaction Design Patterns


Published on

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

Interaction Design Patterns

  1. 1. Interaction Design Patterns Ecaterina Valicã “A. I. Cuza” University of Iaşi, Romania  Faculty of Computer Science Interaction Design Patterns
  2. 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. 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. 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. 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. 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. 7. Software Patterns ● Became popular with  the object­oriented  “Design Patterns:  Elements of Reusable  Object­Oriented  Software” (1995)  book.  Interaction Design Patterns
  8. 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. 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. 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. 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. 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. 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. 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. 15. Patterns Collections Interaction Design Patterns
  16. 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. 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. 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. 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. 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. 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. 22. Thank you Interaction Design Patterns