Hirarki visual adalah salah satu
prinsip terpenting di balik desain web yang efektif. Dalam artikel ini saya
akan membahas mengapa mengembangkan hierarki visual sangat penting di web,
teori di baliknya, dan bagaimana Anda dapat menggunakan beberapa latihan yang
sangat mendasar dalam desain Anda sendiri untuk mempraktikkan prinsip-prinsip
tersebut.
Desain = Komunikasi
Pada dasarnya, desain didasarkan
pada komunikasi visual: Untuk menjadi desainer yang efektif, Anda harus dapat
mengomunikasikan ide Anda dengan jelas kepada pemirsa atau Anda akan kehilangan
perhatian mereka. Orang berubah-ubah; jika Anda memberi mereka sejumlah besar
informasi, kemungkinan 99 dari 100 orang tidak akan mau membacanya. Karena?
Karena kebanyakan orang pada dasarnya adalah pemikir visual, bukan pemroses
data.
Untuk mengetahui mengapa ini
benar, penting untuk memahami sedikit tentang cara kita melihat sesuatu. Orang
bukanlah apa yang Anda sebut "pengamat kesempatan yang sama".
Alih-alih mengambil informasi visual dan memprosesnya dengan cara yang seragam,
orang mengatur apa yang mereka lihat dalam istilah "hubungan visual".
Perhatikan gambar dua lingkaran biasa berikut ini:
Kemungkinan besar Anda tidak akan
melihat "dua lingkaran" melainkan "lingkaran hitam dan lingkaran
merah yang lebih kecil".
Alasannya cukup sederhana: Ketika
dihadapkan dengan sesuatu yang sederhana seperti dua lingkaran, seseorang tidak
hanya akan melihat dua lingkaran biasa, tetapi juga akan menemukan cara untuk
membedakan satu dari yang lain. Lingkaran bisa lebih besar, atau lebih kecil,
atau berwarna, atau variasi perbedaan lainnya. Perbedaan-perbedaan ini
memungkinkan kita untuk membedakan antara objek dan memberinya makna yang unik.
Sekarang mari kita lihat gambar
yang lebih kompleks:
Kompleksitas tambahan sebenarnya
memperkuat keinginan kita untuk "mengklasifikasikan" objek dalam
kaitannya. Persamaan dan perbedaan menjadi kerangka yang kita gunakan untuk
melihat bentuk. Perbedaan skala menunjukkan bahwa satu objek lebih dekat dengan
kita daripada yang lain atau yang satu lebih dominan daripada yang lain;
variasi warna dapat menunjukkan bahwa suatu objek memiliki kepribadian unik
yang membedakannya dari yang lain. Banyak informasi dapat disampaikan dalam
satu gambar menggunakan beberapa alat yang sangat sederhana.
...Memahami bahwa orang akan melihat desain kita dalam
kaitannya dengan hubungan sangat penting untuk menjadi desainer yang lebih
efektif.
Mari kita ambil contoh ini
kembali ke desain web; Karena desain web adalah tentang mengomunikasikan
informasi visual, memahami bahwa orang akan melihat desain kita dalam kaitannya
dengan hubungan sangat penting untuk menjadi desainer yang lebih efektif.
Meskipun tampaknya cukup hanya memberikan informasi, sebagai desainer web,
tugas kita adalah memecah informasi mentah tersebut menjadi potongan-potongan
informasi yang relevan secara visual yang mudah dilihat, dan yang lebih
penting, efektif dalam mengkomunikasikan pesan di balik halaman web . .
Fajar sarang
Ada ratusan penjelasan mengapa
orang melihat dari segi hubungan; jika ditelusuri secara antropologis, dapat
disimpulkan bahwa mentalitas pemburu-pengumpul memaksa manusia pada satu titik
untuk menyadari bahwa melihat hubungan adalah keterampilan bertahan hidup.
Anda lihat, bahkan manusia
prasejarah memiliki rasa hormat yang sehat terhadap kontras visual.
Mungkin penjelasan yang lebih
praktis adalah bahwa begitulah cara otak kita mengkategorikan informasi:
mengelompokkan benda-benda visual yang serupa menjadi satu dan mengaturnya
menjadi pola yang bermakna sama melekatnya dengan sifat manusiawi kita seperti
halnya makan atau minum. Either way, faktanya tetap bahwa bahkan dalam
bentuknya yang paling dasar, informasi yang diatur dengan hierarki dalam
pikiran akan selalu lebih efektif dalam komunikasi daripada informasi yang
tidak terorganisir.
Pertimbangkan gambar berikut dari
dua blok teks:
Dalam contoh di atas, kita melihat
bentuk sistem hirarki visual yang paling mendasar yang diterapkan pada teks.
Informasi di masing-masing dari dua contoh tidak berbeda, tetapi cara
penguraiannya secara dramatis mengubah cara pembaca akan melihat dan mengasimilasinya.
Ketika kita berbicara tentang hierarki visual dalam hal tipografi, inilah yang
kita maksud. Kedekatan, skala, dan kesamaan format teks memungkinkan pembaca
untuk mengatur contoh di bawah ini menjadi judul dan paragraf. Hierarki memberi
arti lebih pada judul daripada informasi lainnya, dan mempermudah pemindaian.
Baiklah, jadi ini semua cukup
mendasar, bukan? Mari selami beberapa contoh yang lebih mendalam tentang
bagaimana prinsip dasar ini dapat diterapkan pada beberapa desain yang sangat
canggih :
Kotak Peralatan Hirarki
Memahami bahwa hierarki visual
itu penting adalah hal yang sangat baik, tetapi bagaimana seorang desainer
benar-benar membuatnya? "Alat" yang akan kita lihat sesederhana alat
tukang kayu - palu, paku, gergaji, dll. - Yang penting adalah apa yang Anda
lakukan dengannya!
Ukuran
Objek yang lebih besar
membutuhkan lebih banyak perhatian. Menggunakan ukuran sebagai alat hierarki
adalah cara yang efektif untuk memandu mata pemirsa ke bagian tertentu dari
halaman. Karena ukuran adalah salah satu bentuk organisasi yang paling kuat,
penting untuk mengkorelasikan ukuran dengan kepentingan dalam desain. Item
terbesar harus menjadi yang paling penting dalam banyak kasus; elemen terkecil
harus menjadi yang paling tidak penting.
Penggunaan teks BESAR dan tebal
menambah tingkat keteraturan pada desain yang kacau ini. Mata harus bergerak
secara alami dari barang besar ke barang yang lebih kecil.
Warna
Warna adalah alat yang menarik
karena dapat berfungsi sebagai alat organisasi dan alat kepribadian. Warna yang
berani dan kontras pada elemen tertentu dari situs web akan menuntut perhatian
(seperti tombol atau pesan kesalahan atau hyperlink). Saat digunakan sebagai
alat kepribadian , warna dapat meluas lebih jauh ke dalam jenis hierarki yang
lebih canggih; Menggunakan warna yang subur dan nyaman dapat membawa daya tarik
emosional ke halaman. Warna dapat memengaruhi segalanya, mulai dari branding
situs web (mis: Coca-Cola Red) hingga simbolisme (mis: warna dingin dan redup).
Aplikasi warna tingkat lanjut bahkan dapat digunakan untuk
"mengklasifikasikan" informasi dalam hierarki, seperti contoh
berikut:
Situs Spectra Viewer menggunakan
warna untuk merepresentasikan berbagai kategori berita, sehingga mudah
menemukan jenis informasi tertentu berdasarkan tombol warna.
Kontras
Kontras menunjukkan kepentingan
relatif. Perubahan dramatis dalam ukuran atau warna teks akan mengirimkan pesan
bahwa ada sesuatu yang berbeda dan membutuhkan perhatian. Mengubah dari warna
latar belakang terang ke warna latar belakang gelap dapat dengan cepat
memisahkan konten utama halaman dari footer.
Kontras antara bagian header yang
terang dan lapang serta footer yang gelap dan bersahaja menciptakan hierarki
informasi yang berbeda.
Penyelarasan
Alignment menciptakan keteraturan
antar elemen. Ini bisa sesederhana perbedaan antara "kolom konten"
dan "kolom sidebar", tetapi penyelarasan juga dapat mengambil peran
hierarkis yang lebih kompleks. Pertimbangkan, misalnya, kekuatan informasi yang
ditempatkan di kanan atas halaman web. Karena pengguna umumnya mengharapkan
informasi di bagian layar itu dikaitkan dengan profil, akun, keranjang belanja,
dll., semua tempat di area itu terasa "resmi". Alignment juga dapat
membangkitkan ketertarikan jika digunakan dengan cara yang unik, seperti pada
contoh berikut:
Stuff Template menggunakan sistem
perataan horizontal unik untuk memisahkan branding dan navigasi dari konten
posting blog.
Template Flex menggunakan tata
letak yang terinspirasi dari kisi untuk mengembangkan minat visual, serta
hierarki visual yang digerakkan oleh taksonomi.
Pengulangan
Pengulangan memberikan makna
relatif pada elemen; jika semua teks dalam "paragraf" berwarna
abu-abu, saat pengguna melihat blok teks abu-abu baru, mereka dapat berasumsi
bahwa itu adalah paragraf dasar lainnya; ketika pengguna yang sama menemukan
tautan biru atau judul hitam, mereka dapat dengan aman berasumsi bahwa itu
berbeda dan unik dari teks abu-abu.
Situs Virgin membuat elemen
berulang seperti teks paragraf, lalu memecah pengulangan ketika ingin mendapat
perhatian (seperti teks kutipan merah).
Kedekatan
Kedekatan memisahkan elemen satu
sama lain dan menciptakan sub-hierarki. Di dalam sebuah halaman bisa terdapat
widget yang dipisahkan satu sama lain oleh ruang; di dalam widget tersebut
terdapat hierarki judul, subjudul, dan konten baru. Kedekatan juga merupakan
cara tercepat untuk mengaitkan konten serupa. Pada contoh di bawah, mudah
menemukan jenis konten tertentu hanya dengan kedekatannya satu sama lain.
Situs Tuts+ melakukan ini dengan
sangat baik (bukan untuk memuji kami!). Kolom "konten" kiri
dipisahkan dengan jelas di dekat ruang widget sidebar. Selain itu, metadata
untuk posting blog tertentu ditempatkan sangat dekat dengan posting itu dan
lebih jauh dari yang lain, memperkuat rasa "milik".
Kepadatan dan ruang putih
Pengepakan barang yang padat di
suatu tempat membuatnya terasa "berat" dan berantakan; ketika elemen
ditempatkan terlalu jauh, mereka bisa kehilangan hubungan di antara mereka.
Saat sebuah halaman didesain "tepat", mata akan dengan mudah
mengenali kapan elemen terkait dan kapan tidak.
Dengan memberi spasi pada elemen
dan mempertahankan banyak ruang kosong pada halaman, tata letak ini memudahkan
orang untuk menavigasi dan menemukan kotak konten yang kecil dan padat.
Gaya dan tekstur
Mungkin alat yang paling terbuka
di Toolbox Hirarki, gaya dapat digunakan untuk memberikan bentuk hierarki yang
mencakup dan melampaui alat lainnya. Misalnya: latar belakang abu-abu datar
akan "terasa" berbeda dengan latar belakang bertekstur aspal. Gaya atau
kepribadian yang diberikan oleh desainer ini secara alami akan berperan dalam
bagaimana hubungan visual yang berbeda dibuat.
Perlu disebutkan bahwa penataan
gaya juga merupakan salah satu alat paling berbahaya yang dapat digunakan oleh
seorang desainer. Seperti seorang tukang kayu memotong jarinya pada gergaji
pita, seorang desainer dapat dengan mudah membodohi orang dengan menekankan
elemen tertentu melalui gaya. Bayangkan elemen situs yang sangat bertekstur dan
berpola yang menuntut begitu banyak perhatian sehingga mengalihkan perhatian
daripada menginformasikan. Ide yang sama meluas ke font, tombol, tab, dan
elemen lainnya. Pertahankan pengaruh pada keseluruhan desain saat Anda memilih
untuk menambahkan gaya dan polesan tambahan pada suatu elemen.
Situs Jeff Finley melakukan
pekerjaan yang baik dalam menggabungkan banyak alat yang kita diskusikan di
sini, tetapi penggunaan elemen gaya orisinalnya di atas umpan UI standar adalah
yang memberi seluruh desain rasa hierarki yang disengaja. Jeff berhasil
menambahkan bakat yang cukup untuk membuat situsnya terasa pribadi tanpa
berlebihan.
Hirarki yang gagal
Hierarki visual yang baik bukan tentang grafik liar
dan gila atau filter Photoshop terbaru, tetapi tentang mengatur informasi
dengan cara yang membuatnya dapat digunakan, diakses, dan logis bagi pengunjung
situs harian.
Seperti yang baru saja saya
sarankan di bagian terakhir, penting untuk diperhatikan bahwa hierarki dapat
digunakan untuk kebaikan dan kejahatan. Pikirkan semua iklan Flash yang
mengganggu, pop-up, spanduk gemerlap, dll. bahwa web telah terganggu selama
bertahun-tahun! Meskipun iklan ini mendapat perhatian, iklan tersebut pada
akhirnya mengecewakan pemilik dan pemirsa situs dengan merusak hierarki visual
di dalam situs. Demikian pula, jika seorang desainer membangun hierarki visual
sedemikian rupa sehingga informasi kunci tertentu hampir tidak mungkin
ditemukan, desainer tersebut akan gagal. Hierarki visual yang baik bukanlah
tentang grafik yang liar dan gila atau filter photoshop terbaru, ini tentang
mengatur informasi dengan cara yang membuatnya dapat digunakan,
Mengapa hierarki sangat relevan bagi desainer web
"Desainer dapat menciptakan kenormalan dari
kekacauan; mereka dapat mengkomunikasikan ide dengan jelas melalui pengaturan
dan manipulasi kata dan gambar." -Jeffery Veen, Seni dan Ilmu Desain Web
Jeffrey Veen menulis kata-kata
itu pada tahun 2001, tetapi kata-kata itu masih memegang banyak kekuatan saat
ini di mana "kelebihan informasi" tampaknya menjadi hal yang biasa.
Sebagai manusia, kami selalu memiliki rasa organisasi visual yang tajam. Namun,
sebagai masyarakat kita telah dibombardir dengan tsunami informasi visual yang
nyata dalam dua dekade terakhir; akibatnya, orang-orang saat ini sangat peka terhadap
hierarki visual. Ini terutama terjadi di web di mana penelitian telah
menunjukkan bahwa peselancar biasa telah belajar untuk "memindai"
konten; secara otomatis mencari informasi yang relevan dengan minat Anda dan
membuang atau membuang informasi yang tidak relevan.
Karena itu, menjadi master
hierarki visual bukanlah pilihan, itu wajib. Karena platform penjelajahan
Internet biasa berkembang dari monitor tradisional ke ponsel, tablet, dan
bahkan televisi, semakin penting bagi kami untuk menggunakan sistem visual yang
kuat dan jelas untuk berkomunikasi dengan peselancar Internet.
Latihan untuk menguji hierarki visual
Sebagai penutup, saya ingin
mengakhiri dengan latihan yang sangat sederhana. Sebagai contoh, kami akan
menggunakan situs web yang sering Anda kunjungi, atau proyek yang baru saja
Anda kerjakan; Latihannya seperti ini:
1. Cantumkan
informasi penting yang kemungkinan besar dicari pengunjung.
2. Tetapkan
nilai (1-10) sesuai kepentingannya bagi rata-rata pengunjung.
3. Sekarang
lihat tata letak yang sebenarnya lagi.
4. Tetapkan
nilai (1-10) sesuai dengan kepentingan visual aktual seperti yang Anda lihat di
tata letak langsung.
5. Pertimbangkan
Ini: Apakah kepentingan yang diharapkan cocok dengan kepentingan desain yang
sebenarnya?
Dalam kebanyakan kasus, jawabannya
akan menyertakan nuansa "tidak". Ada banyak alasan untuk itu:
permintaan pelanggan, desainer yang tidak berpengalaman, desain panitia, atau
ratusan alasan lain yang mungkin pernah Anda baca. Heck, dalam beberapa kasus,
perancang mungkin ingin menyesatkan pemirsa (pikirkan situs "gratis"
yang mencoba mengarahkan pengguna ke konten berbayar). Apa pun alasannya,
memahami hierarki visual dan mencoba menafsirkannya adalah salah satu cara
untuk meningkatkan tampilan desain web dari sudut pandang baru. Semoga itu
membantu Anda meningkatkan pekerjaan Anda sendiri juga!