BlairEarly UserInterfaceDesign 2008

User Interface Design Principles for Interaction Design
Author(s): Adream Blair-Early and Mike Zender

Source: Design Issues, Vol. 24, No. 3, Interaction Design Research in Human-Computer
Interaction (Summer, 2008), pp. 85-107
Published by: The MIT Press
Stable URL: https://www.jstor.org/stable/25224185
Accessed: 19-09-2023 05:45 +00:00
JSTOR is a not-for-profit service that helps scholars, researchers, and students discover, use, and build upon a wide
range of content in a trusted digital archive. We use information technology and tools to increase productivity and
facilitate new forms of scholarship. For more information about JSTOR, please contact support@jstor.org.
Your use of the JSTOR archive indicates your acceptance of the Terms & Conditions of Use, available at
https://about.jstor.org/terms
The MIT Press is collaborating with JSTOR to digitize, preserve and extend access to Design
Issues
This content downloaded from 141.117.125.176 on Tue, 19 Sep 2023 05:45:25 +00:00
All use subject to https://about.jstor.org/terms
User Interface Design Principles
for Interaction Design
Adream Blair-Early and Mike Zender
Acknowledgements In recent years, the number of computationally-based devices has

Senior students in Digital Design at the grown rapidly, and with them the number of interfaces we encoun
University of Cincinnati in 2001 and 2002 ter. Often, the face for today's product or service is, at first touch, an
conducted the initial research for the design
interface. While the pervasiveness of the interface might present a
principles noted in this paper. Special thanks
minor challenge for the majority, for those with little previous knowl
to the paper reviewers who helped clarify
the paper. edge or accessibility limitations the challenge can be insurmountable.

In many cases, the way we access and use, and even the degree to
which we rely on technology, may be vastly different from genera
tion to generation.
As the number of interfaces and the diversity of users grow,
the need for effective interface design increases. Clocks on VCRs
and DVD players flash at users insistently demanding to be reset, a
mute testimony to the failure of the interface. Designers commonly
mimic standard interface design elements such as icons and meta
phors, or create flashy interfaces that may appeal visually, but often
at the expense of user understanding and functionality. Despite
mimicry, creativity, new technology, and a steadily growing need,
interfaces are mired in paradigms established decades ago at a time
when user interface was more a computer novelty than a part of
everyday life.
Thus far, pundits, consultants, and authors have attempted
to improve interface design primarily by exploring and analyzing
existing patterns of interface design, or by defining desirable end
user experiences.
One example of a detailed analysis of an existing pattern is
the Nielsen Norman Group's 106-page report, "Site Map Usability."1
A site map is a means for quickly gaining an overview of a Web
site. The report mentions a principle in the first sentence of the
executive summary: "Help users understand where they are"; then
analyzes in great detail a specific means or pattern for meeting that
need such as "Web site maps," delivering twenty-eight guidelines
"to improve site map usability." Another recent example is Duyne,
Landay, and Hong's book The Design of Sites,2 which focuses on using
1 Nielsen Norman Group, Site Map
existing patterns to improve Web interface design. As helpful as such
Usability (Fremont, CA, 1998).
2 Douglas K. van Duyne, James A. Landay, approaches are, the examination of an existing pattern such as the
and Jason I Hong, The Design of Sites site map, and a detailed recipe for the execution of that pattern, is
(Boston: Addison-Wesley, 2003). not designed to stimulate innovation.
? 2008 Massachusetts Institute of Technology
Design Issues: Volume 24, Number 1 Winter 2008

85
Two examples of desirable end-user experiences are the often
cited "easy-to-use" and "intuitive." These recommendations have
two problems: they are too vague to be useful and, as final experi
ences, they provide no indication of how they may be achieved. Jef
Raskin, in his 1994 article noting the vagueness of "intuitive inter
face" as a measure of user experience,3 maintains that the common
usage of intuitive interface really means "familiar"; that is, an inter
face that resembles or is identical to something else. However, if
familiarity is the criteria for success, then creativity and novelty
certainly will suffer. In a field in which improvement is needed, a
focus on familiarity will simply reinforce an unacceptable status
quo. In his article, Raskin notes the tension between improvement
and familiarity, suggesting that if intuitive is defined as familiar
then "'Intuitive' may well turn out to be one of the worst quali
ties it (a new interface paradigm) can have."4 Because Raskin wrote
in 1994, it may be tempting to think that such advice is pass?, but
this is not true. Catherine Courage and Kathy Baxter's recent book
Understanding Your User,5 published in 2005, is intended to be a prac
tical guide to user requirements. It defines useable products as "easy
to learn."6 Even if "easy to use/learn" or "intuitive" were defined
precisely, it still would describe an outcome without offering the
means to achieve it.
The Need for Principles

W. Ross Winterowd, in his introduction to Contemporary Rhetoric,
writes, "A conceptual framework is a schema?sometimes diagram
matic?that serves two purposes. It allows one to organize a subject,
and it automatically becomes an inventive heuristic for the discovery
of subject matter."7 This paper argues that what designers need to
improve interface design is a conceptual framework that can spur
3 Jef Raskin, "Viewpoint: Intuitive Equals innovation. We describe that conceptual framework first as "param
Familiar," Communications of the ACM
eters" essential to an interface, and then as a set of "principles" to
37:9(1994): 17-18.
achieve an effective interface. The parameters and principles were
4 Ibid., 18.
5 Catherine Courage and Kathy Baxter,
arrived at through inductive study and, we hope, as Winterowd
Understanding Your Users: A Practical suggests, that they will have the power to not only organize mate
Guide to User Requirements (San rial, but also drive inventive development.
Francisco: Morgan Kaufman, 2005).
Design principles, as we conceive them, consist of clear rules
6 Ibid.
of thumb that have defined features, similar to the excellent exam
7 W. Ross Winterowd, "Introduction: Some
ples found in Edward Tufte's books The Visual Display of Quantitative
Remarks of Pedagogy" in Contemporary
Rhetoric: A Conceptual Background with Information and Visual Explanations.8 The principles we propose here
Readings, W. Ross Winterowd, ed. (New must be integrated with the parameters that define an interface. We
York: Harcourt Brace Jovanovich, Inc.,
propose that parameters and principles working together can drive
1975), 1-37.
innovation and empower designers or any creative person charged
8 Edward Tufte, Visual Display of
with developing an interface. If the principles are founded appropri
Quantitative Information (Cheshire,
CT: Graphics Press, 1983); and Edward

ately and crafted properly, they should guide the creation of effec
Tufte, Visual Explanations (Cheshire, CT: tive interfaces not only today, but facilitate the invention of novel
Graphics Press, 1997). interface approaches in the future.
86 Design Issues: Volume 24, Number 3 Summer 2008
Identifying Parameters and Principles through Design Research
Broadly speaking, design research investigates process, user, cultural
context, form, and subject matter/content.9 Design research as an
applied research activity focuses on users and content. The design
research process used for this project focused on content through
the innovative use of content analysis techniques from exegesis: the
science of interpretation. Our aim was to analyze interactive content
in a thorough way. The premise was that a thorough understanding
of the form given to content would lead student investigators to
fresh insight into both interface as a form and the audience to which
the interface was addressed. From this high level of understanding
of interface and audience, investigators sought to define parameters
and to describe principles to guide interface design. Our research
focused on interaction with content in computational environments.
By analyzing one specific type of interface interaction (content), what
Kenneth Burke calls an "individuation" in his article "The Nature
of Form"10. We derived concepts that are abstractions of many indi
vidual instances. As Burke argues in his article, the form given to
content is revealing of both the author's thinking and the presumed
audiences' experience. In Burke's words, "Form ... gratifies the needs
which it creates." Form is an essential aspect of design.
Interface as a formal tool also is significant in the field of
Human Computer Interaction (HCI). In the past, HCI often has
focused on interfaces primarily as tools that manage a computer
or computer software. However, computer interfaces are no longer
experienced only as tools for using computers, but as frameworks for
exploring content. Many of the examples in Courage's and Baxter's
book on user requirements, a basic HCI issue, are about content
oriented Web sites. Interface as a means to explore content is not just
for the Web. One recent product example, the iPod?, is a small, porta
ble computer with an inventive interface. However, the focal point of
the iPod is neither the device nor the interface, but the content: music
and video (in some models) are the stars. This anecdotal example
suggests that product development generally, and HCI interface
development in particular, are increasingly involved with develop
ing interfaces for content. Because interaction with content typically
is an individual expression of interaction, and because HCI increas
9 Design Council (www.designcouncil.org.
ingly deals with crafting content-oriented experiences, the principles
uk).
derived from our study could apply to broader HCI issues.
10 Kenneth Burke, "The Nature of Form" in
Contemporary Rhetoric: A Conceptual

What follows is a description of the design research process
Background with Readings, W. Ross that led to the proposed parameters and principles of an effective
Winterowd, ed. (New York: Harcourt content interface.
Brace Jovanovich Inc., 1975), 183-198.
87
Design Issues: Volume 24, Number 3 Summer 2008
The Process of Developing Interface Parameters
Overview
Our research method was inductive. After initially defining what
an interface is, student researchers studied the principles of content
interpretation, then selected successful content interfaces, and
applied the interpretive principles to the study these interfaces. From
looking at the structure of many content interfaces, students derived
principles that made these interfaces successful. The derived prin
ciples then were consolidated and compared to previously published
interface guidelines. The process was heuristic, and the goal was to
discover design principles that were theoretically based, definitive
enough to guide design, and yet timeless enough to guide interface
development as technologies and techniques change. We recognize
the dangers of starting with individual instances and from indi
vidual instances deriving useful general principles. One alternative
approach already noted is to identify successful instances and codify
these as patterns to follow, such as was done in Duyne, Landay,
and Hong's book The Design of Sites. The difficulty of the pattern
approach is the limit it places on innovation. Despite the authors'
claim that "Our patterns direct your energies to solving new prob
lems as opposed to reinventing the wheel," the purpose of a pattern
is to provide something to follow, not the invention of something
novel. Our purpose was different: describing principles that could
spur innovation.
Interface Definition
We began by asking what the essential qualities?the parameters?of
an effective interface are. Like many questions, we found the answer
depended on context. Cooper and Reimann in their book About Face
2.0, state, "... there is no such thing as an objectively good dialogue
box?the quality depends on the situation: who the user is and what
his background and goals are."11 In the 1992 version of "Macintosh
Human Interface Guidelines" by Apple Computer, widely recog
nized as pioneering in user interface development, there are thirty
eight index entries for icons, but none for interface.12 This suggested
that interface and icon were nearly synonymous and that, logically,
the best interfaces would be those with the best icons; and that those
without icons would fail. This is clearly not the case, but suggests the
extent to which interfaces had become mired in an existing pattern
based on icons and a paradigm of interfaces as tools to manage soft
11 Alan Cooper and Robert Reimann, About ware. We began to agree with Cooper and Reimann that what made
Face 2.0: The Essentials of Interaction particular patterns such as icons and dialogue boxes meaningful was
Design (Indianapolis IN: Wiley, 2003). something more basic than the patterns themselves.
12 Apple Computer, Inc., Macintosh Human
A more general definition of interface was "the interaction
Interface Guidelines (Boston: Addison
between two systems" (American Heritage Dictionary). A more recent
Wesley, 1992).
13 Wikipedia, "User Interface"
interface definition from Wikipedia, the online encyclopedia,13
(http://en.wikipedia.org/wiki/User_ seemed closer to the point in defining user interface as: "The inter
Interface). (Acessed: 08/25/2007). face is the functional and sensorial attributes of a system (appliance,
Software, vehicle, etc.) that are relevant to its operation by users."
However, this definition emphasizes attributes over interaction,
suggesting that interface is a thing and not a process. A bit closer to
the point, Wikipedia goes on to describe user interface as having two

essential components and two general means:
The user interface is the aggregate of means by which
people (the users) interact with a particular machine,
device, computer program, or other complex tool (the
thing). The user interface provides (the) means of: Input,
allowing the users to control the system; (and) Output,
allowing the system to inform the users (feedback).
User interface, by this definition, involves both users and "things."

