interaction design patterns

22
Interaction Design Patterns Interaction Design Patterns Ecaterina Valicã http://students.info.uaic.ro/~evalica/patterns “A. I. Cuza” University of Iaşi, Romania Faculty of Computer Science

Post on 17-Oct-2014

6.283 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Interaction Design Patterns

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

Page 2: Interaction Design Patterns

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. 

Page 3: Interaction Design Patterns

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 

Page 4: Interaction Design Patterns

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)” )

Page 5: Interaction Design Patterns

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.

Page 6: Interaction Design Patterns

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.

Page 7: Interaction Design Patterns

Interaction Design Patterns

Software Patterns● Became popular with 

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

Page 8: Interaction Design Patterns

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)

Page 9: Interaction Design Patterns

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

Page 10: Interaction Design Patterns

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.

Page 11: Interaction Design Patterns

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 

Page 12: Interaction Design Patterns

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)

Page 13: Interaction Design Patterns

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).

Page 14: Interaction Design Patterns

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

Page 15: Interaction Design Patterns

Interaction Design Patterns

Patterns Collections

http://students.info.uaic.ro/~evalica/patterns/

Page 16: Interaction Design 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 right­hand side (vertical) navigation52% 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

Page 17: Interaction Design Patterns

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 advertising­page30% link to the contact information22% links to RSS­feeds

●Are related and popular posts displayed?54% of top blogs display related posts 48% of top blogs display popular posts

Page 18: Interaction Design Patterns

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 

Page 19: Interaction Design Patterns

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

Page 20: Interaction Design Patterns

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

Page 21: Interaction Design Patterns

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

Page 22: Interaction Design Patterns

Interaction Design Patterns

Thank you