Human-Computer Interaction User Interface Design

Learnability I

The main thing is that everything become simple, easy enough for a child to understand.

Albert Camus

Topik-topik bahasan:

  1. UI Hall of Fame or Shame
  2. Learning Approaches
  3. Interaction Styles

Penjelasan Learnability 1 dalam bentuk video dapat diakses pada:


UI HALL OF FAME OR SHAME

Terdapat sebuah software yang diberi nama IBM RealCD, merupakan software CD player yang memainkan audio dari CD pada CD-ROM.

Mengapa software disebut real? Pengandaiannya seperti ini.

Software RealCD diibaratkan seperti kotak CD (Compact Disc). Bentuk software-nya real atau sama dengan kotak CD yang sebenarnya. Aaptasi kotak CD menjadi desain User Interface (UI) untuk software RealCD adalah salah satu praktek menggunakan metafora dalam perancangan UI.

Menurut Kamus Besar Bahasa Indonesia, metafora/me·ta·fo·ra/ /métafora/ n Ling pemakaian kata atau kelompok kata bukan dengan arti yang sebenarnya, melainkan sebagai kiasan yang berdasarkan persamaan atau perbandingan, misalnya tulang punggung.

Desain yang berlandaskan pada obyek nyata, seperti contoh kotak CD yang berbahan plastik di atas, disebut dengan METAFORA. Metafora adalah salah satu cara untuk membuat interface lebih mudah dipelajari, karena user dapat menerka/mereka-reka cara kerja sebuah obyek berdasarkan pengetahuan mereka tentang metafora interface tersebut.

Metafora dapat menjadi pilihan cara untuk meningkatkan learnability pada sebuah interface. Learnability berbicara tentang seberapa mudah seorang user menyelesaikan tugas-tugas dasar saat pertama sekali mereka berinteraksi dengan desain. Metafora yang tepat dapat membantu user untuk lebih mudah mempelajari penggunaan desain tersebut.

Tampilan interface RealCD saat diakses pertama kali adalah sebagai berikut.

Pertanyaannya, bagaimanakah memulai penggunaan aplikasi? Di manakah daftar lagunya?

Jadi, pada software IBM RealCD, terdapat masalah dengan metafora yang dipakai.

  • User bingung untuk memulai, satu-satunya cara untuk Start adalah dengan menekan button yang diberi tanda panah di bawah ini.
  • Karena mengikuti cara kotak CD, maka daftar lagu ditampilkan seperti membuka kotak CD bagian belakang.

Masalah pada metafora di software IBM RealCD adalah:

  1. Pemilihan metafora yang salah. Kotak CD sebenarnya bukan pemutar CD.
  2. Desainer harus mencari tempat peletakan kontrol. Hal ini menunjukkan bahwa metafora telah mendikte tata letak kontrol, sehingga terpaksa disusun secara vertikal dan mengesampingkan aspek lain.
  3. Terlalu patuh pada metafora. Hal ini mendorong desainer untuk mengabaikan konsistensi dengan aplikasi desktop lain.

Beberapa aplikasi yang berfungsi sebagai pemutar musik adalah Windows Media Player, KMPlayer dan Apple iTunes.

Windows Media Player
KMPlayer
Apple iTunes

Coba perhatikan bahwa pada ketiga aplikasi di atas, peletakan kontrol-kontrol misalnya, ditampilkan dengan bentuk dan peletakan posisi yang mirip, dalam posisi horizontal, bukan vertikal seperti IBM RealCD.

Metafora bukanlah satu-satunya jalan untuk mencapai learnability. Pada kenyataannya, metafora mungkin adalah jalan yang paling sulit, karena penuh perangkap terhadap desainer.


LEARNING APPROACHES

Sebenarnya bagaimana kita belajar User Interface (UI) yang baru?

  • Bukan membaca buku manual. Saat pertama kali komputer muncul, programmer berasumsi user akan membaca buku petunjuk lebih dulu.
  • Bukan dengan mengikuti kelas. Perusahaan berasumsi bahwa karyawan mereka pertama sekali akan mengambil kelas.
  • Bukan membaca Help lebih dulu. Bahkan saat bantuan online dibangun pada setiap aplikasi desktop, user tidak menuju bantuan terlebih dulu.

