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!