Tingkatkan UX Anda dengan Hirarki Visual yang Jelas

Konsep hierarki visual telah diterapkan dalam desain sejak internet adalah fantasi yang jauh, dan itu sama pentingnya dalam desain produk modern seperti pada puncak iklan cetak.

Hirarki visual menentukan urutan di mana orang mengambil dan memproses informasi pada halaman, terlepas dari apakah itu digital atau cetak. Ini adalah bagian penting dalam menciptakan pengalaman pengguna yang optimal.

Sederhananya, rasa hierarki visual yang jelas memandu orang menuju konten atau tindakan penting. Dalam iklan cetak, ini akan menjadi tali pengikat, sedangkan dalam produk digital, itu bisa berupa pesan merek atau ajakan bertindak utama.

Ini adalah cara yang sangat berguna untuk menciptakan pengalaman pelanggan yang teratur dan terarah sambil meningkatkan peluang untuk mencapai hasil yang strategis.

Berikut adalah beberapa langkah yang dapat dilakukan desainer UX untuk mencapai pengertian hierarki visual yang jelas dalam produk digital dan membawa pengalaman pelanggan ke tingkat berikutnya.

Tentukan Tujuan UX dan Merek

Menggunakan berbagai metode, banyak tim produk sudah menentukan tujuan UX untuk setiap bagian produk mereka.

Membentuk definisi tujuan UX dengan memenuhi kriteria untuk metodologi SMART ( Spesific, Measurable, A ctionable , R elevant, T rackable ) adalah salah satu cara populer untuk melakukan ini. Ada artikel bagus tentang itu di sini.

Sama pentingnya adalah tujuan merek. Ini mencerminkan tujuan bisnis yang menyeluruh, baik dari perspektif merek maupun komersial. Contoh tujuan merek untuk laman landas layanan otomotif adalah: a) menetapkan merek sebagai layanan premium, dan b) mendorong penelusuran mobil.

Cara termudah dan paling efektif untuk mendokumentasikan UX dan tujuan merek dari berbagai fase perjalanan pelanggan adalah dengan menjalankan lokakarya hierarki visual kolaboratif.

Menggunakan alat kolaborasi kanvas luas seperti Milanote, atau bahkan Sketch, buat layar prototipe dalam urutan kronologis yang luas. Undang praktisi utama ke pertemuan online atau fisik, pastikan ada perwakilan dari perspektif UX dan merek.

Kemudian, bagikan layar (atau sambungkan ke monitor), dan mulailah membuat anotasi!

Ini memulai proses mengidentifikasi UX dan tujuan merek untuk setiap bagian dari pengalaman pelanggan dan menggerakkan alur kerja strategis yang dapat dimanfaatkan selama sisa proses desain.

Peringkat Tindakan dan Konten untuk Hirarki Visual yang Jelas

Sekarang setelah UX dan tujuan merek ada, saatnya untuk menentukan hierarki visual yang sesuai dari setiap tindakan atau bagian dari konten dan dokumen yang untuk referensi selama pekerjaan desain berikutnya.

Pertama-tama, taksonomi diperlukan. Sebaiknya gunakan skala 1 hingga 3—1 untuk yang paling penting, 3 untuk yang paling kecil.

Menggunakan format kanvas luas yang diprofilkan sebelumnya, mulailah membuat anotasi tata letak prototipe secara kolaboratif.

Dalam contoh ini, ada tujuan UX " Saya ingin mempelajari lebih lanjut tentang layanan merek ini untuk menentukan apakah itu sesuai dengan anggaran, kebutuhan, dan preferensi saya ." Tujuan merek adalah untuk a) menetapkan merek sebagai layanan premium, dan b) mendorong pencarian mobil.

Berdasarkan hal ini, pesan merek Temukan mobil ideal Anda dari 500+ mobil telah diberi hierarki 1, seperti formulir dan CTA yang menyertainya.

