PRINCIPLES

OF
UI DESIGN

11/9/2010 1
MENU KITA HARI INI :

INTERACTION
STYLE

Principles of UI Design

11/9/2010 2
INTERACTION STYLE

An interaction style is simply the method, or methods, by

which the user and a computer system communicate with
one another

Beberapa jenis Interaction Style :

 Command line
 Menu Selection
 Form Fill in
 Direct Manipulation
 Anthropomorphic

11/9/2010 3
COMMAND LINE
 Merupakan interaction style paling awal dari teknologi komputer
 Powerfull for Advanced user
 Complex Syntax
 “Low error tolerant” sehingga bisa menyebabkan user frustasi

11/9/2010 4
MENU SELECTION

UI yang tetap menjadi trend Membantu bagi infrequent user

Memperkuat kemampuan Label Menu harus dimengerti dan

Pengenalan terhadap sistem memiliki arti yang jelas

11/9/2010 5
 FORM FILL IN

Sangat berguna untuk mengambil

Informasi

Membutuhkan typing skill yang tinggi

Familiar dengan paper form di dunia

nyata

11/9/2010 6
 DIRECT MANIPULATION

Memungkinkan User berinteraksi secara

langsung bahkan memanipulasi objek
yang tampil di layar

11/9/2010 7
 ANTHROPOMORPHIC

An Anthropomorphic interface tries to interact with people the same

way people interact with each other. This include spoken natural
language dialogues, hand gestures, facial expression and eye
movements.

11/9/2010 8
 Principles
Of
UI Design

11/9/2010 9
 1

Systems should be
designed to be usable,
without modification, by
as many people as
possible.

11/9/2010 10
 Aesthetically Pleasing 2
■ Provide visual appeal by following these presentation and
graphic design principles:
- Provide meaningful contrast between screen elements.
- Create groupings.
- Align screen elements and groups.
- Provide three-dimensional representation.
- Use color and graphics effectively and simply.

11/9/2010 11
 Availability 3

■ Make all objects

available at all
times.

■ Avoid the use of

modes.

11/9/2010 12
 Clarity
4
The interface should be visually, conceptually,
and linguistically clear including:
- Visual elements
- Functions
- Metaphors
- Words and text

11/9/2010 13
 Compatibility 5
■ Provide compatibility with the following:
-The user
-The task and job
-The product
■ Adopt the user’s perspective.

11/9/2010 14
 Configurability
6
■ Permit easy
personalization,
configuration, and
reconfiguration of
settings to do the
following:
- Enhance a sense of
control.
- Encourage an active
role in understanding.

11/9/2010 15
 Consistency
7

• A system should look, act, and

operate the same throughout
similar components
-Have a similar look.
-Have similar uses.
-Operate similarly.
• The same action should always
yield the same result.
• The function of elements should
not change.
• The position of standard
elements should not change.

11/9/2010 16
 Control 8
 The user must control the interaction. Actions should result from
 explicit user requests.
 performed quickly.
 capable of interruption or termination.
 The user should never be interrupted for errors.
 The context maintained must be from the perspective of the
user.
 The means to achieve goals should be flexible and compatible
with the user’s skills, experiences, habits, and preferences.
 Avoid modes because they constrain the actions available to
the user.
 Permit the user to customize aspects of the interface, while
always providing a proper set of defaults.

11/9/2010 17
 Directness
9
■ Provide direct ways to accomplish tasks.
- Available alternatives should be visible.
- The effect of actions on objects should be visible.

11/9/2010 18
 Efficiency
10
■ Minimize eye and hand movements, and
other control actions.
- Transitions between various system
controls should flow easily and freely.
- Navigation paths should be as short as
possible.
- Eye movement through a screen should
be obvious and sequential.
■ Anticipate the user’s wants and needs
whenever possible.

11/9/2010 19
 Familiarity
11

■ Employ familiar concepts and use a language

that is familiar to the user.

■ Keep the interface natural, mimicking the

user’s behavior patterns.

■ Use real-world metaphors.

