9/7/2010

1
KARAKTERISTIK
ANTARMUKA GRAFIS DAN
WEB
- EGP -
Tujuan Perkuliahan
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 Fakultas Informatika IT Telkom 2
Text Based VS GUI VS Web UI
9/7/2010 Fakultas Informatika IT Telkom 3
Karakteristik GUI berbeda dengan Text Based Interface
Text Based
GUI
Web UI
Karakteristik GUI berbeda juga dengan Web UI
9/7/2010 Fakultas Informatika IT Telkom 4
MENU KITA HARI INI :
Karakteristik GUI dan Web UI
Gaya Interaksi
GUI dan Web UI
Gabungan sistem bisnis grafis
dengan web
Prinsip-prinsip desain UI
9/7/2010
2
9/7/2010 Fakultas Informatika IT Telkom 5
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
9/7/2010 Fakultas Informatika IT Telkom 6
COMMAND LINE
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 7
MENU SELECTION
Memanfaatkan kemampuan
pengenalan manusia
Membantu bagi infrequent user
Label Menu harus dimengerti dan
memiliki arti yang jelas
Tren UI saat ini di berbagai macam
aplikasi
9/7/2010 Fakultas Informatika IT Telkom 8
FORM FILL IN
Sangat berguna untuk mengambil
Informasi
Membutuhkan typing skill yang tinggi
Familiar dengan paper form di dunia
nyata
9/7/2010
3
9/7/2010 Fakultas Informatika IT Telkom 9
DIRECT MANIPULATION
Memungkinkan User berinteraksi secara
langsung bahkan memanipulasi objek
yang tampil di layar
9/7/2010 Fakultas Informatika IT Telkom 10
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.
9/7/2010 Fakultas Informatika IT Telkom 11
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
FormFill 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 12
GUI VS WEB UI
9/7/2010
4
9/7/2010 Fakultas Informatika IT Telkom 13
GRAPHICAL USER INTERFACE (GUI)
KARAKTERISTIK SISTEM
DIRECT MANIPULATION
Merupakan potret langsung dari kehidupan
nyata
Object dan action selalu terlihat
Aksi cepat dan incremental, hasil tampil di
layar
Aksi incremental mudah dibatalkan/
dikembalikan ke kondisi sebelumnya
9/7/2010 Fakultas Informatika IT Telkom 14
CHARACTERISTICS OF GUI
Tampilan visual
menarik
Interaksi pick and
click
Memiliki
keterbatasan gaya
interaksi
Visualisasi Berorientasi objek
Memanfaatkan
memori
pengenalan
manusia
Dapat
menjalankan
beberapa fungsi
sekaligus
9/7/2010 Fakultas Informatika IT Telkom 15
THE WEB USER INTERFACE
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

9/7/2010 Fakultas Informatika IT Telkom 16

