User Interface Design

Transkripsi

1 User Interface Design Interaksi Manusia Komputer Human Computer Interaction (HCI) Rekayasa Perangkat Lunak Software Engineering Surya Sumpeno ST MSc

2 Apa itu User Interface? Antarmuka Pengguna

3 Antarmuka (1) Perangkat Keras Perangkat Lunak Perangkat Otak (Brainware) Faktor Manusia (Human Factor) Mobile Computer Wearable Computer Ubiqitous Computing

4 Antarmuka (2)

5 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

6 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

7 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

8 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

9 Kompleksitas Tidak perlu membuat antarmuka lebih dari yang diperlukan Pengelompokan Hirarki Bayangkan bila tanpa hirarki Terlalu bertingkat juga merepotkan

10 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

11 Beban Informasi Disesuaikan dengan level pengguna Disesuaikan dengan konteks Contextual help Bertahap Halaman (page) Modul Scrollbar

12 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

13 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

14 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

15 Dialog berbasis baris perintah (command line dialogue)

16 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

17 Menu (1) Makanan Nasi goreng Mie ayam Mie bakwan Soto ayam Minuman Es teh Es jeruk Jus apokat

18 Menu (2) Hirarki tidak terlihat

19 Menu (3) Pulldown menu Hirarki Terlihat Pemakaian Separator Pemakaian --> Pemakaian... Adanya Short Cut File, Edit Highlight (Terpilih) Grayed Menu

20 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

21 Antarmuka Berbasis Icon (1)

22 Antarmuka Berbasis Icon (2) Contoh lain: Control Panel MS Windows Konteks Perubahan Kursor

23 Representasi Icon

24 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

25 Form

26 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

27 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

28 Komponen Form (Antarmuka) Text area Text field Radio button Push button List box Pulldown

29 Penjendelaan

30 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

31 Direct Manipulation (1) Kendali Proses Simulasi pabrik Editor Teks/Pengolah Kata (WYSWYG) Simulator Computer Aided Design/Gambar Vector

32 Direct Manipulation (2)

33 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