Prinsip Desain – Pengantar Hirarki Visual

Seiring dengan perubahan teknologi dan antarmuka pengguna, kebutuhan akan keterampilan desain dalam desain visual terus berkembang. Dengan contoh baru dari antarmuka pengguna khas yang muncul setiap tahun, apakah pemahaman mendasar kita tentang hierarki visual, persepsi, dan komposisi berubah?

Konsep persepsi visual modern berakar tidak hanya dalam sains tetapi juga dalam psikologi. Akibatnya, terlepas dari antarmuka pengguna yang terus berubah, cara kita melihat dan memahami informasi visual akan tetap sama. Mempertimbangkan hal ini, mungkinkah desain interaksi kontemporer meningkatkan fondasi komposisi grafis dan hierarki visual?

Aturan dasar persepsi visual sangat penting untuk setiap desain visual, karena mereka menginstruksikan bagaimana informasi dengan makna yang tertanam dapat disampaikan secepat mungkin. Namun, karena desain visual adalah sepupu dekat dari desain grafis, standar ini ditetapkan untuk media cetak, dan belum didefinisikan ulang untuk digital.

Sesuatu seperti "sekolah Bauhaus digital" yang berpotensi membangun prinsip-prinsip desain baru belum terbentuk. Saat orang mengalami UI dengan cara yang sama sekali berbeda dari cetak, aturan hierarki dan komposisi visual tidak hanya ketinggalan zaman, tetapi juga runtuh di antarmuka pengguna.

Untuk sebagian besar, desainer masih cenderung memperlakukan layar sebagai objek dua dimensi yang statis, dan tantangan bagi desainer interaktif adalah berinovasi lebih dari sekadar menerapkan format cetak ke proyek media digital mereka. Tetapi sebelum desain baru dapat berkembang, pemahaman mendasar tentang hierarki visual, persepsi, dan komposisi perlu ditinjau kembali.

Hirarki Visual: Pemahaman Baru tentang Komposisi Visual untuk Antarmuka Interaktif

Apa itu hierarki visual, dan mengapa itu penting? Hirarki visual adalah penataan konten dalam komposisi untuk mengkomunikasikan informasi dan menyampaikan makna secara efektif. Hirarki visual mengarahkan pemirsa ke informasi terpenting terlebih dahulu, lalu ke konten sekunder.

Dibentuk melalui penggunaan ukuran, warna, bentuk, jarak, proporsi, dan orientasi yang tepat, makna, konsep, dan suasana suatu komposisi disampaikan melalui penggunaan elemen grafis yang kreatif yang menentukan hierarki visual.

Hirarki visual sangat penting untuk setiap jenis desain visual, baik itu laman landas yang perlu memandu mata pengunjung atau navigasi UI seluler. Pemahaman pengguna setiap elemen didasarkan pada elemen lain dalam komposisi dan konteksnya. Elemen komposisi diperlakukan sesuai untuk membentuk hubungan visual dan dengan demikian membangun hierarki visual di seluruh desain.

Warna dalam Hirarki Visual

Banyak aturan hierarki visual mungkin tampak cukup sederhana dan bahkan dangkal, tetapi mereka merupakan fondasi penting untuk desain visual yang baik. Misalnya, warna adalah elemen kreatif yang paling berpengaruh dalam desain visual.

Pertimbangkan konotasi langsung dari palang merah versus yang monokrom. Hampir secara universal, palang merah menandakan netralitas dan perlindungan. Begitulah potensi komunikasi langsung dengan penggunaan warna. Warna juga sering digunakan untuk mengidentifikasi kelompok, seperti ketika satu palang merah di antara tiga yang monokromatik entah bagaimana menonjol sebagai lebih signifikan.

Warna yang cerah dan kaya lebih menonjol daripada warna yang diredam dan karenanya memiliki dampak visual yang lebih besar. Dalam sebuah antarmuka, warna dapat digunakan untuk menghadirkan rasa struktur dan menunjukkan interaksi yang tersedia. Satu warna dalam antarmuka monokromatik dapat membedakan pilihan, dan bahkan menyarankan apa yang ada di luar tombol yang diarahkan pengguna.

