Human-Computer Interaction User Interface Design

Efficiency

When fixing problems, always do the least you can.

Steve Krug

Topik-topik bahasan:

  1. Definisi efisiensi
  2. Chunking
  3. Shortcut

Penjelasan Efficiency dalam bentuk video dapat diakses pada:


DEFINISI EFISIENSI

Dalam bentuk kata sifat, efisiensi berarti:

  • (khususnya pada sistem atau mesin) mencapai produktivitas maksimum dengan usaha atau pengeluaran biaya seminimum mungkin: lampu neon efisien dalam mengubah listrik menjadi cahaya.
  • (seseorang) yang bekerja dengan cara yang terorganisir dan kompeten: administrator yang efisien.
  • (dalam kombinasi) mencegah pemborosan penggunaan sumber daya tertentu: sistem pemanas hemat energi.

Sebagai kata benda, efisiensi adalah:

  • keadaan atau kualitas menjadi efisien: efisiensi energi yang lebih besar.
  • tindakan yang dirancang untuk mencapai efisiensi: untuk meningkatkan efisiensi dan meningkatkan pendapatan.
  • Teknis rasio pekerjaan yang berguna dilakukan oleh mesin atau dalam sebuah proses dengan total energi yang dikeluarkan atau panas yang diambil.

Dalam computer science, istilah efisiensi adalah:

  • Rasio pekerjaan yang berguna terhadap sumberdaya (prosessor dan storage) yang dihabiskan.
  • Dengan kata lain, rasio output terhadap input dari sistem yang diberikan.
  • Jika misalnya suatu algoritma dikatakan efisien, ia melakukan pekerjaan yang baik dalam menghemat sumber daya komputer untuk mencapai tujuannya.

Dalam istilah Human-Computer Interaction atau Usability (The Glossary of Human Computer Interaction, interaction-design.org), efisiensi diukur sebagai:

Sumberdaya yang dikeluarkan oleh user sehubungan dengan keakuratan dan kelengkapan tujuan yang dicapai (ISO standard 9241). Efisiensi tinggi dicapai ketika user mencapai tujuannya sambil mengeluarkan sumberdaya sesedikit mungkin sesuai standard ISO yang disebutkan. Namun definisi ini sangat berorientasi bisnis dan hanya berlaku sebagian untuk software seperti game.

Pada materi ini dijelaskan 2 cara untuk meningkatkan efisiensi pada User Interface, yaitu chunking dan shortcut.


CHUNKING

Bagaimanakah kita mengingat:

  • Nomor-nomor telepon?
  • Kode pos?
  • Nomor induk pada KTP?
  • ID mahasiswa?
  • Password pada beberapa email?
  • Security code untuk internet banking?

Sebagian orang mungkin sudah menonton filma animasi Inside Out yang dirilis tahun 2015.

Film Inside Out bercerita tentang seorang gadis kecil bernama Riley Andersen lahir di Minnesota, dan dalam pikirannya ada lima manifestasi emosi yaitu Joy (riang), Sadness (kesedihan), Fear (ketakutan), Anger (kemarahan), dan Disgust (jijik). Emosi tersebut tinggal di Markas besar yang terletak di pikiran Riley, di mana mereka mengatur keadaan Riley dalam bertindak dan menjadikannya sebuah kenangan. Kenangan barunya disimpan di bola berwarna yang mewakilkan masing-masing emosi seperti Joy berwarna kuning, Sadness berwarna biru, Fear berwarna ungu, Anger berwarna merah, Disgust berwarna hijau.

Memori-memori yang telah diolah seharian penuh tersebut dikirim ke Long Term Memory (ingatan jangka panjang) pada tahap awal tidur yaitu REM (Rapid Eye Movement). Sedangkan memori yang paling penting atau disebut “inti memori” disimpan di hub Markas, inti memori berisikan kejadian yang terpenting dalam kehidupan Riley sehingga membentuk suatu kepribadian dirinya. Ingatan jangka panjang dapat diingat dengan membangkitkan kenangan atau memori masa lalu.

Selain dari jenis-jenis emosi dalam diri manusia, dan juga bagaimana kepribadian terbentuk dari emosi dan memori tersebut, film Inside Out memberi pengetahuan tentang kapasitas memori manusia yang terbatas. Pada satu waktu, beberapa memori menjadi tidak dapat diakses lagi agar ada ruang untuk pengisian memori-memori yang baru. Salah satu yang harus hilang aksesnya adalah memori tentang teman imaginatif masa kecil Riley bernama Bing Bong, dimasukkan ke Dump Memory.

Pengetahuan atas memori manusia yang terbatas, penting untuk peningkatan efisiensi dalam perancangan User Interface. Keterbatasan ini membuat konsep chunking menjadi penting.

Chunk (kata kerja [dengan obyek]) adalah membagi (sesuatu) menjadi potongan-potongan: potongan empat pon buah pir, (dalam psikologi atau analisis linguistik) kelompok bersama (item atau kata yang terhubung) sehingga mereka dapat disimpan atau diproses sebagai konsep tunggal.

