How To — UI Design
Bagi yang sedang mengembangkan web atau aplikasi, pastinya akan melewati fase desain. Fase desain meliputi UI dan UX. Desain UI adalah User Interaction (tampilan), sedangkan UX adalah User Experience (pengalaman user). Istilah UI/UX sangat dikenali oleh developer, terutama Front-end Developer. Pada artikel ini, saya akan menjelaskan tahap-tahap melakukan desain UI dengan baik dan benar.
Apa itu Desain UI?
UI atau User Interface adalah cara untuk interaksi dengan user yang menggunakan produk berupa web atau aplikasi. Desain UI artinya desain tampilan untuk perangkat lunak, web, atau aplikasi. Desain UI bisa berupa visual, interaktif, dan arsitektur.
- Desain visual contohnya adalah implementasi elemen font, warna, dan gambar.
- Desain interaktif merupakan bagaimana user berinteraksi dengan produk.
- Desain arsitektur adalah tata letak elemen pada web atau aplikasi yang dibuat, sehingga mudah diakses oleh user.
Tahap Desain UI
Setelah mengenai apa itu UI, saya akan menjelaskan tahap-tahap melakukan desain UI. Mulai dari apa yang perlu dibuat sampai apa kaidah yang sebaiknya diikuti untuk melakukan desain UI.
Wireframe
Pertama-tama, buat kerangka desain untuk web atau aplikasi yang ingin dibuat. Hal itu dapat dilakukan menggunakan Wireframe, yaitu sebuah web untuk membuat low-fidelity desain. Bisa juga menggunakan Figma yang multifungsi.
Bisa dilihat pada contoh di atas bahwa kerangka desain tidak menarik untuk dilihat, belum ada warna, belum menarik untuk dilihat. Wireframe digunakan untuk panduan visual kerangka web atau aplikasi.
Mockup
Setelah kerangka sudah jadi, lanjutkan dengan membuat mockup high-fidelity desain web atau aplikasi sepenuhnya, bisa menggunakan web Figma.
Mockup sudah berisi desain tampilan yang menarik untuk dilihat. Mulai dari pewarnaan, font yang digunakan, serta tata letaknya sudah dirapikan. Mockup juga high fidelity dan berupa prototype, artinya button pada desain sudah bisa diklik. Misalnya jika button Login di kanan atas diklik, maka akan mengarahkan ke halaman Login atau muncul pop-up Login.
Usability Heuristics untuk Desain UI
Terdapat 10 heuristik kegunaan oleh Jakob Nielsen yang merupakan ‘rule of thumb’ dalam melakukan desain UI, yaitu sebagai berikut.
- Visibility of system status. Desain sebaiknya selalu memberi tahu user tentang apa yang sedang terjadi melalui feedback yang jelas. User yang mengetahui system status pada saat itu bisa mengerti hasil dari interaksinya dan dapat menentukan tahap selanjutnya.
- Match between system and the real world. Desain harus dapat dimengerti oleh user, membuat konsep yang jelas dan mudah dipahami, serta membuat informasi muncul dalam urutan yang jelas.
- User control and freedom. Desain harus memberikan user kebebasan dalam berinteraksi. Misalnya jika user salah menginput form, berikan user pilihan untuk keluar dari proses mengisi form atau undo input form tersebut.
- Consistency and standards. Desain harus konsisten dan sebaiknya mengikuti standar desain. Tujuannya adalah agar user tidak bingung dan ragu dalam interaksi. Misalnya penempatan elemen dalam halaman sebaiknya mengikuti standar.
- Error prevention. Desain sebaiknya dapat mencegah terjadinya eror, berikan informasi yang jelas agar user tidak menghadapi eror saat interaksi.
- Recognition rather than recall. Desain harus meminimalisir memory load user dengan membuat elemen, tindakan, dan opsi terlihat. Informasi harus terlihat oleh user agar user tidak perlu mengingatnya apabila terdapat interaksi selanjutnya yang membutuhkan informasi tersebut.
- Flexibility and efficiency of use. Desain sebaiknya terdapat shortcut untuk mempercepat interaksi user dan agar menjadi lebih efisien. Misalnya button di bawah page yang bisa diklik untuk kembali ke atas page.
- Aesthetic and minimalist design. Desain sebaiknya minimalis dan tidak berisi informasi yang irelevan dan jarang dibutuhkan oleh user.
- Help users recognize, diagnose, and recover from errors. Desain harusnya berisi eror message yang dapat dimengerti oleh user, bisa juga berisi bantuan visual agar user lebih memahaminya.
- Help and documentation. Desain sebaiknya tidak membutuhkan penjelasan tambahan. Namun jika dibutuhkan, system dapat memberi dokumentasi yang membantu user untuk melakukan interaksi.
Sekian informasi yang dapat saya berikan mengenai desain UI, semoga dapat membantu dalam melakukan desain yang baik dan benar.
Referensi:
