2. Karakteristik GUI dan Web UI
9/7/2010
Tujuan Perkuliahan
KARAKTERISTIK
ANTARMUKA GRAFIS DAN
WEB
- EGP -
Setelah mengikuti mata kuliah ini mahasiswa
dapat:
1.Memahami perbedaan mendasar antara GUI
dan Web UI
2.Mengerti dan menerapkan prinsip-prinsip
pokok di dalam mendesain aplikasi sesuai
dengan kebutuhan
9/7/2010
Text Based VS GUI VS Web UI
Fakultas Informatika IT Telkom
2
MENU KITA HARI INI :
Karakteristik GUI dan Web UI
Gaya Interaksi
GUI dan Web UI
Text Based
GUI
Web UI
Gabungan sistem bisnis grafis
dengan web
Karakteristik GUI berbeda dengan Text Based Interface
Karakteristik GUI berbeda juga dengan Web UI
Prinsip-prinsip desain UI
9/7/2010
Fakultas Informatika IT Telkom
3
9/7/2010
Fakultas Informatika IT Telkom
4
1
9/7/2010
COMMAND LINE
GAYA INTERAKSI
Gaya interaksi adalah metode [-metode] komunikasi
antara pengguna dengan sistem komputer
Beberapa jenis Gaya Interaksi:
Command line
Menu Selection
Form Fill in
Direct Manipulation
Anthropomorphic
Merupakan gaya interaksi paling awal dari teknologi komputer
Powerfull for Advanced user
Complex Syntax
“Low error tolerant” sehingga bisa menyebabkan user frustasi
9/7/2010
Fakultas Informatika IT Telkom
5
9/7/2010
Tren UI saat ini di berbagai macam
aplikasi
Sangat berguna untuk mengambil
Informasi
Memanfaatkan kemampuan
pengenalan manusia
Membantu bagi infrequent user
Membutuhkan typing skill yang tinggi
Label Menu harus dimengerti dan
memiliki arti yang jelas
Fakultas Informatika IT Telkom
7
6
FORM FILL IN
MENU SELECTION
9/7/2010
Fakultas Informatika IT Telkom
Familiar dengan paper form di dunia
nyata
9/7/2010
Fakultas Informatika IT Telkom
8
2
9/7/2010
DIRECT MANIPULATION
ANTHROPOMORPHIC
Antarmuka Anthropomorphic berusaha untuk berinteraksi dengan
manusia dengan cara yang sama seperti manusia berinteraksi satu
sama lain. Termasuk dalam gaya ini adalah dialog bahasa alami,
gerakan tangan, ekspresi wajah dan gerakan mata.
Memungkinkan User berinteraksi secara
langsung bahkan memanipulasi objek
yang tampil di layar
9/7/2010
Fakultas Informatika IT Telkom
9
9/7/2010
INTERACTION STYLE SUMMARY
GAYA INTERAKSI
KELEBIHAN
KEKURANGAN
Command Line
Powerful, fleksibel, sesuai bagi
pengguna ahli, menghemat layar
Harus mengingat perintah, perlu
dipelajari, tidak mentolerir
kesalahan ketik
Menu Selection
Mengutamakan pengenalan,
mengurangi kompleksitas interaksi,
membantu proses pengambilan
keputusan, meminimalkan
pengetikan, membantu pengguna
awam
Boros layar, hirarki menu bisa jadi
kompleks, dapat memperlambat
pengguna ahli
Form Fill in
Format familiar, menyederhanakan
input informasi, memerlukan
pelatihan minimal
Boros layar, perlu desain yang
hati-hati dan efektif, tidak
mencegah salah ketik
Direct Manipulation
Lebih cepat dipelajari, mudah
diingat, menampilkan tanda-tanda
visual/spatial, error recovery mudah,
menyediakan konteks, feedback
segera
Desain lebih kompleks, perlu
manipulasi window, perlu
pengenalan ikon, tidak efisien bagi
pengetik ahli, meningkatkan
kemungkinan kekacauan layar
Anthropomorphic
Alami
Sulit diimplementasikan
9/7/2010
Fakultas Informatika IT Telkom
Fakultas Informatika IT Telkom
10
GUI VS WEB UI
11
9/7/2010
Fakultas Informatika IT Telkom
12
3
9/7/2010
GRAPHICAL USER INTERFACE (GUI)
CHARACTERISTICS OF GUI
KARAKTERISTIK SISTEM
DIRECT MANIPULATION
Tampilan visual
menarik
Interaksi pick and
click
Memiliki
keterbatasan gaya
interaksi
Visualisasi
Berorientasi objek
Memanfaatkan
memori
pengenalan
manusia
Merupakan potret langsung dari kehidupan
nyata
Object dan action selalu terlihat
Aksi cepat dan incremental, hasil tampil di
layar
Dapat
menjalankan
beberapa fungsi
sekaligus
Aksi incremental mudah dibatalkan/
dikembalikan ke kondisi sebelumnya
9/7/2010
Fakultas Informatika IT Telkom
13
9/7/2010
Fakultas Informatika IT Telkom
14
9/7/2010
Fakultas Informatika IT Telkom
16
THE WEB USER INTERFACE
9/7/2010
Awalnya, desain
antarmuka Web ditujukan
untuk merancang navigasi
dan tampilan informasi.
Dengan kata lain, desain
CONTENT, bukan DATA..
Web Page VS Web
Application
More user Control
Fakultas Informatika IT Telkom
15
4
9/7/2010
9/7/2010
Fakultas Informatika IT Telkom
17
The merging of graphical business systems and the web
Dimension
The Nature of the
relationship with
the user
Web Application
Web Page
In the middle of
continuum
Users must use the program,
Users must identifiy, themselves or
login to be able to do anything,
The program must be reliable, and
system failure will be immediately
noticed
Work is remembered from earlier
session
The system does not care
who the user are,
Login is required to simply
give access to more
information than would be
received anonymously,
System failure may not be
noticed
Minimal information such
as a credit card number or
address is remembered
The Conversation
style
The style is formal
The style is casual ,
informal and generic
The style is polite but
friendly
The Nature of the
interaction
A Large amount of data is entered,
complex task are being performed,
data is being created, manipulated
and permanently stored
No data is entered or
changed
A small amount of data is
entered and possibly
stored, Milestones,
checkpoints, endpoints are
expected and included
The Frequency of
use
It is used daily, it is used for long
period (4-8 Hour), it is used to help
resolve emergencies
It is used only occasionally,
it is used for only few
minutes at a time, it is
used to find out about
something
It is used periodically or
episodically
9/7/2010
Fakultas Informatika IT Telkom
9/7/2010
Fakultas Informatika IT Telkom
18
In the middle of
continuum
Dimension
Web Application
Web Page
The Perceived
distance of the
provider
It is viewed as being local in origin,
it is viewed as being controlled
locally by a data administrator, the
response time is fast
The origin is unknown, the origin
is viewed as originating
somewhere else in the country or
overseas, the response time is
slow
The origin cannot
ascertained or doesn’t
matter
Real Time
interaction
Data is fed in real time, the
information is critical, a delay is
life-threatening, long reponses
exist but users remain
Time is irrelevant, long response
delay exist and cause users to exit
Response is near real
time
How much
help will users
need?
Intense training programs and
experience are needed to use and
become experts
Every visit is one time session,
minimizing or eliminating the
need for help
A minimum amount of
experience, training or
help material is needed
The interaction
style
The navigation is controled,
controls are complex, the syntax
is obejct:Action, there is little or no
reversibility, drag and drop
manipulation is expected, exit
requires users to log off
The navigation is flexible and
simple, controls are simple, no
object selection is required,
action are easily reversed using
the back button, no drag-drop
manipulation exist, single clicking
links are used to navigate
The navigation is
flexible, simple data
collection exist, user
exits by closing web
browser
The
Presentation
style
The Style is subdue and serious
The style is colorfull, graphic,
possibly animated, the control are
obvious and self explanatory
The style is cooler but
attractive
Follow
standards
Platform standard compliance
exists, the style resembles or
matches GUI standard
Few Cross site standard are
followed, only intra-site
consistently exists
Some common pattern
exists
19
9/7/2010
Fakultas Informatika IT Telkom
20
5
9/7/2010
1
Accessibility
Sistem harus dapat
digunakan, tanpa
modifikasi, oleh sebanyak
mungkin orang.
PRINSIP
DESAIN
UI
• Perceptibility: untuk
keterbatasan pancaindera
• Operability: untuk
keterbatasan fisik
• Simplicity: untuk keterbatasan
pengalaman, literacy, dan
konsentrasi
• Forgiveness: meminimalkan
kesalahan pengguna dan
akibat yang ditimbulkannya
9/7/2010
9/7/2010
Fakultas Informatika IT Telkom
Aesthetically Pleasing
Fakultas Informatika IT Telkom
22
21
2
3
Availability
Sistem harus menarik secara visual
• Menyediakan kontras yang bermakna antar
elemen-elemen layar yang berbeda
• Melakukan pengelompokan
• Menyelaraskan elemen-elemen dan kelompokkelompok dalam layar
• Menyediakan representasi 3 dimensi
• Menggunakan warna dan grafis secara efektif dan
sederhana
9/7/2010
Fakultas Informatika IT Telkom
• Seluruh objek
harus tampak
setiap saat
• Hindari
penggunaan
mode.
23
9/7/2010
Fakultas Informatika IT Telkom
24
6
9/7/2010
4
Clarity
Antarmuka harus
konseptual
dan
penggunaan:
•
•
•
•
•
9/7/2010
Compatibility
jelas secara visual,
linguistik,
termasuk
• Tampilan harus
compatible dengan
• pengguna
• task dan pekerjaan
• produk
elemen-elemen visual
fungsi
metafora
kata
teks
• Mengadopsi
perspektif
pengguna.
Fakultas Informatika IT Telkom
Configurability
5
25
6
9/7/2010
Fakultas Informatika IT Telkom
Consistency
26
7
• Sistem harus serupa dalam:
• tampilan
• aksi
• operasi
• Aksi yang sama harus memberikan hasil yang
sama
• Fungsi dan posisi elemen-elemen standar
sebaiknya tidak berubah.
Tampilan harus mudah di-personalisasi, konfigurasi
dan rekonfigurasi untuk:
• Meningkatkan sense of control
• Memfasilitasi pemahaman pengguna
9/7/2010
Fakultas Informatika IT Telkom
27
9/7/2010
Fakultas Informatika IT Telkom
28
7
9/7/2010
8
Control
• Kontrol harus diserahkan pada pengguna, agar
pengguna, menurut caranya, dapat menentukan:
Berikan alternatif agar
pengguna dapat
melakukan task secara
langsung.
• what to do
• how to do it
dan dapat menyelesaikannya dengan mudah.
• Antarmuka yang sederhana, dapat diprediksi,
konsisten, fleksibel, customizable, dan pasif
memberikan kontrol kepada pengguna.
9/7/2010
Fakultas Informatika IT Telkom
29
10
Efficiency
Fakultas Informatika IT Telkom
9/7/2010
Fakultas Informatika IT Telkom
30
11
Familiarity
• Minimalkan gerakan mata dan tangan, serta
aksi kontrol lainnya.
• Antisipasi keinginan dan kebutuhan
pengguna semaksimal mungkin.
9/7/2010
9
Directness
• Gunakan konsep dan bahasa yang familiar bagi
pengguna.
• Antarmuka harus alami dan sesuai dengan pola
perilaku pengguna, melalui penggunaan realworld metaphors.
31
9/7/2010
Fakultas Informatika IT Telkom
32
8
9/7/2010
12
Flexibility
• Fleksibilitas adalah kemampuan sistem
untuk merespon perbedaan individual.
• Peningkatan fleksibilitas biasanya diimbangi
dengan penurunan usabilitas, sehingga
penerapannya
harus
dipertimbangkan
dengan matang.
9/7/2010
Fakultas Informatika IT Telkom
Obviousness
13
Immersion
Munculkan immersion agar
pengguna menikmati dan puas
terhadap sistem. Hal ini dapat
dilakukan melalui:
• Tantangan yang harus diselesaikan
• Konteks yang dapat mempertahankan
fokus pengguna
• Tujuan yang didefinisikan dengan jelas
• Feedback langsung tentang aksi dan
performansi
• Perasaan kontrol terhadap aksi, task dan
lingkungan
33
14
9/7/2010
Fakultas Informatika IT Telkom
Predictability
• Sistem harus mudah dipelajari dan dipahami.
• Pengguna harus mengetahui
• what to look at
• what it is
• what, when, where, why, dan how to do it
34
15
Pengguna harus dapat mengantisipasi
dampak dari setiap task yang dilakukannya
pada sistem.
Responsiveness
16
• Sistem harus dapat segera merespon
permintaan pengguna.
• Sediakan respon dalam bentuk visual,
tekstual, maupun auditory.
9/7/2010
Fakultas Informatika IT Telkom
35
9/7/2010
Fakultas Informatika IT Telkom
36
9
9/7/2010
17
Transparency
Sistem harus memfasilitasi pengguna untuk
fokus pada tasknya, tanpa mengetahui
mekanisme antarmuka.
Status dan metode penggunaan sistem
harus ditampilkan dengan jelas.
• Organisasi hirarkis: letakkan informasi atau kontrol
dalam kategori logis.
• Sensitivitas konteks: tampilkan dan sembunyikan
informasi dan kontrol berdasarkan konteks sistem.
18
Trade-Offs
• Desain akhir harus mempertimbangkan
trade-offs antar prinsip-prinsip tersebut.
• Kebutuhan pengguna harus diutamakan
daripada kebutuhan teknis.
9/7/2010
Fakultas Informatika IT Telkom
25
Visibility
37
9/7/2010
Fakultas Informatika IT Telkom
38
Tugas 1
Dalam kelompok (@3-5 orang):
1. Pilih sebuah website (no porno, no SARA).
2. Analisis website tersebut berdasarkan
prinsip-prinsip desain yang telah dipelajari.
3. Sebutkan kelebihan, kekurangan, dan berikan
masukan untuk perbaikan website tersebut!
9/7/2010
Fakultas Informatika IT Telkom
39
10
Tujuan Perkuliahan
KARAKTERISTIK
ANTARMUKA GRAFIS DAN
WEB
- EGP -
Setelah mengikuti mata kuliah ini mahasiswa
dapat:
1.Memahami perbedaan mendasar antara GUI
dan Web UI
2.Mengerti dan menerapkan prinsip-prinsip
pokok di dalam mendesain aplikasi sesuai
dengan kebutuhan
9/7/2010
Text Based VS GUI VS Web UI
Fakultas Informatika IT Telkom
2
MENU KITA HARI INI :
Karakteristik GUI dan Web UI
Gaya Interaksi
GUI dan Web UI
Text Based
GUI
Web UI
Gabungan sistem bisnis grafis
dengan web
Karakteristik GUI berbeda dengan Text Based Interface
Karakteristik GUI berbeda juga dengan Web UI
Prinsip-prinsip desain UI
9/7/2010
Fakultas Informatika IT Telkom
3
9/7/2010
Fakultas Informatika IT Telkom
4
1
9/7/2010
COMMAND LINE
GAYA INTERAKSI
Gaya interaksi adalah metode [-metode] komunikasi
antara pengguna dengan sistem komputer
Beberapa jenis Gaya Interaksi:
Command line
Menu Selection
Form Fill in
Direct Manipulation
Anthropomorphic
Merupakan gaya interaksi paling awal dari teknologi komputer
Powerfull for Advanced user
Complex Syntax
“Low error tolerant” sehingga bisa menyebabkan user frustasi
9/7/2010
Fakultas Informatika IT Telkom
5
9/7/2010
Tren UI saat ini di berbagai macam
aplikasi
Sangat berguna untuk mengambil
Informasi
Memanfaatkan kemampuan
pengenalan manusia
Membantu bagi infrequent user
Membutuhkan typing skill yang tinggi
Label Menu harus dimengerti dan
memiliki arti yang jelas
Fakultas Informatika IT Telkom
7
6
FORM FILL IN
MENU SELECTION
9/7/2010
Fakultas Informatika IT Telkom
Familiar dengan paper form di dunia
nyata
9/7/2010
Fakultas Informatika IT Telkom
8
2
9/7/2010
DIRECT MANIPULATION
ANTHROPOMORPHIC
Antarmuka Anthropomorphic berusaha untuk berinteraksi dengan
manusia dengan cara yang sama seperti manusia berinteraksi satu
sama lain. Termasuk dalam gaya ini adalah dialog bahasa alami,
gerakan tangan, ekspresi wajah dan gerakan mata.
Memungkinkan User berinteraksi secara
langsung bahkan memanipulasi objek
yang tampil di layar
9/7/2010
Fakultas Informatika IT Telkom
9
9/7/2010
INTERACTION STYLE SUMMARY
GAYA INTERAKSI
KELEBIHAN
KEKURANGAN
Command Line
Powerful, fleksibel, sesuai bagi
pengguna ahli, menghemat layar
Harus mengingat perintah, perlu
dipelajari, tidak mentolerir
kesalahan ketik
Menu Selection
Mengutamakan pengenalan,
mengurangi kompleksitas interaksi,
membantu proses pengambilan
keputusan, meminimalkan
pengetikan, membantu pengguna
awam
Boros layar, hirarki menu bisa jadi
kompleks, dapat memperlambat
pengguna ahli
Form Fill in
Format familiar, menyederhanakan
input informasi, memerlukan
pelatihan minimal
Boros layar, perlu desain yang
hati-hati dan efektif, tidak
mencegah salah ketik
Direct Manipulation
Lebih cepat dipelajari, mudah
diingat, menampilkan tanda-tanda
visual/spatial, error recovery mudah,
menyediakan konteks, feedback
segera
Desain lebih kompleks, perlu
manipulasi window, perlu
pengenalan ikon, tidak efisien bagi
pengetik ahli, meningkatkan
kemungkinan kekacauan layar
Anthropomorphic
Alami
Sulit diimplementasikan
9/7/2010
Fakultas Informatika IT Telkom
Fakultas Informatika IT Telkom
10
GUI VS WEB UI
11
9/7/2010
Fakultas Informatika IT Telkom
12
3
9/7/2010
GRAPHICAL USER INTERFACE (GUI)
CHARACTERISTICS OF GUI
KARAKTERISTIK SISTEM
DIRECT MANIPULATION
Tampilan visual
menarik
Interaksi pick and
click
Memiliki
keterbatasan gaya
interaksi
Visualisasi
Berorientasi objek
Memanfaatkan
memori
pengenalan
manusia
Merupakan potret langsung dari kehidupan
nyata
Object dan action selalu terlihat
Aksi cepat dan incremental, hasil tampil di
layar
Dapat
menjalankan
beberapa fungsi
sekaligus
Aksi incremental mudah dibatalkan/
dikembalikan ke kondisi sebelumnya
9/7/2010
Fakultas Informatika IT Telkom
13
9/7/2010
Fakultas Informatika IT Telkom
14
9/7/2010
Fakultas Informatika IT Telkom
16
THE WEB USER INTERFACE
9/7/2010
Awalnya, desain
antarmuka Web ditujukan
untuk merancang navigasi
dan tampilan informasi.
Dengan kata lain, desain
CONTENT, bukan DATA..
Web Page VS Web
Application
More user Control
Fakultas Informatika IT Telkom
15
4
9/7/2010
9/7/2010
Fakultas Informatika IT Telkom
17
The merging of graphical business systems and the web
Dimension
The Nature of the
relationship with
the user
Web Application
Web Page
In the middle of
continuum
Users must use the program,
Users must identifiy, themselves or
login to be able to do anything,
The program must be reliable, and
system failure will be immediately
noticed
Work is remembered from earlier
session
The system does not care
who the user are,
Login is required to simply
give access to more
information than would be
received anonymously,
System failure may not be
noticed
Minimal information such
as a credit card number or
address is remembered
The Conversation
style
The style is formal
The style is casual ,
informal and generic
The style is polite but
friendly
The Nature of the
interaction
A Large amount of data is entered,
complex task are being performed,
data is being created, manipulated
and permanently stored
No data is entered or
changed
A small amount of data is
entered and possibly
stored, Milestones,
checkpoints, endpoints are
expected and included
The Frequency of
use
It is used daily, it is used for long
period (4-8 Hour), it is used to help
resolve emergencies
It is used only occasionally,
it is used for only few
minutes at a time, it is
used to find out about
something
It is used periodically or
episodically
9/7/2010
Fakultas Informatika IT Telkom
9/7/2010
Fakultas Informatika IT Telkom
18
In the middle of
continuum
Dimension
Web Application
Web Page
The Perceived
distance of the
provider
It is viewed as being local in origin,
it is viewed as being controlled
locally by a data administrator, the
response time is fast
The origin is unknown, the origin
is viewed as originating
somewhere else in the country or
overseas, the response time is
slow
The origin cannot
ascertained or doesn’t
matter
Real Time
interaction
Data is fed in real time, the
information is critical, a delay is
life-threatening, long reponses
exist but users remain
Time is irrelevant, long response
delay exist and cause users to exit
Response is near real
time
How much
help will users
need?
Intense training programs and
experience are needed to use and
become experts
Every visit is one time session,
minimizing or eliminating the
need for help
A minimum amount of
experience, training or
help material is needed
The interaction
style
The navigation is controled,
controls are complex, the syntax
is obejct:Action, there is little or no
reversibility, drag and drop
manipulation is expected, exit
requires users to log off
The navigation is flexible and
simple, controls are simple, no
object selection is required,
action are easily reversed using
the back button, no drag-drop
manipulation exist, single clicking
links are used to navigate
The navigation is
flexible, simple data
collection exist, user
exits by closing web
browser
The
Presentation
style
The Style is subdue and serious
The style is colorfull, graphic,
possibly animated, the control are
obvious and self explanatory
The style is cooler but
attractive
Follow
standards
Platform standard compliance
exists, the style resembles or
matches GUI standard
Few Cross site standard are
followed, only intra-site
consistently exists
Some common pattern
exists
19
9/7/2010
Fakultas Informatika IT Telkom
20
5
9/7/2010
1
Accessibility
Sistem harus dapat
digunakan, tanpa
modifikasi, oleh sebanyak
mungkin orang.
PRINSIP
DESAIN
UI
• Perceptibility: untuk
keterbatasan pancaindera
• Operability: untuk
keterbatasan fisik
• Simplicity: untuk keterbatasan
pengalaman, literacy, dan
konsentrasi
• Forgiveness: meminimalkan
kesalahan pengguna dan
akibat yang ditimbulkannya
9/7/2010
9/7/2010
Fakultas Informatika IT Telkom
Aesthetically Pleasing
Fakultas Informatika IT Telkom
22
21
2
3
Availability
Sistem harus menarik secara visual
• Menyediakan kontras yang bermakna antar
elemen-elemen layar yang berbeda
• Melakukan pengelompokan
• Menyelaraskan elemen-elemen dan kelompokkelompok dalam layar
• Menyediakan representasi 3 dimensi
• Menggunakan warna dan grafis secara efektif dan
sederhana
9/7/2010
Fakultas Informatika IT Telkom
• Seluruh objek
harus tampak
setiap saat
• Hindari
penggunaan
mode.
23
9/7/2010
Fakultas Informatika IT Telkom
24
6
9/7/2010
4
Clarity
Antarmuka harus
konseptual
dan
penggunaan:
•
•
•
•
•
9/7/2010
Compatibility
jelas secara visual,
linguistik,
termasuk
• Tampilan harus
compatible dengan
• pengguna
• task dan pekerjaan
• produk
elemen-elemen visual
fungsi
metafora
kata
teks
• Mengadopsi
perspektif
pengguna.
Fakultas Informatika IT Telkom
Configurability
5
25
6
9/7/2010
Fakultas Informatika IT Telkom
Consistency
26
7
• Sistem harus serupa dalam:
• tampilan
• aksi
• operasi
• Aksi yang sama harus memberikan hasil yang
sama
• Fungsi dan posisi elemen-elemen standar
sebaiknya tidak berubah.
Tampilan harus mudah di-personalisasi, konfigurasi
dan rekonfigurasi untuk:
• Meningkatkan sense of control
• Memfasilitasi pemahaman pengguna
9/7/2010
Fakultas Informatika IT Telkom
27
9/7/2010
Fakultas Informatika IT Telkom
28
7
9/7/2010
8
Control
• Kontrol harus diserahkan pada pengguna, agar
pengguna, menurut caranya, dapat menentukan:
Berikan alternatif agar
pengguna dapat
melakukan task secara
langsung.
• what to do
• how to do it
dan dapat menyelesaikannya dengan mudah.
• Antarmuka yang sederhana, dapat diprediksi,
konsisten, fleksibel, customizable, dan pasif
memberikan kontrol kepada pengguna.
9/7/2010
Fakultas Informatika IT Telkom
29
10
Efficiency
Fakultas Informatika IT Telkom
9/7/2010
Fakultas Informatika IT Telkom
30
11
Familiarity
• Minimalkan gerakan mata dan tangan, serta
aksi kontrol lainnya.
• Antisipasi keinginan dan kebutuhan
pengguna semaksimal mungkin.
9/7/2010
9
Directness
• Gunakan konsep dan bahasa yang familiar bagi
pengguna.
• Antarmuka harus alami dan sesuai dengan pola
perilaku pengguna, melalui penggunaan realworld metaphors.
31
9/7/2010
Fakultas Informatika IT Telkom
32
8
9/7/2010
12
Flexibility
• Fleksibilitas adalah kemampuan sistem
untuk merespon perbedaan individual.
• Peningkatan fleksibilitas biasanya diimbangi
dengan penurunan usabilitas, sehingga
penerapannya
harus
dipertimbangkan
dengan matang.
9/7/2010
Fakultas Informatika IT Telkom
Obviousness
13
Immersion
Munculkan immersion agar
pengguna menikmati dan puas
terhadap sistem. Hal ini dapat
dilakukan melalui:
• Tantangan yang harus diselesaikan
• Konteks yang dapat mempertahankan
fokus pengguna
• Tujuan yang didefinisikan dengan jelas
• Feedback langsung tentang aksi dan
performansi
• Perasaan kontrol terhadap aksi, task dan
lingkungan
33
14
9/7/2010
Fakultas Informatika IT Telkom
Predictability
• Sistem harus mudah dipelajari dan dipahami.
• Pengguna harus mengetahui
• what to look at
• what it is
• what, when, where, why, dan how to do it
34
15
Pengguna harus dapat mengantisipasi
dampak dari setiap task yang dilakukannya
pada sistem.
Responsiveness
16
• Sistem harus dapat segera merespon
permintaan pengguna.
• Sediakan respon dalam bentuk visual,
tekstual, maupun auditory.
9/7/2010
Fakultas Informatika IT Telkom
35
9/7/2010
Fakultas Informatika IT Telkom
36
9
9/7/2010
17
Transparency
Sistem harus memfasilitasi pengguna untuk
fokus pada tasknya, tanpa mengetahui
mekanisme antarmuka.
Status dan metode penggunaan sistem
harus ditampilkan dengan jelas.
• Organisasi hirarkis: letakkan informasi atau kontrol
dalam kategori logis.
• Sensitivitas konteks: tampilkan dan sembunyikan
informasi dan kontrol berdasarkan konteks sistem.
18
Trade-Offs
• Desain akhir harus mempertimbangkan
trade-offs antar prinsip-prinsip tersebut.
• Kebutuhan pengguna harus diutamakan
daripada kebutuhan teknis.
9/7/2010
Fakultas Informatika IT Telkom
25
Visibility
37
9/7/2010
Fakultas Informatika IT Telkom
38
Tugas 1
Dalam kelompok (@3-5 orang):
1. Pilih sebuah website (no porno, no SARA).
2. Analisis website tersebut berdasarkan
prinsip-prinsip desain yang telah dipelajari.
3. Sebutkan kelebihan, kekurangan, dan berikan
masukan untuk perbaikan website tersebut!
9/7/2010
Fakultas Informatika IT Telkom
39
10