The interaction involves both inputs and outputs. For our study
focused on content interface, students summarized that any inter
face has two basic considerations: users and content. A great deal is
made in HCI literature about user-centered design and user needs.
This suggested that, for users, interaction has a purpose or aim even
if that aim is merely one of idle amusement. We therefore defined
user interface as the means by which users interact with content to
accomplish some goal.
Content Research
Armed with the interface definition above, faculty /student teams

initiated a research project to identify the essential features of an
effective content interface. We began with an examination of the
characteristics of various kinds of content in order to understand
how the nature of different content types might impact the design
of an interface to that content. The particular inductive method we
employed was based on "exegesis," an inductive method used for
understanding texts. "Exegesis," a Greek loan word, literally means
to lead or draw out (ex?out, hegeisthai?lead or think). Exegesis
has been translated as "expound" or "explain," and today has come
to mean the principles and methods used to draw the meaning out
of texts; primarily religious texts such as the Bible. We drew upon a
text-based research approach because we had limited the scope of
our work to interaction with content rather than interaction more
generally.
Respect for context and content type are the key principles
of exegesis. Following these principles, students selected, analyzed,
and compared the linguistic features of three different content types,
ranging on a continuum from poetic to scientific proposed by noted
author C. S. Lewis. The specific content types: poem, newspaper
editorial (from an edition of the New York Times) and scientific report
(from the New England Journal of Medicine), were intended to be repre
sentative of the full spectrum of content types.
Design Issues: Volume 24, Number 3 Summer 2008 89
Syntactical diagrams were created for each content type as
a technique to analyze the structure and meaning of the content.14
Word frequency, part of speech, and meaning were analyzed and
compared. A typical finding was that scientific articles contain words
with a high volume of very precise, often specialized meanings. On
the other hand, poems use common words, often with atypical or
unexpected metaphorical meaning: the words are not always used
literally. Syntactical structures of each content type were similarly
analyzed and compared. A typical finding was that poems do not
speak in complete sentences, that editorials build arguments; and
that scientific papers use rigid problem/solution structures with no
personal references. The linguistic features were used to theorize
authorial intention in writing the content and, by implication, the
intended audience. Teams reasoned that the authors of scientific
articles strive for precision in order to accommodate a small but
specialized audience, while poets strive to create a general impres
sion with a broad audience. Determining authorial intent through
linguistic analysis is unusual in design research, but is integral to
hermeneutics and exegesis; and the processes and techniques for it
are well established.15
The result of this research was to define a continuum of
"content types" bounded by two extremes:
A. Content Type Continuum: from the Scientific to the Poetic.

Scientific
Scientific information is explicit in the rules of interaction
between user and content. It is clear, direct, and adheres to
established content hierarchies and structures. It is acces
sible and often is thought of as part of a larger commu
nity of information that shares a common language and
purpose. Scientific information usually is cross-referenced
with similar and contrasting data, and typically is intended
to share information and inform its audience without bias
or emotion.
Poetic
Poetic information, in contrast, asks to be experienced. At
a more practical level, poetic information may not adhere

to the established content structure or hierarchy in favor of
artistic or personal interpretation. Instead, it crosses bound

aries and requires participation on multiple levels between
user and content. Poetic information is categorical, concep
tual, emotional, and usually includes sensory value.
14 Walter Kaiser, Jr., "Toward an Exegetical
Theology" in Web Style Guide: Basic

The features of these of interactive content types were analyzed
Principles for Creating Web Sites, Patrick
Lynch and Sarah Horton, eds. (Grand

and compared to deduce their strategies for delivering content. In a
Rapids, Ml: Baker, 1999). departure from exegetical practice, strategies, rather than authors,
15 Ibid. were described since current media seldom has a single identifiable
author. Four broad content delivery strategies were loosely defined: a
"reference strategy" serving discrete bits of information to a specific
inquiry; an "educational strategy" offering large quantities of infor

mation to teach about a more general topic; an "inspiration strategy"
to motivate or inspire an audience and lead self-discovery; and an
"entertainment strategy" to amuse or divert the attention of a gener
alized audience. Examples of each strategy were identified and their
content analyzed. A profile of the supposed user was created. In
some cases, the strategies themselves were given personae akin to
the user profiles / scenarios employed in the development of inter
faces.16 Over time, these initial strategic descriptions have evolved
into a continuum of four Content Delivery Strategies:
B. Content Delivery Strategies/Roles

Reference?The Librarian
A content delivery strategy designed to serve discrete
bits of information to users. Reference delivery takes the
persona of a librarian. Reference delivery is believable, and
is connected to a much larger community of information.
The reference source is driven to provide as much informa
tion as possible in as few steps as possible.
Educational?The Instructor
A content strategy designed to instruct, often in a step
by-step fashion. Unsurprisingly, educational delivery of
content takes on the persona of a teacher. An educational
or teaching delivery still maintains a high degree of believ
ability and trust, but is more likely to be sequential and
increase user knowledge through a series of learning or
building steps than the cross-referencing librarian persona.
The teacher, like the librarian, is driven to educate its audi
Inspiration?The Speaker
A content strategy designed to motivate or inspire.
Inspirational delivery takes on the persona of a motiva
tional speaker. Often, the inspirational source has a more
personal connection to the audience through calls to action
and directives. The inspirational source derives its trust
through emotional response and personal connection rather
than through factual data.
Entertainment?The Actor
Finally, an entertainment delivery strategy is designed to

amuse. It may take on the persona of an actor, and is geared
to draw a browser audience. Again, it establishes a more
16 Cooper and Reimann, About Face 2.0: direct connection with the audience and requires direct
The Essentials of Interaction Design. participation from the user. Entertainment sources are the

91
most open to interpretation, and may even require audience
participation in establishing the content. In this scenario,
the user is given a more authorial role than in the reference
and educational strategies.
Student teams continued to follow an inductive process through

personal interaction with various Web and interactive media experi
ences, in order to define significant parameters of the user. Although
it is difficult to select only one means of describing the user, we
focused on user intention as opposed to "user need," because every
user action is not driven by need: one does not necessarily need to
chat online with a friend. User intention also suggests the variability
of a single user's approach to an interface from session to session, or
even from moment to moment. Teams inferred the users' intentions
that each interactive content strategy was designed to meet. Using