Warna juga disemai dengan makna dan emosi yang dapat mengirimkan informasi eksplisit ke alam bawah sadar pemirsa. Dalam branding, banyak penelitian psikologis telah dilakukan pada warna karena menciptakan respon mendalam pada konsumen sebelum mereka memiliki interaksi yang berarti dengan sebuah merek. Misalnya, warna biru sering dianggap dapat diandalkan, aman, dan menenangkan, sedangkan warna merah merangsang dan diketahui dapat meningkatkan detak jantung orang. Namun, warna mungkin memiliki arti yang berbeda tergantung pada budaya.

Contoh yang baik dari penggunaan warna struktural yang bermakna dalam desain web adalah situs The Names for Change. Situs segera mengkomunikasikan strukturnya melalui penggunaan warna; organisasi tersebar secara default tetapi dapat diatur ulang berdasarkan topik dan/atau warna.

Namun, nada yang dipilih membantu mengatasi salah satu potensi kesulitan untuk makna situs. Penggalangan dana untuk barang-barang sehari-hari seperti kaus kaki atau tampon tidak cukup menarik untuk dijual sendiri, sehingga nada grafis radikal dari situs meningkatkan nilai persepsi barang-barang sehari-hari sambil membangun struktur organisasi dasar yang diperlukan.

Ukuran dalam Hirarki Visual

Mari kita bayangkan ilustrasi seekor burung besar duduk di sebelah tiga burung yang lebih kecil. Tanpa informasi lebih lanjut, grafik sederhana ini segera mengomunikasikan hubungan antara elemen-elemennya: orang tua dan anak-anak, yang secara kolektif mengomunikasikan sebuah keluarga.

Dalam desain grafis tradisional, strategi tipikal adalah membuat elemen terpenting menjadi yang terbesar, dan kemudian mengurangi elemen secara hierarkis. Ukuran menetapkan hierarki visual karena elemen terbesar menarik perhatian terlebih dahulu, dan karena itu tampaknya menjadi yang paling penting.

Ukuran font yang berbeda juga sering digunakan di badan teks untuk menunjukkan perbedaan yang signifikan, seperti header, bagian, dan kutipan. Konten sekunder, seperti keterangan gambar, biasanya lebih kecil agar tidak bersaing dengan isi teks utama.

Pertimbangkan beberapa antarmuka visual yang paling banyak digunakan, seperti Instagram. Tidak ada apa pun di layar yang menandingi gambar dan video—mereka menempati lebih dari 60 persen sebagian besar layar. Tujuan dari UI adalah langsung.

Contoh yang mengubah struktur khas hierarki visual dalam desain web adalah situs portofolio untuk studio seni/desain Ro/Lu. Situs mereka yang tidak biasa mungkin bukan yang paling intuitif, tetapi menantang pengaturan visual dari portofolio materi iklan online yang khas. Karena pengacakan yang disengaja dari beragam proyek mereka, proyek yang berbeda muncul sebagai dominan setiap kali pengunjung datang ke situs, yang membuat setiap kunjungan menjadi unik dan menarik.

Pekerjaan tidak diatur secara hierarkis dalam portofolio sebagian besar studio desain kreatif karena setiap proyek unik dan dianggap sama pentingnya. Desain situs Ro/Lu menciptakan komposisi dinamis dengan berbagai tingkat minat pada setiap kunjungan dan mendorong pemirsa untuk menyelidiki portofolio studio yang luas. Akibatnya, sifat eklektik, interdisipliner dari studio desain diwakili oleh tampilan konten secara acak.

Penyelarasan dalam Hirarki Visual

Penjajaran dalam hierarki visual mengomunikasikan rasa keteraturan dengan menghubungkan elemen secara spasial. Seperti bab dalam novel non-linier, bayangkan sebuah persegi berdiri di luar garis dalam komposisi grafis. Ketika satu elemen merusak struktur yang sudah mapan, elemen itu menonjol dari komposisi dan dengan demikian mencapai makna relatif terhadap yang lain.

Sebuah komposisi yang kaku mungkin tampak stagnan dan tidak menarik secara visual kecuali sebuah elemen menonjol dari grid visual, yaitu dari rasa keteraturan. Misalignment, atau "breaking the grid," adalah kesempatan untuk memberikan elemen grafis bobot visual yang lebih. Konsep ini merupakan dasar hierarki visual dalam desain.

