Bab 6. Prinsip Dasar Desain
Sembilan prinsip dasar yang perlu diketahui untuk membangun landasan experience yang baik. Bagian 2 — Dasar-Dasar UX Design dari Kitab UX Design.
Desain yang baik dan tiga aspek otak
Desain yang baik, menurut Don Norman, menyentuh tiga aspek: Visceral, Behavioral dan Reflective. Visceral adalah tentang apa yang dirasa oleh panca indra pengguna: apa yang dilihat, didengar, dan jika menyangkut produk fisik, bisa mencakup apa yang diraba, dirasa dan dicium. Behavioral terkait usability: kemudahan dalam menggunakan produk untuk membantu pengguna mencapai tujuannya. Terakhir reflective, terkait impression/kesan, apa yang diingat oleh pengguna tentang experience selama menggunakan produk kita. Aspek yang terlihat dan dirasakan langsung oleh pengguna termasuk didalam Visceral, dan untuk memberi pengalaman Visceral yang baik, ada sembilan prinsip dasar desain yang bisa membantu untuk mencapai hal tersebut.
Saya pernah membuat Twitter thread untuk prinsip dasar desain ini, dengan mengambil contoh kasus website dari KAI. Berikut sembilan prinsip dasar desain yang perlu diketahui sebelum mulai mendesain experience yang baik:
1. Aesthetic-usability effect.
Produk yang estetik, dipersepsikan lebih mudah digunakan. Produk yang tidak sedap dipandang mata? Bakal dirasa susah digunakan. Kesan pertama berpengaruh ke experience secara keseluruhan. Bagaimana membuat produk yang estetik? Estetik dibangun oleh beberapa komponen desain: dari warna, pemilihan font, ukuran elemen/font, image, icon, logo, dll. Salah satu hal utama yang membuat desain dibawah tidak estetik, adalah ukuran font yang tidak konsisten sehingga desainnya terkesan berantakan. Ukuran ini akan dibahas di prinsip desain nanti.
2. Balance.
Halaman dibawah ini berat ke kanan dan ke bawah: ada lingkaran biru dan tombol pesan yang dominan, plus teks yang besar dibawah. Untuk balance/keseimbangan, ada dua jenis: simetri dan asimetri. Halaman ini tidak jelas simetri atau simetri. Tidak ada keseimbangan membuat suatu desain terkesan berantakan.
3. Proximity.
Promixity atau kedekatan. Hubungan antar elemen. Untuk gambar pertama, ilustrasi kereta dibawah ini apakah tentang Angkutan Penumpang atau Angkutan Barang? Contoh lain di gambar kedua, Stasiun Asal dan Tujuan itu berhubungan, tapi tidak terlihat hubungannya secara visual ataupun peletakan layoutnya.
4. Alignment.
Alignment menunjukkan urutan/struktur dari halaman. Dari halaman dibawah, jika nama kereta (contohnya Argo Wilis) lebih ke kiri dan tidak sejajar dengan info dibawahnya, maka struktur informasi dari halaman ini akan terlihat lebih jelas. Ini akan membantu pengguna dengan mudah men-scan suatu halaman dengan informasi yang berbentuk list yang panjang.
5. Repetition.
Repetition atau pengulangan, adalah tentang asosiasi dan konsistensi. Salah satu contoh penggunaanya adalah untuk memperkuat brand. Bagaimana memastikan bahwa saat pengguna berpindah dari satu halaman ke halaman lain, mereka tetap merasa ‘aman’, masih berada di site/app yang sama. Contoh repetition yang bisa diperbaiki dari dua halaman di nomor 2 dan 3: halaman utama dan halaman booking terasa seperti dua site yang berbeda.
6. Contrast.
Penggunaan warna, bentuk atau arah (diagonal/vertikal/horisontal) yang berbeda untuk menunjukkan elemen atau aksi utama dari suatu halaman. Di halaman utama dibawah, aksi utama untuk Pemesanan Tiket memiliki kontras yang baik (berbeda arah, vertikal), sehingga membuat tombol tersebut menonjol. Hanya sayangnya beberapa image di banner tidak memiliki kontras yang cukup sehingga tombol Pemesanan Tiket sering terlihat “menghilang”.
7. Space.
Beberapa atau banyak orang merasa perlu untuk mengisi setiap pixel di halaman desain dengan elemen apapun. Padahal penggunaan space penting untuk “ruang bernafas” bagi otak dan mata pengguna, selain menunjukkan struktur informasi (mudah untuk di-scan) dan juga bisa mengarahkan mata pengguna ke elemen utama. Di halaman utama diatas, dapat dilihat elemen saling tumpang tindih, akhirnya mata pengguna “bingung” dan tidak bisa fokus ke elemen tertentu. Yang parahnya, bisa jadi aksi utama (tombol Pemesanan Tiket) diabaikan oleh pengguna.
8. Size.
Ukuran elemen, termasuk teks/copy yang terkait masalah readability. Coba lihat halaman utama diatas. Berapa banyak yang bisa membaca tulisan kecil di banner tersebut tanpa usaha lebih seperti memicingkan mata?
9. Warna.
Terakhir dari prinsip dasar desain. Penggunaan warna harus mewakili apa yang ingin disampaikan kepada pengguna, selain untuk menjaga konsistensi desain. Misal biru digunakan untuk aksi utama dan dipilih bukan hanya karena sesuai dengan brand, tapi juga untuk memberi rasa aman. Di teori psikologi warna, biru identik dengan trust/kepercayan. Di beberapa halaman diatas, penggunaan warga tidak konsisten. Call-to-action/aksi utama ada yang menggunakan warna biru di satu halaman, dan di halaman lain menggunakan oranye.
Desain yang baik, meskipun terlihat simple di permukaan, merupakan hasil proses yang lumayan rumit. Desain yang baik harus memperhatikan tiga aspek yang terkait bagaimana otak pengguna memproses informasi: Visceral, Behavioral dan Reflective. Sembilan prinsip desain diatas bisa digunakan untuk membangun landasan yang kuat untuk experience keseluruhan yang lebih baik. Untuk lebih mahir menggunakan prinsip-prinsip diatas, coba ambil satu contoh kasus, bisa website atau app dari perusahaan yang populer, kemudian lakukan analisa aspek Visceral menggunakan sembilan prinsip diatas.
