Human-Computer Interaction User Interface Design

Usability

Even the best designers produce successful products only if their designs solve the right problems. A wonderful interface to wrong features will fail.

Jacob Nielsen

While I acknowledge that there is a need for art, fun and a general good time on the web, I believe that the main goal of most web projects should be to make it easy for customers to perform useful tasks.

Jakob Nielsen

Topik-topik bahasan:

  1. Pengantar
  2. Definisi usability
  3. Mengapa usability penting
  4. Cara meningkatkan usability
  5. Kapan bekerja pada usability

Penjelasan Usability dalam bentuk video dapat diakses pada:


Gambar di bawah ini menunjukkan percakapan tiga orang pengembang produk. Orang pertama sangat percaya diri menyatakan bahwa seandainya dia seorang remaja putri, pasti dia sangat menyukai produk baru mereka. Orang kedua bertanya apakah orang pertama sudah bertanya langsung ke remaja putri untuk memastikan benar mereka menyukai produk tersebut. Orang ketiga kaget dan mengatakan apakah memang harus bertanya langsung dan meninggalkan ruang kerja mereka.

Finn Kensing menyatakan, “Satu alasan mengapa banyak sistem yang besar dan penting tidak digunakan atau user harus bekerja di sekitar sistem untuk menyelesaikan pekerjaan, adalah bahwa programmer tidak memahami apa yang dilakukan user. Mereka mengembangkan aplikasi berdasarkan interpretasinya sendiri.” Finn Kensing, Roskilde University, Denmark (CIO, 10/15/96)


Mari kita perhatikan gambar-gambar di bawah ini.

Pada gambar di kiri dan tengah, terdapat model pintu yang sama tetapi dengan instruksi yang berbeda, gambar kiri bertuliskan “PUSH”, gambar tengah bertuliskan “PULL”. Bahkan pada gambar di kanan, pada satu pintu yang sama, terdapat dua instruksi “PUSH” dan “PULL”.

Hal ini tentu memberi kebingungan bagi siapa saja yang akan membuka pintu tersebut, apakah didorong (PUSH) atau ditarik (PULL)? Jawabannya ada pada gambar berikut.

Terdapat perbedaan bentuk permukaan pintu untuk didorong dan ditarik. Bentuk kiri untuk pintu yang dibuka dengan cara didorong (PUSH) dan bentuk kanan untuk yang dibuka dengan ditarik (PULL).

Dua gambar di bawah ini adalah ilustrasi untuk karya produk yang tidak memperhatikan fungsionalitasnya. Gambar bagian kiri adalah karya Jacques Carelman, diberi nama The Coffeepot for Masochists. Gambar ini sering dijadikan ilustrasi oleh Don Norman.


UI Hall of Fame or Shame

Sebagai pembukaan materi tentang Usability, mari kita kaji gambar di bawah ini untuk mengetahui apakah User Interface (UI) sudah dirancang dengan baik (hall of fame) atau buruk (hall of shame).

Terdapat beberapa konsep perancangan User Interface yang belum diterapkan dengan baik, yaitu:

  1. Title bar digunakan untuk menyampaikan instruksi “Select an award style…”. Title bar seharusnya digunakan sebagai judul sebuah dialog box.
  2. Teks panjang untuk bantuan “Select an award style using the scrollbar. When you’ve found a style that suits you, press OKAY to create that award and open the editor.” Jika tampilan UI sudah bisa dimengerti user dengan mudah, tidak perlu memberikan instruksi yang panjang.
  3. Scrollbar digunakan sebagai alat untuk memilih sertifikat. Dengan ini, tidak ada tanda jumlah tempate yang disedikan oleh aplikasi, juga tidak ada kategori template. User harus menggeser satu per satu untuk melihat template sampai jumlah yang tidak diketahui ujungnya. Scrollbar tidak lazim digunakan untuk memberi pilihan.
  4. Letak tombol “Cancel” dan “OK” kemungkinan salah posisi.
  5. Pada instruksi terdapat perintah “press OKAY”, padahal yang disediakan adalah tombol “OK”.

