User Interface Design
Interaksi Manusia Komputer Human Computer Interaction (HCI) Rekayasa Perangkat Lunak Software Engineering Surya Sumpeno ST MSc
Apa itu User Interface? Antarmuka Pengguna
Antarmuka (1) ● ● ●
Perangkat Keras Perangkat Lunak Perangkat Otak (Brainware) –
Faktor Manusia (Human Factor)
Mobile Computer Wearable Computer Ubiqitous Computing
Antarmuka (2)
Ragam Dialog 1.Dialog berbasis perintah baris (command line dialogue) 2.Dialog berbasis bahasa pemrograman 3.Antarmuka berbasis bahasa alami 4.Menu 5.Dialog berbasis pengisian borang (form filling dialogue) 6.Antarmuka berbasis icon 7.Jendela 8.Manipulasi langsung (direct manipulation) 9.Antarmuka berbasis interaksi grafis
Beberapa Karakteristik 1.Inisiatif 2.Keluwesan 3.Kompleksitas 4.Kekuatan 5.Beban Informasi 6.Konsistensi 7.Umpan balik 8.Observabilitas 9.Kontrolabilitas 10.Efisiensi 11.Keseimbangan
Inisiatif Sifat dasar dari sembarang dialog ● Inisiatif oleh komputer ●
● ● ●
●
Pengguna memberikan tanggapan atas arahan dari komputer Definisi himpunan yang ditetapkan sebelumnya Contoh: yes/no, menu
Inisiatif oleh pengguna ● ●
Keterbukaan lebih luas Contoh: command line
Keluwesan ●
Kemampuan untuk mencapai suatu tujuan lewat cara yang berbeda – –
●
Menyesuaikan diri dengan kemampuan pengguna (customized) – –
●
Menyediakan sejumlah perintah alternatif dengan hasil yang sama/setara Shortcut
Menu pemula dan mahir Shortcut, command line
Personalisasi
Kompleksitas ●
● ●
Tidak perlu membuat antarmuka lebih dari yang diperlukan Pengelompokan Hirarki – –
Bayangkan bila tanpa hirarki Terlalu bertingkat juga merepotkan
Kekuatan ●
Jumlah kerja yang dapat dilakukan oleh sistem untuk sebuah perintah –
●
Pengguna mahir: merasa tersiksa bila harus menempuh jalan panjang
Pengamanan terhadap kemampuan yang destruktif – –
Select all/delete elements Format partisi
Beban Informasi ● ●
Disesuaikan dengan level pengguna Disesuaikan dengan konteks –
●
Contextual help
Bertahap – – –
Halaman (page) Modul Scrollbar
Konsistensi ●
Ekstrapolasi pengetahuan (analogi) untuk opsi opsi baru –
●
Sintaks/keyword yang baku/standar – –
● ● ●
Saya biasanya memakai ... Warna, suara, dialog Bahaya, reminder, warning, notifikasi
Pengelompokan Tata letak Format –
Tgl/bln/thn, Thn/bln/tgl, L/P, P/W
Umpan Balik ●
Respon dari sistem atas satu perintah – –
●
Observability – –
●
Ok, command error Button yang ditekan Dapat diamati, misal indikator progress Menyembunyikan detail rumit
Controlability – –
Dapat dikendalikan Ke mana akan pergi, sampai di mana, apakah dapat dibatalkan
Keseimbangan Beban antara pengguna dan komputer
Kecakapan Manusia
Kecakapan Komputer
Estimasi Kalkulasi Akurat Intuisi Deduksi Logika Kreatifitas Aktifitas Perulangan Adaptasi Konsistensi Kesadaran serempak Multitasking Pengolahan abnormal/pengecualian Pengolahan rutin Memori asosiatif Simpanbaca Non deterministik Deterministik Pengenalan pola Pengolahan data Pengetahuan dunia Pengetahuan domain Kesalahan manusiawi Bebas dari kesalahan
Dialog berbasis baris perintah (command line dialogue)
Dialog berbasis baris perintah (2) Keuntungan
Cepat Efisien Akurat Ringkas Luwes Inisiatif oleh pengguna Powerful (kuat)
Kerugian Pelatihan lama Beban ingatan tinggi Jelek dalam menangani kesalahan
Pemilihan kata kunci Format perintah yang konsisten Help: dir /?, ls –help, man ls
Menu (1) Makanan ● Nasi goreng ● Mie ayam ● Mie bakwan ● Soto ayam
Minuman ● Es teh ● Es jeruk ● Jus apokat
Menu (2)
●
Hirarki tidak terlihat
Menu (3) Pulldown menu ● Hirarki Terlihat ●
● ● ● ● ● ●
Pemakaian Separator Pemakaian --> Pemakaian ... Adanya Short Cut File, Edit Highlight (Terpilih) Grayed Menu
Keuntungan dan Kerugian Menu ● ●
●
●
Sedikit pengetikan Beban memori rendah Struktur terdefinisikan dengan baik Perancangan mudah –
Tersedia peranti bantu visual
● ●
●
●
Seringkali lambat Memakan ruang layar Tidak cocok untuk aktivitas pemasukan data Tidak cocok untuk dialog dengan inisiatif pada pengguna
Antarmuka Berbasis Icon (1)
Antarmuka Berbasis Icon (2) Contoh lain: Control Panel MS Windows
Konteks ● Perubahan Kursor ●
Representasi Icon
Karakteristik Icon (Gambar) ● ●
Visually appealing Manusia lebih ingat/cepat menangkap makna gambar daripada membaca teks – –
● ● ●
● ●
Rambu lalu lintas Kanji versus Romanji
Brand image Analogi, metafora, persepsi Tidak efektif ketika menangani pekerjaan serupa tapi tak sama, sejenis Icon harus cukup besar Salah satu trik menangani ambigu adalah icon +teks
Form
Karakteristik Form (1) Pros ● Pengguna sudah terbiasa dengan pengisian borang ● Sedikit pelatihan ● Beban memori rendah ● Strukturnya jelas ● Perancangan mudah ● Tersedia peranti bantu untuk merancang
Cons ● Seringkali lambat ● Memakan ruang layar ● Tidak cocok untuk pemilihan perintah/instruksi ● Memerlukan pengontrol kursor
Karakteristik Form (2) ●
Proteksi tampilan –
● ● ● ● ● ● ● ● ●
Tidak semua field (medan) di layar dapat diakses
Batasan medan Isi medan Medan opsional Default Bantuan kontekstual Medan penghentian Navigasi Pembetulan kesalahan Penyelesaian form
Komponen Form (Antarmuka) ● ● ●
● ● ●
Text area Text field Radio button Push button List box Pulldown
Penjendelaan
Mengapa Jendela? ● ● ● ● ● ● ●
Penampilan lebih banyak informasi Akses lebih banyak sumber informasi Kombinasi berbagai sumber informasi Kendali bebas atas sejumlah program Command context Penyajian jamak (multiple view) Reminder/pengingat
Direct Manipulation (1) – – – – –
Kendali Proses Simulasi pabrik Editor Teks/Pengolah Kata (WYSWYG) Simulator Computer Aided Design/Gambar Vector
Direct Manipulation (2)
Karakteristik Antarmuka Berbasis Manipulasi Langsung Pros ● Analogi yg jelas dengan kehidupan nyata ● Mudah dioperasikan ● Visual yang indah ● Tersedia perangkat bantu
Cons ● Tampilan grafis ● Peranti masukan ● Perancangan visual dengan kualitas tertentu
