<Previous Lesson

Human Computer Interaction

Next Lesson>



The aim of this lecture is to introduce you the study of Human Computer Interaction,
so that after studying this you will be able to:

. Understand the design principles

. Discuss the design patterns and design imperatives
In the previous lectures, we've discussed a process through which we can achieve
superior interaction design. But what makes a design superior? Design that meets the
goals and needs of users (without sacrificing business goals or ignoring technical
constraints) is one measure of design superiority. But what are the attributes of a
design that enable it to accomplish this successfully? Are there general, contextspecific
attributes and features that a design can possess to make it a "good" design?
It is strongly believed that the answer to these questions lies in the use of interaction
design principles — guidelines for design of useful and useable form and behavior,
and also in the use of interaction design patterns — exemplary, generalizable
solutions to specific classes of design problem. This lecture defines these ideas in
more detail. In addition to design-focused principles and patterns, we must also
consider some larger design imperatives to set the stage for the design process.

25.1 Interaction Design Principles

Interaction design principles are generally applicable guidelines that address issues of
behavior, form, and content. They represent characteristics of product behavior that
help users better accomplish their goals and feel competent and confident while doing
so. Principles are applied throughout the design process, helping us to translate tasks
that arise out of scenario iterations into formalized structures and behaviors in the

Principles minimize work

One of the primary purposes principles serve is to optimize the experience of the user
when he engages with the system. In the case of productivity tools and other nonentertainment-
oriented products, this optimization of experience means the
minimization of work (Goodwin, 2002a). Kinds of work to be minimized include:

. Logical work — comprehension of text and organizational structures

. Perceptual work — decoding visual layouts and semantics of shape, size,
color, and representation


. Mnemonic work — recall of passwords, command vectors, names and
locations of data objects and controls, and other relationships between objects

. Physical/motor work — number of keystrokes, degree of mouse movement,
use of gestures (click, drag, double-click), switching between input modes,
extent of required navigation
Most of the principles discussed, attempt to minimize work while providing greater
levels of feedback and contextually useful information up front to the user.

Principles operate at different levels of detail

Design principles operate at three levels of organization: the conceptual level, the
interaction level, and the interface level. Our focus is on interaction-level principles.

. Conceptual-level principles help define what a product is and how it fits into
the broad context of use required by its primary personas.

. Interaction-level principles help define how a product should behave, in
general, and in specific situations.

. Interface-level principles help define the look and feel of interfaces
Most interaction design principles are cross-platform, although some platforms, such
as the Web and embedded systems, have special considerations based on the extra
constraints imposed by that platform.

Principles versus style guides

Style guides rather rigidly define the look and feel of an interface according to
corporate branding and usability guidelines. They typically focus at the detailed
widget level: How many tabs are in a dialog? What should button high light states
look like? What is the pixel spacing between a control and its label? These are all
questions that must be answered to create a finely tuned look and feel for a product,
but they don't say much about the bigger issues of what a product should be or how it
should behave.
Experts recommend that designers pay attention to style guides when they are
available and when fine-tuning interaction details, but there are many bigger and more
interesting issues in the design of behavior that rarely find their way into style guides.
Some design principles are stated below:

Design Principles (Norman)

We have studied all of these principles in greater detail earlier, these are:

. Visibility

. Affordance

. Constraints

. Mapping

. Consistency

. Feedback


Nielsen's design principles:

Visibility of system status

Always keep users informed about what is going on, through appropriate feedback
within reasonable time. For example, if a system operation will take some time, give
an indication of how long and how much is complete.

Match between system and real world

The system should speak the user's language, with words, phrases and concepts
familiar to the user, rather than system-oriented terms. Follow real-world conventions,
making information appear in natural and logical order.

User freedom and control

Users often choose system functions by mistake and need a clearly marked
'emergency exit' to leave the unwanted state without having to go through an extended
dialog. Support undo and redo.

Consistency and standards

Users should not have to wonder whether words, situations or actions mean the same
thing in different contexts. Follow platform conventions and accepted standards.

Error prevention

Make it difficult to make errors. Even better than good error messages is a careful
design that prevents a problem from occurring in the first place.

Recognition rather than recall

