Mengenal Hierarki Visual & Prinsipnya dalam Desain UI/UX

Apa yang Dimaksud dengan Hierarki Visual?

Hierarki visual adalah seni mengatur elemen dalam sebuah desain berdasarkan kepentingannya. Mengutip dari Figma, ini bertujuan untuk mengarahkan perhatian pengguna pada konten dan alat yang bisa memenuhi kebutuhan mereka.

Apabila diterapkan dengan baik, ini bisa membantu orang memahami informasi secara intuitif. Misalnya, dalam poster film yang struktur elemen desainnya ditata dengan baik. Audiens bisa dengan cepat memahami konten posternya setelah melihatnya sekilas.

Mulai dari filmnya apa, pemainnya, dan tanggal rilisnya. Lalu, jika dilihat lebih dekat, mereka mungkin juga bisa menemukan informasi seperti rating dan afiliasi studio.

Lebih lanjut, tatanan visual ini bisa juga mempengaruhi apa yang dilihat audiens dalam sebuah desain. Entah desain gambar, grafis, atau web. 

Mengutip dari Hubspot, ini merupakan faktor penting dalam arsitektur informasi yang mana informasi disusun dan ditampilkan untuk pemahaman serta navigasi yang mudah. Hal ini bisa sangat berpengaruh pada pengalaman pengguna (UX).

Apa yang Membuat Hierarki Visual Desain Buruk?

Hierarki visual berfungsi sebagai cara untuk mengklasifikasikan informasi yang dikonsumsi. Jika tidak ada cara untuk membedakan antara elemen-elemen tersebut, itu dianggap sebagai hierarki yang buruk.

Hierarki visual yang buruk memiliki ciri-ciri sebagai berikut:

1. Membingungkan pengguna: Pengguna merasa sulit untuk memahami fokus utama dari desain tersebut karena semua tampak sama pentingnya.

2. Tidak jelas harus melihat ke mana: Tidak ada panduan visual yang jelas, sehingga mata pengguna berkeliaran tanpa tujuan yang jelas.

3. Menciptakan desain yang membosankan: Ketika tidak ada kontras yang menarik atau pemfokusan pada elemen-elemen tertentu, desain menjadi kurang menarik dan monoton.

4. Sebaliknya, struktur visual yang baik harus memfasilitasi pemahaman dan mengarahkan pengguna. Hierarki visual yang tepat pada sebuah situs web membantu seseorang memahami apa isi halaman tersebut.

Apa Prinsip Hierarki Visual yang Bagus?

Setelah mempelajari struktur visual yang buruk, sekarang MinDi bakal kasih 7 prinsip untuk menerapkannya dengan baik. Berikut adalah 7 prinsip hierarki visual yang bisa kamu terapkan dalam desain UI/UX:

Penjajaran dan Komposisi (Alignment and Composition)

Penjajaran dan komposisi membantu kamu mengatur elemen pada situs dan menciptakan titik fokus untuk pengunjung. Ada dua aturan komposisi umum, yaitu aturan sepertiga dan aturan ganjil. 

Aturan sepertiga membagi halaman menjadi sembilan kotak yang sama besar dengan garis vertikal dan horizontal. Titik pertemuan dari kedua garis tersebut adalah fokus utama untuk meletakkan elemen penting dalam desain.

Aturan ganjil menyatakan bahwa jumlah elemen ganjil lebih menarik dan mengundang perhatian karena setiap elemen bisa dinilai secara individu.

Pola Baca

Sumber: graphicmint.com

Sebagai desainer, kamu harus mengingat pola baca dari kiri ke kanan atau dari kanan ke kiri tergantung pada bahasa. Kamu bisa menggunakan pola baca 'F' atau 'Z'. 

Pola 'F' ini menggambarkan mata pengguna yang memulai dari kiri atas, bergerak ke kanan atas, lalu turun dan bergerak lebih cepat ke kanan dalam gerakan pendek, dan kembali ke kiri bawah. 

Sementara itu, pola ‘Z’ dimulai dari sudut kiri atas halaman, di mana mata pengguna pertama kali tertuju, dan bergerak secara horizontal ke kanan atas halaman. 

Kemudian, pandangan mereka turun secara diagonal ke kiri bawah, dan berakhir dengan bergerak horizontal lagi ke kanan bawah halaman. 

Pola ini membantu dalam merancang halaman yang intuitif dan meningkatkan konversi, terutama pada landing page.

Ukuran