Setelah dilakukan perbaikan pada rancangan User Interface (UI), maka hasilnya dapat dilihat pada gambar berikut.

  1. Title bar dipergunakan seharusnya, berisi judul dialog box yang muncul.
  2. Listbox digunakan untuk menampilkan pilihan sertifikat yang tersedia, dilengkapi dengan judul setiap sertifikat. Dengan ini user dapat mengetahui jumlah sertifikat yang disediakan dan dapat dengan mudah memilih sertifikat yang diinginkan.
  3. Letak tombol OK di kiri, lalu Cancel di kanan. Namun, untuk posisi ini, desainer harus benar-benar memperhatikan sistem operasi di mana aplikasi berjalan, karena tiap sistem operasi mempunyai konsep perancangan UI yang berbeda. Oleh karena itu, urutan tombol OK dan Cancel tidak sepenuhnya salah, sangat bergantung kepada sistem operasi yang digunakan.

Mari kita perhatikan contoh yang kedua melalui gambar di bawah ini. Terdapat beberapa penerapan perancangan UI yang tidak benar, yaitu:

  1. Pada tampilan awal, terdapat tanggal dan waktu, yang diletakkan pada obyek seperti textbox. Jadi, ketika user ingin mengubah tanggal atau waktu, secara tidak sadar user akan klik pada obyek tersebut, karena pada prinsipnya kita bisa mengetikkan sesuatu di sebuah textbox. Namun, ternyata obyek tersebut bukan textbox, dan untuk mengubah tanggal atau waktu, user harus menekan tombol “Set Date” atau “Set Time”.
  2. Untuk mengubah waktu, user perlu menekan tombol “Set Time”, lalu dialogbox bagian bawah akan tampil. Ketika cara mengubah waktu ditampilkan, terdapat format waktu yang tidak konsisten, yang dapat menimbulkan kebingungan bagi user. Di bagian atas menggunakan format 24 jam yaitu 19:17, sedangkan di bagian bawah menggunakan format 12 jam yaitu 7:17 PM.
  3. Terdapat instruksi yang panjang untuk mengubah jam dan menit “Left Mouse Button: Change Minute”, “Right Mouse Button: Change Hour”.

Contoh ketiga pada gambar di bawah ini, terdapat desain User Interface (UI) yang kurang lazim prakteknya, yaitu:

  1. Tidak ada menu bar yang pada umumnya diletakkan di bagian atas sebuah aplikasi. User tentu akan bingung dan menghabiskan waktu untuk mencari-cari di mana menu diletakkan. Ternyata, menu dapat dipilih dengan klik kanan pada mouse. Praktek ini tidak konsisten dengan aplikasi pada umumnya.
  2. Submenu dalam bentuk hirarki membuat pengaksesannya lebih lambat dibandingkan dengan menu bar.

Mendesain User Interface Tidak Mudah

User Interface (UI) TIDAK mudah untuk didesain. Mengapa dinyatakan demikian? Kebanyakan software engineer berkomunikasi dengan programmer lain yang kebanyakan adalah sesama programmer, programmer BUKAN user biasa, bahkan programmer tahu lebih banyak tentang aplikasi dibandingkan user, karena programmer lah yang membagun aplikasi.

UI adalah tentang BERKOMUNIKASI DENGAN USER. User tidak sama dengan Anda yang memiliki tugas sebagai pengembang aplikasi atau desainer aplikasi. Jika software engineering berbicara tentang spesifikasi, object model, dll, maka usability yang sedang kita bahas adalah tentang berkomunikasi dengan user lain yang kemungkinan besar tidak sama dengan kita.

Pada penggunaan UI, masalah usability adalah kesalahan desainer, maka jangan salahkan user untuk pekerjaan Anda yang salah. Jika user secara konsisten membuat kesalahan dengan beberapa bagian dari UI yang Anda rancang, itu artinya UI Anda salah. Namun, pada proses desain UI, user tidak selalu benar, karena user tidak selalu tahu apa yang mereka inginkan atau apa yang akan membantu mereka dalam bekerja.