"reverse engineering," students analyzed the content information
structure and the interactive approach of interactive media in order
to infer user intention. Students concluded that visual form is, in
many cases, an indicator of user intention the media was designed
to meet: data-oriented sites showed less concern on aesthetics, enter
tainment-oriented media more. Student reports raised questions such

as: "Does the look of a reference site really matter, if all the user is
going to do is go in, grab something, and head back out?" and "...
www.m-w.com serves as a superb reference site, but probably is the
worst looking site out there."
Like "content types," user intentions were described as a
continuum bounded by two extremes:
C. User Intention Continuum: from the Hunter to the Browser

Max Bruinsma has said, "The Web encourages a predator's
glance, processing a vast amount of fleeting information
fast, before focusing on a target."17 How a user chooses to
interact with an interface often is determined by his or her
purpose or intentions in accessing the content. In order
to address this, we have broken user intention into two
extremes of scale, that of the "browser" and the "hunter."
The Hunter
The hunter is focused, precise and often destination-driven.
The hunter values the speed and efficiency of an interface,
and rarely deviates from its initial content direction to
17 Max Bruinsma, Deep Sites: Intelligent

discover a new path. Also, a hunter's final content destina
Innovation in Contemporary Web Design tion is determined prior to the search while, at least initially,
(New York: Thames and Hudson, 2003). the browser may have no direction at all.
The Browser
The browser is intent on the journey and, in many cases,
may not have a final content destination in mind. The
browser is less focused and driven in the search for content,
and more likely to be open to new experiences. As an audi

ence, the browser perhaps is more likely to notice and even
be driven by the design of an interface.
A key difference between the users is their scanning behav

ior. The hunter may scan large quantities of information
quickly in order to find a predetermined target information
or content. The browser may scan that same information
looking for a general topic, new pathways, or even a diver
sion. Quite simply, the hunter is driven by need while the
browser is directed by personal interests or curiosity.
All content has an inherent structure. Content's inherent structure

may be modified to fit a specific strategy, giving it a "strategic struc
ture." This strategic structure takes the form of an interface in inter
active content. An interface may be classified by the structure of the
final content delivery. Four common interface types18 were described
to students: linear, hierarchy, matrix, and web. The assignment was
to evaluate each of these in relation to the content types, content
strategies, and user intentions; and to define how different user
intentions and content types might be served by the interface struc
18 Patrick Lynch and Sarah Horton, Web
Style Guide: Basic Principles for Creating tures. We determined that, based on inherent and strategic content
Web Sites (New Haven, CT: Yale considerations, efficient and appropriate interfaces can be created
University Press, 1999). along four structural themes: linear, hierarchical, matrix, and web.
Figure 1
Matrix of content delivery roles.
REFERENCE EDUCATIONAL MOTIVATIONAL ENTERTAINMENT

VOICE content specific, clear and to clear, specific, uses acc?s- stimulating, intent is to vague and open to interpre
the point, direct sible language in effort to inspire users, accessible tation
inform audience language
AUTHORSHIP values expert opinions trustworthy, researchable uses emotions to inspire open, may require content
authors trust rather than authorship participation from user to
establish meaning
MOTIVATION provide accurate data inform and educate inspire and emotional con- inspire and stimulate the
quickly, inform. nect. to stimulate audience, diversion.
CONTENT established content established content less content structure, more vague, open to interpretation
STRUCTURE structure, cross-referencing structure, accessible to large open to interpretation
and linking, most likely to be audience
hierarchy
SCALE links to much larger body of may be part of a larger more often, a single site that self contained and most
similar data community of data, can also may contain links to similar likely to be linear in
be singular. information structure.

93
D. Content Structures
Linear
A linear interface is one that is fixed sequentially. Scientific
content, having a fixed and sequential structure, is deliv
ered step-by-step, with one additional piece of information
following each successive selection. Instructions given
following a teaching strategy would be well suited to a
linear structure.
A linear interface is built with the following guidelines in

mind:
1 Each successive step of a linear interface builds on the
previous step.
2 The designer has the most control over the pace and
amount of content a user can access.
Figures 2 and 3
ooo
Student example, Phillip Harvey.
Student exercise exploring linear interaction.
The content progressed from a grid of nine
static circles to a dynamic composition of line

*K?fA?i* ^B^F
ooo
segments through the use of a segmented
scrollbar.
Hierarchy or Tree Structure
The tree diagram or hierarchy is an interface that expands
topically. In a hierarchy, several options may follow each
selection. A hierarchy is suitable for content with a parent/
child structure, and often is associated with a reference
strategy.
A hierarchy interface is built with the following guidelines

in mind:
1 A hierarchy, or tree diagram, is an interface that expands

topically from broader topics to more specific topics in a
branching fashion.
2 Several options follow each selection, depending on content
structure.
3 Hierarchy interfaces should be efficient and allow users to

access their desired content quickly and with a minimum of
additional steps.
4 In a hierarchy, the content and user share control. In The
Language of New Media, Lev Manovich states that "the user
of a branching interactive program becomes its coauthor. By
choosing a unique path through the elements of a work, she
supposedly creates a new work." But it also is possible to
see this process in a different way. If a complete work is the
sum of all possible paths through its elements, then a user
following a particular path accesses only part of the whole.
In other words, the user is activating only a part of the total
work that already exists.19
5 In a hierarchy, an independent value system determines the
19 Lev Manovich, The Language of New
content structure (size, value, like content), and allows a
Media (Cambridge, MA: MIT Press, user to access specific information quickly with a minimum
2002), 128.
of searching.
Figure 4
Student example, Ben Prince.
Student exercise exploring hierarchy.
Users controlled the content appearance
through color, size, and resolution.
95
wmm?xmm?m?m^kM
IgJllI
United States of America ~'""*w^
' ^ on bnghln^ of r?{^ !*y caused by artife^. ~

