Memahami Hirarki Visual dalam Desain Web

Hirarki visual adalah salah satu prinsip terpenting di balik desain web yang efektif. Artikel ini akan memeriksa mengapa mengembangkan hirarki visual sangat penting di web, teori di baliknya, dan bagaimana Anda dapat menggunakan beberapa latihan yang sangat mendasar dalam desain Anda sendiri untuk menerapkan prinsip-prinsip ini dalam praktik.

Desain = Komunikasi

Pada intinya, desain adalah semua tentang komunikasi visual: Untuk menjadi desainer yang efektif, Anda harus dapat mengkomunikasikan ide-ide Anda dengan jelas kepada pemirsa atau kehilangan perhatian mereka. Orang-orang berubah-ubah; jika Anda memberi mereka blok informasi yang sangat besar, kemungkinan 99 dari 100 orang tidak akan mau membacanya. Kenapa ? 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-orang bukan apa yang Anda sebut 'pengamat kesempatan yang sama'. Daripada menerima informasi visual dan memprosesnya secara merata, orang-orang mengatur apa yang mereka lihat sebagai 'hubungan visual'. Mari kita perhatikan gambar dua lingkaran biasa berikut:

Kemungkinannya adalah, Anda tidak melihat 'dua lingkaran'; Sebaliknya, Anda melihat 'satu lingkaran hitam dan satu lingkaran merah kecil'.

Alasannya cukup sederhana: Ketika disajikan dengan sesuatu yang sederhana seperti dua lingkaran, seseorang tidak akan hanya melihat dua lingkaran biasa, mereka akan menemukan cara untuk membedakan antara keduanya. Satu lingkaran mungkin lebih besar, atau lebih kecil, atau berwarna, atau variasi perbedaan lainnya. Perbedaan-perbedaan ini memungkinkan kita untuk membedakan antara objek dan memberi mereka makna yang unik.

Sekarang mari kita lihat gambar yang lebih kompleks:

Kompleksitas yang ditambahkan sebenarnya memperkuat kembali keinginan kita untuk 'mengklasifikasikan' objek-objek dalam hal hubungan. Persamaan dan perbedaan menjadi bingkai yang kita lihat bentuknya. Perbedaan skala menunjukkan bahwa satu objek lebih dekat dengan kita daripada yang lain atau yang satu lebih dominan daripada yang lain; Variasi warna mungkin menunjukkan bahwa satu objek memiliki kepribadian unik yang membedakannya dari objek lain. Banyak informasi dapat disampaikan hanya dalam satu gambar dengan menggunakan beberapa alat yang sangat sederhana.

... Memahami bahwa orang akan melihat desain kami dalam hal hubungan sangat penting untuk menjadi desainer yang lebih efektif.

Mari kita ambil contoh ini kembali ke desain web; Karena desain web adalah tentang mengkomunikasikan informasi visual, memahami bahwa orang akan melihat desain kita dalam hal hubungan sangat penting untuk menjadi desainer yang lebih efektif. Sementara itu mungkin tampak seperti itu sudah cukup untuk hanya membagikan informasi, web designer, tugas kita adalah untuk memecah informasi mentah menjadi potongan-potongan kecil lezat informasi visual relevan yang mudah pada mata, dan lebih penting lagi, efektif mengkomunikasikan pesan dibalik halaman web.

The Dawn of Hierarchy

Ada seratus penjelasan mengapa orang melihat dari segi hubungan; Jika Anda melacaknya kembali secara antropologis, Anda mungkin menyimpulkan bahwa mentalitas pemburu-pengumpul memaksa manusia pada satu titik untuk mengakui bahwa melihat hubungan adalah keterampilan bertahan hidup.

Lihat, bahkan manusia prasejarah memiliki rasa hormat yang sehat untuk kontras visual.

