Interaction design pattern

Last updated

Interaction design patterns are design patterns applied in the context human-computer interaction, describing common designs for graphical user interfaces.

Contents

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 use in urban planning and building architecture and has been adapted for various other disciplines, including teaching and pedagogy, development organization and process, and software architecture and design. [1]

Thus, interaction design patterns are a way to describe solutions to common usability or accessibility problems in a specific context. [2] They document interaction models that make it easier for users to understand an interface and accomplish their tasks. [3]

History

Patterns originated as an architectural concept by Christopher Alexander. Patterns are ways to describe best practices, explain good designs, and capture experience 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 to others. Design patterns 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 (annual, 1994—) proceedings includes many examples of domain-specific patterns.

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

Libraries

Alexander envisioned a pattern language as a structured system in which the semantic relationships between the patterns create a whole that is greater than the sum of its parts, much like the way that grammatical relationships between words make language meaningful. [4] While some collections of patterns attempt to create the structural relationships needed to form a language, many others are simply an assemblage of patterns (and thus are more appropriately termed pattern libraries.)

Mobile interaction pattern libraries

The popularity of mobile devices such as smartphones and tablets usher in a need for a library of mobile interaction design patterns.

This need is driven by:

Elements

For patterns to be helpful to the designers and developers who will make use of them, they need to be findable and readable. [5] [6] [7]

Common elements

Though pattern descriptions vary somewhat, many pattern libraries include some common elements:

Optional elements

Pattern libraries can also include optional elements, depending on the needs of the team using them. These may include:

Reasons to use design patterns

Benefits of using interaction design patterns include:

Advantages over design guidelines

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

  1. Abstract guidelines, like the Eight Golden Rules of Interface Design by Shneiderman, do not suggest how to solve a problem like many interaction design pattern, and cannot be used for interdisciplinary communication. Furthermore, guidelines do not provide an explanation as to why a particular solution works.
  2. Concrete guidelines, like Macintosh Human Interface Guidelines, are too tailored to a specific interface, and therefore are 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 which makes it difficult for designers to apply the right guidelines. Also guidelines assume an absolute validity while usually they can only be applied in a particular context. A result of that is also that guidelines often tend to conflict just because they lack describing a context.

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

See also

Related Research Articles

A design pattern is the re-usable form of a solution to a design problem. The idea was introduced by the architect Christopher Alexander and has been adapted for various other disciplines, particularly software engineering. Design patterns are commonly used to improve the flexibility of object-oriented systems.

<span class="mw-page-title-main">Graphical user interface</span> User interface allowing interaction through graphical icons and visual indicators

A graphical user interface, or GUI, is a form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation. In many applications, GUIs are used instead of text-based UIs, which are based on typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on a computer keyboard.

<span class="mw-page-title-main">User interface</span> Means by which a user interacts with and controls a machine

In the industrial design field of human–computer interaction, a user interface (UI) is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, while the machine simultaneously feeds back information that aids the operators' decision-making process. Examples of this broad concept of user interfaces include the interactive aspects of computer operating systems, hand tools, heavy machinery operator controls and process controls. The design considerations applicable when creating user interfaces are related to, or involve such disciplines as, ergonomics and psychology.

In computing, a desktop environment (DE) is an implementation of the desktop metaphor made of a bundle of programs running on top of a computer operating system that share a common graphical user interface (GUI), sometimes described as a graphical shell. The desktop environment was seen mostly on personal computers until the rise of mobile computing. Desktop GUIs help the user to easily access and edit files, while they usually do not provide access to all of the features found in the underlying operating system. Instead, the traditional command-line interface (CLI) is still used when full control over the operating system is required.

In computing, cross-platform software is computer software that is designed to work in several computing platforms. Some cross-platform software requires a separate build for each platform, but some can be directly run on any platform without special preparation, being written in an interpreted language or compiled to portable bytecode for which the interpreters or run-time packages are common or standard components of all supported platforms.

In software engineering, a software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. Rather, it is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.

A pattern language is an organized and coherent set of patterns, each of which describes a problem and the core of a solution that can be used in many ways within a specific field of expertise. The term was coined by architect Christopher Alexander and popularized by his 1977 book A Pattern Language.

An anti-pattern in software engineering, project management, and business processes is a common response to a recurring problem that is usually ineffective and risks being highly counterproductive. The term, coined in 1995 by computer programmer Andrew Koenig, was inspired by the book Design Patterns and first published in his article in the Journal of Object-Oriented Programming. A further paper in 1996 presented by Michael Ackroyd at the Object World West Conference also documented anti-patterns.

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window.