“Chunk” adalah sebuah unit memori atau persepsi. Di satu sisi, chunk (potongan) didefinisikan sebagai simbol; dalam arti lain, chunk mewakili aktivasi dari pengalaman masa lalu, tergantung pada presentasi dan apa yang sudah Anda ketahui.

Lalu, pada manusia terdapat yang disebut working memory. Working memory adalah tempat Anda berpikir yang dilakukan secara sadar. Working memory sebenarnya bukan tempat yang terpisah di otak, melainkan pola aktivasi unsur-unsur dalam ingatan jangka panjang.

Pada masa lampau, hasil menyatakan bahwa kapasitas working memory kira-kira 7 ± 2 chunk. Kapasitas short term memory (memori jangka pendek) adalah tujuh plus minus dua item informasi (beberapa orang hanya dapat menyimpan lima atau enam item, sementara yang lain dapat menampung delapan atau sembilan item). Sebuah analisis ulang untuk percobaan yang sama baru-baru ini mengubah perkiraan itu menjadi 4 ± 1 chunk (Parker, “Acta is a four-letter word,” Acta Psychiatrica Scandinavica, 2012).

Berapa pun itu, kapasitas working memory ini sangat kecil. Meskipun ukuran working memory dapat ditingkatkan dengan latihan (jika user secara sadar menerapkan teknik mnenomik yang mengubah data seolah-olah menjadi potongan yang lebih mudah diingat), bukanlah ide yang baik untuk mengharapkan user melakukan itu. Data yang dimasukkan pada working memory menghilang dalam waktu singkat – beberapa detik atau puluhan detik.

Sebuah interface yang baik tidak akan menuntut penggunaan banyak working memory user-nya.

Long-term memory (ingatan jangka panjang) mungkin adalah bagian paling sedikit dipahami dalam pengertian manusia. Long-term memory berisi banyak ingatan manusia. Kapasitasnya sangat besar, dan menunjukkan sedikit kerusakan. Long-term memory bukan tidak sengaja dihapus; sebenarnya mereka hanya menjadi tidak dapat diakses.

Teknik mnemonik seperti mengasosiasikan hal-hal yang perlu Anda ingat dengan tempat-tempat yang familiar, seperti kamar di rumah masa kecil Anda, dapat membantu melatih ingatan. Tetapi teknik ini membutuhkan kerja keras dan perhatian dari user.

Penjelasan tentang bagaimana emosi dan memori manusia bekerja sangat jelas digambarkan dalam film Inside Out tadi. Menontonnya mungkin dapat membantu Anda semakin memahami bagaimana memori pada manusia bekerja, dan selanjutnya bisa mendorong Anda untuk merancang UI dengan efisiensi yang baik ketika digunakan oleh user.

Salah satu kunci untuk learnability yang baik adalah membuat koneksi semudah mungkin; dan konsistensi adalah cara yang baik untuk melakukannya.

Lalu, bagaimana cari kita meningkatkan efisiensi output? Kemampuan kita untuk membentuk chunk-chunk dalam working memory sangat bergantung bagaimana informasi disajikan: urutan huruf tunggal cenderung diingat sebagai satu huruf (satu chunk), tetapi urutan kelompok tiga huruf cenderung dipotong sebagai satu grup (satu chunk). Hal ini juga bergantung pada apa yang sudah kita ketahui. Jika ketiga huruf tersebut adalah TLA (Three Letter Acronym) atau akronim tiga huruf dengan potongan yang sudah mapan dalam long-term memory, kita akan lebih mampu mempertahankannya dalam working memory.

Contoh gambar di bawah ini menunjukkan bagaimana chunking dan termasuk akronim di dalamnya, membantu user mengingat dengan lebih mudah.

Keyword yang digunakan untuk membuktikan kupon akun adalah kata-kata yang lebih mudah diingat dan diketik (SHE MOON TONNE SHUT FUNK SLEEP) daripada 10 digit ID yang chunk-nya tidak dipotong-potong/ dipisahkan meskipun hanya satu jenis angkanya yaitu 9 (angka ID berjumlah 9, berbeda jika dituliskan misalnya 999 999 999).


SHORTCUT

Pembuatan shortcut adalah salah satu cara untuk meningkatkan efisiensi dalam interaksi user dengan interface. Beberapa contoh dan hampir kita hadapi setiap hari dalam interaksi dengan perangkat teknologi, yaitu:

  1. Keyboard Commands & Menu Accelerators
  2. Default & Pending Delete
  3. History
  4. Autocomplete
  5. Aggregation
  6. Anticipation

Setiap jenis shortcut ini dapat Anda pilih dan gunakan dalam rancangan User Interface yang memberi penghematan waktu dan kecepatan kerja user lebih baik.


1. Keyboard Shortcut

