Karakteristik

Graphical dan Web User Interfaces

 Gaya Interaksi
Metode dimana user dan sistem komputer berkomunikasi

FAKTOR
ng MEMILIH GAYA
a
y an 2.
INTERAKSI
t em
n gk da Ka
s
Si mba afis u
, n rak
Ou te
n is e Gr ta i) tp ris
J e dik m a as ut tik
. e
1 ka ist ag plik
n e De In
a (S ebp n A vic pu
W sai es t
De
Jenis-Jenis Gaya Interaksi
Command Line
Menu Selection
Form Fill-in
Direct Manipulation
Anthropomorphic
Command Line

• Merupakan gaya interaksi

yang paling “jadul”
• User harus menekan Function
Key atau mengetikkan
perintah pada layar
• User harus mengingat
perintah
• Tingkat error yang tinggi
sehingga membuat user
frustasi
 Menu Selection
• Sekumpulan pilihan dimana user harus memilih salah satu
• Meningkatan kecepatan dan mengurasi kesalahan
Form Fill-in

• Digunakan untuk
mengumpulkan data
• Berbentuk seperti
kertas yang harus
diisi, sehingga
mudah dimengerti
oleh user
 Direct Manipulation
• User langsung berinteraksi dengan sistem
• Biasanya digunakan dalam sistem grafis
 Anthropomorphic
• Bentuk interaksi seperti manusia berinteraksi dengan manusia
yang lain
• Berbentuk seperti: dialog, gerakan tangan, ekspresi wajah dan
gerakan mata
 Virtual Reality (VR)
• VR atau realitas maya adalah teknologi yang memungkinkan dapat
berinteraksi dengan suatu lingkungan dimensi 3D yang
disimulasikan oleh komputer terhadap suatu objek nyata atau
imajinasi.
• Dunia maya tersebut sudah menjadi seperti dunia nyata, dan dunia
nyata yang sebenarnya sudah dihapuskan.
 Augmented Reality (AR)
• Proses penambahan konten virtual ke dunia nyata, sehingga
pengguna bisa berinteraksi dengan konten virtual secara
langsung di dunia nyata.
Keuntungan dan Kerugian (1)
Keuntungan dan Kerugian (2)
 Graphical User Interface (GUI)
• Mekanisme interaksi utama GUI adalah
“menunjuk” terhadap suatu objek
• Objek yang dimaksud mempunyai atribut:
dapat dilihat, didengar, disentuh dan
dirasakan.
• Aksi/operasi yang digunakan pada objek
tersebut meliputi: akses, modifikasi, memilih
dan memanipulasi
 WIMP Interface

Windows

Icons

Menus

Pointing
Device
 Web User Interface
• Desain web yang berfokus pada navigasi
dan penyajian data
• Menitik beratkan pada konten, bukan data

• Menggunakan HTML untuk membuat tampilan, mempunyai

keterbatasan objek dan gaya interaksi
• Navigasi browser sering terlihat banyak “blank screen”
• Tuntutan dalam arsitektur informasi dan urutan menjalankan
suatu proses ( berkembangnya multimedia)

Kesulitan Desain Interface Web

Elemen-Elemen Web UI
 GUI vs Web UI

Devices, WYSIWYG vs Hardware & Software

User Focus, data/transaksi vs informasi/navigasi

User Tasks, install/konfigurasi/penggunaan/upgrade

vs Link/browse/download

Navigation, menu/daftar/dialog vs link/bookmark/URL

 Prinsip-Prinsip Desain UI
Aesthetically
Accessibility Availability
Pleasing
• Desain dapat • Elemen yang • Semua objek
digunakan oleh sesuai dilayar harus selalu
semua user, • Penataan / tersedia
tanpa modifikasi Pengelompokan • Hindari hal-hal
• Karakteristik: • Bisa ditampilkan yang dapat
Perceptibility, dalam tiga membatasi
Operability, dimesi interaksi user
Simplicity, • Penggunaan dengan sistem
Forgiveness warna dan
grafis yang
efektif/simple
 Prinsip-Prinsip Desain UI (2)
Clarity Compatibility Configurability Consistency Control

Directness Effenciency Familiarity Flexibility Forgiveness

Immersion Obviousness Operability Perceptibility Predictability

Recovery Responsiveness Simplicity Transparency Trade-Offs

Visibility
 Daftar Pustaka
1. Galitz, W. O., 2007, The Essential Guide to User Interface
Design an Introduction to GUI Design Principles and
Techniques, Third Edition, John Wiley Sons, Inc
2. Tidwel, J., 2011, Designing Interfaces, Second Edition,
Sebastopol, CA, USA: O’Reilly Media, Inc.