Mungkin penjelasan yang lebih praktis adalah bahwa cara otak kita mengkategorikan informasi: pengelompokan elemen visual yang sama dan mengorganisasikannya ke dalam pola yang bermakna adalah melekat pada sifat manusia kita seperti makan atau minum. Apa pun itu, faktanya adalah bahwa meskipun dalam bentuknya yang paling mendasar, informasi yang diorganisasikan dengan hierarki selalu lebih efektif dalam berkomunikasi daripada informasi yang tidak terorganisir.

Pertimbangkan gambar dua blok teks berikut:

Dalam contoh di atas, kita melihat bentuk paling mendasar dari sistem hierarki visual yang diterapkan pada teks. Informasi dalam masing-masing dari dua contoh ini tidak berbeda, tetapi bagaimana itu dipecah secara dramatis mengubah cara pembaca akan melihatnya dan menerimanya. Ketika kita berbicara tentang hierarki visual dalam hal tipografi, inilah yang kami maksud. Kedekatan, skala, dan kesamaan format teks memungkinkan pembaca untuk mengatur contoh yang lebih rendah ke dalam judul dan paragraf. Hirarki memberi judul lebih banyak makna daripada informasi lainnya, dan membuatnya lebih mudah untuk dipindai.

Baiklah, jadi ini semua hal yang sangat mendasar, bukan? Mari selami beberapa contoh yang lebih dalam tentang bagaimana Anda dapat menerapkan prinsip yang sangat mendasar ini untuk beberapa desain yang sangat canggih:

The Hierarchist's Toolbox

Memahami bahwa hierarki visual itu penting itu bagus dan bagus, tetapi bagaimana sebenarnya seorang desainer menciptakannya? 'Alat' yang akan kita lihat adalah sesederhana perkakas tukang kayu - palu, paku, gergaji, dll. - Apa yang Anda lakukan dengan mereka adalah yang terpenting!

Ukuran

Objek yang lebih besar membutuhkan perhatian lebih. Menggunakan ukuran sebagai alat hierarkis adalah cara yang efektif untuk membimbing 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. Elemen terbesar harus menjadi yang paling penting dalam banyak kasus; elemen terkecil harus menjadi yang paling tidak penting.

Penggunaan BIG, tipe berani menambah tingkat ketertiban pada desain yang semrawut ini. Mata secara alami harus bergerak dari elemen besar ke elemen kecil.

Warna

Warna adalah alat yang menarik karena dapat berfungsi baik sebagai alat organisasi maupun sebagai alat kepribadian. Tebal, warna pada elemen tertentu dari situs kontras akan menuntut perhatian (seperti dengan tombol atau pesan kesalahan atau hyperlink). Ketika digunakan sebagai alat kepribadian, warna dapat melampaui jenis hierarki yang lebih canggih; Menggunakan warna yang subur dan nyaman dapat membawa daya tarik emosional ke sebuah halaman. Warna dapat memengaruhi segalanya, mulai dari merek situs web (yaitu: CocaCola Red) hingga simbolisme (yaitu: dingin, warna lemah). Aplikasi warna yang canggih bahkan dapat digunakan untuk 'mengklasifikasikan' informasi dalam hierarki, seperti dalam contoh berikut:

Situs Spectra Viewer menggunakan warna untuk mewakili berbagai kategori berita, sehingga mudah untuk menemukan jenis informasi tertentu berdasarkan pada tombol warna.

Kontras

Kontras menunjukkan relatif penting. Pergeseran dramatis dalam ukuran teks atau warna akan memberikan 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 inti halaman dari footer.

Kontras antara bagian terang yang lapang header dan footer gelap, bersahaja menciptakan hirarki berbeda informasi.

Alignment

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 yang akan dikaitkan dengan profil, akun, keranjang belanja, dll., Itu memberikan semua tempat di daerah itu rasa 'resmi'. Penyelarasan juga dapat memancing minat jika digunakan dengan cara yang unik, seperti dalam contoh berikut:

Stuff Template menggunakan sistem penyelarasan horizontal yang unik untuk memisahkan merek dan navigasi dari konten posting blog.