Make objects, actions and options visible. The user should not have to remember
information from one part of the dialog to another. Instructions for use of the system
should be visible or easily retrievable whenever appropriate

Flexibility and efficiency of use

Allow users to tailor frequent actions. Accelerators - unseen by the novice user - may
often speed up the interaction for the expert user to such an extent that the system can
cater to both inexperienced and experienced users.

Aesthetic and minimalist design

Dialogs should not contain information that is irrelevant or rarely needed. Every extra
unit of information in a dialog competes with the relevant units of information and
diminishes their relative.

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate
the problem, and constructively suggest a solution.


Help and documentation

Few systems can be used with no instruction so it may be necessary to provide help
and documentation. Any such information should be easy to search, focused on the
user's task, list concrete step to be carried out, and not be too large.

Design Principles (Simpson, 1985)

. Define the users

. Anticipate the environment in which your program will be used

. Give the operators control

. Minimize operators’ work

. Keep the program simple

. Be consistent

. Give adequate feedback

. Do not overstress working memory

. Minimize dependence on recall memory

. Help the operators remain oriented

. Code information properly (or not at all)

. Follow prevailing design conventions

Design Principles (Shneiderman, 1992)

1. Strive for consistency in action sequences, layout, terminology, command use and
so on.
2. Enable frequent users to use shortcuts, such as abbreviations, special key
sequences and macros, to perform regular, familiar actions more quickly.
3. Offer informative feedback for every user action, at a level appropriate to the
magnitude of the action.
4. Design dialogs to yield closure so that the user knows when they have completed a
5. Offer error prevention and simple error handling so that, ideally, users are
prevented from making mistakes and, if they do, they are offered clear and
informative instructions to enable them to recover,
6. Permit easy reversal of actions in order to relieve anxiety and encourage
exploration, since the user knows that he can always return to the previous state.
7. Support internal locus of control so that the user is in control of the system, which
responds to his actions.
8. Reduce short-term memory load by keeping displays simple, consolidating multiple
page displays and providing time for learning action sequences.
These rules provide useful shorthand for the more detailed sets of principles described
earlier. Like those principles, they are not applicable to every eventuality and need to
be interpreted for each new situation. However, they are broadly useful and their
application will only help most design projects.

Design Principles (Dumas, 1988)

. Put the user in control

. Address the user’s level of skill and knowledge

. Be consistent in wording, formats, and procedures


. Protect the user from the inner workings of the hardware and software that is
behind the interface

. Provide online documentation to help the user to understand how to operate
the application and recover from errors

. Minimize the burden on user’s memory

. Follow principles of good graphics design in the layout of the information on
the screen

25.2 Interaction Design Patterns

Design patterns serve two important functions. The first function is to capture useful
design decisions and generalize them to address similar classes of problems in the
future (Borchers, 2001). In this sense, patterns represent both the capture and
formalization of design knowledge, which can serve many purposes. These include
reducing design time and effort on new projects, educating designers new to a project,
or — if the pattern is sufficiently broad in its application — educating designers new
to the field.
Although the application of patterns in design pedagogy and efficiency is certainly
important, the key factor that makes patterns exciting is that they can represent
optimal or near-optimal interactions for the user and the class of activity that the
pattern addresses.

Interaction and architectural patterns

Interaction design patterns are far more akin to the architectural design patterns first
envisioned by Christopher Alexander in his seminal volumes A Pattern Language
(1977) and The Timeless Way of Building (1979) than they are to the popular
engineering use of patterns. Alexander sought to capture in a set of building blocks
something that he called the quality without a name," that essence of architectural
design that creates a feeling of well-being in the inhabitants of architectural structures.
It is this human element that differentiates interaction design patterns (and
architectural design patterns) from engineering design patterns, whose sole concern is
efficient reuse of code.
One singular and important way that interaction design patterns differ from
architectural design patterns is their concern, not only with structure and organization
of elements, but with dynamic behaviors and changes in elements in response to user
activity. It is tempting to view the distinction simply as one of change over time, but
these changes are interesting because they occur in response to human activity. This
differentiates them from preordained temporal transitions that can be found in
artifacts of broadcast and film media (which have their own distinct set of design
patterns). Jan Borchers (2001) aptly describes interaction design patterns:
[Interaction design] Patterns refer to relationships between physical
elements and the events that happen there. Interface designers, like urban
architects, strive to create environments that establish certain behavioral

