Universal Model of a User Interface

Bob Baxley Abstract

Baxley Design This article describes a model of a user interface
dux@baxleydesign.com that can be applied to any interactive medium or
product. The model begins with on the established
model of structure-behavior-presentation but adds
additional levels of granularity and specificity.
The article also describes the importance and utility
of such a model, both in regards to cross discipline
communication and the allocation and prioritization of
tasks and resources.
The article illustrates the model in practice by
applying it to a single detailed example as well as to
four well-known interfaces drawn from different
mediums. By demonstrating how the model can be
used to evaluate the relative complexity and
sophistication of an interface and its constituent parts,
the examples serve to illustrate the model’s utility as
both a communication device and a diagnostic tool.

Permission to make digital or hard copies of all or part of this Keywords

work for personal or classroom use is granted without fee provided
that copies are not made or distributed for profit or commercial Interface Design, Design Models, Interaction
advantage and that copies bear this notice and the full citation on Design, Information Architecture, Conceptual Model,
the first page. To copy otherwise, or republish, to post on servers
Design Planning, Process Improvement
or to redistribute to lists, requires prior specific permission and/or a
fee. Copyright 2003, ACM.
Industry/category
All industries and all interactive mediums.

Project statement
The goal of this project was to create a universal
model and consistent language for identifying,

describing, and prioritizing the various elements of a
user interface. Originally developed as an educational
and organizational tool for the book, “Making the Web
Work: Designing Effective Web Applications”, the
model’s utility lies in its ability to help designers and
non-designers deconstruct a complex user interface
into a collection of smaller issues that can be
understood and discussed in relative isolation from one
another. The model also provides a consistent
methodology for prioritizing design issues according to
their impact on usability and engineering efforts.
Although the model was initially created to describe
Web applications, it is equally applicable to other
interactive mediums including desktop software
applications, automated teller machines, and DVD
menu systems. The adoption and standardization of
this model aids communication and improves efficiency
by providing a consistent method for engineers,
marketers, and designers to discuss, prioritize, and
evaluate design issues.
Project participants
The editorial staff for “Making the Web Work:
Designing Effective Web Applications”, played a key
role in the development and refinement of this model.
That staff included Lisa Lord as Development Editor and
Tim Kostolansky and Scott Berkun as Technical Editors.
The visual design of the diagram was initially created
by Jerome Doran.
Project dates and duration
The creation and refinement of the model evolved
alongside the early writing of the book, a period of
approximately 6 months beginning in September of
2001 and ending in March of 2002.
2
Process
Like virtually all designers involved in the creation
of interactive media, I had developed my own mental
model of the various aspects of an interface as a way of
approaching my work. Unfortunately, I had never been
forced to formalize that model so it could be readily
understood and utilized by others. Although I was often
frustrated in my attempts to explain the importance of
process and design prioritization, I lacked a concrete
tool for communicating and categorizing design issues
for engineering, marketing, and management. Without
a formal model to understand the relative importance
and effect of aspects of the interface, I experienced
non-designers and inexperienced designers grasping at
patchwork solutions or pursuing knee-jerk reactions to
both user studies and peer feedback.
The process of writing a book intended for non- and
inexperienced designers however, required me to
formalize my own thinking into a concrete, explicit, and
articulate model that could serve as both a teaching
and an organizational device. That model is the subject
of this paper.
Although the traditional delineation between
structure, behavior, and presentation served as an
obvious starting point, those three elements alone did
not provide sufficient granularity to describe the full set
of issues and considerations involved in more complex
forms of interactive media such as Web applications.
Although I also consulted the five-plane model
described by Jesse James Garrett in, “The Elements of
User Experience”, I found Garrett’s emphasis on the
bifurcation of content and functionality a difficult
concept to apply to applications in general and Web
applications in particular. In addition, because Garrett’s
model was developed to describe Web sites, it did not