Kita belajar UI yang baru dengan cara: learning by doing, seeking help dan learning by watching.

1. Learning by doing

User mempunyai tujuan untuk dicapai. Cara mencapainya adalah dengan mengeksplorasi fitur pada aplikasi. Contohnya “Bagaimana cara saya menghilangkan mata merah pada gambar saya di Adobe Photoshop?

User kemudian mengeksplorasi tools yang ada di Adobe Photoshop dan menemukan tool Red Eye Removal pada toolbar di sebelah kiri aplikasi.

User tidak mencoba untuk belajar dahulu.

Sebaliknya, user biasanya mencoba: melakukan apa yang ingin mereka lakukan dan mengeksplorasi interface untuk melihat apakah mereka dapat mengetahui bagaimana melakukannya. Dengan learning by doing, user memulai dengan tujuan yang sudah ada dalam pikiran. Mereka lebih tertarik mencapai tujuan tersebut daripada belajar interface-nya.

Desain interface harus MENGKOMUNIKASIKAN cara menggunakan aplikasi dan membantu user mencapai TUJUAN.

2. Seeking help

User mencari bantuan ketika mereka sudah stuck, tidak dapat memikirkan lagi cara mempelajari penggunaan aplikasi. User sudah mempunyai masalah ketika mereka mencari bantuan dan biasanya mencari solusi yang nyata ke permasalahannya. Oleh karena itu, jangan menggunakan penjelasan panjang. Jawaban langsung ke inti permasalahan.

3. Learning by watching

Cara learning by watching ini dilakukan dengan mengamati user lain. Contohnya: saat menggunakan pintu otomatis untuk cek barcode tiket di bandara, atau saat zoom-in dan zoom-out layar smartphone dengan menggerakkan jari, juga saat menggunakan tombol Alt + Tab pada komputer untuk berpindah aplikasi di Windows.

Learning by doing adalah cara user belajar dengan mencoba apa yang ingin mereka lakukan. Seeking help dilakukan dengan cara user mencari jawaban spesifik. Learning by watching dilakukan dengan mengamati user lain. Dengan mengetahui cara user belajar ini, maka terdapat tiga pelajaran yang dapat dipraktikkan oleh desainer, yaitu:

  1. Ketika mendesain interface, ketahui tujuan user. Caranya adalah dengan mengumpulkan informasi tentang user dan kebutuhannya.
  2. UI harus mengkomunikasikan bagaimana aplikasi bekerja dan cara menggunakannya. UI dapat diistilahkan sebagai guru utama untuk mengetahui bagaimana menggunakan sebuah aplikasi.
  3. Help harus mudah ditemukan dan berorientasi pada tujuan akhir user. Bantuan harus langsung ke tujuan, kepada permasalahan yang dicari solusinya oleh user.

INTERACTION STYLES

Sebelum mempelajari tentang interaction styles, kita perlu mengetahui perbedaan recognition dengan recall.

  • Recognition (mengenali): Mengingat dengan bantuan isyarat visual. Pengetahuan ada di luar diri.
  • Recall (mengingat): Mengingat tanpa bantuan. Pengetahuan berada dalam kepala.

Pada dasarnya, user jauh lebih mudah belajar dengan cara recognition, dibandingkan recall.

Ada 4 Interaction styles yang dibahas pada topik ini, yaitu:

  1. Command Language
  2. Menu & Forms
  3. Direct Manipulation
  4. Speech Dialog

1. Command Language

Pada interaction style Command Language, user mengetikkan perintah. Semua pengetahuan ada di dalam kepala. Aspek learnability pada style ini rendah.

2. Menu & Forms

Pada interaction style ini, user diminta untuk memilih dari menu atau mengisi form. Semua pengetahuan ada di luar diri. Jadi, interaction style jenis ini lebih mudah dipelajari.

3. Direct Manipulation

