[Desain & Psikologi] Bagaimana menerapkan Visual Hierarchy pada desain?
Salah satu artikel mengenai desain produk digital berbahasa Indonesia yang saya suka adalah tulisan Dwinawan yang berjudul “Kenapa Visual Hierarchy itu penting?” Silahkan dibaca sebelum melanjutkan tulisan ini.
Visual Hierarchy adalah struktur visual yang ngasih tahu level kepentingan suatu elemen desain dibanding yang lain.
Pada meme di atas, mata kita semacam diarahkan untuk membaca tulisan di atas dengan alur yang bukan lagi linear dari atas ke bawah, tapi dari yang paling menarik perhatian kita duluan.
Berdasarkan teori cognitive load, manusia diciptakan dengan keterbatasan working memory sehingga dalam suatu waktu, kita nggak bisa mencerna terlalu banyak informasi baru. Maka dari itu, penting untuk menerapkan visual hierarchy supaya user dapat mencerna informasi satu persatu sesuai alur yang kita desain.
Jika user merasa overwhelmed karena dipaksa mencerna kebanyakan informasi sekaligus, resikonya justru ada kemungkinan mereka gagal paham.
Ada beberapa teknik visual yang bisa diterapkan untuk membuat desain kita memiliki Visual Hierarchy yang baik.
1. Warna dan kontras
Sebuah riset menggunakan eyetracking oleh Kieras et al (2014) mencoba mencari tahu berapa rata-rata fixation (lirikan) yang dibutuhkan untuk menemukan item dengan clue warna, ukuran, bentuk dan angka. Eksperimen ini membuktikan bahwa visual clue yang paling kuat adalah warna.
Hal ini bisa dipraktekkan dengan memberi warna yang kontras pada bagian yang paling kita utamakan. Contoh paling umum: call-to-action button
Ada cara mudah untuk memastikan kontras yaitu dengan memberi efek blur si desain untuk melihat apa benar komponen utama sudah cukup kontras dibanding komponen lain.
2. Ukuran
Manusia cenderung mengasosiasikan ukuran suatu komponen dengan level kepentingan komponen tersebut dibanding yang lain. Jadi, makin besar ukuran suatu komponen, makin mudah mencuri perhatian kita.
Teori ini sesuai dengan ilmu tipografi dimana title, subtitle, heading, body text biasanya dibedakan oleh ukuran font sehingga terlihat hirarkinya. Juga penggunaan bold, italic, atau underline untuk menekankan pentingnya kata atau kalimat tertentu.
3. Bentuk & Space
Penambahan elemen bentuk seperti outline atau background juga akan mengesankan visual hierarchy yang lebih tinggi. Selain itu, bahkan tanpa tambahan embel-embel apapun, dengan memberikan banyak whitespace di sekitar suatu komponen akan lebih menarik perhatian mata.
Kesimpulan
Visual Hierarchy penting sekali diterapkan pada desain interaktif seperti website, aplikasi atau game. Alasannya karena user tidak hanya menerima informasi satu arah seperti pada desain grafis, tapi juga instruksi yang mengarahkan user untuk melakukan sesuatu menggunakan komponen-komponen user interface yang ada.
Bagaimana user mencerna informasi yang ada di layar tentunya akan berpengaruh ke seberapa efisien user melakukan suatu task. Ujung-ujungnya akan berpengaruh ke keseluruhan user experience dan konversi bisnisnya.
Jadi, jangan lupa dipraktekkan 👌
