UI Design: Mengapa Penting?
“Usability’s strength is in identifying problems, while design’s strength is in identifying solutions.” ―Alan Cooper, About Face: The Essentials of Interaction Design
User Interface
User Interface (UI) adalah bagian visual dari suatu aplikasi yang memastikan bagaimana seorang pengguna berinteraksi dengan aplikasi dan bagaimana informasi ditampilkan kepada pengguna. Tujuan dari user interface adalah untuk meningkatkan usability dan user experience. UI merupakan hal yang penting sebab UI memberikan pengaruh langsung terhadap kepuasan pengguna. UI juga memegang peran yang penting dalam menentukan apakah pengguna mengerti menggunakan sebuah aplikasi. UI berinteraksi langsung dengan pengguna. Oleh sebab itu, agar pengguna menyukai aplikasi kita, maka kita harus mendesainnya agar dapat berperilaku seperti ‘orang yang menyenangkan’.
Wireframe dan Mockup
Ada beberapa hal yang perlu dilakukan untuk membuat suatu desain UI. Hal pertama yang perlu dilakukan adalah membuat wireframe. Wireframe dapat disebut sebagai blueprint dalam arsitektur. Wireframe dibuat untuk menyampaikan susunan, struktur, layout, navigasi dan organisir konten. Hal yang perlu dilakukan selanjutnya adalah membuat mockup. Berbeda dari wireframe, mockup menyampaikan aspek desain visual, termasuk gambar, warna, dan tipografi. Mockup memberikan gambaran secara detail sebelum produk dibuat.
Pada proyek LEARNFAZZ, tim kami sudah disediakan wireframe oleh Product Owner. Kami kemudian membuat mockup berdasarkan wireframe tersebut disertai dengan perubahan-perubahan hasil diskusi kami dengan Product Owner. Berikut adalah potongan mockup kami.
Nielsen’s 10 Usability Heuristics
Dalam perancangan segala hal yang berhubungan dengan UI design, kami mengacu pada Nielsen’s 10 Usability Heuristics.
- Visibility of system status: memberitahu apa yang sedang terjadi kepada pengguna dan memberikan feedback yang tepat.
- Match between system and the real world: mampu memberikan informasi yang mudah dipahami seperti bahasa sehari-hari.
- User control and freedom: mampu memberikan kemudahan dan kebebasan kepada user dalam menggunakan interface.
- Consistency and standards: memiliki desain yang konsisten dan agar memudahkan pengguna dalam mengenal fitur.
- Error prevention: memiliki desain yang mencegah pengguna melakukan kesalahan.
- Recognition rather than recall: meminimalkan pengguna mengingat dengan membuat obyek, tindakan, dan pilihan yang terlihat.
- Flexibility and efficiency of use: memberikan fleksibilitas dan keefisienan dalam penggunaan.
- Aesthetic and minimalist design: memiliki desain layout yang nyaman dipandang dengan menggunakan kontras warna yang baik, posisi yang sesuai dan serasi.
- Help users recognize, diagnose, and recover from errors: memberikan pesan error yang ditulis dalam bahasa sederhana, menunjukkan masalahnya, kemudian memberi saran untuk solusinya.
- Help and documentation: memiliki dokumentasi untuk membantu pengguna dalam menyelesaikan masalah atau pekerjaannya.
Berikut adalah beberapa contoh penerapan Nielsen’s 10 Usability Heuristics pada desain proyek kami:
- Memberikan feedback kepada user setelah user berhasil melakukan enroll ke suatu course (gambar kiri).
- Menggunakan kata-kata yang sederhana dan mudah dipahami saat user diminta memilih interest (gambar tengah).
- Meminimalkan pengguna mengingat. Contohnya, saat pengguna berada pada halaman course list, pengguna dapat dengan mudah melihat tab mana yang sedang ia kunjungi, tab untuk course yang sudah di-enroll atau tab untuk course yang belum di-enroll (gambar kanan)
- Memiliki desain yang konsisten dengan menggunakan warna serta icon pack yang sama pada setiap halaman.
- Desain dibuat minimalis dengan hanya menampilkan hal-hal yang dibutuhkan oleh pengguna.