Satu contoh yang memperkuat bahwa pada proses desain UI user tidak selalu benar bisa dilihat pada praktek yang dilakukan oleh Google. Google melakukan survey kepada user tentang seberapa banyak hasil pencarian yang mereka inginkan dalam 1 halaman (10, 20, 30). User menyebutkan 30
Google kemudian mengembangkan 30 hasil pencarian per halaman. Setelah itu, penggunaan berkurang 20% dibandingkan halaman terdahulu yang menampilkan 10 hasil per halaman. Mengapa? Kemungkinan karena 30 hasil menambah waktu load halaman lebih lama.


Definisi Usability

Terdapat beragam definisi usability menurut para ahli. Beberapa diantaranya sebagai berikut.

Usability mengacu pada kualitas interaksi dalam hal parameter seperti waktu yang dibutuhkan untuk melaksanakan beberapa tugas, jumlah kesalahan yang dibuat dan waktu yang dibutuhkan untuk menjadi user yang kompeten.

(Benyon et al. 2005, p. 52)

Usability adalah sebuah atribut kualitas yang menilai seberapa mudah UI digunakan. Kata “usability” juga merujuk pada metode-metode yang digunakan untuk meningkatkan kemudahan pengguna selama proses desain.

(Nielsen 2003)

Menurut Jakob Nielsen, usability didefinisikan ke dalam 5 komponen kualitas, yaitu:

  1. Learnability
  2. Efficiency
  3. Memorability
  4. Errors
  5. Satisfaction

Fokus perkuliahan adalah pada komponen Learnability, Efficiency dan Safety.

Titik berat penggunaan komponen usability ini berbeda-beda sesuai kepentingan:

  • Dapat bergantung pada user. Contohnya: User yang belum berpengalaman membutuhkan learnability. User yang sudah ahli membutuhkan efficiency (Meski sebenarnya tidak ada user pemula atau ahli).
  • dapat bergantung pada tugas. Contohnya: Saat merilis rudal membutuhkan safety. Pintu putar di stasiun kereta api atau bus membutuhkan efficiency.

Usability sendiri hanya satu atribut dari sistem. Terdapat banyak sekali atribut-atribut yang perlu diperhatikan oleh seorang software designer, seperti:

  • Functionality
  • Performance
  • Cost
  • Security
  • Maintainability
  • Usability
  • Size
  • Reliability
  • Standards
  • Marketability

Posisi Usability tidak berada dalam isolasi dan juga bukan hal terpenting dalam sebuah sistem. Banyak keputusan yang melihat pada banyak atribut yang berbeda.

Mengacu pada komponen kualitas usability menurut Jakob Nielsen, definisi masing-masing komponen adalah:

  1. Learnability: Seberapa mudah seorang user menyelesaikan tugas-tugas dasar saat pertama sekali mereka berinteraksi dengan desain?
  2. Efficiency: Setelah user mempelajari desain, seberapa cepat mereka dapat melakukan tugas?
  3. Memorability: Ketika user kembali menggunakan desain setelah rentang waktu tertentu tidak menggunakannya, seberapa mudah mereka dapat memiliki kemahiran kembali?
  4. Errors / Safety: Berapa banyak kesalahan yang dilakukan user, seberapa parah kesalahan ini dan seberapa mudah mereka memperbaiki kesalahan?
  5. Satisfaction: Seberapa menyenangkankah user menggunakan desain?

Terdapat banyak atribut kualitas yang lain. Namun, salah satu atribut yang penting adalah UTILITY, yang mengacu pada fungsionalitas desain. Usability dan utility sama pentingnya dan bersama-sama menentukan apakah sebuah desain itu berguna:

  • Tidak baik jika sebuah sistem secara hipotesis dapat melakukan apa yang Anda inginkan, tetapi Anda tidak dapat mengerjakannya karena UI terlalu sulit digunakan.
  • Untuk mempelajari utility sebuah desain, Anda dapat menggunakan metode penelitian yang sama untuk meningkatkan usability.