^&^0mfMl?^^?^:?Qmn tpsumdofofsii
^1,0??^^ ?fip*c.ns 6?rt Mort*
?W?n0(te,|3^m sedpteiretagravxia, orct
magna rtwiojs nequt, id puMnar odto kxem non
turpi*. Nuflam sit air? emm. Suspendes? id ve?
vitae Igula voiutpat condimentum, ANqvam era
vedufcat Sed quis veNL Nulfa factisi. Nuila ?ibeco.
|i|?|Ss;l^
Figure 5
Matrix
Student example, Ryan Devenish. A matrix interface is one that simultaneously presents
Student exercise exploring the matrix
multiple relational options, usually organized by categories.
structure. Content about major cities was
A matrix is well suited to content with multiple related
revealed through its placement on a grid.
categories following a reference strategy.
1 A matrix interface presents multiple relational options

simultaneously.
2 A matrix interface should be extremely efficient and allow a
user to access a large set of data simultaneously in order to
make comparisons and judgments about that data.
? .... ..?? .. .
pi
: i V ~E~~~~~~~~~~~~~. ~.. .. .:. .... . . topics like.: 'Exactly :

Joy of Pi
:. ..p .p. ... -. .: ..Chhm's Post of' Pi how many digt$: :is too
mny?" a.d 'No, I really
want to know how many
digits you have.
Useles-snss of Pi and
Its Irrational Friends
*?.;pe r.:e andv links to clubs, art.
irrational number pi
, relatinC tle: % Crefct Pi Pages,. The

: ._ to the diameter i: _ history. comiutational
Of.?:? acrclemethods. literature,
art. and more about the
,, _ t thl e 11ith ? | magic number
Pi Trivia same
lether greetk e ;how mu:h do you know
alphabet about everyone's favor te transcendental
number?
Figure 6
Web
Student example, Tim King. Search results A web is an interface freely associated cluster of undifferen
were place within a matrix based on how tiated items. It is useful for unstructured content following
scientific or poetic the content was and how
an inspirational or entertainment strategy.
closely it related to the search query.
The Process of Developing Interface Design Principles

Using the foregoing understanding of content type, content strategy,
user intention, and content structure as a basis, teams of three to five
students examined a variety of what they deemed to be success

ful Web site interfaces. Teams established a set of criteria for each
interface that defined why these interface designs were success
ful. Individual team reports were presented to the full group. The
group analyzed, compared, and synthesized their reports in an affin
ity diagram that resulted in the first draft of the design principles
presented in this paper. The stated focus was to develop design crite
ria that a designer could apply. Emphasis was placed on not defining
outcomes such as "easy-to-use," and on being specific as opposed to
vague such as "intuitive." Questions such as "What makes this intui
tive?" were repeatedly addressed to each principle. Once the prin
ciples were identified, they then were compared to published lists of
20 Lynch and Horton, Web Style Guide: principles in sources such as Patrick Lynch20 and Apple, then consoli
Basic Principles for Creating Web Sites. dated further. An example of such a comparative list follows:
97
Table 1
Apple Early / Zender Compared Lynch
Metaphors Metaphor Clear Icons

Direct Manipulation n/a
See-and-Point Proximity: Concept Space
WYSIWYG Proximity: Physical Space Fewest Possible Steps
User Control User Control:
Feedback and Dialogue Feedback Feedback

Forgiveness Reverse Return Easily /Go Back
Perceived Stability Landmarks Sense of Where You Are / Context
Aesthetic Integrity Content & Form Design Integrity

Modlessness (Feedback)
Knowledge of Audience [USER PARAMETERS]
Accessibility [USER PARAMETERS] Disabled Users
Subject Clear at Start Overview Screens
No Dead Ends
Bandwidth
Simplicity and...
Consistent Logic Consistency
Conventions Legacy (Graceful Degradation)
Early/Zender Original List
User Control
Start
Efficiency
Customization
Proximity Concept & Physical
Help
Content:
Subject Clear at Start

Interface in Content
Interface & Visualization
For further validation, this list was compared to a similar

consolidated list "General Principles for HCI" in Dumas's chapter on
basing design on expertise in human-computer interaction:21
Giving the user control
Striving for consistency
Smoothing human-computer interactions with feedback
Supporting the user's limited memory.
Following comparison and review, the various student lists were
condensed into the following set of Interface Design Principles.
98
Interface Design Principles
A. Obvious Start: Design an Obvious Starting Point
A user must know how to start interaction with the content. In
perceptual terms, "obvious" might be defined as visual form that

is pre-attentively processed.22 Pre-attentive features are proven to
"pop-out" and include: size, value, hue, orientation, shape, enclo
sure, blurriness, and movement. Arguably, movement is the most
basic pre-attentive feature, capable of attracting attention even in
the periphery of our vision. Pre-attentive features should be applied
using an "odd man out" principle, where the uncommon pre-atten
tive feature is the one that immediately stands out from its peers. For
example, one red word in a paragraph will stand out. A continuum
for this principle might be defined as from blatant to subtle.
A starting point is needed because every encounter with a
new interface involves a learning process. Cognitively, we learn
through finding patterns among details. In order to learn the inter
face, the user must know where to begin the learning process. This
may seem obvious, yet often is overlooked. In the late 1980s, IBM,
then still actively engaged in making typewriters, did an extensive
redesign of their typewriter line basing the product revisions on
extensive user research. One of the key findings was that the most
fundamental problem with using the typewriters was how to turn
the machine on: the user needed an obvious start button. The equiva
lent in architecture is to make the position and function of the door
of a building obvious.
B. Clear Reverse: Design an Obvious Exit or Stop

The user must know how to reverse any action, including how to exit
or end the session. Again, "obvious" might be defined as what is pre
attentively processed but, in the case of a reversal, "obvious" only is
needed occasionally. Therefore, the reversal should become obvious
"on demand," and should not necessarily pop-out continuously. The
reversal should be omnipresent and clear but subtle. Subtle might
be defined following Edward Tuf te's concept of smallest effective
difference.23 The result would be present but unobtrusive. "Exit" may
be defined as anything that stops or interrupts the current state. A
familiar example of a reversal / exit is the "close window" feature
common in both Mac OS and Windows operating systems.
"Reversal" is not simply the opposite of start. And exit is
more than just the end. Knowing an exit route may provide the
sense of confidence necessary to sustain an interactive session.
21 Joseph Dumas and Janice Redish,

Apple's "Guidelines" call this principle "forgiveness" and state
A Practical Guide to Usability Testing that "Forgiveness means that actions on the computer generally are
(Norwood, NJ: Ablex, 1993). Elsevier, reversible. People need to feel they can try things without damaging
2004).
the system."

