User Interface Design: Best Practices

Design Language Comics
© 2007, Stacie Gomm, Utah State University

Design Language Comics
Design Language Comics
© 2007, Stacie Gomm, Utah State University

Imbedded User Languages
Stacie Gomm
Utah State University
May 2007
© 2007, Stacie Gomm, Utah State University

How do these relate?
How do you know that?
© 2007, Stacie Gomm, Utah State University

The design of the key and
keyhole concept is implicit
and it is has a language
which “speaks” to users
and let’s users know what
they are supposed to do.
© 2007, Stacie Gomm, Utah State University

Does this “speak” to you?
© 2007, Stacie Gomm, Utah State University

Imbedded User Languages
This imbedded language is
often overlooked or its
existence is not realized as
users develop products which
are used in our everyday lives.
© 2007, Stacie Gomm, Utah State University

Imbedded User Languages
The user language imbedded in
every designed product
communicates to the users the
use for/of that product.
© 2007, Stacie Gomm, Utah State University

Design of Everyday Things
by Donald Norman
The human mind is exquisitely tailored to make sense of the
world. Give it the slightest clue and off it goes, providing
explanation, rationalization, understanding. Consider the
objects – nooks, radios, kitchen, appliances, office machines,
and light switches – that make up our everyday lives. Well-
designed objects are easy to interpret and understand. They
contain visible clues to their operation. Poorly designed objects
can be difficult and frustrating to use. They provide no clues –
or sometimes false clues. They trap the user and thwart the
normal processing interpretation and understanding (Norman, p.
2, italics added).
© 2007, Stacie Gomm, Utah State University

Design of Everyday Things
by Donald Norman
Included in every design are the
affordances, mappings, visibility,
and feedback and each of these
has it own implicit language
which speaks to the user.
© 2007, Stacie Gomm, Utah State University

Design of Everyday Things
by Donald Norman
Affordances are the “perceived and actual properties
of the thing, primarily those fundamental properties
that determine just how the thing could possibly be
used” (Norman, p. 9).
Mapping is a technical term meaning the
“relationship between two things, in this case
between the controls and their movements and the
results in the world. … Natural mapping … leads to
immediate understanding” (Norman, p. 23).
© 2007, Stacie Gomm, Utah State University

Design of Everyday Things
by Donald Norman
In good design things are visible. “There are good
mappings, natural relationships, between the controls and
the things that are controlled” (Norman, p. 22).
Feedback is the notion of sending back to the user
information about what action has actually been done --
what result has been accomplished (Norman, p. 27).
© 2007, Stacie Gomm, Utah State University

Design of Everyday Things
by Donald Norman
Norman suggests that when developing a product ALL of the
following should be included in its user language:
•Visibility – By looking the user can tell the state of the device and
the alternatives for action.
•Affordances – The designer provides a good conceptual model
for the user, with consistency in the presentation of operations and
results and a coherent, consistent system image.
•Good mappings – It is possible to determine the relationship
between actions and results, between the controls and their
effects, and between the system state and what is visible.
•Feedback – The user receives full and continuous feedback about
the results of actions. (Norman, p.53)
© 2007, Stacie Gomm, Utah State University

Netest
A testing system developed at Utah
State University that is used to
administer the Computer and
Information Literacy (CIL) tests.
Lack of communication could
interfere with the user being able to
pass a test.
© 2007, Stacie Gomm, Utah State University

Netest – Trainee Interface
Visibility
This screen
shows all of the
options available
to trainees.
© 2007, Stacie Gomm, Utah State University

Netest – Trainee Interface
Affordances
It is obvious which
buttons perform
which tasks.
© 2007, Stacie Gomm, Utah State University

Netest – Trainee Interface
Mappings
Mapping buttons to
their action is done
well in this
program.
© 2007, Stacie Gomm, Utah State University

Netest – Trainee Interface
Feedback
The buttons
actually do what is
expected.
© 2007, Stacie Gomm, Utah State University

Netest – Testing Interface
Norman
contends that
when simple
things need
pictures,
labels, or
instructions,
the design
has failed
(p.9).
© 2007, Stacie Gomm, Utah State University

Implications for Portal Design
When building a portal there exists a
language that communicates to the user the
actions which are expected by the user.
When a designer designs the portal, there is
a built in user language. The designer must
realize this fact in order for his design to be
able to communicate effectively with its
users. This language is used by the user to
communicate with the portal system.
© 2007, Stacie Gomm, Utah State University

Implications for Portal
Show sample Portals
Identify commonalities and
what the user expects
© 2007, Stacie Gomm, Utah State University

Design of Everyday Things
by Donald Norman
When developing instructional products,
according to Norman, this is what
instructional designers should do:
1. Understand the causes of error and
design and to minimize those causes.
© 2007, Stacie Gomm, Utah State University

Design of Everyday Things
by Donald Norman
2. Make it possible to reverse actions –
to “undo” them – or to make it harder
to do what cannot be reversed.
3. Make it easier to discover the errors
that do occur, and make them easier
to correct.
© 2007, Stacie Gomm, Utah State University

Design of Everyday Things
by Donald Norman
4. Change the attitude toward errors.
Think of an object’s user as
attempting to do a task, getting there
by imperfect approximations. Don’t
think of the user as making errors;
think of the actions as approximations
of what is desired. (p. 131)
© 2007, Stacie Gomm, Utah State University

Imbedded User Languages
“Good” designers have a
realization and understanding of
the user language contained
within their products and insure
complete communication takes
place between the product and
user.
© 2007, Stacie Gomm, Utah State University

Imbedded User Languages
Questions / Comments?
Contact Info:
Stacie.Gomm@usu.edu
© 2007, Stacie Gomm, Utah State University