Flex Template menggunakan tata letak yang diilhami kisi untuk mengembangkan minat visual serta hierarki visual yang didorong oleh taksonomi.

Pengulangan

Pengulangan memberikan makna relatif ke elemen; Jika semua teks 'paragraf' berwarna abu-abu, ketika pengguna melihat blok teks abu-abu baru, ia dapat menganggapnya sebagai paragraf dasar lain; ketika pengguna yang sama menemukan tautan biru atau judul hitam, ia dapat dengan aman menganggapnya berbeda dan unik dari teks abu-abu.

Situs Virgin menciptakan elemen berulang seperti teks paragraf, kemudian memecah pengulangan ketika ingin menarik perhatian (seperti teks kutipan merah).

kedekatan

Kedekatan memisahkan elemen dari satu sama lain dan menciptakan sub-hierarki. Di dalam halaman mungkin ada widget yang dipisahkan satu sama lain oleh ruang; dalam widget tersebut ada hierarki judul, subtitle, dan konten yang baru. Kedekatan juga merupakan cara tercepat untuk mengaitkan konten serupa. Dalam contoh berikut, mudah untuk menemukan jenis konten tertentu hanya berdasarkan kedekatannya satu sama lain.

Situs Tuts + benar-benar melakukan ini dengan sangat baik (bukan untuk membunyikan klakson kami sendiri!). Kolom 'konten' kiri jelas dipisahkan dalam jarak dari ruang widget bilah sisi. Selanjutnya, meta-data dalam posting blog tertentu ditempatkan di dekat posting itu dan lebih jauh dari posting lain, memperkuat rasa 'milik'.

Kepadatan dan Ruang Putih

Mengemas elemen secara padat ke dalam ruang membuatnya terasa 'berat' dan berantakan; Ketika elemen ditempatkan terlalu banyak, mereka dapat kehilangan hubungan satu sama lain. Ketika halaman dirancang 'tepat', mata akan dengan mudah mengenali kapan elemen terkait dan kapan mereka tidak.

Dengan menjiplak elemen dan menyimpan banyak ruang kosong pada halaman, desain ini memudahkan orang untuk berkeliaran dan menemukan kotak konten kecil yang padat.

Gaya dan Tekstur

Mungkin alat yang paling terbuka di Hierarchists Toolbox, style dapat digunakan untuk memberikan bentuk hierarki yang mencakup dan melampaui alat lainnya. Misalnya: latar belakang abu-abu yang datar akan 'terasa' berbeda dari latar belakang bertekstur aspal. Gaya atau kepribadian yang diberikan oleh perancang ini secara alami akan memainkan peran dalam bagaimana berbagai hubungan visual dibuat.

Perlu disebutkan bahwa gaya juga merupakan salah satu alat paling berbahaya yang dapat digunakan oleh seorang desainer. Sama seperti tukang kayu memotong jarinya pada gergaji pita, seorang desainer dapat dengan mudah menyesatkan orang dengan terlalu menekankan elemen-elemen tertentu melalui gaya. Bayangkan elemen situs yang sangat bertekstur, dirancang dengan sangat banyak yang menuntut begitu banyak perhatian sehingga mengalihkan perhatian daripada memberi informasi. Ide yang sama ini meluas ke tipografi, tombol, tab, dan elemen lainnya. Pertimbangkan dampak pada desain keseluruhan ketika Anda memilih untuk menambah gaya ekstra dan memoles elemen.

Situs Jeff Finley melakukan pekerjaan yang hebat dalam menggabungkan banyak alat yang kami bahas di sini, tetapi penggunaannya atas elemen-elemen asli pada makanan ternak UI standar adalah apa yang memberi seluruh desain rasa hirarki yang disengaja. Jeff berhasil menambahkan gaya yang cukup untuk membuat situsnya terasa pribadi tanpa berlebihan.

Hirarki gagal