9/7/2010
5
9/7/2010 Fakultas Informatika IT Telkom 17 9/7/2010 Fakultas Informatika IT Telkom 18
9/7/2010 Fakultas Informatika IT Telkom 19
Dimension Web Application Web Page
In the middle of
continuum
The Nature of the
relationship with
the user
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
The merging of graphical business systems and the web
9/7/2010 Fakultas Informatika IT Telkom 20
Dimension Web Application Web Page
In the middle of
continuum
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 doesnt
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
9/7/2010
6
9/7/2010 Fakultas Informatika IT Telkom 21
PRINSIP
DESAIN
UI
9/7/2010 Fakultas Informatika IT Telkom 22
Accessibility
Sistem harus dapat
digunakan, tanpa
modifikasi, oleh sebanyak
mungkin orang.
Perceptibility: untuk
keterbatasan pancaindera
Operability: untuk
keterbatasan fisik
Simplicity: untuk keterbatasan
pengalaman, literacy, dan
konsentrasi
Forgiveness: meminimalkan
kesalahan pengguna dan
akibat yang ditimbulkannya
1
9/7/2010 Fakultas Informatika IT Telkom 23
Aesthetically Pleasing
Sistem harus menarik secara visual
Menyediakan kontras yang bermakna antar
elemen-elemen layar yang berbeda
Melakukan pengelompokan
Menyelaraskan elemen-elemen dan kelompok-
kelompok dalam layar
Menyediakan representasi 3 dimensi
Menggunakan warna dan grafis secara efektif dan
sederhana
2
9/7/2010 Fakultas Informatika IT Telkom 24
Availability
Seluruh objek
harus tampak
setiap saat
Hindari
penggunaan
mode.
3
9/7/2010
7
9/7/2010 Fakultas Informatika IT Telkom 25
Clarity
Antarmuka harus jelas secara visual,
konseptual dan linguistik, termasuk
penggunaan:
elemen-elemen visual
fungsi
metafora
kata
teks
4
9/7/2010 Fakultas Informatika IT Telkom 26
Compatibility
Tampilan harus
compatible dengan
pengguna
task dan pekerjaan
produk
Mengadopsi
perspektif
pengguna.
5
9/7/2010 Fakultas Informatika IT Telkom 27
Configurability
Tampilan harus mudah di-personalisasi, konfigurasi
dan rekonfigurasi untuk:
Meningkatkan sense of control
Memfasilitasi pemahaman pengguna
6
9/7/2010 Fakultas Informatika IT Telkom 28
Consistency
Sistem harus serupa dalam:
tampilan
aksi
operasi
Aksi yang sama harus memberikan hasil yang
sama
Fungsi dan posisi elemen-elemen standar
sebaiknya tidak berubah.
7
9/7/2010
8
9/7/2010 Fakultas Informatika IT Telkom 29
Control
Kontrol harus diserahkan pada pengguna, agar
pengguna, menurut caranya, dapat menentukan:
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.
8
9/7/2010 Fakultas Informatika IT Telkom 30
Directness
Berikan alternatif agar
pengguna dapat
melakukan task secara
langsung.
9
9/7/2010 Fakultas Informatika IT Telkom 31
Efficiency
Minimalkan gerakan mata dan tangan, serta
aksi kontrol lainnya.
Antisipasi keinginan dan kebutuhan
pengguna semaksimal mungkin.
10
9/7/2010 Fakultas Informatika IT Telkom 32
Familiarity
Gunakan konsep dan bahasa yang familiar bagi
pengguna.
Antarmuka harus alami dan sesuai dengan pola
perilaku pengguna, melalui penggunaan real-
world metaphors.
11
9/7/2010
9
9/7/2010 Fakultas Informatika IT Telkom 33
Flexibility
Fleksibilitas adalah kemampuan sistem
untuk merespon perbedaan individual.
Peningkatan fleksibilitas biasanya diimbangi
dengan penurunan usabilitas, sehingga
penerapannya harus dipertimbangkan
dengan matang.
12
9/7/2010 Fakultas Informatika IT Telkom 34
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
13
9/7/2010 Fakultas Informatika IT Telkom 35
Obviousness
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
14
9/7/2010 Fakultas Informatika IT Telkom 36
Predictability
Pengguna harus dapat mengantisipasi
dampak dari setiap task yang dilakukannya
pada sistem.
15
Responsiveness
Sistem harus dapat segera merespon
permintaan pengguna.
Sediakan respon dalam bentuk visual,
tekstual, maupun auditory.
16
9/7/2010
10
9/7/2010 Fakultas Informatika IT Telkom 37
Transparency
Sistem harus memfasilitasi pengguna untuk
fokus pada tasknya, tanpa mengetahui
mekanisme antarmuka.
17
Trade-Offs
Desain akhir harus mempertimbangkan
trade-offs antar prinsip-prinsip tersebut.
Kebutuhan pengguna harus diutamakan
daripada kebutuhan teknis.
18
9/7/2010 Fakultas Informatika IT Telkom 38
Visibility
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.
25
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