Menurut prinsip dalam desain visual tradisional, elemen yang ditempatkan di tengah bingkai tampak lebih signifikan. Misalnya, konten utama atau elemen antarmuka dapat diletakkan di tengah, sementara navigasi, menu, dan konten sekunder lainnya sering kali diletakkan di samping.

Tapi desainer perintis suka menantang status quo. Ketika desain interaktif menerapkan prinsip hierarki visual yang mendasar dan kemudian mendorong batas ke dalam komposisi visual yang inovatif, pengalaman baru yang menarik akan tercipta. Dengan menggunakan keselarasan yang berbeda, asosiasi dan makna baru dibuat antar elemen.

Misalnya, proyek DNA adalah situs yang menggunakan serangkaian hierarki yang terputus-putus untuk mengomunikasikan konstruksi kreatif album musisi. Struktur situsnya rumit, begitu pula dengan konstruksi albumnya.

Pertama, pengunjung diundang untuk mendengarkan musik dengan mengklik trek album, yang secara tradisional disejajarkan dalam format album. Namun, dengan mengizinkan pengunjung untuk menyelaraskan kembali elemen DNA dari situs, konsep album dikomunikasikan, tidak hanya sebagai rangkaian trek, tetapi sebagai konstruksi non-linier dari elemen yang terfragmentasi dari waktu ke waktu.

Bentuk dalam Hirarki Visual

Ketika berbicara tentang bentuk, mari kita pertimbangkan seberapa cepat bentuk hati yang sederhana mengomunikasikan potensi penggunaan 'suka' di sebagian besar UI jejaring sosial. Untuk menetapkan kepentingan atau kelompok, pertimbangkan satu hati di antara empat lingkaran. Bentuk-bentuk geometris adalah seperti warna-warna yang dalam bentuk-bentuk tersebut membawa konotasi tertentu yang memberikan kepribadian atau makna unsur-unsur.

Dalam desain interaktif, bentuk geometris sangat penting untuk komunikasi yang efisien karena mereka menyampaikan makna lebih cepat dan universal daripada teks. Alih-alih teks, ikon (simbol), yang seringkali berupa bentuk geometris sederhana, telah menjadi analog untuk sebagian besar sistem navigasi dan UI.

Tujuan di balik 'menyukai' gambar, mengunduh file, melakukan panggilan telepon, atau memeriksa pesan disampaikan secara sederhana dan langsung dengan ikon (bentuk geometris). Bentuk komunikasi visual yang efisien ini menjadi semakin penting di pasar global di mana produk digital sering melayani khalayak internasional yang luas dengan berbagai bahasa.

Untuk menyoroti berbagai mode interaksi antara media cetak dan digital tradisional, pertimbangkan perbedaan antara menelusuri bagian Seni melalui surat kabar yang sebenarnya, dan menggunakan ikon penelusuran di sebagian besar aplikasi. Sampai baru-baru ini, sebagian besar situs surat kabar menata halaman mereka sama seperti jika mereka dicetak, dan pengalaman memilah-milah konten menjadi canggung dan membingungkan.

Mendobrak tata letak web tradisional, situs web Signes du Quotidien menggunakan bentuk persegi dan lingkaran dasar dengan cara yang halus untuk menghadirkan hierarki visual unik yang memandu pengunjung melalui konten. Menu berada di tengah halaman, dan ketika pengunjung mengkliknya, empat titik berwarna yang mewakili empat bagian situs akan muncul. Pengunjung kemudian menyeret salah satu titik ke dalam kotak untuk menuju ke bagian tersebut.

Gerak dalam Hirarki Visual

Sebuah elemen bergerak akan membawa bobot visual yang lebih besar dalam sekelompok elemen stagnan, dan gerakan dalam hierarki visual adalah prinsip yang tidak mungkin digunakan dalam cetakan tetapi pasti dapat dimasukkan dalam toolkit desainer visual.

