The Power of Visual Design and Usability Heuristics in Product Design
User Interface
User Interface (UI) merupakan titik interaksi antara pengguna dengan sistem komputer. Interaksi ini mencakup tampilan layar, keyboards, mouse, dan berbagai hal lainnya yang memungkinkan pengguna melakukan berbagai tugas seperti memasukkan data, memilih opsi, navigasi menu, dan lain-lain. Terdapat beberapa jenis UI, seperti Graphical User Interface (GUI), Command Line Interface (CLI), Voice User Interface (VUI), dan Gesture-based Interface. Setiap jenisnya memiliki kelebihan dan kekurangannya masing-masing.
Wireframe vs Mockup vs Prototype
Wireframe
Wireframe adalah representasi visual dasar dari halaman web atau aplikasi yang menggambarkan tata letak, struktur, dan konten tanpa menyertakan elemen desain apa pun seperti warna, gambar, atau tipografi. Wireframe biasanya dibuat di awal proses desain dan berfokus pada fungsionalitas dan aliran pengguna. Wireframe dapat digambar dengan tangan atau dibuat dengan software, dan sering digunakan untuk mendapatkan feedback dari client sebelum beralih ke desain yang lebih detail (mockup).
Mockup
Mockup adalah representasi visual yang lebih detail dari halaman web atau aplikasi yang menyertakan elemen desain seperti warna, tipografi, dan gambar. Mockup dibuat setelah wireframe disetujui dan fokus pada estetika desain. Mockup sering dibuat dengan software dan dapat bersifat interaktif atau statis. Mockup digunakan untuk menyempurnakan desain dan mendapatkan feedback dari client sebelum melanjutkan ke pengembangan software.
Prototype
Prototype adalah simulasi interaktif dari halaman web atau aplikasi yang digunakan untuk menguji user experience dan fungsionalitas aplikasi. Prototype dapat dibuat menggunakan software dan dapat menyertakan animasi, suara, dan elemen interaktif lainnya. Prototype biasanya digunakan untuk menguji desain dengan pengguna nyata sebelum beralih ke pengembangan. Pengguna dapat membantu mengidentifikasi potensi masalah atau masalah dengan desain dan memastikan bahwa pengalaman pengguna intuitif dan efektif.
Visual Design Principles
- Color
Warna berdampak pada setiap individu karena dapat membangkitkan emosi, menyampaikan informasi, dan menciptakan rasa ketertarikan visual pada sebuah desain. Sebagian besar warna yang kita lihat memiliki makna universal yang sama. - Contrast
Kontras membantu membedakan elemen dalam suatu desain. Ukuran, warna, dan bobot garis yang berbeda membuat suatu elemen lebih menonjol untuk menarik perhatian audiens. Kontras yang baik akan membantu audiens untuk melihat elemen suatu desain dengan mudah. - Hierarchy
Urutan pesan atau elemen dalam suatu desain sangat membantu audiens untuk memahami informasi yang diberikan. Urutan ini dapat dibuat dengan memainkan ukuran tulisan, bentuk, pola, pengulangan, dan posisi dalam suatu desain. Urutan yang baik adalah urutan yang mengarahkan audiens untuk membaca informasi yang paling penting terlebih dahulu. - Repetition
Manusia cenderung mengingat ketika ada hal-hal yang berulang. Pengulangan juga dapat membuat orang lebih mengenali desain dan menjadikan hal ini sebagai identitas dari suatu desain. Pengulangan dapat dilakukan dengan menggunakan kata, warna, bentuk, dan elemen lainnya - Typography
Tipografi merupakan tampilan susunan kata. Tipografi menentukan nada desain Anda dan produk yang Anda wakili. Contoh yang sering kita sadari adalah pada poster film horor yang menggunakan tipografi menakutkan untuk mewakili produknya. - White Space
White space atau ruang kosong akan membantu hierarki suatu desain menjadi lebih terlihat. Ruang kosong membantu menyederhanakan suatu desain dengan memisahkan secara jelas berbagai elemen dalam desain. Perlu diperhatikan juga jumlah ruang kosong agar tidak terlalu banyak (setidaknya seimbang dengan ruang yang terisi) - Balance
Desain yang seimbang tidak berarti ukuran dari seluruh elemennya sama. Desain yang seimbang dipadukan melalui warna, ukuran, dan pola elemen. Tujuannya adalah agar pandangan audiens tertuju pada elemen utama suatu desain - Emphasis
Emphasis atau penekanan merupakan bagian yang paling penting dalam suatu desain. Penekanan unsur utama desain harus dipikirkan sebelum kita memulai suatu desain. Penekanan ini akan mempengaruhi pesan utama dari desain tersebut. - Movement
Movement pada prinsip ini mengacu pada pergerakan mata audiens. Perpindahan dari satu elemen ke elemen lainnya juga penting dalam suatu desain untuk mendukung seni desain kita. Oleh karena itu, posisi elemen sangat berpengaruh pada prinsip ini.
Nielsen’s 10 Usability Heuristics
Nielsen’s 10 Usability Heuristics adalah sekumpulan prinsip desain yang dikembangkan oleh Jakob Nielsen pada tahun 1994. Prinsip ini digunakan untuk mengevaluasi suatu antarmuka dan membantu desainer menghasilkan desain yang lebih user-friendly.
Visibility of system status
Desain harus selalu memberi tahu pengguna terkait apa yang sedang terjadi melalui suatu feedback. Contoh implementasi pada proyek kami adalah pada halaman upload data pegawai dimana tercantum judul besar Update Employee Data untuk menunjukkan langkah yang harus dilakukan oleh pengguna.
Match between system and the real world
Gunakan kata, frasa, dan konsep yang akrab bagi pengguna, bukan jargon internal. Dengan demikian, pengguna akan lebih mudah memahami informasi yang diberikan sehingga dapat menggunakan aplikasi dengan lancar. Contohnya adalah pada halaman employee data yang menampilkan data-data pegawai dengan atribut yang akrab bagi pengguna
User Control and freedom
Pengguna bisa saja melakukan kesalahan ketika menggunakan website kita. Desain yang baik harus menyediakan jalan keluar dari suatu kesalahan tanpa harus melalui proses yang panjang. Contohnya adalah ketika pengguna mengakses halaman yang tidak boleh diakses, maka pengguna dapat menekan tombol back untuk kembali ke halaman sebelumnya.
Consistency and Standard
Untuk memudahkan pengguna dalam menggunakan produk, diperlukan konsistensi dalam desain produk. Dengan adanya konsistensi, pengguna dapat mengetahui apa yang akan terjadi ketika mereka berinteraksi dengan mengacu pada pengalaman sebelumnya. Contoh pada proyek kami adalah pada penggunaan penggunaan warna tabel yang sama dan posisi fitur search yang sama.
Error Prevention
Pada bagian yang rawan terjadi kesalahan, sebaiknya kita senantiasa memeriksa kondisi tersebut dan segera memberitahu pengguna jika terdapat kesalahan agar pengguna dapat segera memperbaiki kesalahannya dan mencegah terjadinya error. Contohnya adalah ketika pengguna memasukkan password yang kurang dari 8 karakter, maka pengguna akan diberi tahu oleh sistem untuk memasukkan minimal 8 karakter dan tidak diizinkan untuk menekan tombol submit.
Recognition Rather than recall
Kurangi penggunaan memori pengguna dengan memberikan mereka pilihan yang mungkin mereka butuhkan. Jangan biarkan pengguna terlalu banyak berpikir atau menggunakan ingatannya dalam melakukan sesuatu. Contohnya adalah pada halaman log yang menuliskan kegiatan-kegiatan yang dilakukan oleh admin sehingga admin tidak perlu mengingat apa saja yang dilakukan olehnya pada website SIEvent.
Flexibility and efficiency of use
Pengguna perlu diberikan shortcuts untuk dapat melakukan interaksi dengan cepat terhadap sistem. Contohnya adalah pada proyek kami, setiap halaman selalu disediakan navigation bar agar pengguna dapat mengakses halaman-halaman yang memang sering diakses.
Aesthetic and Minimalist design
Sebuah antarmuka sebaiknya tidak berisi informasi yang tidak atau jarang dibutuhkan. Setiap kali kita menambahkan suatu informasi, maka informasi tersebut akan bersaing dengan informasi lainnya dan dapat mengurangi visibilitas informasi lainnya. Contohnya pada halaman update account dimana kita tidak menampilkan informasi yang tidak diperlukan seperti tanggal akun dibuat ataupun kapan pengguna tersebut terakhir login.
Help users recognize, diagnose and recover from errors
Ketika pengguna melakukan kesalahan, maka antarmuka harus memberikan pesan yang informatif kepada pengguna. Contoh implementasinya adalah ketika pengguna salah memasukkan username atau password ketika login, maka antarmuka akan memberi tahu bahwa username atau password yang mereka input salah.
Help and Documentation
Sistem yang baik adalah sistem yang tidak membutuhkan dokumentasi tambahan. Namun demikian, sistem kita mungkin cukup kompleks sehingga memerlukan dokumentasi untuk membantu pengguna memahami dan melakukan suatu aksi. Pada proyek kami, sistem yang dibuat masih cukup sederhana sehingga belum memerlukan dokumentasi tambahan
Shneiderman’s 8 Golden Rules of Interface Design
1. Strive for consistency
Konsistensi membantu pengguna memahami dan menggunakan aplikasi dengan lebih mudah. Konsistensi dalam desain antarmuka dapat dicapai dengan menggunakan pola yang lazim seperti dengan meletakkan ikon atau tombol pada lokasi yang konsisten. Selain itu, penggunaan warna yang konsisten juga memainkan role yang penting dalam membantu pengguna untuk familiar dengan antarmuka kita. Contoh berikut adalah desain SIEvent dengan warna dan pola yang konsisten
2. Enable frequent users to use shortcuts
Golden rules ini menekankan bahwa kita perlu mengizinkan pengguna untuk mengakses semua bagian dari antarmuka dengan jumlah klik yang minimum. Untuk mencapai hal ini, kita dapat membuat hierarki yang baik dan jelas pada antarmuka ataupun juga dapat menyediakan keyboard shortcut. Contoh berikut adalah pada halaman detail SIEvent yang menyediakan breadcrumb berupa Home/Event/Detail yang memungkinkan pengguna melakukan navigasi dengan cepat.
3. Offer informative feedback
Pengguna perlu diberikan feedback terkait tindakan yang mereka lakukan seperti pesan error, status updates, ataupun indikator progres. Feedback yang informatif dapat membantu pengguna untuk memahami apa yang terjadi pada sistem dan bagaimana tindakan mereka mempengaruhi sistem. Contoh berikut adalah ketika admin berhasil mengupdate salah satu akun, maka akan ditampilkan feedback bahwa akun tersebut berhasil diupdate.
4. Design dialogue to yield closure
Ketika pengguna selesai melakukan suatu tindakan, maka antarmuka kita sebaiknya menampilkan konfirmasi bahwa tindakan tersebut telah selesai dilakukan. Hal ini dapat dicapai dengan membuat kotak dialog atau pesan konfirmasi. Contoh berikut adalah ketika seorang pengguna SIEvent berhasil membuat suatu event, maka akan ditampilkan sebuah modals seperti berikut.
5. Offer simple error handling
Ketika pengguna melakukan kesalahan, pesan yang diberikan harus jelas, ringkas, dan informatif. Pengguna juga perlu diberikan cara untuk memperbaiki kesalahannya. Contohnya adalah ketika pengguna memasukkan end date yang lebih duluan dari start date, maka website SIEvent akan menampilkan pesan error yang ringkas dan informatif. Dengan demikian, pengguna juga tahu bahwa mereka perlu mengubah start date atau end date-nya.
6. Permit easy reversal of actions
Ketika pengguna melakukan kesalahan, maka pengguna harus dapat membatalkan tindakan mereka atau melakukan undo. Contoh implementasi pada SIEvent adalah ketika pengguna mengakses halaman yang ilegal, maka pengguna akan diarahkan ke halaman forbidden dan dapat kembali menuju halaman home.
7. Support internal locus of control
Pengguna harus dapat merasa bahwa mereka mengendalikan aplikasi dan bahwa tindakan mereka memengaruhi sistem. Hal ini dapat dicapai dengan adanya personalisasi seperti memilih mode terang atau gelap, memilih bahasa, preferensi notifikasi, dan lain-lain
8. Reduce short-term memory load
Pengguna tidak perlu mengingat informasi dari satu bagian aplikasi ke bagian lainnya. Hal ini dapat dicapai dengan konsistensi dari label dan ikon. Selain itu, alur penggunaan sistem juga sebaiknya tidak perlu dihafalkan. Hal ini dapat dicapai dengan menggunakan navbar. Berikut adalah contoh navbar yang digunakan pada SIEvent.
Nielsen’s 10 Usability Heuristics vs Shneiderman’s 8 Golden Rules of Interface Design
Perbedaan utama antara Nielsen’s 10 Usability Heuristics dan Shneiderman’s 8 Golden Rules terletak pada tingkat fokus dan tujuan.
Shneiderman’s 8 Golden Rules merupakan prinsip desain yang menyediakan kerangka untuk menghasilkan antarmuka yang efektif dan user-friendly. 8 aturan ini dimaksudkan untuk memandu proses desain dan membantu desainer berpikir tentang aspek utama dari desain mereka seperti konsistensi, feedback, dan pencegahan error.
Di sisi lain, Nielsen’s 10 Usability Heuristics merupakan pedoman yang lebih spesifik berfokus pada mengidentifikasi dan mengdiagnosis masalah usability pada antarmuka yang ada. Heuristics ini dimaksudkan untuk membantu pakar mengevaluasi masalah yang berhubungan dengan kontrol pengguna, status sistem, dan faktor kegunaan lainnya.
Singkatnya, Shneiderman’s 8 Golden Rules adalah prinsip desain yang memandu pembuatan antarmuka yang ramah pengguna, sedangkan Nielsen’s 10 Usability Heuristics adalah panduan yang lebih spesifik untuk mengevaluasi dan mendiagnosis masalah usability pada antarmuka yang ada.
Kesimpulan
Prinsip visual desain, 10 Nielsen’s usability heuristics, dan Shneiderman’s 8 Golden Rules of interface design merupakan bagian yang esensial dalam membangun desain yang efektif dan user-friendly. Dengan mengkombinasikan kedua hal tersebut, desainer dapat menghasilkan produk yang tidak hanya terlihat bagus, tetapi juga memberikan pengalaman yang positif kepada pengguna.
Referensi
https://www.aha.io/roadmapping/guide/product-management/wireframe-mockup-prototype