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 Simpan baca 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