delineate some of the concepts and mechanisms critical
to functionality-centric applications.
Ultimately I devised my own model by adding
additional layers of granularity and meaning to the
traditional three-tier approach. During the course of
writing, I discovered various weaknesses or
inconsistencies in the model that required both minor
and major changes to the ordering and definition of the
individual layers of the model. Except for a minor
change to one layer of the model, it has remained
stable since the book was published.
Since I devised and adopted this model, it has
become fundamental to how I approach and evaluate
different design problems and solutions. Although I
have had limited opportunity to use it on new projects,
it continues to prove its worth as a teaching,
communications, and diagnostic tool.
In addition, since the publication of “Making the
Web Work”, I have heard from other designers,
engineers, usability researchers, and educators who
have found the model a useful tool for structuring the
design process, interpreting usability findings, and
discussing design issues.
Finally, forums such as this one have provided me
the opportunity to further explore the applicability of
the model to mediums beyond the Web.
Practice details
Like other sophisticated, multi-dimensional forms
of communication, interactive media requires the
designer to harmonize and balance a variety of differing
and often opposing concerns. Even though a user
encounters an interactive product as a single, unified
experience, the designer has to construct and
understand the experience one element at a time. Put
another way, although spectators may experience the
3
juggler and the juggled as a single phenomenon, the
juggler himself has to simultaneously consider each ball
as a single object and as part of a whole.
Therefore, the ability to consistently create superior
solutions requires the designer to adopt a method for
deconstructing the overall experience into a series of
smaller, interrelated problems that can be solved in a
conscious, consistent, and repeatable manner. This
allows the designer to proceed with an understanding
of discrete interface elements as well an appreciation of
their influence on the whole. This type of method also
supports the consistent prioritization of design and
engineering efforts by placing individual design
considerations on the continuum of foundational to
supporting.
To understand the value of such a model, it’s
instructive to look at another form of multi-dimensional
communication: movies.
Dissecting Cinema: Models at the Movies
Although an audience experiences a movie as a
single, coherent, unified expression, the process of
creating a movie requires the filmmaker to understand
and manipulate a number of different elements and
aspects individually. In addition, these elements tend to
build on and reinforce one another, necessitating a
particular sequence of activity and creative decisions.
Applying the traditional structure-behavior-
presentation model of interactive design, a movie can
similarly be dissected along the lines of story-
production-presentation. Those three tiers can
subsequently be divided into nine layers as shown in
figure 1.

Figure 1: By deconstructing the components of a
movie into individual layers, it is possible to better
understand how the various aspects of a film work
together to create a cohesive experience.
Although most people would never describe a
movie in this way, they would surely notice if a
particular film was inconsistent across these layers. For
example, once a film has been identified as comedy,
action, or horror, only certain types of characters,
action, or music are acceptable. Similarly, the purpose
of the outer layers, Effects, Editing, or Score for
example, is to support and augment the inner layers.
Approached this way, the filmmaker is able to
recast the overwhelming challenge of creating a
finished film into a series of prioritized, interrelated
4
problems that can be solved in a systematic, controlled
manner. A similar deconstruction of a user interface
provides comparable benefits to the process of creating
interactive products.
Dissecting the Interface: From Concepts to Pixels
Figure 2, illustrates a universal model of the user
interface. Beginning with the three tiers of structure-
behavior-presentation, the model is divided into nine
discreet layers arranged from foundational to
supporting. Because interactive design lacks the shared
vocabulary of cinema however, further definition is
required.
TIER 1: STRUCTURE
The Structure tier comprises the three lowest levels
of the user interface: the conceptual model, the task
flow, and the organizational model. Because the
abstract nature of these layers makes it impossible for
users to readily “touch” them, few users are ever
consciously aware of them. However, because they
form the conceptual and organizational basis of the
experience they are ultimately the most important
aspects of the design.
Layer 1: The Conceptual Model
The conceptual model is the most fundamental
aspect of the interface, describing the relationship
between the interface and the outside world. The
purpose of the conceptual model is to draw on the
user’s past experiences so they can readily understand
basic operations and accurately predict functionality.
 5

Figure 2: A universal model of

a user interface spanning the
conceptual to the specific.