99
C. Consistent Logic: Design an Internally Consistent Logic
for Content, Actions, and Effects
Note: the most important consistency is consistency with user expec
tations.
Within an interface, a user must be able to quickly identify

a logical, rational pattern of relationships between user actions and
effects. By "internally," we mean within the world defined by the
interface and its content. Design patterns should be consistent within
the world the interface develops. To reinforce the pattern, a user
must be able to depend on an acceptable level of consistency. For
example, if buttons change form on hover, they should respond in
a similar way or a logical extension of that way for a similar action.
Consistency does not mean monotony. It is possible to design a
rational evolution of relationships between user actions and effects
throughout the interface experience. The actions and effects might
change in logical ways as content changes. For example, as content
becomes more detailed, user feedback sounds might become softer or
higher in pitch. Uniformity is not the answer: logical progression and
development that keeps interaction consistent with and reflective of
content is. A user should find a logical consistency of all aspects of
interaction, from visual form to motion, and the connections of these
to content types. A continuum for this principle might be defined as

from consistent to erratic.
This may be the most comprehensive principle for good inter

face design. It is based on human logic and cognition. When patterns
are consistently and rationally connected to actions and content,
users with average cognitive abilities will recognize the patterns
and their meanings. Internal consistency is important because each
interface creates a world that is distinct, though not isolated, from
its immediate context (see the next principle for respecting conven
tions). Consistency reinforces learning and keeps the learning curve
brief. Comprehensiveness builds a sense of reliability and keeps
users from wondering whether different forms, words, situations,
and actions mean the same thing.
D. Observe Conventions: Identify and Consider the Impact

of Familiar Interface Conventions
Identify and respect a user's familiar interface language of words,
phrases, images, and conventions. An interface does not need to obey
all interface conventions familiar to a user, but it should violate those
conventions with care. Respect might be defined as only violating a

convention only when such violation gives a particular advantage or
22 Colin Ware, Information Visualization

avoids a particular problem. Existing conventions can be built upon,
(San Francisco: Morgan Kaufman/
extended, or even played with as appropriate for user and content
Elsevier, 2004). parameters. A continuum for this principle might be defined as from
23 Edward Tufte, Visual Explanations, 73. observe to ignore conventions.
Users do not come to an interface as a blank slate, but rather
with a host of previous experiences and expectations. Social and

cultural experiences are preexisting conditions deserving respect.
E. Feedback: Design Tangible Responses to Apt User Actions

Users should receive feedback as they do tasks. Make the feedback
as immediate as possible to the action in time and space. "Tangible"
can be defined as feedback that is noticeable. Again, Tuf te's concept
of smallest effective difference might be applied here, making the
effect of actions as minimal as effectiveness permits.24 Keep the feed
back proportional to action's importance. Feedback should be logi
cally consistent and in alignment with content as noted previously.
A continuum for this principle might be defined as from immediate
and direct to delayed and disconnected.
Immediate feedback is necessary to keep users informed that
their actions are having an effect. Apt feedback can be a form of
reward for the user.
F. Landmarks: Design Landmarks as a Reference for Context

Users should have available information suggesting their location
in the conceptual space of the interface. Design noticeable reference
points, features, or landmarks that the user can identify. Some of
these should be available at any time. These may be the equivalent
of mile markers the user has passed, indicating progress; or behave
as highway signs showing where they might go. A continuum for
this principle might be defined as from clear or many to obscure or
few.
Landmarks build upon users' ability to build a mental model

of their experience. Landmarks are significant in the related field
of "wayfinding" as it relates to spatial navigation. They also are
significant in procedural knowledge as it relates to the logical or
non-spatial mapping of information. Landmarks support the user's
cognitive map, and help users identify where they are and where
they can go in relation to the other aspects of the content.
G. Proximity: Design Interface Elements in Consistent Proximity

to Their Content Objects and to Each Other
A user should not have to traverse great physical, conceptual, or time
spaces to perform similar actions or access related content. There
are at least three kinds of proximity: space, time, and concept. Good
proximity in space builds on users' location memory by associat
ing content and interface in a consistent or logical evolution of X Y
Z space. Good proximity in time means content is available when
the user wants it. Proximity in concept space means related items
are grouped. An example of conceptual space is Apple's "see and
point" menu system which groups related items into conceptual
101
menus. Cluster similar items spatially as well as conceptually. Design
consistency in the spatial location of related objects. A continuum for
this principle might be defined as from close to distant. Proximity is
important because visual working memory has a spatial component
that remembers the positions of up to three to five specific objects.25
Proximity advantages this innate memory.
H. Adaptation: Design an Interface That Adapts or Is Adapted to

Use
Allow users to tailor the interface to frequent actions. Design inter
faces that identify and adapt to user segments. Envision systems
in which the interface adapts itself to user needs or to patterns of
interaction. For example, an interface could be envisioned that over
time automatically minimizes or even eliminates infrequently used
features or menu items. A continuum for this principle might be
defined as from adaptive to inflexible.
Customization advantages different user intentions, and
fits them to diverse content types even within one application. It
acknowledges that users can be novices or experts with the interface,
the content, or both.
I. Help: As Necessary, Provide a Readily Accessible Overall

Mechanism for Assistance
Design a support source of last resort. Make it available, but keep it
subtle. An example is the help feature in many software applications.
However, do not use a help menu as a crutch for poor navigation.
Recognize where complexity demands it, and provide help that is
easy to search and linear in form when instructions are involved. A
continuum for this principle might be defined as from available to
distant.
J. Interface Is Content: Design Interface Elements That Minimize

Interface and Maximize Content
A user utilizes an interface to get access to content. Therefore, content
is paramount. The interface is part of the content, not merely a means
to access content. Design the interface so that interaction is as direct
with content as possible. Avoid interfaces that come between the
content and the user. Wherever possible, make the interface part of
the content, and not just an unrelated control. The interface serves
the content, not the other way around. A continuum for this principle
might be defined as from integrated to separated.