Apa yang bisa dikomunikasikan oleh gerakan selain terjemahan literal dari dirinya sendiri? Gerak sering digunakan dalam UI sebagai petunjuk bahwa suatu elemen dapat berinteraksi dengannya. Dapatkah penggunaan gerak didorong lebih jauh dan digunakan sebagai cara untuk mengkomunikasikan sesuatu yang unik? Jika hierarki visual tidak hanya tentang efisiensi komunikasi, tetapi juga tentang makna yang tertanam, bagaimana mungkin gerak dapat digunakan sebagai alat komunikasi visual yang penting?

Untuk situs I Remember, antarmuka utama (yang dianimasikan) langsung menonjol karena mengundang interaksi. Meskipun gerakan dan antarmuka adalah alat navigasi fungsional, desainer visual menggunakan potensi hilangnya elemen-elemen ini sebagai cara untuk mengomunikasikan misi yang mendasari situs web: penyakit Alzheimer. Sama seperti ingatan pasien yang memudar untuk siapa organisasi menggalang dana, situs web perlahan menghilang tanpa interaksi aktif.

Suara dalam Hirarki Informasi

Suara adalah alat lain yang tidak mungkin digunakan di media cetak, tetapi belum dikembangkan dalam prinsip-prinsip hierarki. Karena suara sepenuhnya non-visual, tidak ada aturan untuk dirujuk. Tapi suara juga bisa menjadi alat desain yang secara efektif mengomunikasikan konten, serta suasana hati atau makna. Elemen desain yang membawa suara tertentu dapat dikelompokkan relatif satu sama lain, dan elemen yang paling berani mungkin tampak paling penting atau mungkin menandakan pemisahan dari grup.

Kualitas suara yang melekat pada elemen harus dengan cepat mengidentifikasi, mengkarakterisasi, atau membantu struktur konten. Bagaimana suara yang kontras dengan elemen visual yang terkait dapat menyampaikan makna baru?

Suara itu sendiri bisa sangat kompleks sehingga mereka membentuk keseluruhan suasana hati atau pesan dari sebuah desain sebelum visual apa pun dirasakan. Sama seperti latar belakang warna-warni yang membentuk suasana hati, sebuah suara dapat berada di latar belakang, atau memberikan umpan balik di UI, seperti merespons ketukan tombol di ponsel. Prinsip tekniknya adalah dasar, tetapi kreativitas yang dapat digunakan adalah tempat keajaiban bisa terjadi.

Karena pentingnya karya kreatif kolektif, situs web yang dibuat untuk pameran grup seniman Jerman ZERO di Guggenheim menggunakan suara sebagai latar atmosfer, dan juga sebagai bentuk umpan balik saat menjelajahi situs. Nada dering tebal membentuk potongan yang mewakili awal tema, sementara proyek tersier mengklik di latar belakang.

Konsep Hirarki Visual

Hirarki visual adalah konsep yang lugas, dan memahami teori sebenarnya lebih mudah daripada kemampuan praktis seorang desainer untuk mengeksekusi komposisi yang terstruktur dengan baik. Namun demikian, menjadi inventif dalam media baru sambil mempertahankan desain yang baik itu menantang.

Media baru muncul setiap saat, dan situasi yang menantang tidak akan mereda — justru sebaliknya. Saat ini ada lebih dari 200 ukuran layar berbeda yang digunakan. Dan itu hanya yang dua dimensi. Pertama, itu adalah internet, browser desktop, kemudian datang ponsel dan tablet, dan sekarang kami pindah ke wilayah baru dengan teknologi seperti TV interaktif, IoT, perangkat yang dapat dikenakan, virtual, dan augmented reality.

Desain yang benar-benar mendorong batas-batas media digital masih dalam tahap awal. Semoga prinsip-prinsip hierarki visual dan desain yang baik akan mengikuti kemajuan teknologi yang pesat sehingga pengalaman kita tentang media digital tetap penuh makna dan kesenangan.

Bacaan lebih lanjut di Blog Desain Toptal:

• Tingkatkan UX Anda dengan Hirarki Visual yang Jelas
• Landasan Desain – Panduan Hirarki Visual (dengan Infografis)
• Prinsip Desain: Pengantar Hirarki
• Praktik Terbaik Desain UI untuk Kemampuan Pemindaian yang Lebih Baik
• Tingkatkan UX Anda dengan Prinsip Desain Interaksi yang Sukses Ini