Layer 2: Task Flow
The task flow is concerned with the manner in
which users complete specific operations with the
system. In contrast to the conceptual model, the task
flow is largely dependent on the product’s technical
environment. For example, the steps required to select
and delete a mail message in a Web environment are
different than those required to accomplish the same
task in a desktop environment.
Layer 3: Organizational Model
The organizational model describes how the
system’s content and functionality are ordered and
categorized. Also known as the information
architecture, the organizational model encompasses
both the classification scheme as well as the model of
association, hierarchy versus index for example.
TIER 2: BEHAVIOR
The middle layers of the model comprise the
Behavior tier and describe interactive qualities as
opposed to a conceptual framework or visual
presentation. The design problems encountered in the
Behavior tier call on the designer to anticipate and
accommodate the user's actions as well as the system’s
reaction as they unfold over time.
Layer 4: Viewing and Navigation
The Viewing and Navigation layer encompasses the
wide variety of behaviors and operations that allow
users to navigate the interface and effect its
presentation. Resizing windows, customizing a palette,
sorting data, or navigating between pages are all
examples of viewing and navigation behaviors.
6
Layer 5: Editing and Manipulation
The Editing and Manipulation layer contains the
behaviors that result in permanent changes to user’s
stored information. In a word processor for example,
the addition and deletion of text as well as changes to
text formatting are part of the Editing and Manipulation
layer. Behaviors in this layer can often be recognized
by the following traits: they result in permanent, stored
changes; they require an implicit or explicit save
operation; and they typically require validation of the
input data.
Layer 6: User Assistance
Interface elements that inform users of the
application’s activity and status, as well as elements
dedicated to user education, are all contained in the
User Assistance layer. This includes online help, error
alerts, and status alerts.
TIER 3: PRESENTATION
The Presentation tier describes the specific visual
and textual expression of the interface. Unlike the
Structure tier, which is primarily concerned with the
interface as a whole, or the Behavior tier, which is
generally focused on individual operations, the
Presentation tier has to simultaneously accommodate
pixel-level detail and system-wide standards.
Layer 7: Layout
The various design decisions governing the
placement and ordering of onscreen elements are
expressed in the Layout layer. In addition to providing
an ordered visual flow, the Layout layer also supports
the Behavior tier by arranging elements in a manner
that helps communicate behavior, importance, and
usage.
 7

Layer 8: Style architectural assumptions made at the beginning of the

Like many forms of visual design, the Style layer is
concerned with emotion, tone, and visual vocabulary.
Because it is the most visible and concrete aspect of an
interface, it typically accounts for people’s first
impression of a product. Paradoxically however, the
ultimate effect of style on overall usability or user
satisfaction is minimal.
Layer 9: Text
Contained within the Text layer are all the written,
language-based elements of the interface. This includes
the labels used to represent the organizational model,
the names of the input and navigational controls
contained in the Viewing and Navigation layer, and the
alert messages and help text used by the User
Assistance layer.
product’s lifecycle make it impossible to reorient the
product into a tool dedicated to the editing and
manipulating of numbers. Because of the engineering
effort required to modify structural elements of the
interface, it is crucial for designers to create a
successful solution before code is written.
USER AWARENESS: Because the elements of the
presentation layers; color, typography, style, layout,
and text, are the most concrete and visible aspects of
an interface, they dominate user awareness and
usability feedback. As a result, wire frame diagrams
and other methods that eliminate or minimize the
presentation layers are often used to increase
understanding of the more foundational layers.

IMPACT ON USABILITY: The elements that users are

Critical Implication from the Model
least aware of; the conceptual model, task flow, and
More than facilitating a common vocabulary, the
organizational model for example, are also the
critical value of this model is what it implies about the
elements that have the most severe impact on
appropriate prioritization of design tasks, the allocation
usability. And vice versa, the elements, which are the
of design resources, and the reaction to user input. This
most visible, the layers of the Presentation tier,
is captured in the specific ordering of the layers
paradoxically have the smallest impact on usability.
according to their impact on technical flexibility, user
Note however that research by Fogg et. al. at
awareness, and usability. This is illustrated in the three
Stanford’s Web Credibility Project indicates that the
axes that appear at the bottom of the diagram.
quality of the visual design is the most important factor
in a consumer’s evaluation of a Web site’s credibility.
TECHNICAL FLEXIBILITY: Because the three layers
Although it is unclear whether such research is
contained in the Structure tier describe the foundations
applicable to applications either on or off the Web, the
of the interface, they are invariably represented in the
importance of visual design to the creation of a positive
architecture of the application’s code. For example, the
first impression and a satisfying user experience cannot
underlying code of an application like Microsoft Word
be overstated.
assumes the product is a tool for editing words, a sort
It is equally important to note however, that while
of electronic typewriter. Although it has obviously been
visual design is clearly an important component of a
possible to expand the code to handle images, the
comprehensive design, it can not repair deficiencies in

