MI3482 Desain Interaksi Pengguna Ruang Lingkup Interaksi Monterico Adrian, M.T. monte@bionus.co.id Semester Ganjil 2013/2014 Hanya dipergunakan untuk kepentingan pengajaran di lingkungan Politeknik Telkom
Indikator Kajian 1 Kompetensi Dasar: Mampu menyebutkan konsep-konsep umum desain interaksi pengguna Mampu menyebutkan proses desain interaksi
Indikator Kajian 1 Kompetensi Menengah: Mampu menjelaskan konsep-konsep umum desain interaksi pengguna Mampu menjelaskan proses desain interaksi dan user-centered
Indikator Kajian 1 Kompetensi Mahir: Mampu memberikan contoh konsep-konsep umum desain interaksi pengguna Mampu memberikan contoh proses desain interaksi dan user-centered
Ruang Lingkup Interaksi dalam Prinsip Desain Visibility Feedback Limitation Consistency Affordance
Visibility www.baddesigns.com Ini adalah sebuah panel kontrol untuk sebuah lift Bagaimana menggunakan lift tersebut? Tekan sebuah tombol untuk memilih lantai yang diinginkan? Tidak terjadi apa-apa. Tekan tombol yang lain? Masih tetap tidak terjadi apa-apa. Apa yang Anda butuhkan? Hasil yang didapatkan tidak terlihat seperti apa yang dilakukan!
Visibility Anda harus memasukan kartu ke dalam celah di dekat tombol untuk membuat lift dapat bekerja. Bagaimana supaya aksi mudah terlihat? buat card reader terlihat jelas menyediakan pesan suara cara pemakaian lift menyediakan sebuah keterangan yang besar di sebelah card reader yang dapat langsung terlihat ketika seseorang masuk ke dalam lift Prinsip visibility: membuat beberapa bagian terlihat jelas membuat apa yang harus dilakukan terlihat jelas
Contoh Lain Apa yang harus dilakukan jika pengguna mengenakan baju berwarna hitam? Kontrol otomatis dapat membuatnya lebih sulit digunakan
Feedback Mengirim informasi kepada pengguna mengenai apa yang telah dilakukan Termasuk suara, sorot, animasi, dan kombinasi ketiganya Contoh: ketika tombol pada layar diklik, berikan umpan balik berupa suara atau sorot merah ccclichhk
Limitation Membatasi kemungkinan aksi yang dapat dilakukan Membantu untuk mencegah pengguna dari pemilihan opsi yang salah Objek fisik dapat didesain untuk membatasi sesuatu Contoh: hanya satu cara untuk memasukan sebuah kunci ke dalam kunci pintu
Contoh Desain Ambigu Sumber: www.baddesigns.com Dimana dapat menancapkan mouse? Dimana dapat menancapkan keyboard? Konektor yang atas atau bawah? Apakah ikon dengan kode warna membantu?
Desain yang Logis A: menyediakan pemetaan bersebelahan antara ikon dengan konektor B: menyediakan tanda dengan warna untuk memperlihatkan asosiasi antar konektor dengan label
Consistency Mendesain antarmuka agar mempunyai operasi yang serupa dan menggunakan elemen yang serupa untuk task yang serupa Contoh operasi yang konsisten: menyorot objek grafik dengan tombol kiri mouse, penggunaan short-cut dengan tombol ctrl+huruf awal operasi (ctrl+c, ctrl+p, dsb) Keuntungan utama dari antarmuka yang konsisten adalah antarmuka lebih mudah dipelajari dan digunakan.
Kapan Konsistensi Runtuh Apa yang terjadi jika terdapat lebih dari satu perintah yang dimulai dengan huruf yang sama? Contohnya, save, spelling, select, style Harus mencari inisial lain atau kombinasi tombol, sehingga melanggar aturan konsistensi Contohnya, ctrl+s, ctrl+sp, ctrl+shift+l Meningkatkan beban belajar pada pengguna, membuat mereka lebih rentan terhadap kesalahan
Konsistensi Internal dan Eksternal Konsistensi internal: desain operasi agar berperilaku sama dalam sebuah aplikasi. Konsistensi eksternal: desain operasi, antarmuka, dan sebagainya, agar serupa pada aplikasi dan perangkat yang berbeda
Contoh Inkonsistensi Eksternal (a) telepon, remote control (b) kalkulator, keypad komputer 1 2 3 7 8 9 4 5 6 4 5 6 7 8 9 1 2 3 0 0
Affordance Atribut suatu objek yang membuat pengguna mengetahui bagaimana cara menggunakannya Norman (1988) menggunakan istilah ini untuk mendiskusikan desain dari objek yang dijumpai sehari-hari Sejak saat itu, menjadi populer dalam desain interaksi untuk mendiskusikan bagaimana mendesain antarmuka objek Contohnya, scrollbar agar digerakkan ke atas dan ke bawah, ikon agar diklik
Aktivitas #1 Physical affordance: Bagaimana affordance dari objek fisik berikut? Apakah mereka obvious (wajar?)?
Aktivitas #2 Virtual Affordance Bagaimana affordance dari objek layar berikut? Bagaimana jika Anda pengguna pemula? Akankah anda mengetahui apa yang harus dilakukan?
Rangkuman Prinsip desain yang penting dalam ruang lingkup interaksi adalah visibility, feedback, limitation, consistency, dan affordance
Referensi Sharp, Roger & Preece, Interaction Design: Beyond Human-Computer Interaction, 2 nd edition, John Wiley & Sons, Ltd