Visual Design dengan Wireframe dan Mockup
Sebelum memulai pembahasan mengenai visual design dalam pembuatan aplikasi web, sebaiknya kita mengenal beberapa istilah yang akan sering kita jumpai dalam pembuatan desain produk.
- Wireframe, merupakan kerangka dasar dari halaman yang akan kita buat. Biasanya wireframe digunakan untuk menyusun layout dan navigasi konten. Untuk membuat wireframe, kita bisa memanfaatkan alat tulis maupun tools berupa figma, balsamiq, dll.
- Mockup, merupakan hasil akhir desain dan bisa dibilang merupakan lanjutan dari wireframe. Mockup sudah berisi informasi berupa tulisan maupun gambar untuk membuat hasil design seperti hasil akhir produk yang diharapkan.
- Prototype, menunjukkan interaksi antara pengguna dan User Interface. Biasanya prototype akan menunjukkan alur dari penggunaan produk dan interaksi antar mockup.
Nielsen’s 10 Usability Heuristics
Kita bisa menggunakan salah satu panduan yang disebut “Nielsen’s 10 Usability Heuristics”. Panduan ini dibuat oleh Jakob Nielsen dan merupakan prinsip umum. Panduan ini bisa membantu kita dalam merancang User Interface. Berikut ini rinciannya:
- Visibility of system status, sistem harus selalu memberikan feedback pada pengguna. Feedback berisi informasi tentang apa yang terjadi dengan sistem dan bisa juga berupa respon dari sistem ke pengguna. Berikut ini contoh penerapan dari tim PPL Berkah. Pada tab tambah pengguna dan daftar pengguna bisa terlihat perbedaan adanya garis warna oranye di bawah nama tab ketika user sedang berada pada tab tersebut.
2. Match between system & real world, desain harus menggunakan bahasa yang mampu dipahami pengguna bukan berisi istilah-istilah teknis yang sulit dipahami. Tips: pastikan pengguna bisa memahami informasi pada desain tanpa harus mencari makna kata. Berikut ini contoh dari PPL Berkah, bisa dilihat ikon manusia yang menandakan profil pengguna.
3. User control and freedom, berupa aksi undo atau redo, bisa juga berupa tombol cancel.
4. Consistency and standards, mengikuti konvensi yang standar, menggunakan kata-kata yang konsisten, tampilan pada web juga konsisten.
5. Error pervention, menunjukkan jika ada error atau bug secara langsung ke pengguna terlihat kurang pas. Akan lebih baik bila menampilkan pesan error yang sudah didesain khusus. Hal ini juga berusaha mencegah pengguna melakukan kesalahan daripada memberikan pesan error.
6. Recognition rather than recall, pengguna seharusnya tidak perlu menghafalkan bagian dari satu interface ke interface lain. Hal ini biasanya diterapkan dengan memperbolehkan user melakukan bookmark.
7. Flexibility and efficiency of use, memberikan shortcut sehingga sistem bisa mengakomodasi novice user ataupun expert user.
8. Aesthetic and minimalistic design, interface seharusnya tidak berisi informasi yang tidak relevan. Berikut ini contoh tampilan dari google.
9. Help users with errors, pesan error harus ditampilkan dalam kalimat yang sederhana, mudah dipahami, dan menyampaikan solusi. Berikut ini contoh dari pesan error yang ditampilkan google ketika user tidak tersambung dengan koneksi internet.
10. Help and documentation, sistem harus memiliki dokumentasi dan fitur bantuan yang baik meskipun akan lebih baik jika sistem dapat digunakan tanpa dokumentasi. Berikut ini contoh dari web mallchimp.
The 8 Golden Rules of Interface Design
Ada juga prinsip yang dinamakan “The 8 Golden Rules of Interface Design” yang disampaikan oleh Schneiderman. Meskipun mirip dengan “Nielsen’s 10 Usability Heuristics” prinsip ini juga sering digunakan sebagai acuan pembuatan desain. Berikut ini rincian dari The 8 Golden Rules of Interface Design:
- Strive for consistency, mirip dengan consistency and standards
- Cater to universal usability, pada bagian ini mirip seperti kombinasi antara match between system & real world dan flexibility and efficiency of use.
- Offer informative feedback, mirip dengan visibility of system status.
- Design dialogs to yield closure, poin ini merupakan bagian dari poin nomor 3. Tampilkan feedback tertentu untuk hal yang dilakukan pengguna. Misal memberikan receipt setelah melakukan transfer, menampilkan terima kasih.
- Prevent error, sama persis dengan prevent error pada 10 usability heuristics.
- Permit easy reversal of action, mirip dengan user control and freedom.
- Support internal locus of control, poin ini biasanya untuk pengguna yang sering memakai sistem, karena biasanya mereka lebih tertarik untuk membuat tampilan secara kustom.
- Reduce short term memory, mirip dengan recognition rather than recall.
Contoh Wireframe dan Mockup
Gambar di bawah ini merupakan salah satu wireframe dan mockup yang dibuat oleh kelompokku pada mata kuliah PPL 2021. Pada wireframe hanya berupa gambaran layout sedangkan pada mockup sudah terlihat logo dan informasi berupa gambar maupun tulisan.
Semoga bermanfaat. Sampai jumpa di artikel berikutnya.
Referensi: