User interaction and user interface design

Draft

Definitions

User interface design and user interaction design are two closely related disciplines. One focuses on the design of the visual interface, the other more on the design of the global interaction behavior of the system.

In other words, user interface is how the user faces the system and how the system faces the user. user interaction is how the user acts on the system and how the systems acts on the user. Difference between UI and UX, retrieved 19:41, 25 January 2011 (CET)).

Definitions for user interface design

• User Interface design is the design of the system or interface with which a user has direct contact and with which they interact to conduct activities. (Remedy May 2077, dead link)

• User interface design is the overall process of designing how a user will be able to interact with a system/site. (the usability company, May 2007, dead link)

• User Interface Design refers to the aspects of hardware or software which can be seen (or heard or otherwise perceived) by the human user, and the commands and mechanisms the user uses to control its operation and input data. (based on The Dictionary of Computing). Usernomics.com, (retrieved Jan 2011)

• User interface design aims to enhance the visual, usability and technological qualities of an interface. It adds to the satisfaction of the person using a product or a service. Use design (retrieved Jan 2011).

Definitions for user interaction design

Often user interface design is used as a synonym of user interaction design. Other see a slight difference. E.g. “Interaction design (IxD) is the branch of user experience design that illuminates the relationship between people and the machines they use. While interaction design has a firm foundation in the theory, practice, and methodology of traditional user interface design, its focus is on defining the complex dialogues that occur between people and interactive devices of many types-from computers to mobile communications devices to appliances.” (WordiQ.com, retrieved Jan 2011.

• Interaction design aims to define and facilitate interaction between human beings by means of a product or a service. It focuses on the possibilities to create and encourage behavior facilitating an exchange between people. Use design (retrieved Jan 2011).

Luke Wroblesky (retrieved Jan 2011) quotes the Interaction Design Association's (IxDA) definition:

• Interaction design defines the structure and behaviors of interactive products and services, and user interactions with those products and services.
• Good interaction design effectively communicates a system’s interactivity and functionality, defines behaviors that communicate a system’s responses to user interactions, reveals both simple and complex workflows, informs users about system state changes, and prevents user error.
• Interaction design is grounded in an understanding of real users (goals, tasks, experiences, needs, and wants) and balances these needs with business goals and technological capabilities.

• “Broadly speaking, there are two main senses of the concept, coming out of different intellectual traditions but increasingly converging in practice and research. [...] one interpretation is to view interaction design as a design discipline, distinguished by its focus on the digital design materials: software, electronics and telecommunications. The other interpretation of interaction design is to see it as an extension of human-computer interaction (HCI), a field originating in experimental psychology and computer science and tracing its roots to the 1970s” (Lowgren, 2008).

How is user interaction design related to user interface design ?

An interaction design blog (2008) distinguished three levels of interaction design: Conceptual, Behavioral and Interface. “The interaction designer first investigates what is most valuable for users by thinking conceptually, after that the behaviour gets detailed; how should the user fulfil his goals and finally at an interface level. How should the interface look like to get this particular user experience?”. In other words, interface design is one aspect (or design stage) of interaction design. We globally share this interpretation. However, we also believe, that sometimes innovation is made from just interface design. Apple products come to mind ...

User interaction design can be achieved through tools like interactive mockup design or model-driven user interaction design languages, such as OMG's IFML (Interaction Flow Modeling Language, OMG, 2014). Interaction design is a discipline which examines the interaction via an interface between a system and its user.

See also: Various other articles related to Interaction design, user experience and usability, e.g. user experience, web prototyping software, web wireframe and usability

UxI and UxID guidelines

User interaction guidelines are usually synonymous of usability guidelines. However, since user interaction and user interface designers look at the problem with different eyes, there exist specific kinds of guidelines. For example software interface guidelines are made by larger organizations to insure consistency. In a totally different realm, computer game designers invent totally new designs that are based on inspiration and where usability is only brought in to make adjustments. In other words, some user interaction designers might claim that a strong focus on usability may inhibit innovation.

Software interface guidelines

According to Wikipedia (March 2011), “Human interface guidelines will dictate a set of rules for general usability. They often describe the visual design rules, including icon and window design and style. Frequently they specify how user input and interaction mechanisms work. Some describe the language style.”

Most major software organizations, edict their human interface guidelines. Typical examples are Apple Human Interface Guidelines, Windows User Experience Interaction Guidelines for Windows 7 and Windows Vista, GNOME Human Interface Guidelines, ANDROID User Interface Guidelines.

Get inspiration from games

Noah Schaffer, in their company's UI Design Newsletter (April, 2010) suggest - after reviewing some design principles of computers games - the following overall checklist:

• Does the user have a sense of presence in the interface?
• Are your goals clear, challenging, and surmountable?
• Do you provide instant, gratifying feedback?
• Do you leave room for failure?
• Are there opportunities to explore and play?
• Do people feel like they take something away from your interface?
• Have you given people the opportunity to interact with other people?

Links

See also other articles in the categories Design methodologies and Web authoring

Introductions

• Five essential principles of interaction design - Part I. Talk at Adobe TV. (there are four more parts on navigation, test, media and forms/dialogs)
• Interaction Design by Jonas Lowgren
• Usability, User Interface Design, and HCI Bibliography V2.3 by Chauncey E. Wilson (updated April 2003 when retrieved 18:22, 2 May 2007 (MEST)).
• Introducing Interaction Design, a 12-part series about interaction design for web applications started on 2002/11/11 by Bob Baxley.
• What is Interaction Design and What Does It Mean to Information Designers? by Craig Marion, 1999.
• First Principles of Interaction Design. Ask TOG, Bruce Tognazzini, retrieved 19:41, 25 January 2011 (CET).
• First Principles of Web Design by Christina Wodtke, 2003. (sample chapter from the Information Architecture: Blueprints for the Web book).
• Principles of Accessible and Universal Design

On-line handbooks

• Fluid Design Handbook is a How-to Guide filled with user-centered design (UCD) techniques you can use to learn from your users and design better user experiences.

Topics

• Three Questions You Shouldn't Ask During User Research By Jared M. Spool, April 2010.
• 11 Principles of Interaction Design explained by Paul Seys, Aug 2010. There is a Slideshare version.
• Design Patterns: Introduction
• HTML Wireframes and Prototypes: All Gain and No Pain by Julie Stanford on 2003/01/06.. See also the related Dreamweaver primer (old, but maybe still useful)
• Website Production Management Techniques (A set of texts at Adobe)
• Playing to win, by Noah Schaffer UI Design Newsletter – April, 2010 Download as PDF
• Visionary Usability: Making Friends With Graphic Design by John Sorflaten, UI Design Newsletter – November, 2010.
• A Dao of Web Design, by John Allsopp, A List Apart, April 7, 2000 (A good piece that argues for adaptable web pages)

Web sites with many resources / articles

• (Good) Essential Interaction Design Essays and Articles and Top Ten Essential Interaction Design Books by Dan Saffer.
• HCI Index. Used to be the academic resource for human-computer interaction. No longer maintained since 2009
• Humanfactors.com. Some free resources, including a bibliography.
• UIE.com, User Interface engineering (includes articles, blogs, etc.)
• Software Design Smorgasbord by Craig Marion. Includes many excellent links grouped into topics, and articles. (Updated Jan 2011 when consulted on Jan 2011).
• A List Apart
• DZine blog
• Adaptive Path Essay Archives
• Techved. Excellent source resource on UI and UX Design.
• The IxD library
• Usability.gov US guidelines.

Various

• How stuff works ... if you don't understand it :)
• Don Norman on Engineering Design Education 3 min video on YouTube (argues for systemic thinking)
• [1] IFML: The Object Management Group (OMG) standard for User Interaction Flow desgn

Examples

• [2] (2010) by Scratch

References

• Jones, Marshall G., & Okey, James R. Interface Design for Computer-based Learning Environments. [Online] Available http://www.hbg.psu.edu/bsed/intro/docs/idguide/, February 21, 1995. HTML

• Lowgren, Jonas (2008). Encyclopedia entry on Interaction Design. Retrieved 3 March 2011 from Interaction-Design.org: http://www.interaction-design.org/encyclopedia/interaction_design.html