patterns with a positive effect on those people 'inside' these environments .
. . 'timeless' architecture is comparable to user interface qualities such as
'transparent' and 'natural.'

Types of interaction design patterns

Like most other design patterns, interaction design patterns can be hierarchically
organized from the system level down to the level of individual interface widgets.
Like principles, they can be applied at different levels of organization (Goodwin,

. Postural patterns can be applied at the conceptual level and help determine the
overall product stance in relation to the user.

. Structural patterns solve problems that relate to the management of
information display and access, and to the way containers of data and
functions are visually manipulated to best suit user goals and contexts. They
consist of views, panes, and element groupings.

. Behavioral patterns solve wide-ranging problems relating to specific
interactions with individual functional or data objects or groups of such
objects. What most people think of as system and widget behaviors fall into
this category.
Structural patterns are perhaps the least-documented patterns, but they are nonetheless
in widespread use. One of the most commonly used high-level structural patterns is
apparent in Microsoft Outlook with its navigational pane on the left, overview pane
on the upper right, and detail pane on the lower right (see Figure).

This pattern is optimal for full-screen applications that require user access to many
different kinds of objects, manipulation of those objects in groups, and display of
detailed content or attributes of individual objects or documents. The pattern permits
all this to be done smoothly in a single screen without the need for additional
windows. Many e-mail clients make use of this pattern, and variations of it appear in
many authoring and information management tools where rapid access to and
manipulation of many types of objects is common

Structural patterns, pattern nesting, and pre-fab design

Structural patterns often contain other structural patterns; you might imagine that a
comprehensive catalogue of structural patterns could, given a clear idea of user needs,
permit designers to assemble coherent, Goal-Directed designs fairly rapidly. Although
there is some truth in this assertion, which the experts have observed in practice, it is
simply never the case that patterns can be mechanically assembled in cookie-cutter
fashion. As Christopher Alexander is swift to point out (1979), architectural patterns
are the antithesis of the pre-fab building, because context is of absolute importance in
defining the actual rendered form of the pattern in the world. The environment where
the pattern is deployed is critical, as are the other patterns that comprise it, contain it,
and abut it. The same is true for interaction design patterns. The core of each pattern
lies in the relationships between represented objects and between those objects and
the goals of the user. The precise form of the pattern is certain to be somewhat
different for each instance, and the objects that define it will naturally vary from
domain to domain. But the relationships between objects remain essentially the same.

25.3 Interaction Design Imperatives

Beyond the need for principles of the type described previously, the experts also feel a
need for some even more fundamental principles for guiding the design process as a
whole. The following set of top-level design imperatives (developed by Robert
Reimann, Hugh Dubberly, Kim Goodwin, David Fore, and Jonathan Korman) apply
to interaction design, but could almost equally well apply to any design discipline.
Interaction designers should create design solutions that are

. Ethical [considerate, helpful]
Do no harm
Improve human situations

. Purposeful [useful, usable]
Help users achieve their goals and aspirations
Accommodate user contexts and capacities

. Pragmatic [viable, feasible
Help commissioning organizations achieve their goals 7

Accommodate business and technical requirements

. Elegant [efficient, artful, affective]
Represent the simplest complete solution
Possess internal (self-revealing, understandable) coherence
Appropriately accommodate and stimulate cognition and emotion

. Ask relevant questions when planning manuals

. Learn about your audiences

. Understand how people use manuals

. Organize so that users can find information quickly

. Put the user in control by showing the structure of the manual

. Use typography to give readers clues to the structure of the manual

. Write so that users can picture themselves in the text

. Write so that you don’t overtax users’ working memory

. Use users’ words

. Be consistent

. Test for usability

. Expect to revise

. Understand who uses the product and why

. Adapt the dialo to the user

. Make the information accessible

. Apply a consistent organizational strategy

. Make messages helpful

. Prompt for inputs

. Report status clearly

. Explain errors fully

. Fir help smoothly into the users’ workflow

<Previous Lesson

Human Computer Interaction

Next Lesson>


Lesson Plan


Go to Top

Next Lesson
Previous Lesson
Lesson Plan
Go to Top