11/9/2010 20
 Flexibility
12

■ A system must be sensitive to the differing

needs of its users, enabling a level and type
of performance based upon:
-Each user’s knowledge and skills.
-Each user’s experience.
-Each user’s personal preference.
-Each user’s habits.
-The conditions at that moment.

11/9/2010 21
 Forgiveness
13

■ Tolerate and forgive common & unavoidable

human errors.
■ Prevent errors from occurring whenever
possible.
■ Protect against possible catastrophic errors.
■ Provide constructive messages when an
error does occur.

11/9/2010 22
 Immersion 14

■ Foster
immersion
within
tasks.

11/9/2010 23
 Obviousness
15
■ A system should be easily learned and understood.
A user should know the following:
- What to look at
- What it is
- What to do
- When to do it
- Where to do it
- Why to do it
- How to do it
■ The flow of actions, responses, visual presentations,
and information should be in a sensible order that is
easy to recollect and place in context.
11/9/2010 24
 16
Operability
■ Ensure that a system’s design can be used
by everyone, regardless of physical
abilities.

Perceptibility 17
■ Assure that a system’s design can be
perceived, regardless of a person’s
sensory abilities.

11/9/2010 25
 Predictability
18
■ The user should be able to anticipate the
natural progression of each task.
- Provide distinct and recognizable screen
elements.
- Provide cues to the result of an action to
be performed.
■ Do not bundle or combine actions.
■ All expectations should be fulfilled uniformly
and completely.

11/9/2010 26
 Recovery
19
■ A system should permit:
- Commands or actions to be abolished or
reversed.
- Immediate return to a certain point if
difficulties arise.
■ Ensure that users never lose their work as
a result of:
- An error on their part.
- Hardware, software, or communication
problems.
11/9/2010 27
 20
Responsiveness

■ The system must rapidly respond to the

user’s requests.

■ Provide immediate acknowledgment for all

user actions:
- Visual.
- Textual.
- Auditory.

11/9/2010 28
 Safety
21

■ Protect the user from making mistakes.

- Provide visual cues, reminders, lists of
choices, and other aids either
automatically or upon request.

11/9/2010 29
 Simplicity
22
■ Provide as simple an interface as possible.
■ Ways to provide simplicity:
- Use progressive disclosure, hiding things until they are
needed.
• Present common and necessary functions first.
• Prominently feature important functions.
• Hide more sophisticated & less frequently used
functions.
- Provide an obvious visual hierarchy.
- Provide defaults.
- Minimize screen alignment points.
- Make common actions simple at the expense of
uncommon actions being made harder.
- Provide uniformity and consistency.
- Eliminate unnecessary elements.
11/9/2010 30
 Transparency
23

■ Permit the user to focus on the task or job,

without concern for the mechanics of the
interface.
- Workings & reminders of workings inside
the computer should be invisible to the
user.

11/9/2010 31
 24
Trade-Offs

■ Final design will be based on a series of trade-offs

balancing often-conflicting design principles.
■ People’s requirements always take precedence
over technical requirements.

11/9/2010 32
 Visibility
25

■ A system’s status and methods of use must be

clearly visible.

■ Improve visibility through:

- Hierarchical organization.
- Context sensitivity.

11/9/2010 33
 Positive First Impression

 Minimal barriers

Points of prospect

Progressive lures

11/9/2010 34
 Tugas kecil di akhir pertemuan ini

Dalam kelompok (@3-5 orang),

1. Pilih sebuah website (no porno, no SARA)
2. Analisis website tersebut berdasarkan prinsip2 desain UI
yang dipelajari pada pertemuan-2 (prinsip mana yang
diterapkan, prinsip mana yang dikorbankan)
3. Jelaskan kelebihan, kekurangan, dan berikan masukan
perbaikan untuk website tersebut
4. Daftar anggota kelompok dan website yang dianalisis,
ditampilkan pada blog sebelum pertemuan berikutnya
dilaksanakan.
5. Kirimkan alamat blog dan anggota kelompok ke email:

11/9/2010 35