Terlepas dari pentingnya pengalaman pelanggan yang menyeluruh, logo (dan navigasi) yang sebenarnya telah diberi nilai 2, karena tidak berperan besar dalam memenuhi tujuan UX dan merek.

Konten pendukung ditandai dengan 3, yang mungkin tampak berlawanan dengan intuisi. Namun, mengikuti alur naratif yang mulai terbentuk, dengan pesan merek dan fungsi "memulai" sebagai fokus utama, kemudian logo dan navigasi untuk menetapkan identitas dan struktur premium layanan, kemudian konten pendukung untuk meyakinkan, memberikan konteks, dan menginspirasi pelanggan.

Saat desainer menjadi terbiasa mempertimbangkan hierarki visual, mudah untuk mulai menghargai kemungkinan naratif yang diungkapkannya, menambahkan kedalaman nyata ke antarmuka pengguna dan cerita yang mereka ceritakan.

Bangun Hirarki Visual ke dalam Sistem Desain

Sekarang setelah tujuan dan peringkat hierarki visual ditetapkan, bahasa visual yang akan menghidupkannya dapat dibuat. Mari kita asumsikan bahwa sudah ada sistem desain (jika tidak, ini harus dilakukan terlebih dahulu!) dan berbagai elemen UI telah dirancang.

Tempat pertama untuk memulai adalah komposisi—tata letak template yang diperlukan. Pertimbangkan di mana elemen berperingkat tinggi akan muncul (seperti yang dijelaskan sebelumnya, itu tidak selalu yang paling diharapkan). Beberapa variasi mungkin diperlukan untuk memenuhi berbagai skenario. Untuk memastikan tidak ada yang terlewatkan di kemudian hari dalam proyek, desainer harus meluangkan waktu untuk membuatnya sekarang.

Kemudian dalam proses desain, sejumlah contoh maket dapat dimasukkan dalam dokumen sistem desain, dengan simbol langsung dari pola UI (sehingga desainer yang mengerjakan proyek memiliki versi terbaru).

Setelah gagasan luas tentang komposisi ditetapkan, varian elemen UI dapat mulai dibuat.

Ambil header halaman yang sederhana. Dalam contoh ini dari proyek terbaru untuk konsultan SDM, ada tiga varian dalam sistem desain untuk memenuhi berbagai tingkatan hierarki visual.

Desainer dapat memperluas ini dengan blok bangunan UI mereka. Misalnya, pada proyek terbaru untuk aplikasi rekrutmen populer, kedalaman digunakan untuk membedakan panel konten — semakin besar kedalamannya, semakin tinggi hierarki visualnya.

Hirarki visual dapat dirancang ke dalam hampir setiap elemen bahasa visual merek: komposisi, tipografi, kedalaman, citra, ikonografi, dan nada suara. Semakin dalam desainnya, semakin kohesif dan fokus pengalaman pelanggan nantinya.

Bungkus

Memasukkan alur kerja hierarki visual ke dalam proses desain menghasilkan pengalaman pengguna yang jauh lebih baik. Ini dilakukan dengan memberi desainer sarana untuk menetapkan peringkat ke berbagai jenis konten, menghasilkan antarmuka pengguna yang tidak hanya terasa teratur dan intuitif tetapi juga memungkinkan tujuan merek inti terpenuhi.

Hirarki visual yang jelas tidak hanya meningkatkan UX Anda, tetapi juga menetapkan alur kerja berkelanjutan yang memberikan proses desain fokus strategis—penting dalam lingkungan desain produk modern.

Bacaan lebih lanjut di Blog Desain Toptal:

• Prinsip Desain: Pengantar Hirarki
• Praktik Terbaik Desain UI dan Kesalahan Umum
• Menjelajahi Prinsip Desain Gestalt
• Panduan Komprehensif untuk Arsitektur Informasi
• Tingkatkan UX Anda dengan Prinsip Desain Interaksi yang Sukses Ini