Every extra unit of information in a dialogue competes with
_ other content. Interface elements, when divorced from content, can
24 Ibid. become noise that obscures the purpose of the interface.
General Design Principles
The following principles constitute good communication design
practice and, as such, should be included in interface design practice,
but are not specific to interface design. Every interface, by defini
tion, engages a user with some content. It is logical for the inter
face to reflect the nature of the content in every possible aspect. The
interface type should match the content type and user intention. For
example, step-by-step instructional content is best presented with
some variant of the linear interface.
A. Subject Matter: Make Subject Matter Obvious from the Start

A user should gain immediate understanding of the subject matter
related to the interface. Design the interface so that in every aspect
it expresses the content and content type.
Content types differ in nature and structure, and thus require
different interfaces. Poetic content, ambiguous by nature, will not
submit itself to hierarchical categories and information trees.
B. Interface Visualization: Use Visual Form Apt to the Content to

Embody the Interface
Presenting information visually engages the user's ability to sense
and feel; compacting much information into a quick, perceptual
encounter. The power of computers to collect, store, and manipu
late numbers far surpasses human capacity to understand that same
data. As a result, the visualization of large quantities of information
takes on great significance, transforming incomprehensible data into
understanding.26
Humans have remarkable perceptual abilities to scan, recog
nize, and recall images, as well as to rapidly detect meaning in
patterns and changes in size, shape, color, movement, and texture.
Text requires more cognitive effort to understand content, because
the relationship between form and meaning is somewhat arbitrary.
C. Content + Form: Design Apt Visual Form Based on Content

A user must be engaged by the formal visual qualities of the inter
face. Design an interface that is visually engaging, or aesthetically
successful; which are essentially two ways of saying the same thing.
The most apt visual form is one that reflects the nature of the content
in a stimulating way. An interface that fails to engage and keep a
user's attention has failed by definition: the user has disengaged and
no longer interfaces with the object or content.
Museums can testify that people everywhere and at all times
have desired visually engaging objects as cultural artifacts. Building
a visually engaging interface applies this proven principle in order
25 Colin Ware, Information Visualization.
to engage and hold the interest of a user.
103
D. Metaphor: Use Metaphors Where Content Is New, Obscure,
or a Narrative-Based Visual Metaphor
Metaphors trigger memories and build associations. Use them where
helpful, particularly when introducing new or obscure concepts.
The following is the essence of Working with Interface
Metaphors by Thomas D. Ericsson:
Metaphor is an effective tool in interface design in that it
engages users more fully, allowing them the ability to use
previous knowledge and experience to better understand
current unknown experiences. A metaphor is an invis
ible web of terms and associations that underlies the way
we speak and think about a concept. Metaphors function
as natural models, allowing us to take our knowledge of
familiar, concrete objects and experiences and use it to give
structure to more abstract concepts."27
Integrating Interface Parameters with Interface Principles

To properly guide the design of an interface, we believe the prin
ciples for design proposed above in Section Two must be integrated
with the parameters defining interface outlined previously in Section
One. Principles in isolation do not provide sufficient guidance to
inform design decisions. The principle "Obvious Start" comes from,
and is mediated by, user intentions interacting with content type,
delivery strategy, and content interface structure. For example, the
obviousness of the entrance of an interface for a browsing user expe
riencing poetic content with an entertainment strategy composed in
a web structure will be different from a hunter of scientific content.
Having defined a user interface as:

the means by which users interact with content for a purpose,
and having defined the Parameters that govern an effective

interface as:
Content Type: Scientific - Poetic

Content Delivery: Reference - Educational - Inspiration
- Entertainment
User Intention: Hunter - Browser
Interface Type: Linear - Hierarchy - Matrix - Web
and having established a workable list of best Design

Principles:
Obvious Start:
26 Marc Green, Toward a Perceptual
Clear Reverse:
Science of Multidimensional Data
Visualization, Bertin and Beyond (Toronto: Consistent Logic:

ERGO/GERO, 1998), 11. Observe Conventions:
Feedback:
Landmarks:
Proximity:
Adaptation:
Interface Is Content:
Help:
We can integrate the parameters and principles to establish a

parameter I principle matrix that can guide design decisions. An
example is described and graphically illustrated below.
A designer is designing an interface for poetic content: a
movie promotion. The presentation strategy is a speaker because
the film has documentary qualities, while the user intention is antici
pated to be a hunter intent on finding specific historic references
touched upon in the film. The content structure selected to support
these conflicting needs is a matrix. To fulfill the principle of provid
ing an obvious start to meet the above parameters, the designer
might choose a start toward the subtle end of an obvious to subtle
continuum. To create a subtle but effective start, the designer might
select a fairly muted color on a bright-to-muted continuum, a small
size on a large-to-small continuum, but an obvious upper left corner
location, following Western reading direction conventions, on an
obvious-to- obscure location continuum. The result of these deci
sions is illustrated on the following chart:
Scientific Poetic
Figure 6
Student example, Tim King. Search results Librarian Teacher SpeaJcer Actor
were place within a matrix based on how
scientific or poetic the content was and how

Hunter Browser
closely it related to the search query.
Linear Hierarchy 'Matrix Web
m
Obvious Start:
Color
saturated fTHJtftd
FOff?
x Y Location
><
' jwpict&d - upptr tuV'
27 Thomas Ericsson, Working with Interface
Metaphors (Boston: Addison-Wesley,
2001), 66.
105
Note that the decisions related to "obvious start" align roughly with
the interface parameters above them, causing each design decision
to be taken in reference to the specific interface parameters being
addressed. While this process could be followed with each interface
principle in turn: clear reverse, consistent logic, observe conventions,
and so forth; in practice, consideration of a just a few principles
generally leads to a design theme or system that encompasses the
other principles. The process is not linear, but iterative and global,
consistent with the principle of consistent logic. We believe this
approach has great flexibility while accounting for all the relevant
factors. The principles proposed are actionable, and have the poten
tial to be measurable. While guidance is clearly prescribed and is
based on the parameters of an interface, the means to accomplish
such an interface are left completely open, inviting invention and
innovation. Novel combinations can be envisioned and may even
be encouraged. Recipes for making Web site maps are replaced by
guidance in establishing landmarks and contexts for a particular
user intention and content type. Gone are vague descriptions of end
states; replaced by a creativity-expanding matrix of distinct possibili
ties aimed toward a target experience.
Need for Further Study