Definisi Utility = apakah menyediakan fitur-fitur yang dibutuhkan
Definisi Usability = bagaimana kemudahan dan menyenangkan sebuah fitur digunakan
Definisi Useful = usability + utility.


Mengapa Usability Penting

Pada Web, usability adalah kondisi penting untuk bertahan.

  • Jika sebuah Web sulit untuk digunakan, maka akan ditinggalkan.
  • Jika homepage gagal menyatakan dengan jelas apa yang ditawarkan perusahaan dan apa yang dapat dilakukan user di Web, maka akan ditinggalkan.
  • Jika user tersesat di Web, maka akan ditinggalkan.
  • Jika informasi pada Web sulit untuk dibaca atau tidak menjawab pertanyaan penting user, maka akan ditinggalkan.

Kita dapat memperhatikan polanya:

  • Tidak ada user yang membaca manual Web atau menghabiskan banyak waktu untuk mempelajari interface Web.
  • Ada banyak situs lain yang tersedia; meninggalkan Web adalah langkah pertama user ketika menghadapi kesulitan saat mengakses Web.
  • Hukum pertama e-commerce adalah bahwa jika pengguna tidak menemukan produk yang dicari, mereka tidak dapat membelinya.

Praktik terbaik untuk menciptakan aplikasi yang memiliki usability yang baik adalah mengalokasikan 10% budget pada sebuah proyek desain untuk usability. Untuk software atau produk fisik, peningkatan kualitas biasanya lebih kecil tetapi berpengaruh ketika Anda memberi penekan pada usability dalam proses desain. Untuk proyek desain internal, pikirkan untuk menggandakan usability dan memangkas setengah anggaran pelatihan dan menggandakan transaksi performansi karyawan per jam.
Untuk desain eksternal, pikirkan untuk menggandakan jumlah dari user terdaftar atau pelanggan utama, atau menggandakan KPI (Key Performance Indikator / Indikator Kinerja Utama) apapun yang memotivasi proyek desain Anda.


Cara Meningkatkan Usability

Ada banyak metode untuk mempelajari usability, tetapi hal paling mendasar dan bergunakan adalah usability testing, yang memiliki 3 komponen:

  1. Hubungi beberapa representative user, seperti pelanggan pada sebuah Web e-commerce atau karyawan pengguna internet (dalam kasus terakhir, mereka harus bekerja di luar departemen Anda).
  2. Minta user untuk melakukan tugas-tugas yang representatif dengan desain.
  3. Amati apa yang dilakukan user, di mana mereka berhasil dan di mana mereka mengalami kesulitan dengan User Interface (UI). Diam dan biarkan user yang berbicara.

Penting untuk menguji user secara individual dan membiarkan mereka memecahkan masalah mereka sendiri. Jika Anda membantu mereka atau mengarahkan perhatian mereka ke bagian tertentu di layar, Anda akan mencemari hasil pengujian.

Untuk mengantisipasi masalah usability paling penting dari sebuah desain, tes terhadap 5 user biasanya cukup. Daripada menjalankan studi yang besar dan mahal, lebih baik menggunakan sumberdaya untuk melakukan banyak tes-tes kecil dan merevisi dengan antara masing-masing sehingga Anda dapat memperbaiki kelemahan usability saat mengidentifikasi mereka. Desain iteratif adalah cara terbaik untuk meningkatkan kualitas user experience (UX). Semakin banyak versi dan ide interface yang Anda uji dengan user, maka hasilnya akan semakin baik.

User testing berbeda dengan focus group discussion (FGD). FGD adalah salah satu cara yang buruk untuk mengevaluasi usability. FGD cocok saat riset pasar, tetapi untuk mengevaluasi desain interaksi, Anda harus mengamati secara cermat setiap user saat mereka melakukan tugas-tugas dengan UI. Mendengarkan apa yang dikatakan orang adalah menyesatkan: Anda harus melihat/memperhatikan apa yang sebenarnya mereka lakukan.


