Published on September 25, 2008
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
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, 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
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 objectoriented “Design Patterns: Elements of Reusable ObjectOriented 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 (redeﬁne, 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 http://students.info.uaic.ro/~evalica/patterns/ 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 righthand side (vertical) navigation 52% use a primary horizontal navigation at the top (often combined with a righthand side secondary navigation) 12% use lefthand side (vertical) navigation. Since 7095% of people are righthanded 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: ● ● 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
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
Interaction Design pattern library. More than 120 patterns for web designers. All patterns include examples, explanations and even links to literature and code
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 ...
An interaction design (ID) pattern is a general repeatable solution to a commonly-occurring usability problem in interface design or interaction design.
Hallo zusammen In der Schweiz befassen sich verschiedene Leute mit Interaction Design Patterns und wir sind daran, für die Fachgruppe Software Ergonomics ...
Welie.com. A pattern library with over 125 patterns for Interaction Design. All patterns are illustrated with examples and links to literature and ...
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 ...
User Interface Design Pattern Library. UI patterns for web designers. See screenshot examples and learn how to do great design like the pros.
This is androidpatterns.com, a set of interaction patterns that can help you design Android apps. An interaction pattern is a short hand summary of a ...
Vielen Dank für Ihre Bereitschaft, an unserer Umfrage teilzunehmen! Die benötigten Daten wurden jedoch bereits erhoben und die Umfrage abgeschlossen.
Lesen Sie User-Centered Interaction Design Patterns for Interactive Digital Television Applications von Tibor Kunert mit Kobo. Technology is meant to make ...