02-principles of ui design
TRANSCRIPT
-
8/7/2019 02-Principles of UI design
1/35
11/9/2010 1
PRINCIPLESOFUI DESIGN
-
8/7/2019 02-Principles of UI design
2/35
11/9/2010 2
MENU KITA HARI INI :
INTERACTION
STYLE
Principles of UI Design
-
8/7/2019 02-Principles of UI design
3/35
11/9/2010 3
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
-
8/7/2019 02-Principles of UI design
4/35
11/9/2010 4
COMMAND LINE Merupakan interaction stylepaling awal dari teknologi komputer Powerfull for Advanced user
Complex Syntax Low error tolerant sehingga bisa menyebabkan user frustasi
-
8/7/2019 02-Principles of UI design
5/35
11/9/2010 5
MENU SELECTION
Memperkuat kemampuanPengenalan terhadap sistem
Membantu bagi infrequent user
Label Menu harus dimengerti danmemiliki arti yang jelas
UI yang tetap menjadi trend
-
8/7/2019 02-Principles of UI design
6/35
11/9/2010 6
FORM FILL IN
Sangat berguna untuk mengambilInformasi
Membutuhkan typing skillyang tinggi
Familiar dengan paper formdi dunianyata
-
8/7/2019 02-Principles of UI design
7/35
11/9/2010 7
DIRECT MANIPULATION
Memungkinkan User berinteraksi secaralangsung bahkan memanipulasi objekyang tampil di layar
-
8/7/2019 02-Principles of UI design
8/35
11/9/2010 8
ANTHROPOMORPHIC
An Anthropomorphic interface tries to interact with people the same
way people interact with each other. This include spoken naturallanguage dialogues, hand gestures, facial expression and eye
movements.
-
8/7/2019 02-Principles of UI design
9/35
11/9/2010 9
PrinciplesOfUI Design
-
8/7/2019 02-Principles of UI design
10/35
11/9/2010 10
Systems should be
designed to be usable,without modification, byas many people aspossible.
1
-
8/7/2019 02-Principles of UI design
11/35
11/9/2010 11
Aesthetically Pleasing
Provide visual appeal by following these presentation andgraphic 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.
2
-
8/7/2019 02-Principles of UI design
12/35
11/9/2010 12
Availability
Make all objectsavailable at all
times.
Avoid the use ofmodes.
3
-
8/7/2019 02-Principles of UI design
13/35
11/9/2010 13
Clarity
The interface should be visually, conceptually,and linguistically clear including:- Visual elements
- Functions- Metaphors- Words and text
4
-
8/7/2019 02-Principles of UI design
14/35
11/9/2010 14
Compatibility
Provide compatibility with the following:-The user-The task and job-The product
Adopt the users perspective.
5
-
8/7/2019 02-Principles of UI design
15/35
11/9/2010 15
Configurability
Permit easypersonalization,configuration, and
reconfiguration ofsettings to do thefollowing:- Enhance a sense of
control.- Encourage an activerole in understanding.
6
-
8/7/2019 02-Principles of UI design
16/35
11/9/2010 16
Consistency
A system should look, act, andoperate the same throughoutsimilar components-Have a similar look.
-Have similar uses.-Operate similarly.
The same action should alwaysyield the same result.
The function of elements shouldnot change.
The position of standardelements should not change.
7
-
8/7/2019 02-Principles of UI design
17/35
11/9/2010 17
Control
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 theuser. The means to achieve goals should be flexible and compatible
with the users 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, whilealways providing a proper set of defaults.
8
-
8/7/2019 02-Principles of UI design
18/35
11/9/2010 18
Directness
Provide direct ways to accomplish tasks.- Available alternatives should be visible.- The effect of actions on objects should be visible.
9
-
8/7/2019 02-Principles of UI design
19/35
11/9/2010 19
Efficiency
Minimize eye and hand movements, andother 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 users wants and needs
whenever possible.
10
-
8/7/2019 02-Principles of UI design
20/35
11/9/2010 20
Familiarity
Employ familiar concepts and use a languagethat is familiar to the user.
Keep the interface natural, mimicking theusers behavior patterns.
Use real-world metaphors.
11
-
8/7/2019 02-Principles of UI design
21/35
11/9/2010 21
Flexibility
A system must be sensitive to the differingneeds of its users, enabling a level and typeof performance based upon:
-Each users knowledge and skills.-Each users experience.-Each users personal preference.
-Each users habits.-The conditions at that moment.
12
-
8/7/2019 02-Principles of UI design
22/35
11/9/2010 22
Forgiveness
Tolerate and forgive common & unavoidablehuman errors.
Prevent errors from occurring wheneverpossible.
Protect against possible catastrophic errors. Provide constructive messages when an
error does occur.
13
-
8/7/2019 02-Principles of UI design
23/35
11/9/2010 23
Immersion
Fosterimmersion
withintasks.
14
-
8/7/2019 02-Principles of UI design
24/35
11/9/2010 24
Obviousness
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 iseasy to recollect and place in context.
15
-
8/7/2019 02-Principles of UI design
25/35
11/9/2010 25
Operability
Ensure that a systems design can be usedby everyone, regardless of physicalabilities.
16
Perceptibility
Assure that a systems design can be
perceived, regardless of a personssensory abilities.
17
-
8/7/2019 02-Principles of UI design
26/35
11/9/2010 26
Predictability
The user should be able to anticipate thenatural 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.
18
-
8/7/2019 02-Principles of UI design
27/35
11/9/2010 27
Recovery
A system should permit:- Commands or actions to be abolished or
reversed.
- Immediate return to a certain point ifdifficulties arise.
Ensure that users never lose their work asa result of:
- An error on their part.- Hardware, software, or communication
problems.
19
-
8/7/2019 02-Principles of UI design
28/35
11/9/2010 28
Responsiveness
The system must rapidly respond to theusers requests.
Provide immediate acknowledgment for alluser actions:- Visual.
- Textual.- Auditory.
20
-
8/7/2019 02-Principles of UI design
29/35
11/9/2010 29
Safety
Protect the user from making mistakes.- Provide visual cues, reminders, lists of
choices, and other aids either
automatically or upon request.
21
-
8/7/2019 02-Principles of UI design
30/35
11/9/2010 30
Simplicity
Provide as simple an interface as possible. Ways to provide simplicity:
- Use progressive disclosure, hiding things until they areneeded. Present common and necessary functions first.
Prominently feature important functions. Hide more sophisticated & less frequently usedfunctions.
- 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.
22
-
8/7/2019 02-Principles of UI design
31/35
11/9/2010 31
Transparency
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 theuser.
23
-
8/7/2019 02-Principles of UI design
32/35
11/9/2010 32
Trade-Offs
Final design will be based on a series of trade-offsbalancing often-conflicting design principles.
Peoples requirements always take precedenceover technical requirements.
24
-
8/7/2019 02-Principles of UI design
33/35
11/9/2010 33
Visibility
A systems status and methods of use must beclearly visible.
Improve visibility through:- Hierarchical organization.- Context sensitivity.
25
-
8/7/2019 02-Principles of UI design
34/35
11/9/2010 34
Positive First Impression
Minimal barriers
Points of prospect
Progressive lures
-
8/7/2019 02-Principles of UI design
35/35
11/9/2010 35
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 yangditerapkan, prinsip mana yang dikorbankan)3. Jelaskan kelebihan, kekurangan, dan berikan masukan
perbaikan untuk website tersebut4. Daftar anggota kelompok dan website yang dianalisis,
ditampilkan pada blog sebelum pertemuan berikutnyadilaksanakan.
5. Kirimkan alamat blog dan anggota kelompok ke email: