USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
1/52
welcome to
USER INTERACTION DESIGN
Lecturer
Itamar Medeiros (Brazil)
BA Industrial Design;
PgDip Information Design;
MA Design Practice
Expertise
Multimedia/Web Design,
Photography, Information Design
and Human-Computer Interaction.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
2/52
COMMUNICATION-ORIENTED
INTERFACE DESIGN PRINCIPLES
learning outcome
Students will learn to think of
interfaces as information systems
and to use gestalt theory to
organize such systems in ways to
maximize the user experience.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
3/52
COMMUNICATION-ORIENTED
INTERFACE DESIGN PRINCIPLES
content
An introduction to Communication-
Oriented principles of Interface
Design:
-Balancing Function and Fashion:
-Elegance and Simplicity;
-Approachability, Recognizability,
Immediacy.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
4/52
COMMUNICATION-ORIENTED
INTERFACE DESIGN PRINCIPLES
Specialists have found the orientation,
process, and training of the visual
communication disciplines to be
especially well-suited to the
problems of Graphical User
Interfaces -- GUI -- since visual
communication attempts to solve
communication problems in a way
that is, at once, functionally
effective and aesthetically pleasing.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
5/52
ELEGANCE & SIMPLICITY
The term, elegance derives from the
Latin eligere, meaning choose out or
select carefully. The same Latin root
gives rise as well to terms such as
elect and select -- both of which carry
a similar implication of reflection and
careful decision.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
6/52
ELEGANCE & SIMPLICITY
a design problem
More recently the term has acquired the
familiar connotations of refinement
and grace, reflecting thoughtfulness
and good taste.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
7/52
ELEGANCE & SIMPLICITY
formal elements versus concept
Visual communication is intimately
concerned with careful decision
making and judicious selection of
formal elements: its decisions extend
beyond the surface to the very
heart of the product concept.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
8/52
ELEGANCE & SIMPLICITY
what must be emphasized?
The designer enhances communication
by carefully selecting the elements
to be emphasized -- and this may
involve selecting the elements to be
included -- and ensuring that they
are presented so as to be
perceptually salient.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
9/52
ELEGANCE & SIMPLICITY
the art of mitigation
Elegance in Design is seen in the
immediately obvious success of a
novel approach that solves a
problem completely yet in a highly
economical way.
That being said, the importance of
simplicity can hardly be overstated.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
10/52
SIMPLICITY & SIMPLIFICATION
The most powerful designs are always
the result of a continuous process of
simplification and refinement.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
11/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
12/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
13/52
SIMPLICITY & SIMPLIFICATION
aesthetic and functional benefits
Before you do anything to improve the
quality of a design, make sure you
have reduced its formal and
conceptual elements to the
absolute minimal.
The benefits of simplicity are functional
as well as aesthetic in nature:
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
14/52
SIMPLICITY & SIMPLIFICATION
approachability
Simple designs can be rapidly
apprehended and understood well
enough to support immediate use or
invite further exploration.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
15/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
16/52
SIMPLICITY & SIMPLIFICATION
recognizability
Simple designs can be recognized
more easily than their more elaborate
counterparts.
Because they present less visual
information to the viewer, they are
more easily assimilated,
understood, and remembered.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
17/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
18/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
19/52
SIMPLICITY & SIMPLIFICATION
immediacy
Simple designs have a greater impact
than complex designs, precisely
because they can be immediately
recognized and understood with a
minimum of conscious effort.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
20/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
21/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
22/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
23/52
SIMPLICITY & SIMPLIFICATION
usability
Improving the approachability and
memorability of a product necessarily
enhances usability as well.
Simple designs that eliminate
unnecessary variation or detail
make the variation that remains
more prominent and informative.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
24/52
PRINCIPLES OF SIMPLIFICATION
Understatement can be a difficult quality
to grasp through conscious effort;
apart from the focus on economy, or
minimization of component parts
and simplification of the
relationships between parts,
simplicity depends upon three closely
related principles:
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
25/52
PRINCIPLES OF SIMPLIFICATION
The elements in the design must be
unified to produce a coherent whole,
the parts -- as well as the whole --
must be refined to focus the viewer’s
attention on their essential aspects,
and the fitness of the solution of the
communication problem must be
ensured at every level.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
26/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
27/52
PRINCIPLES OF SIMPLIFICATION
unity
Elegant tools and utensils possess a
unity that derives from the intimate
relation of a minimal set of parts in
pursuit of a common goal.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
28/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
29/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
30/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
31/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
32/52
PRINCIPLES OF SIMPLIFICATION
unity
Whenever a single part plays more
than one role, the unity of the
overall design is enhanced.
Elegant solutions produce a maximum
of satisfaction from an absolute
minimum of components.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
33/52
PRINCIPLES OF SIMPLIFICATION
refinement
Reduction through successive
refinement is the only path to
simplicity.
To create an elegant solution, anything
that is not essential to the
communication task must be
removed.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
34/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
35/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
36/52
PRINCIPLES OF SIMPLIFICATION
fitness
Designs are never evaluated in
absolute formal terms, but rather,
succeed or fail on the basis of how
well they solve a particular problem.
Elegant solutions solve problems with
maximum effectiveness through
avenues that are desirable in their
own right.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
37/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
38/52
PRINCIPLES OF SIMPLIFICATION
The elements in the design must be
unified to produce a coherent whole,
the parts -- as well as the whole --
must be refined to focus the viewer’s
attention on their essential aspects,
and the fitness of the solution of the
communication problem must be
ensured at every level.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
39/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
40/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
41/52
TECHNIQUES
Elegance cannot be easily summarized
in a few rules of thumb. It depends
heavily on taste, and taste can only
be developed through a prolonged
exposure to a series of high quality
examples.
Because complex designs rarely seem
elegant, simplification is an
important step in the development
of any elegant solution.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
42/52
TECHNIQUES
Three basic techniques can be used
to simplify a design solution:
Reducing a Design to its essence;
Regularizing the Elements of the Design;
Combining Elements for Maximum Leverage.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
43/52
TECHNIQUES
reduction
The most fundamental design technique
is reduction.
An elegant design must be reduced to
its essential elements and each
element reduced to its essential
form.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
44/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
45/52
TECHNIQUES
reduction
Determine the essential qualities that should
be conveyed by the design, along with any
fixed formal elements, such as logos,
controls, color/texture/images.
Critically examine each element in the design
and ask yourself why it is needed, how it
relates to the essence of the design.
Try to remove the element from the design.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
46/52
TECHNIQUES
regularizing
When further reduction is not possible, the
remaining elements can be regularized to
further simplify the design.
Regularity reduces information by repeating the
elements according to a discernible rule,
principle, or rhythm.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
47/52
TECHNIQUES
regularizing
Human perception and memory operate more
efficiently on regularized stimuli, since the
visual complexity of the display is reduced
while its structure is enhanced.
The predictability of a regular pattern allows the
viewer to scan ahead more easily to the area
of interest when making a comparison or
answering a question.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
48/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
49/52
TECHNIQUES
regularizing
Use regular geometric forms, simplified
contours, and muted colors whenever
possible;
If multiple similar forms are required, make them
identical, if possible, in size, shape, color,
texture, lineweight, orientation, alignment,
or spacing;
Limit variation in typography to a few sizes
from one or two families.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
50/52
TECHNIQUES
leverage
The most challenging means of simplification
involves finding points of leverage at which
design elements play multiple roles.
When one part does the work of two, the
elegance of the solution is always
enhanced.
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
51/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
52/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
53/52
USER
INTERACTION
DESIGN
LESSON
07:
PRINCIPLES
OF
ELEGANCE
AND
SIMPLICITY
54/52
TECHNIQUES
leverage
Review the functional role played be each
element in the design;
Look for situations where multiples elements
are filling the same role;
Question whether an element’s role could be
filled as well by an adjacent component,
possible after minor modifications.
Combine redundant elements.

Communication-Oriented Interface Design Principles (User Interaction Design at Raffles Design Institute)