Pada interaction style Direct Manipulation, user berinteraksi dengan representasi visual dari obyek data. Terdapat representasi visual berkesinambungan, juga ada tindakan fisik seperti menekan tombol berlabel. Pada style ini terdapat ciri interaksi yang cepat (rapid), bertingkat/bertahap (incremental), dapat diubah ke keadaan sebelumnya (reversible) dan efek dari sebuah tindakan dapat langsung terlihat (immediately visible effects).

Contoh dari Direct Manipulation adalah:

  • Icon yang merepresentasikan file dan folder di desktop
  • Aksi fisik seperti klik sebuah obyek untuk memilih, men-drag untuk memindahkan sesuatu dan men-drag sebuah selection untuk mengubah ukurannya.

Tidak semua fungsi interface dapat dengan mudah dipetakan ke sebuah aksi fisik (misalnya, mengubah teks menjadi tebal), sehingga kita mengizinkan “perintah” dengan menekan button (tetapi button harus diberikan secara visual dalam interface, sehingga menekannya dapat disamakan dengan menekan button fisik).

Efek dari tindakan yang dilakukan harus:

  1. Cepat/rapid (terlihat secepat mungkin)
  2. Incremental (dapat menarik scrollbar sedikit atau banyak, dan melihat setiap peningkatan perubahan)
  3. Reversible (dapat membatalkan operasi – dengan tindakan fisik, misalnya menggerakkan tangan kembali ke tempat asalnya, tetapi dengan button berlabel biasanya perlu perintah Undo)
  4. Segera terlihat/immediately visible (user tidak perlu melakukan apapun untuk melihat efek).

Mengapa direct manipulation sangat powerful? Karena mengeksplorasi keterampilan dan kemampuan motorik manusia. Sedikit sekali ketergantungan terhadap kemampuan bahasa pada jenis interaksi ini dibandingkan antarmuka berupa command atau menu/form. Direct manipulation juga lebih “natural”, karena kita belajar memanipulasi hal fisik lebih dahulu dibanding belajar berbicara, membaca dan menulis.

4. Speech Dialog

Pada interaction style ini, user berbicara dengan natural language dan sistem merespon dengan cara yang sama. Contohnya adalah aplikasi Siri di produk Apple atau Cortana di Windows.

Speech dialog bertitikberat pada pengetahuan di dalam kepala. Pengetahuan bersifat “alami”, di mana manusia belajar cara berbicara dan mengerti bahasa manusia sangat awal dalam hidupnya, dan manusia memiliki kemampuan khusus dapat berinteraksi secara lisan. Tetapi diluar mekanisme berbicara, manusia masih perlu belajar apa yang dapat diucapkan. Fungsi apa yang tersedia dalam sistem? Apa yang dapat ditanyakan? Hal ini merupakan persoalan mendasar meski dalam interaksi antarmanusia.


REFERENSI

  • MIT Open Courseware, User Interface Design and Implementation., Learnability 1.
  • MIT Open Courseware, User Interface Design and Implementation., Learnability 2.
  • Designing The User Interface: Stategies for Effective Human-Computer Interaction (Sixth Edition), Ben Shneiderman.
  • http://www.wikihow.com/Use-Your-Turn-Signal
  • http://orig15.deviantart.net/c8f0/f/2016/015/6/a/windows_10_media_player_facelift_by_triggerspasm-d9o42pz.png
  • https://upload.wikimedia.org/wikipedia/it/d/de/Windows_Media_Player_10.jpg
  • https://upload.wikimedia.org/wikipedia/vi/f/fb/WMPMM.png
  • https://2.bp.blogspot.com/-_8LDW2CKOHw/U7NCgcFlAuI/AAAAAAAABYs/iS5zjBHigKI/s1600/KMPlayer.3.9+(2).png
  • http://cdn.portableapps.com/VLCPortable.png
  • https://davescomputertips.com/wp-content/uploads/2014/10/itunes-12-4.jpg
  • https://screenshots.en.sftcdn.net/en/scrn/30000/30671/winamp-5.jpg
  • Photo by note thanun on Unsplash