the foundational layers any more than special effects
can make up for a bad story.
The critical message of these three axes is evident:
Although the foundational components of the Structure
tier generate the smallest amount of direct user
feedback, they are also the elements that have the
greatest impact on usability and engineering effort.
In addition, although products should always meet
some minimal level of visual and behavioral
sophistication, incomplete or rushed solutions in the
Presentation tier and even the Behavior can more easily
be fixed in a subsequent release. Therefore, for new
products or projects with limited time or resources, the
design effort should initially focus on the lower layers of
the interface.
The model also holds an important implication for
interpreting usability studies. Because users are most
aware of the Presentation tier, a majority of their
comments are likely to be focused on this area.
However, because of technical flexibility and relatively
lower impact on overall usability and satisfaction, such
comments or criticisms should not be weighted as
heavy as comments or confusion over more
foundational components of the interface. For example,
if a designer or researcher concludes that a problem
exists with the conceptual model, it is critical to address
the issue as soon as possible since any weakness in a
foundational layer will echo through the remainder of
the interface.
8
Putting the Model to Work
To better understand the utility and application of
the model it is instructive to use it to deconstruct a
complex interface such as that shown in figure 3.
Although many elements of the example are readily
recognizable by an experienced user of the Web, there
are in fact a multitude of different concepts, behaviors,
controls, and visual presentations, each of which
represents a conscious decision or unconscious decision
on the part of the designer. By using the model
described here, it is possible to analyze and understand
those decisions and to evaluate their impact on the
overall experience.
Layer 1: Conceptual Model
The most instantly recognizable conceptual model
of this interface is a tabular grid of information
displayed in rows and columns. Once a user grasps this
fundamental motif, they can easily understand the
main purpose and function of the page. In addition, if
they are experienced with other software
implementations of row/column grids, they should also
be able to infer other common functionality such as
sorting and editing.
In addition to the tabular grid model, the page also
requires the user to understand and grasp the
conceptual model of a page as represented on the
World Wide Web. Without this conceptual framework it
would be very difficult for them to operate the various
interface controls such as the links, buttons, and tabs.
Fundamental to any interaction with this interface
is an understanding and knowledge of these two
conceptual models, the tabular grid and the Web page.
Similarly, these two models underlie the technical

implementation of this application and are embedded in
that implementation.
Layer 2: Task Flow
Although it is not represented in this single page,
the task flow of the example relies on a hub structure.
The hub structure follows a launching pad metaphor
where a single page serves as a leaping off point to
single page forms, which in turn, bring the user back to
the center of the hub. In this specific example, clicking
the Edit Account button takes the user to a form where
they can edit properties of the selected account before
being brought back to the page shown here.
In addition to hubs, Web applications also make
use of two other types of task flows, wizards and
guides.
Layer 3: Organizational Model
The most conspicuous aspect of the organizational
model shown in this example can be seen in the
primary navigation area represented by the blue tab
bar near the top of the screen. In this case, the
designer has organized the overall site by financial
practice, further subdividing the investments practice
as shown in the gray bar. In addition, they have
organized this specific application by accounts and
views as shown in the selector area on the left side and
the menu labeled View.
Finally, they have made specific choices regarding
what types of data to display with each of the views
contained in the View menu. In the case of this
particular view, they have chosen to display seven
different fields as well as three summary values.
Layer 4: Viewing and Navigation
Elements of the Viewing and Navigation layer are
evident in the myriad of links and buttons displayed in
9
the navigation areas and the main table. By definition
behaviors in this layer do not permanently affect stored
data and in fact, the behavior of every navigation and
control element in this page is part of this layer. One of
the critical decisions contained in this layer is the
relationship between the view and account selectors
and whether or not they should be represented as links,
menus, or some combination of the two.
Layer 5: Editing and Manipulation
Although this page contains a variety of form
elements, it does not contain any functionality that
results in permanent changes to stored data. As a
result, it does not have any effect on the Editing and
Manipulation layer of the interface.
Layer 6: User Assistance
Although this page contains a link to the Help page,
it does not contain any specific elements of the User
Assistance layer. This is consistent with it making use
of a well understood conceptual model and not having
any behaviors related to the Editing and Manipulation
layer. Were the page to rely on a less common form of
data presentation, it might be necessary to include
instructional text or some other types of user aid.
Layer 7: Layout
The example uses a simple two-column layout with
a banner spanning both columns at the top of the page.
The primary column and data grid dominates the layout
with a subordinate column located on the left-hand
side. This is consistent with the behavioral relationship
between the columns where the left-hand column
functions as selector, determining what data is
presented in the primary column.
 10

Figure 3: A page from a typical

stock tracking application. Note
the number of interface
elements including links,
buttons, menus, and style
elements
 11