Elemen yang lebih besar lebih mudah diperhatikan dan dianggap lebih penting. Contohnya, pada situs Netflix, kalimat "Unlimited movies, TV shows, and more" adalah yang pertama dilihat karena ukuran serta posisinya besar dan dominan.

Sumber: Netlfix

Tatanan tersebut menekankan penawaran utama mereka.

Warna dan Kontras

Sumber: Dibimbing

Warna dapat membangkitkan emosi dan memiliki konotasi sosial dan budaya. Dalam desain, warna yang kontras tinggi dapat menarik perhatian ke elemen spesifik. 

Ruang Putih (White Space)

Sumber: Apple

Ruang putih adalah ruang kosong dalam desain yang membantu menarik perhatian dan menjaga keseimbangan. Apple terkenal dengan penggunaannya yang efektif terhadap ruang putih. Penggunaan ini mempertegas kesederhanaan dan identitas mereknya.

Kedekatan dan Pengulangan (Proximity and Repetition)

Sumber: New York Time Cookings

Menempatkan elemen secara dekat memberitahu pengguna bahwa elemen-elemen tersebut terkait. Contoh dari website New York Times Cooking. 

Dalam situs ini beberapa kotak resep dikelompokkan dekat satu sama lain. Hal ini menunjukkan bahwa mereka memiliki tingkat kepentingan yang serupa.

Hierarki Font

Font memainkan peran penting dalam menambahkan elemen visual pada website-mu dan membantu mengorganisir teks. Hierarki font biasanya terdiri dari teks utama yang besar dan menarik perhatian pertama.

Lalu, diiringi dengan subjudul sebagai informasi sekunder dan teks tersier yang lebih kecil namun masih informatif.

Kesimpulan

Itu dia pembahasan lengkap mengenai hierarki visual. Bisa dilihat bahwa ini tidak hanya berpengaruh pada estetika, namun juga pada pengalaman pengguna secara keseluruhan.

Berbicara tentang desain, MinDi punya rekomendasi untuk kamu yang tertarik mendalaminya. Sobat MinDi bisa ikut Bootcamp UI/UX/Product Design untuk mempelajari semua hal berkaitan desain web ataupun aplikasi.

Bootcamp ini dirancang dengan silabus yang cocok untuk pemula. Kamu bisa belajar dari teori desain UI/UX, penggunaan alat desain, hingga praktik dengan proyek nyata. 

Bukan hanya itu, program ini juga menawarkan jaminan kerja setelah menyelesaikan pembelajarannya.Ini sudah dibuktikan oleh 94% lulusan Dibimbing yang sukses dapat pekerjaan seusai program selesai. 

Gimana, tertarik untuk jadi salah satunya? Segera daftar dan mulai karirmu di UI/UX dengan Dibimbing.id!

FAQ (Frequently Asked Questions)

1. Mengapa Hierarki Visual Penting dalam Desain?

Hierarki visual penting karena membantu menciptakan organisasi yang jelas dalam sebuah desain. Ini memudahkan pengguna untuk memahami dan menyerap informasi secara cepat dan efektif. 

Selain itu, ini meningkatkan pengalaman pengguna secara keseluruhan dengan memudahkan navigasi dan pemahaman.

2. Bagaimana Cara Menciptakan Hierarki Visual yang Efektif?

Untuk menciptakan hierarki visual yang efektif, kamu bisa menggunakan ukuran, warna, kontras, penempatan, dan gaya tipografi untuk membedakan antar elemen. Elemen yang paling penting harus menonjol lebih daripada yang lain.

3. Apa Perbedaan antara Hierarki Visual dengan Tata Letak?

Hierarki visual adalah tentang pentingnya elemen visual dalam desain, sedangkan tata letak berkaitan dengan penataan dan pengaturan spasial dari elemen-elemen tersebut. Kedua konsep ini saling berkaitan tetapi fokus pada aspek yang berbeda dari desain.

4. Bagaimana Hierarki Visual Mempengaruhi Keputusan Pengguna?

Hierarki visual mempengaruhi keputusan pengguna dengan menarik perhatian mereka ke informasi atau tindakan yang paling relevan terlebih dahulu. Ini meningkatkan kemungkinan interaksi yang diinginkan, seperti mengklik tombol 'Beli' atau membaca artikel penting.

Referensi

1. What is Visual Hierarchy [Buka]

2. 7 Visual Hierarchy Principles for Every Marketer [Buka]