Kapan Bekerja pada Usability

Usability memainkan sebuah peran dalam setiap tahap proses desain. Kebutuhan yang dihasilkan untuk banyak studi adalah alasan mengapa merekomendasikan studi individual yang cepat dan murah. Langkah-langkah utamanya adalah:

  1. Sebelum memulai desain baru, uji desain yang lama untuk mengidentifikasi bagian-bagian baik yang harus dipertahankan atau ditekankan, dan bagian-bagian buruk yang membuat masalah bagi user. Kecuali jika Anda bekerja di intranet, uji desain kompetitor Anda untuk mendapatkan data yang murah pada berbagai alternatif interface yang memiliki fitur serupa dengan Anda (Jika menggunakan intranet, bacalah desain intranet setiap tahun untuk belajar dari desain lainnya).
  2. Lakukan field study untuk melihat bagaimana user berperilaku di habitat alami mereka.
  3. Buatlah paper prototype dari satu atau lebih ide-ide desain baru dan mengujinya. Semakin sedikit waktu yang Anda investasikan dalam ide-ide desain ini, semakin baik, karena Anda harus mengubah segala sesuatunya berdasarkan hasil pengujian.
  4. Jangan menunda user testing sampai Anda memiliki desain yang sepenuhnya diimplementasikan. Jika Anda melakukannya, mustahil untuk memperbaiki sebagian masalah usability yang kritis yang ditemukan saat pengujian. Banyak dari masalah ini bersifat struktural and memperbaikinya anak membutuhkan perombakan arsitektur yang besar. Satu-satunya cara untuk mendapatkan user experinece yang berkualitas tinggi adalah memulai user testing di awal proses desain dan terus menguji setiap langkah.
  1. Jika Anda menjalankan setidaknya satu user study setiap minggu; ada baiknya membangun laboratorium usability khusus. Namun, bagi sebagian besar perusahaan, tidak masalah jika melakukan pengujian di ruang konferensi atau kantor – selama Anda dapat menutup pintu untuk mencegah gangguan. Yang penting adalah Anda menghubungi real user dan duduk bersama mereka saat mereka menggunakan desain. Buku catatan adalah satu-satunya peralatan yang Anda butuhkan.
  2. Sempurnakan ide desain yang paling baik melalui beberapa iterasi, secara bertahap beralih dari low-fidelity prototyping ke high-fidelity yang berjalan di komputer. Uji setiap iterasi. Periksa desain yang berhubungan untuk membangun usability guideline apakah dari studi Anda sebelumnya atau penelitian yang dipublikasikan. Setelah Anda memutuskan dan mengimplementasikan desain final, uji kembali. Masalah usability yang tidak terlalu kentara selalu ada sepanjang implementasi.

Usability adalah salah satu bidang dalam sebuah gambaran besar User Experience Design (UXD), seperti ditunjukkan pada gambar di bawah ini.


Ketika Anda telah memahami konsep Usability, maka Anda akan dapat menghindarkan diri dari merancang UI yang membingungkan seperti website Yvette di bawah ini, dan bisa merancang UI yang baik seperti website MUJI.

Website Yvette
Website MUJI

Referensi

  • Usability, MIT Open Courseware, User Interface Design and Implementation.
  • Jakob Nielsen, Introduction to Usability.
  • Usability and Human-Computer Interaction, Springer.
  • Designing The User Interface: Strategies for Effective Human-Computer Interaction (Sixth Edition), Ben Shneiderman.
  • https://ittybittyusability.files.wordpress.com/2015/11/normandoor_703.jpg
  • https://www.flickr.com/photos/cennydd/3191424928
  • https://mrjoe.uk/assets/door-affordance.jpg
  • http://impossibleobjects.com/catalogue/coffeepot-for-masochists.html
  • http://unsplash.com
  • Feature Image: Photo by Mohamed Boumaiza on Unsplash


Visits: 5640