Visual Hierarchy Dalam Desain

Dilihat 10414 kali
Ilustrasi visual hierarchy

DARI ilustrasi poster diatas secara tidak langsung susunan fokus membaca kita akan dimulai dari yang paling besar hingga yang terkecil, dalam dunia desain hal seperti ini disebut Visual Hierarchy.

Visual Hierarchy atau dalam bahasa Indonesia disebut Hirarki Visual adalah prinsip mengkategorikan elemen secara visual untuk disusun berdasarkan tingkat pentingnya informasi. Semakin penting informasi maka secara visual akan ditampilkan lebih menarik kemudian diikuti informasi lain yang mendukung. Dikutip dari The Nielsen Norman Group bahwa "Visual hierarchy controls the delivery of the experience. If you have a hard time figuring out where to look on a page, it's more than likely that its layout is missing a clear visual hierarchy". Maksudnya dengan visual hirarki kita bisa mengatur urutan informasi yang akan diterima audience sehingga pesan lebih informatif dan mudah dicerna.

Poster karya Toulouse-Lautrec

Jika ditelisik ke masa lalu, penerapan Visual Hierarchy sudah ada sejak revolusi industri 1.0 dimana poster dan media cetak menjadi media yang digunakan untuk menyebar informasi secara massal pada sekitar tahun 1800 M. Contohnya pada poster karya Toulouse Lautrec pada tahun 1800an kita bisa melihat penerapannya pada elemen tipografi yang di manipulasi karakteristiknya dan elemen warna yang ditingkatkan kontrasnya. Ditahun 90-an hingga 2000-an awal media seperti koran, buku atau majalah dengan jelas memperlihatkan dominasi judul dalam sebuah halaman cover diikuti konten pendukung seperti subjudul atau deskripsi singkat. Sedangkan diera sekarang, hirarki visual bisa kita lihat di situs berita online, microblog di sosial media atau aplikasi smartphone.

Setelah sedikit mengetahui tentang hirarki visual secara tidak langsung kita akan bertanya megapa hal ini bisa terjadi?. Dalam buku "100 Things Every Designer Needs to Know about People" karya Susan M. Weinschenk, Ph.D di poin 2 Pada Bab "How People See" dijelaskan bahwa manusia memiliki 2 versi dalam melihat (vision), yaitu central dan peripheral. Central vision adalah objek utama yang menjadi fokus penglihatan sedangkan Peripheral vision adalah objek disekitarnya yang terlihat samar. Jadi dalam proses melihat media visual seperti poster pandangan pertama kita akan mengarah kepada bagian elemen visual yang paling mencolok, bisa judul atau gambar. Inilah yang disebut Central vision. Kemudian secara tidak langsung kita sudah menyerap elemen visual lain yang ada di area peripheral vision, maka proses membaca akan dilanjutkan ke bagian yang paling menarik perhatian di area peripheral vision ini.

Sebagai intermeso, secara alamiah mata memiliki pola dalam membaca, yaitu "Z" pattern dan "F" pattern. Z pattern terjadi ketika mata membaca media visual yang kontennya memiliki sedikit teks, maka kita akan memindai mulai dari kiri ke kanan kemudian secara diagonal turun ke kiri bawah. Sedangan F pattern terjadi ketika media visual memiliki banyak teks, maka kita akan memulai dengan memindai dari kiri ke kanan di sepanjang bagian atas, tetapi kemudian memindai sisi kiri halaman, mencari petunjuk visual untuk informasi yang dicari. Ketika menemukan petunjuk seperti itu, akan memindai dari kiri ke kanan lagi. Proses ini berulang hingga akhir halaman. 

Untuk mendesain satu elemen visual menjadi lebih menarik perhatian dari elemen yang lain adalah dengan memanipulasi karakteristiknya. Berikut ini adalah karakteristik yang dapat diubah guna mengaplikasikan Visual Hierarchy:

  • Color (warna yang cerah lebih menarik perhatian daripada yang redup)
  • Contrast (pemilihan warna berbeda sehingga salah satunya lebih eye-catching)
  • Alignment (kalimat judul yang berada diluar paragraf akan lebih menonjol untuk dibaca daripada isi yang tersusun dalam sebuah paragraf)
  • Repetition (pengulangan gaya visual dapat memberikan sugesti kalau infomasinya berkaitan)
  • Proximity (peletakan konten secara berdekatan dapat memberikan sugesti kalau infomasinya berkaitan)
  • Whitespace (lebih banyak ruang kosong dalam suatu elemen membuatnya mudah jadi perhatian)
  • Texture & style (lebih banyak detail membuat suatu elemen lebih menarik perhatian)

Sedangkan berikut ini adalah beberapa tips untuk membuat Hirarki Visual yang baik:

  • Petakan semua pesan yang ingin ditampilkan.
  • Buat urutan prioritas dari pesan yang ingin disampaikan.
  • Semakin penting informasi sebaiknya dibuat sesingkat dan semenarik mungkin, sehingga audience memiliki cukup waktu untuk membaca informasi yang lain.

Kasus yang unik sebenarnya terjadi pada aplikasi marketplace di smartphone. Ketika kita melihat sebuah produk maka halaman yang ditampilkan begitu padat. Saking padatnya kita bisa melihat informasi yang bertumpuk dari penjual (gambar produk, harga dan judul) dan pihak aplikasi (diskon harga, promo gratis ongkos kirim dan rating). Namun hal itu tidak menjadi kendala karena susunannya yang tepat mulai dari teks harga yang dibuat lebih tebal, gambar produk yang lebih besar dari splash promo dan lain-lain. Maka dengan adanya Visual Hierarchy yang tepat manfaat akan dirasakan kedua belah pihak. Sebagai penulis atau desainer dapat menyusun informasi yang diterima target audience sehingga lebih mudah dicerna. Sedangkan sebagai target audience dapat dengan mudah mengatur fokus dalam membaca sehingga waktu yang dibutuhkan untuk membaca semakin singkat dan tetap informatif.

*) Penulis adalah Perancang Grafis di Dinas Kominfo Kabupaten Magelang

Editor Slamet Rohmadi

0 Komentar

Tambahkan Komentar