View
6.289
Download
0
Embed Size (px)
DESCRIPTION
Talk held at RoCHI 2008, Iasi, 18-19 September 2008
Citation preview
Interaction Design Patterns
Interaction Design PatternsEcaterina 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
"A pattern language is nothing more than a precise way of describing someone's experience..."
“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 (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
● Metadata:– Name of Pattern– Author & Contributors– Terms (tags, categories, facets)– Related patterns
(parent, child, related)– Rating
● Main Elements:– Sensitizing example (illustration)– Problem Summary– Use When– Solution– Rationale– Special Cases
• Related Resources:
• Supporting Research
• associated Toolkit (if any)
• Code
• Stencils, Templates, Wireframes,
specs, other documentation
• More examples / Pattern Gallery
• Similar Patterns in Other Libraries
• Further Reading (blog posts, etc.)
• Contacts
Pattern elements
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) navigation52% 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●What information is placed in the footer?
90% copyright, legal, privacy, terms of service, terms of use
40% link to the “about us”page38% link to advertisingpage30% link to the contact information22% links to RSSfeeds
●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 layout16% 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