Hirarki visual yang baik bukan tentang grafik liar dan gila atau filter photoshop terbaru, ini tentang mengatur informasi dengan cara yang dapat digunakan, diakses, dan logis untuk pengunjung situs sehari-hari.

Seperti yang saya sarankan di bagian terakhir, penting untuk dicatat bahwa hierarki dapat digunakan untuk kebaikan dan kejahatan. Pikirkan semua iklan Flash yang mengganggu, jendela sembulan, spanduk berkilauan, dll. Yang telah diganggu web selama bertahun-tahun! Sementara iklan ini berhasil menarik perhatian, mereka akhirnya gagal pada pemilik situs dan pemirsa dengan memecah hierarki visual dalam sebuah situs. Demikian pula, jika seorang desainer membangun hirarki visual seperti potongan-potongan informasi tertentu kunci yang hampir mustahil untuk menemukan, desainer akan gagal di tugasnya. Hirarki visual yang baik bukan tentang liar dan gila grafis atau terbaru photoshop filter, ini tentang bagaimana mengatur informasi dalam suatu cara yang dapat digunakan, dapat diakses dan logis untuk pengunjung situs sehari-hari.

Mengapa Hierarki Sangat Relevan dengan Desainer Web

"Desainer dapat membuat normal dari kekacauan; mereka dapat berkomunikasi dengan jelas ide-ide melalui penyelenggaraan dan memanipulasi kata-kata dan gambar." — Jeffery Veen, Seni dan Ilmu Desain Web

Jeffrey Veen menulis kata-kata itu pada tahun 2001, tetapi mereka masih memegang banyak kekuatan hingga saat ini di mana 'informasi yang berlebihan' tampaknya menjadi hal yang biasa. Sebagai orang, kami telah selalu memiliki rasa yang tajam untuk organisasi visual. Namun, sebagai masyarakat kita sudah telah menjadi barraged dengan tsunami benar-benar informasi visual dalam dasawarsa terakhir beberapa; Akibatnya, orang-orang saat ini adalah hiper sensitif terhadap visual hirarki. Ini khususnya terjadi di web di mana penelitian telah membuktikan bahwa peselancar web biasa telah belajar untuk 'memindai' konten secara bawaan; secara otomatis mencari informasi yang relevan dengan minat mereka dan membuang / mengabaikan informasi yang tidak.

Karena itu, menjadi master hirarki visual bukan pilihan, itu wajib. Saat platform selancar web biasa berkembang dari monitor tradisional ke ponsel, tablet, bahkan televisi, menjadi semakin penting bagi kami untuk menggunakan sistem visual yang kuat dan jelas untuk berkomunikasi dengan peselancar web.

Latihan untuk Menguji Hirarki Visual

Untuk menyimpulkan, saya ingin berakhir 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. Daftar informasi kunci poin yang pengunjung mungkin mencari.
2. Tetapkan nilai (1-10) sesuai dengan kepentingannya bagi pengunjung rata-rata.
3. Sekarang, lihatlah desain sebenarnya lagi.
4. Tetapkan nilai (1-10) sesuai dengan kepentingan visual aktual seperti yang Anda lihat dalam desain langsung.
5. Pertimbangkan: Apakah pentingnya diharapkan cocok dengan pentingnya dirancang sebenarnya?

Dalam kebanyakan kasus, jawabannya akan mencakup nuansa 'tidak'. Ada banyak alasan untuk ini - tuntutan klien, desainer berpengalaman, desain oleh Komite - atau seratus alasan lain bahwa Anda mungkin telah membaca. Heck, dalam beberapa kasus, perancang dapat menyesatkan penampil (mempertimbangkan situs "bebas" yang mencoba untuk memandu pengguna ke konten dibayar). Apapun alasannya, memahami hirarki visual dan mencoba untuk menafsirkan itu adalah cara untuk meningkatkan cara bahwa Anda melihat desain web dalam terang yang baru. Semoga ini akan membantu menginformasikan pekerjaan Anda juga!