10 Usability Heuristics for Mobile App Interfaces
Jakob Nielsen’s 10 Usability Heuristics Explained
Dalam pengembangan suatu perangkat lunak, sebelum masuk ke tahap coding atau development, tentunya sebelumnya harus terdapat perencanaan dan perancangan yang baik terlebih dahulu, salah satunya adalah merancang desain antarmuka dan desain interaksi dari perangkat lunak yang nantinya ingin dibuat, hal tersebut dapat dilakukan setelah mengetahui apa yang diinginkan oleh pengguna dan mendapatkan ide mengenai apa yang akan dibuat.
Pembuatan desain antarmuka dan desain interaksi ini juga bertujuan untuk meminimalisir kesalahan interpretasi dan asumsi antara user dan developer, hal ini merupakan salah satu metode untuk memberikan gambaran seperti apa produk nanti ketika sudah jadi dan rilis.
Pada artikel kali ini, saya akan menjelaskan bagaimana cara membuat desain yang baik, dimulai dari stepnya hingga pembuatan desain yang menerapkan 10 usability heuristics yang digagas oleh Jakob Nielsen beserta implementasinya pada proyek kelompok saya pada mata kuliah Pengembangan Perangkat Lunak (PPL) 2020, Fakultas Ilmu Komputer, Universitas Indonesia.
Wireframe vs. Mockup vs. Protoype
Sebelum masuk ke penjelasan mengenai 10 usability heuristics, saya akan menjelaskan terlebih dahulu apa itu wireframe dan perbedaannya dengan mockup dan prototype. Dalam proses desain antarmuka dan desain interaksi dari sebuah perangkat lunak, ada beberapa istilah yaitu wireframe, mockup, dan prototype.
Wireframe adalah kerangka untuk penataan item-item pada halaman perangkat lunak sebelum proses desain sesungguhnya dimulai. Tujuan dari dibuatnya wireframe ini bukanlah desain visual, namun untuk menggambarkan struktur, layout, navigasi dan susunan dari konten perangkat lunak. Biasanya wireframe dibuat dengan warna hitam putih dan fokus utamanya adalah tata letak. Wireframe juga bisa disebut sebagai low-fidelity prototype, fidelity sendiri artinya adalah presisi, sehingga wireframe merupakan desain yang presisinya masih rendah.
Selanjutnya, mockup adalah desain yang sudah berisi informasi seperti gambar, warna, tipografi, dan bentuk elemen dengan tingkat presisi tinggi. Mockup ini sudah menggambarkan bagaimana tampilan jadi dari perangkat lunak yang dibuat. Mockup disebut juga dengan high-fidelity prototype. Berikut ini adalah contoh dari mockup yang mana hasil dari wireframe.
Terakhir, prototype merupakan mockup yang istilahnya sudah dapat diklik atau dinavigasikan. Prototype ini mensimulasikan bagaimana user berinteraksi dengan desain secara nyata. Seperti yang tadi sudah dijelaskan, wireframe termasuk kedalam low-fidelity sedangkan mockup teramasuk high-fidelity, keduanya masih bersifat statis. Untuk prototype, sudah bersifat dinamis. Berikut ini contoh prototype dari proyek PPL saya,
Bisa dirangkum bahwa wireframe, mockup, dan prototype merupakan tahapan dalam pembuatan desain perangkat lunak, dimulai dari low-fidelity hingga high-fidelity.
Nielsen 10’s Usability Heuristics
Desain antarmuka yang dibuat untuk suatu perangkat lunak haruslah memperhatikan desain pengalaman pengguna atau user experience dengan tujuan agar pengguna dapat mencapai tujuannya dalam menggunakan perangkat lunak tersebut sesederhana dan seefisien mungkin. Jakob Nielsen, konsultan kegunaan web dari Denmark, berpendapat bahwa usability adalah atribut yang digunakan untuk menilai seberapa mudah desain antar muka digunakan. Jakob Nielsen merangkum 10 Usability Heuristics yang berkaitan dengan metode untuk menganalisa apakah desain sudah memberikan kemudahan untuk user mencapai tujuan. Berikut ini ilustrasi dari Nielsen 10’s Usability Heuristics dan penjelasan masing-masing yang disertai dengan contoh implementasinya pada proyek mata kuliah PPL kelompok saya.
1. Visibility of System Status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Sistem yang baik harus membuat pengguna mengetahui apa yang sedang terjadi dalam sistem tersebut, atau dengan kata lain, sistem memberikan informasi mengenai apa yang terjadi pada user baik apa yang sedang dilakukan, sedang dibagian apa, dan apa yang terjadi.
Contohnya pada proyek kami adalah, pada tab bar (Pertanyaan, Draft, Terjawab, dan Akun), terdapat pembeda warna untuk membedakan di bagian mana pengguna sedang aktif. Jika pengguna sedang membuka pada bagian Pertanyaan, maka tulisan Pertanyaan pada tab bar akan berwarna putih, sementara yang lainnya berwarna abu-abu, begitu juga jika pengguna berpindah halaman, jika pengguna berpindah ke bagian Draft, maka tulisan Draft-lah yang akan berwarna putih. Selain itu, akan terdapat dot hijau jika untuk menandakan kepada pengguna bahwa terdapat pertanyaan baru.
2. Match Between System & Real World
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
Sistem memberikan informasi yang mudah dipahami dan memang familiar bagi pengguna, entah itu pemilihan kata, icon, labelling. Contohnya adalah penggunaan icon tempat sampah untuk remove files yang sudah tidak digunakan, icon folder untuk menyimpan files, icon buku telepon untuk menyimpan kontak, dan icon kompas untuk kompas.
Contoh penerapan pada proyek saya adalah penggunaan tanda panah ke kiri sebagai back button (kembali ke halaman sebelumnya). Alih-alih menggunakan kata ‘kembali’, dipilih icon yang memang sudah familiar.
3. Use Control and Freedom
Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
Sistem mampu memberikan kemudahan dan kebebasan kepada pengguna dalam menggunakan interface. Pengguna dapat dengan mudah membatalkan aksi yang tidak disengaja.
Contoh implementasinya pada proyek saya adalah pada fitur membalas pertanyaan, saat membalas pertanyaan terdapat button untuk mengirim jawaban, namun jawaban tersebut tidak langsung dikirim melainkan masuk ke draft terlebih dahulu, sehingga penjawab dapat membacanya terlebih dahulu untuk kemudian memutuskan apakah ingin menerbitkan (dengan klik button terbitkan) atau ingin sunting terlebih dahulu (misal ingin mengganti jawaban, ada typo, dsb).
4. Consistency and Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
Desain yang konsisten dan baik akan memudahkan pengguna dalam mengenal fitur agar tidak membuat user ragu-ragu saat menggunakan fitur tertentu. Hindari penggunaan informasi atau gambar yang berbeda namun memiliki makna yang sama dan penggunaan informasi atau gambar yang sama namun memiliki makna yang berbeda.
Terdapat dua macam konsistensi, yaitu konsistensi internal dan eksternal. Konsistensi internal mencakup konsistensi dalam aplikasi. Sedangkan konsistensi eksternal adalah hal yang biasa diterapkan di sistem lainnya yang merupakan hal umum yang biasa diterapkan. Dengan mengikuti konsistensi eksternal, pengguna akan lebih mudah dan akan lebih familiar.
Contoh implementasi konsistensi internal proyek saya adalah mulai dari warna, font, dan icon yang digunakan. Saat pengguna berpindah halaman, misalnya dari halaman Pertanyaan ke halaman Draft, tulisan dan icon pun tidak berubah.
Selanjutnya, untuk konsistensi eksternal adalah pada fitur membalas pertanyaan yang mana dibuat seperti halaman chat, sehingga pengguna tidak perlu bingung lagi cara membalasnya karena sudah biasa menggunakan chat pada aplikasi atau sistem lain.
5. Error Prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Daripada memberikan pesan error, akan lebih baik apabila sistem membantu pengguna mencegah terjadinya error dalam bentuk desain. Poin ini berkaitan dengan poin 1, yaitu pengguna memahami apa yang terjadi pada sistem. Contohnya adalah saat sign up suatu akun, biasanya akan terdapat penanda seperti password belum memenuhi kriteria, e-mail sudah digunakan, dan lain-lain.
Dikarenakan pada proyek saya pengguna tidak perlu sign up, tentu tidak terdapat implementasi seperti contoh di atas, dari proyek kami sendiri untuk flow keseluruhan belum membutuhkan implementasi poin ini, sehingga di sini saya akan memberikan contoh pada sistem lain.
6. Recognition Rather Than Recall
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Daripada membuat pengguna harus mengingat, lebih baik membuat pengguna bisa mengenali sistem tersebut. Dalam menggunakan sistem atau aplikasi, pasti pengguna akan melewati beberapa halaman, oleh karena itu, agar pengguna tidak bingung, buat sistem atau aplikasi di mana pengguna bisa mengenali pola sistem yang dibuat sehingga mereka bisa tetap menggunakan aplikasi tanpa harus mengingat langkah yang harus dilakukan setelahnya. Pengguna juga sebaiknya tidak perlu mengingat informasi apa yang terdapat pada masing-masing bagian.
Contoh implementasinya pada proyek saya adalah, terdapat pembeda yang jelas antara halaman Pertanyaan, Draft, dan Terjawab. Pengguna tidak perlu bingung pertanyaan-pertanyaan mana yang belum dijawab, mana yang sudah ia jawab namun belum dikirim (draft), dan mana yang sudah dijawab, hal tersebut dikarenakan semuanya terpisah menjadi 3 bagian dan dapat ditemukan di masing-masing bagian tersebut.
7. Flexibility and Efficiency of Use
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Bagi pengguna yang masih awam, tentu mereka akan mempelajari sistem atau aplikasi terlebih dahulu. Namun, untuk pengguna yang sudah lebih berpengalaman, tentunya tidak perlu lagi mempelajari karena sudah lebih paham atau mahir. Oleh karena itu aplikasi haruslah fleksibel dan efisien untuk kedua tipe pengguna tersebut.
Contoh penerapannya pada proyek saya adalah adanya onboarding untuk membantu pengguna awam memahami aplikasi dan juga terdapat button skip yang mana dibuat untuk pengguna jika ingin skip tahap onboarding.
8. Aesthetic and Minimalist Design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Desain layout yang baik haruslah nyaman dilihat, hal tersebut dapat dicapai dengan menggunakan kontras warna yang baik, posisi yang sesuai dan serasi. Desain yang minimalis dan dipadukan dengan whitespace (jarak antar elemen) yang sesuai juga akan membuat aplikasi terlihat elegan. Informasi yang ditampilkan juga harus relevan dan tidak mengikut sertakan elemen yang tidak diperlukan.
Contohnya pada aplikasi proyek kelompok saya adalah, tampilan secara keseluruhan sangatlah minimalis dan simple, sebagai contoh adalah halaman detail pertanyaan yang menggunakan kontras warna yang baik, terdapat whitespace yang baik, dan juga informasi yang ditampilkan juga relevan.
9. Help Users Recognise, Diagnose, and Recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Jika terjadi error, sistem atau aplikasi yang baik seharusnya memberikan pesan error dalam bahasa yang sederhana, mudah dipahami, dan memberikan solusi untuk menyelesaikannya.
Contoh implementasinya pada proyek kami adalah ketika log in, jika pengguna memasukkan email atau password yang salah, maka akan terdapat pop up yang memberitahu bahwa email atau password salah dan memberikan saran untuk mencobanya lagi.
10. Help and Documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
Akan lebih baik jika sistem dapat digunakan tanpa dokumentasi, namun terkadang masih diperlukan bantuan dan juga dokumentasi untuk membantu pengguna menggunakan sistem atau aplikasi. Informasi haruslah mudah, fokus pada task pengguna, membantu pengguna mencapai tujuannya dengan step yang jelas, dan tidak terlalu besar atau rumit.
Dikarenakan aplikasi proyek kelompok saya sudah sangat mudah dipahami, kami tidak menerapkan hal ini mengingat poin ini hanya perlu dibuat jika benar-benar dibutuhkan, oleh karena itu, saya memberikan contoh pada sistem lain, yaitu pada aplikasi Shopee yang menerapkan FAQ, tentunya fitur ini juga banyak ditemukan pada aplikasi-aplikasi lain.
Sekian penjelasan saya mengenai step dalam proses desain dan juga Nielsen’s usability heuristics yang dapat diterapkan untuk dapat membuat desain yang baik. Silakan dicoba dan diterapkan untuk dapat membuat desain aplikasi yang baik sehingga tentunya dapat bermanfaat bagi pengguna. Semoga bermanfaat! 😄
