Interaction design pattern

from Wikipedia, the free encyclopedia

Interaction design patterns are design patterns that are used in the context of human-computer interaction and describe general designs for graphical user interfaces .

A design pattern is a formal way to document a solution to a common design problem. The idea was introduced by the architect Christopher Alexander for use in urban planning and building architecture and adapted for various other disciplines, including teaching and education, development organization and process, and software architecture and design.

Thus, interaction design patterns are a way of describing solutions for common usability or accessibility problems in a specific context. They document interaction models that make it easier for users to understand an interface and to carry out their tasks.

history

Patterns was created as an architectural concept by Christopher Alexander . Patterns are ways to describe best practices, explain good designs, and capture experiences so that other people can reuse these solutions.

Design patterns in computer science are used by software engineers during the actual design process and when communicating designs with others. Design patterns have gained popularity in computer science after the book Design Patterns: Elements of Reusable Object-Oriented Software was published. Since then, a pattern community has emerged that specifies patterns for problem domains, including architectural styles and object-oriented frameworks . The Pattern Languages ​​of Programming Conference (annually, since 1994) contains many examples of domain-specific patterns.

The use of a pattern language approach to interaction design was first suggested in Norman and Draper's book User Centered System Design (1986). Apple Computer's Macintosh Human Interface Guidelines also cite Christopher Alexander's works in their recommended reading.

Libraries

Alexander envisioned pattern language as a structured system in which the semantic relationships between patterns form a whole that is greater than the sum of its parts, much like grammatical relationships between words make language meaningful. While some collections of patterns attempt to create the structural relationships necessary to form a language, many others are simply a collection of patterns (and are therefore more appropriately referred to as pattern libraries).

Libraries for mobile interaction patterns

The popularity of mobile devices such as smartphones and tablets requires a library of design patterns for mobile interactions.

This need is driven by:

  • Differences in user behavior and in interaction on mobile devices such as swipe and tap gestures, face-to-face interaction on a desktop GUI that is mouse-controlled
  • Differences in physical properties between a mobile and a desktop device, e.g. B. screen size, touchscreen etc.
  • Design guidelines recommended by mobile operating systems, such as: B. iOS , Android

elements

In order for patterns to be useful to the designers and developers who will be using them, they must be discoverable and legible.

Common elements

Although the pattern descriptions vary somewhat, many pattern libraries share some common elements:

  • Name of the pattern: Choosing a clear and descriptive name will help locate the pattern and encourage clear communication between team members during design discussions.
  • Description of the pattern: Since short names like “one-window drill-down” are sometimes insufficient to describe the pattern, a few additional lines of explanation (or a canonical screenshot ) will help to explain how the pattern works.
  • Problem Representation: Written in user-centered language, it tells the end user what the user wants to achieve or what the challenge is for him.
  • When to Use: The "context of use" is a critical component of the design pattern. This element helps understand situations where the design pattern applies (and where it does not apply).
  • Solution: The solution should explain "how" to solve the problem and may include prescriptive checklists, screenshots, or even short videos showing the pattern in action.
  • Rationale: Providing reasons "why" the pattern works will help substantiate the solution, although time press developers may prefer to ignore this explanation.
  • Examples: Each example shows how the pattern was successfully applied. This is often accompanied by a screenshot and a brief description.
  • Notes: Having a space for team members to discuss the application of the pattern helps maintain an active resource and keeps the team busy.

Optional elements

Sample libraries can also contain optional items, depending on the needs of the team using them. These can include:

  • Implementation Specifications : A style guide with detailed information on font sizes, pixel dimensions, colors, and wording for messages and labels can be helpful for developers.
  • Usability research: Any supporting research from usability tests or other user feedback should be recorded. This can include feedback from developers, customer service, or the sales team.
  • Related Patterns: The Pattern Library can contain similar patterns, or it can be organized in a hierarchy of parent and child patterns.
  • Similar Approaches: Since there are likely many possible solutions to this problem, the teams may want a place to map similar alternatives.
  • Source code: If the code is modular enough to be reused, then it can also be added to the library.

Advantages of design patterns

The benefits of using interaction design patterns include:

  • Teaching newbies about some good practices and common approaches
  • Capture the collective wisdom of designers across many applications and scenarios
  • Give the teams a common language, reduce misunderstandings that arise from the different vocabulary
  • Reduction of time and costs in the design and development life cycle
  • Make useful designs the "path of least resistance"
  • Eliminate wasted time spent “reinventing the wheel”
  • Ensure a consistent and predictable user experience within an application or service

Advantages over design guidelines

Guidelines are generally more useful for describing requirements, while patterns are useful tools for those who need to translate requirements into specific software solutions. Some people view design guidelines as an instance of interaction design patterns as they are also a common approach to capturing the interaction design experience. However, interaction design patterns typically have the following advantages over design guidelines:

  1. Abstract guidelines, such as Shneiderman's Eight Golden Rules of Interface Design, do not provide any guidance on how to solve a problem such as many interaction design patterns and cannot be used for interdisciplinary communication. In addition, guidelines do not provide an explanation of why any particular solution will work.
  2. Specific guidelines, such as the Macintosh Human Interface Guidelines, are too tailored to a particular interface and therefore not as effective when applied to other interfaces (especially non-Macintosh interfaces).
  3. Other problems with guidelines are that they tend to be too numerous, making it difficult for designers to apply the correct guidelines. In addition, guidelines assume absolute validity when they can normally only be applied in one specific context. As a result, guidelines often tend to conflict just because they fail to describe a context.

The guidelines and patterns are not necessarily conflicting, and both can be used in conjunction to identify the problem and then find a valid solution.

See also

further reading

  • Jan Borchers: A Pattern Approach to Interaction Design.
  • Ian Graham: A Pattern Language for Web Usability.
  • Andreas Prinz: Interaction Design Patterns for NFC-based Electronic Data Capture Applications. Prinz Publishing, Dieburg 2014.
  • Douglas K. van Duyne, James A. Landay, Jason I. Hong: The Design of Sites: Patterns for Creating Winning Websites. 2nd Edition.
  • Jenifer Tidwell: Designing Interfaces: Patterns for Effective Interaction Design.
  • Christian Crumlish, Erin Malone: Designing Social Interfaces: Principles, Patterns, & Practices for Improving the User Experience.
  • Kamran Sedig, Paul Parsons: Interaction Design for Complex Cognitive Activities with Visual Representations: A Pattern-Based Approach. In: AIS Transactions on Human-Computer Interaction. Volume 5, No. 2, pp. 84-133. (aisel.aisnet.org)

Web links

Individual evidence

  1. ↑ James Coplien: A Pattern Definition. Bell Laboratories. Archived from the original on 2007-02-09. Retrieved 2008-11-24.
  2. ↑ What's a Pattern? Yahoo! Retrieved 2008-11-24.
  3. ↑ Jennifer Tidwell: Common Ground: A Pattern Language for Human-Computer Interface Design. WITH. Retrieved 2008-11-24.
  4. ^ Lyn Pemberton: Genre as a Structuring Concept for Interaction Design Pattern Languages. University of Brighton. Retrieved 2008-11-24.
  5. ↑ Jared Spool: The Elements of a Design Pattern. User interface engineering. Retrieved 2008-11-24.
  6. ↑ Erin Malone: Implementing a Pattern Library in the Real World: A Yahoo! Case study. Boxes and Arrows. (boxesandarrows.com)
  7. ^ Tibor Kunert: User-Centered Interaction Design Patterns for Interactive Digital Television Applications . Springer, 2009, ISBN 978-1-84882-274-0 .