Shortcut pada keyboard dapat dibagi menjadi:

  • Keyboard commands
  • Menu accelerators
Keyboard Command di sistem operasi Microsoft Windows, contoh Save: Ctrl + S. Menu Accelerator contohnya untuk perintah membuka menu File: Alt + F.
Keyboard Command di sistem operasi MacOS, contoh untuk Save: Commang + S

Cara umum untuk meningkatkan efisiensi sebuah interface adalah dengan menambahkan shortcut melalui keyboard. Shortcut di keyboard adalah kombinasi button yang mudah diingat. Ada teknik konvensional untuk menampilkan keyboard shortcut pada menu bar, misalnya Ctrl+N dan Ctrl+O.

Menu bar dan button sering memiliki akselerator (alat mempercepat) misalnya huruf yang digarisbawahi, yang biasanya dipanggil dengan menahan button Alt untuk memberikan fokus keyboard ke menu, kemudian menekan huruf yang digarisbawahi.


2. Default & Pending Delete

Shortcut dalam bentuk Default berupa sebuah form dengan sebuah isi default. Default adalah jawaban umum yang sudah diisi ke dalam sebuah form. Default membantu dalam hal:

  • Menyediakan shortcut untuk pemula dan user yang sudah terbiasa menggunakan form;
  • Membantu user untuk mempelajari interface dengan menunjukkan contoh pengisian yang benar.
Contoh shortcut dalam bentuk Default untuk penyimpanan file

Default harus fragile. Ketika Anda mengklik atau tab ke bidang yang berisi nilai default, isinya harus sepenuhnya dipilih/ disorot sehingga user yang terbiasa menggunakan langsung dapat menggantinya dengan hanya langsung mengetikkan isi yang baru. Teknik dimana pengetikan menggantikan isi yang diseleksi, disebut PENDING DELETE.

Pending Delete untuk penamaan file

3. History

Shotcut berupa History, menawarkan pilihan untuk ”recently-used” (terakhir kali digunakan) atau pilihan yang “frequently-used” (sering digunakan).

Recent Font

Pada pengeditan file sering kali membuat penempatan file sementara, inilah sebabnya ”Recently Used Files” pada menu File sangat membantu untuk membuka file lebih efisien.

Open Recent File

Simpan history (riwayat) pilihan-pilihan sebelumnya dari user, bukan hanya file-nya tetapi semua nilai apapun yang mungkin berguna.
Ketika Anda menampilkan dialog Print kembali misalnya, ingat dan sajikan pengaturan default yang disediakan/digunakan sebelumnya.


4. Autocomplete

Shortcut autocomplete ditujukan untuk meminimalisir pengetikan. Autocomplete membantu dalam efisiensi, lebih sedikit waktu yang digunakan untuk mengetik karena ada bantuan melengkapi kata.


5. Aggregation

Shortcut ini dipakai untuk memilih banyak sekaligus untuk satu aksi/tugas. Contohnya: melakukan drag & drop sekaligus (banyak).

Aggregation dengan membuat pilihan sekaligus lebih dari satu
Drag file lebih dari satu

Agregasi (pengumpulan) adalah cara terbaik untuk menambah efisiensi pada sebuah interface. Pikirkan cara-cara user dapat mengumpulkan sejumlah item seperti obyek data, keputusan, obyek grafis atau apapun itu, dan menanganinya sekaligus, sebagai kelompok.

  • Multiple selection (pilihan sekaligus banyak) adalah pola desain yang baik untuk agregasi dan ada banyak idiom saat ini untuk melakukan multiple selection pada mouse dan keyboard:
  • drag (menyeret) sebuah outline di sekitar item-item yang akan dipilih
  • shift-click untuk memilih sebuah range (rentang) pilihan, dll.

6. Anticipation

Antisipasi bebrarti bahwa desain yang baik harus meletakkan semua informasi dan alat yang diperlukan untuk tugas tertentu dalam jangkauan yang mudah bagi user. Jika sebuah tugas memerlukan fitur dari sebuah interface yang tidak segera tersedia pada current mode, maka user mungkin akan mundur dari apa yang sedang mereka kerjakan, dan ini mempengaruhi efisiensi.


REFERENSI

  • MIT Open Courseware, User Interface Design and Implementation, Efficiency.
  • Designing The User Interface: Stategies for Effective Human-Computer Interaction (Sixth Edition), Ben Shneiderman.
  • https://forums.palace.network/topic/525-inside-out-opinions/
  • https://www.wayfair.com/furniture/pdx/advanced-graphics-disney-pixar-inside-out-bing-bong-life-size-cardboard-cutout-adv2511.html
  • https://www.staples.ca/products/783481-en-microsoft-wired-keyboard-600-english
  • https://www.pngfuel.com/free-png/cokaz
  • https://id.wikipedia.org/wiki/Inside_Out_(film)
  • https://insideout.fandom.com/wiki/Long_Term_Memory
  • Photo by Daniel Korpai on Unsplash