Decisions made in the Layout layer are also evident
in the placement of the main navigation areas and the
location of the buttons.
Layer 8: Style
The elements of the Style layer are visible in the
logo, the imagery in the upper-right corner, the color
scheme, and font choices. One of the more conspicuous
choices is the decision to use standard HTML/system
buttons for the Refresh Holdings and Edit Account
buttons. Although the visual presentation of the button
leads the user to believe that they the effect data, the
buttons actually function as nothing but navigation
devices. Clicking one of the buttons takes the user to
the appropriate page to edit the indicated information.
Fortunately, this choice is readily modified and a
change could be quickly made based on user feedback.
Applying the Model to Different Mediums
Further evidence of the model’s utility can be seen
by using it to illustrate the relative complexity of an
interface, regardless of the interactive medium. By
altering the width of each layer in the diagram, the
unique problem areas of various interfaces can be
made visible, making it possible to more accurately
allocate skills, resources, and time.
Figure 4, 5, 6, and 7 illustrate the model applied to
various products operating in different interactive
mediums.

Layer 9: Text
Design decisions contained in the Text layer of this
page are clearly present in button names, link names,
and column titles. Fortunately, the choices for most of
the issues in this layer are relatively obvious thanks to
the strong conceptual underpinnings of the rest of the
interface.

As demonstrated by this example, the model

provides a structured method for analyzing a complex
interface and increasing the understanding of how
individual design decisions effect the overall user
experience. The example also shows how an interface
can be consistently described in terms of foundation to
supporting, with an eye towards maximizing the
efficiency of the design and implementation process.

Figure 4: Interface for an Automated Teller Machine.
As illustrated here, the focus of an ATM interface is
on task flow, navigation, and editing. The Task Flow
layer has some complexity since the kiosk environment
of the medium requires step-by-step operations.
Similarly, there are various interface elements to
support navigation as well as a minimal amount of
input validation as reflected in the User Assistance
layer. Finally, the primitive visual nature of the medium
leaves little room for the Presentation tier.
12
Figure 5: Interface for a DVD Menu System.
The menu system of modern DVDs allows the user
to set a variety of options and navigate to different
program segments. This requires an interface that is
relatively complex in terms of the organizational model
and navigation operations but completely lacking in
editing operations or user assistance. These types of
interfaces are also highly dependent on a sophisticated
visual presentation as shown by the weight of the Style
layer.

Figure 6: Interface of Amazon.com
The rich collection of content and functionality
found at Amazon.com requires an interface focused on
the organizational model and navigation. Although the
checkout process and ability to store addresses and
other personal information results in some complexity
in the Editing and Manipulation layer, the User
Assistance layer remains relatively thin. Finally,
although Amazon.com has a clearly distinguished style,
the visual sophistication of their interface is relatively
low.
13
Figure 7: Interface of Microsoft Word
The mature feature set of Microsoft Word is
supported by an interface emphasizing the Behavior
tier. However, the ability of the desktop environment to
provide direct manipulation techniques reduces the
complexity of the task flow by placing most operations
in palettes or dialog boxes. In addition, the interface
requires a rich set of viewing and navigation behaviors
to support the enormous number of modifications to
the interface itself such as the manipulation of toolbars,
document zooming, and support for multiple windows
onto the same document. Finally, because the visual
presentation of desktop applications is largely dictated
by the operating system, the Presentation tier is
relatively thin, particularly in the Style layer.
 14

Next Steps References

This model was introduced in the book, “Making the [1] Baxley, B. Making the Web Work: Designing
Web Work: Designing Effective Web Applications”. Effective Web Applications. Indianapolis, IN: New
Since the publication of that book in October of 2002 I Riders Publishing, 2002.
have received generally positive feedback on the model
from the readers who have contacted me. Along with [2] Fogg, B., Soohoo, C., Danielson, D., Marable,
various online articles and publications, this paper L., Stanford, J., and Tauber, E. How Do People Evaluate
represents another forum in which I am presenting the a Web Site’s Credibility?: Results from a Large Study. A
model and soliciting feedback from the larger design Research Report by the Stanford Persuasive Technology
community. My hope is that the model will gain general Lab in collaboration with Consumer WebWatch and
acceptance and provide other interactive designers with Sliced Bread Interaction. www.webcredibility.org
additional clarity and precision in their communication
and process. [3] Garrett, J. The Elements of User Experience:
User-Centered Design for the Web. Indianapolis, IN:
Acknowledgements New Riders Publishing, 2002.
There were a number of people who helped me
during the early phases of creating this diagram. I
would like to acknowledge the following friends and
colleagues for adding their insights, intelligence, and
patience to my efforts: Philip Haine, Cordell Ratzlaff,
Jacqueline Phillips, Joff Redfern, and Jerrell Jimerson.
Jerome Doran is responsible for the visual design of the
diagram.