<span class="mw-page-title-main">Model–view–controller</span> Software design pattern

Model–view–controller (MVC) is a software design pattern commonly used for developing user interfaces that divides the related program logic into three interconnected elements. These elements are the internal representations of information, the interface that presents information to and accepts it from the user, and the controller software linking the two.

<span class="mw-page-title-main">Usability</span> Capacity of a system for its users to perform tasks

Usability can be described as the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience. In software engineering, usability is the degree to which a software can be used by specified consumers to achieve quantified objectives with effectiveness, efficiency, and satisfaction in a quantified context of use.

In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents. It can serve as an electronic hyperlink or file shortcut to access the program or data. The user can activate an icon using a mouse, pointer, finger, or voice commands. Their placement on the screen, also in relation to other icons, may provide further information to the user about their usage. In activating an icon, the user can move directly into and out of the identified function without knowing anything further about the location or requirements of the file or code.

A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.

Interaction design, often abbreviated as IxD, is "the practice of designing interactive digital products, environments, systems, and services." While interaction design has an interest in form, its main area of focus rests on behavior. Rather than analyzing how things are, interaction design synthesizes and imagines things as they could be. This element of interaction design is what characterizes IxD as a design field, as opposed to a science or engineering field.

The following outline is provided as an overview of and topical guide to human–computer interaction:

<span class="mw-page-title-main">Human interface guidelines</span> Software development documents

Human interface guidelines (HIG) are software development documents which offer application developers a set of recommendations. Their aim is to improve the experience for the users by making application interfaces more intuitive, learnable, and consistent. Most guides limit themselves to defining a common look and feel for applications in a particular desktop environment. The guides enumerate specific policies. Policies are sometimes based on studies of human–computer interaction, but most are based on conventions chosen by the platform developers preferences.

<span class="mw-page-title-main">Website wireframe</span> Visual guide that represents the skeletal framework of a website

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The term wireframe is taken from other fields that use a skeletal framework to represent 3 dimensional shape and volume. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually driven by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture and user research.

<span class="mw-page-title-main">User interface design</span> Planned operator–machine interaction

User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. In computer or software design, user interface (UI) design primarily focuses on information architecture. It is the process of building interfaces that clearly communicate to the user what's important. UI design refers to graphical user interfaces and other forms of interface design. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals.

A User Interface Management System (UIMS) is a mechanism for cleanly separating process or business logic from Graphical user interface (GUI) code in a computer program. UIMS are designed to support N-tier architectures by strictly defining and enforcing the boundary between the business logic and the GUI. A fairly rigid Software architecture is nearly always implied by the UIMS, and most often only one paradigm of separation is supported in a single UIMS. A UIMS may also have libraries and systems such as graphical tools for the creation of user interface resources or data stores.

User experience design defines the experience a user would go through when interacting with a company, its services, and its products. User experience design is a user centered design approach because it considers the user's experience when using a product or platform. Research, data analysis, and test results drive design decisions in UX design rather than aesthetic preferences and opinions. Unlike user interface design, which focuses solely on the design of a computer interface, UX design encompasses all aspects of a user's perceived experience with a product or website, such as its usability, usefulness, desirability, brand perception, and overall performance. UX design is also an element of the customer experience (CX), and encompasses all aspects and stages of a customer's experience and interaction with a company.

References

  1. ↑ Coplien, James. "A Pattern Definition". Bell Laboratories. Archived from the original on 2007-02-09. Retrieved 2008-11-24.
  2. ↑ "What's a Pattern?". Yahoo!. Archived from the original on 2008-12-04. Retrieved 2008-11-24.
  3. ↑ Tidwell, Jennifer. "Common Ground: A Pattern Language for Human-Computer Interface Design". MIT. Retrieved 2008-11-24.
  4. ↑ Pemberton, Lyn. "Genre as a Structuring Concept for Interaction Design Pattern Languages". University of Brighton. Archived from the original on 2006-10-22. Retrieved 2008-11-24.
  5. ↑ Spool, Jared. "The Elements of a Design Pattern". User Interface Engineering. Archived from the original on 2008-12-20. Retrieved 2008-11-24.
  6. ↑ Malone, Erin. "Implementing a Pattern Library in the Real World: A Yahoo! Case Study". Boxes and Arrows. Archived from the original on 2008-12-07. Retrieved 2008-11-24.
  7. ↑ Kunert, Tibor (23 June 2009). User-Centered Interaction Design Patterns for Interactive Digital Television Applications. Springer. ISBN   9781848822740 . Retrieved 2009-07-06.

Further reading


This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.