We have applied these design principles in a variety of classroom
interface design projects clustered around the theme of content
exploration and way finding in museum settings. The projects have
produced interface prototypes. In applying these principles in the
design of simplified and incomplete interface models, students have
been able to explore ideas, elaborate requirements, refine specifica
tions, and test functionality. These principles have given the design
ers a method to visualize, evaluate, learn, and improve design
function.
Even so, more work needs to be done.
Each of the design principles proposed in this paper should
be defined so that its parameters are measurable. Unfortunately ours
are not. Design theory and practice are woefully inadequate in defin
ing visual form in quantifiable ways. If parameters are not measur
able, they are not really attainable: they are just nice advice. The field
of design is ripe with good advice, and while we are happy to add
our voice to the chorus, that is not ultimately our aim. We hope to
see research in design expand to include the features and functions
of visual form so that design principles that relate to visual form,
such as those proposed here, can be defined, measured, tested, and
refined.
Through research in and out of the classroom, we have

discovered that such definitions are possible. For example, the pre
attentive visual feature of blurriness, noted in the "Start" Principle,
recently was defined in a student research project as the ratio of
gray to solid pixels. Further, the point at which the ratio became
effectively pre-attentive, the point at which it popped out, was estab
lished. Through this study, it was determined that dark values proj
ect blurriness with less real physical blur than light values. Pushed
further, a ratio of blurriness to background value might be developed
quantifying the degree to which different amounts of blurriness pop
out from their surroundings. These ratios could be applied to the
"Start" and "Exit" principles, tested, and evaluated. Unfortunately,
there are nearly a dozen pre-attentive features. This study barely
explored one, and that one in isolation from the others. More stud
ies such as this are needed to define effectiveness of visual form,
and how it might be used to quantify visual attributes in interface
displays.
Figures 7 and 8
Student example, Chrissie Talkington.
Initial research for the design principles noted
in this paper. Blurriness example.
Blur Radius: Blur Radius:
12 pixels black = Blur Ratio 1:0 6 pixels black, 12 pixels gray =

Blur Ratio 1:2
Summary
We believe it is clear that interface parameters and design principles
can be combined in a way that to supports a design practice. We also
believe that an integrated approach combining users, content, and
form is comprehensive enough at a high level to guide the design of
novel and effective interfaces. As a result of this study, it also is clear
that more precisely defined parameters for visual form are needed in
order to apply design principles in measurable ways. Without more
detailed knowledge of the effects of the execution of visual form,
the principles proposed above can only be applied intuitively. We
believe that the next steps are to conduct research in visual form, and
apply it to the proposed principles to define them in more measur
able ways. Through continued research, we would like to convert
intuition into significant knowledge so that designers can grow to
make the kind of contribution to human understanding that we
believe we are capable of making.
107

BlairEarly UserInterfaceDesign 2008

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BlairEarly UserInterfaceDesign 2008

Uploaded by

Copyright:

Available Formats

User Interface Design Principles for Interaction Design

Author(s): Adream Blair-Early and Mike Zender

Acknowledgements In recent years, the number of computationally-based devices has

the paper. edge or accessibility limitations the challenge can be insurmountable.

? 2008 Massachusetts Institute of Technology

Design Issues: Volume 24, Number 1 Winter 2008

The Need for Principles

CT: Graphics Press, 1983); and Edward

86 Design Issues: Volume 24, Number 3 Summer 2008

Contemporary Rhetoric: A Conceptual

88 Design Issues: Volume 24, Number 3 Summer 2008

the point, Wikipedia goes on to describe user interface as having two

User interface, by this definition, involves both users and "things."

Armed with the interface definition above, faculty /student teams

Design Issues: Volume 24, Number 3 Summer 2008 89

A. Content Type Continuum: from the Scientific to the Poetic.

a more practical level, poetic information may not adhere

artistic or personal interpretation. Instead, it crosses bound

Theology" in Web Style Guide: Basic

Lynch and Sarah Horton, eds. (Grand

90 Design Issues: Volume 24, Number 3 Summer 2008

inquiry; an "educational strategy" offering large quantities of infor

B. Content Delivery Strategies/Roles

Finally, an entertainment delivery strategy is designed to

Design Issues: Volume 24, Number 3 Summer 2008

Student teams continued to follow an inductive process through

that each interactive content strategy was designed to meet. Using

tainment-oriented media more. Student reports raised questions such

C. User Intention Continuum: from the Hunter to the Browser

17 Max Bruinsma, Deep Sites: Intelligent

92 Design Issues: Volume 24, Number 3 Summer 2008

and more likely to be open to new experiences. As an audi

A key difference between the users is their scanning behav

All content has an inherent structure. Content's inherent structure

Matrix of content delivery roles.

REFERENCE EDUCATIONAL MOTIVATIONAL ENTERTAINMENT

Design Issues: Volume 24, Number 3 Summer 2008

A linear interface is built with the following guidelines in

Student exercise exploring linear interaction.

The content progressed from a grid of nine

static circles to a dynamic composition of line

94 Design Issues: Volume 24, Number 3 Summer 2008

A hierarchy interface is built with the following guidelines

1 A hierarchy, or tree diagram, is an interface that expands

3 Hierarchy interfaces should be efficient and allow users to

Student example, Ben Prince.

Student exercise exploring hierarchy.

Users controlled the content appearance

through color, size, and resolution.

United States of America ~'""*w^

' ^ on bnghln^ of r?{^ !*y caused by artife^. ~

1 A matrix interface presents multiple relational options

96 Design Issues: Volume 24, Number 3 Summer 2008

: i V ~E~~~~~~~~~~~~~. ~.. .. .:. .... . . topics like.: 'Exactly :

*?.;pe r.:e andv links to clubs, art.

, relatinC tle: % Crefct Pi Pages,. The

The Process of Developing Interface Design Principles

students examined a variety of what they deemed to be success

Apple Early / Zender Compared Lynch

Metaphors Metaphor Clear Icons

Feedback and Dialogue Feedback Feedback

Aesthetic Integrity Content & Form Design Integrity

Early/Zender Original List