Cara Menggunakan Visual Hierarchy Untuk Membuat jelas dan mudah-ke-Baca Halaman Web

Visual hirarki adalah salah satu teknik desain yang dapat membuat atau menghancurkan halaman situs Web Anda. Pelajari cara menggunakannya dalam posting ini oleh Pamela Wilson.

A+ A-

Image of a cave-like basement with perspective facing wall, with stairs descending into the frame from the left and a door wide open in the middle

Bayangkan Anda telah memasukkan sebuah gua.

Mata Anda perlahan-lahan menyesuaikan diri dengan lingkungan Anda dan mulai membuat keluar bentuk dan bentuk di sekitar Anda.

Anda melihat tiga pintu: mereka sama dalam ukuran, dan semua jarak yang sama dari mana Anda berdiri. Bagaimana Anda memilih tempat untuk pergi dulu?

Anda frustrasi, karena Anda tidak memiliki informasi yang cukup untuk membuat keputusan. Semua dapat Anda lakukan adalah menebak.

Sekarang bayangkan Anda memasukkan sebuah gua kedua.

Dalam satu ini, ada satu pintu besar sebelum Anda. Ia mengatakan "wisata" dan lebar dan remang.

Untuk satu sisi, ada sebuah pintu kecil dengan jendela di dalamnya yang mengatakan "Tiket" di atasnya. Selanjutnya untuk itu adalah sebuah pintu mencolok yang mengatakan "Karyawan saja."

Dalam gua ini Anda tahu persis apa yang harus dilakukan.

Anda berada di sini untuk tur, jadi Anda berjalan ke jendela tiket, membeli tiket, dan berjalan melalui pintu yang mengatakan "Tours."

website Anda adalah seperti sebuah gua yang gelap

Anda memiliki tanggung jawab untuk pengunjung situs Anda untuk menunjukkan kepada mereka jalan dan membuat jalan yang jelas.

Pengunjung yang tidak bingung lebih mudah untuk bergerak ke arah apa pun tindakan yang Anda ingin mereka untuk mengambil di situs Anda, juga.

Ingat, setiap website pembaca Anda kunjungi adalah sedikit berbeda dari yang sebelumnya. Dan setiap kali mereka datang ke situs baru, pengunjung menghabiskan beberapa detik pertama mendapatkan bantalan mereka di lingkungan baru mereka.

Sebagai pemilik situs, kita harus membuat transisi semudah mungkin.

Memimpin mereka di sekitar halaman Anda dengan hirarki visual

Ketika situs Anda memiliki hirarki visual yang jelas, itu menjawab pertanyaan kuno di pikiran setiap pengunjung website: "Apa untungnya bagi saya?"

Dan hal ini dengan menyoroti apa situs Anda menawarkan sehingga pengunjung Anda melihat langsung bagaimana hal itu akan menguntungkan mereka .

Mata pengunjung Anda harus melakukan perjalanan melalui halaman Anda untuk mengkonsumsi informasi Anda. Untuk membimbing mereka dengan mudah melalui tugas ini, melihat semua halaman Anda dan mengatur mereka menggunakan langkah-langkah di bawah ini.

1. Urutkan informasi Anda ke dalam kategori

Untuk setiap halaman di situs Anda, membagi informasi Anda berencana untuk hadir dalam tiga kategori seperti yang dijelaskan di bawah ini.

Yang terpenting

Setiap halaman harus memiliki satu "paling penting" sepotong informasi. Hal ini sering judul atau gambar di atas.

Ini harus memimpin pengunjung situs Anda langsung ke informasi sekunder atau pendukung yang akan menjadi daging halaman Anda.

Sekunder atau pendukung

Informasi ini didasarkan pada informasi yang paling penting.

Ini fleshes itu, saham detail, dan termasuk ajakan Anda untuk bertindak .

Paling tidak penting

Ini adalah informasi yang perlu pada halaman Anda, tetapi tidak harus bersaing dengan informasi yang paling penting dan sekunder.

Ini mencakup informasi seperti pemberitahuan hak cipta dan informasi sidebar. Pada blog mungkin bios penulis dan komentar bagian.

2. Membuat kategori Anda jelas melalui pilihan desain

Setelah Anda dikategorikan informasi pada halaman Anda, langkah berikutnya adalah untuk membuat pilihan desain yang memberikan informasi hirarki visual yang jelas.

Ikuti tips ini untuk setiap bagian:

Yang terpenting

Informasi yang paling penting adalah sebuah mercusuar yang harus menarik dan melibatkan. Ini harus menjadi hal pertama yang dilihat orang pada setiap halaman.

Menggambar mata pengunjung situs Anda untuk informasi Anda yang paling penting, memilih kombinasi dari visual yang "trik":

  • Menempatkannya di bagian atas halaman
  • Membuatnya lebih besar
  • Terapkan warna cerah untuk itu (jika itu gambar, membuat visual mencolok)
  • Menambahkan spasi putih lebih sekitarnya

Sekunder atau pendukung

Di sinilah pengunjung situs Anda pergi untuk mendapatkan rincian. Ini adalah jantung dari halaman Anda, dan tujuan utama Anda harus untuk membuatnya mudah untuk membaca dan memahami .

Gunakan tips-tips untuk membuat jelas dan mudah untuk skim:

  • Bebas menerapkan tombol kembali untuk teks Anda untuk memecah paragraf panjang menjadi potongan dicerna
  • Gunakan subjudul untuk melayani sebagai visual "tiang lampu" di seluruh halaman Anda untuk memandu pembaca melalui salinan
  • Gunakan blockquotes untuk memecah copy dan menambah daya tarik visual
  • Parit koma sekuensial dan bukannya membuat daftar bullet, yang mudah untuk skim

Untuk lebih lanjut tentang bagaimana membuat informasi pendukung Anda mudah untuk skim, membaca 8 Cara Sangat Sederhana untuk Dapatkan Orang Lebih Membaca Konten Anda.

Paling tidak penting

Apa yang bisa kita katakan tentang informasi Anda yang paling tidak penting? Ini harus berada di sana, tapi kami ingin memudar ke latar belakang visual.

Jika seseorang ingin menemukannya, mereka bisa. Tapi kami ingin berdiri di sana seperti butler di suatu acara resmi abad ke-19: siap dan menunggu, tapi dalam bayang-bayang.

Untuk mencapai hal ini secara visual, informasi Anda paling tidak penting harus:

  • Dalam font yang lebih kecil dari teks utama Anda. Pertimbangkan untuk menggunakan font yang sederhana yang tidak menarik banyak perhatian untuk dirinya sendiri, dan periksa untuk memastikan itu masih dapat dibaca pada ukuran kecil.
  • Dalam warna kontras rendah. Pertimbangkan untuk menggunakan media abu-abu, atau menempatkannya pada latar belakang media-kencang sehingga "menghilang" sedikit.
  • Jauh dari daerah konten utama Anda. Membuat jarak fisik antara teks utama Anda dan konten Anda paling penting. Ini berarti memisahkan footer Anda dengan ruang putih, dan menambahkan beberapa padding antara konten utama dan sidebar.

Saya menyadari langkah ini sulit. Itu salah satu hal untuk meminta orang untuk membuat informasi hak cipta mereka lebih kecil, tapi itu lain untuk meyakinkan mereka untuk tidak menarik begitu banyak perhatian terhadap informasi di sidebar mereka.

Tapi salah satu kesalahan desain yang paling umum yang saya lihat adalah sidebars sibuk yang menarik terlalu banyak perhatian untuk diri mereka sendiri. Pertimbangkan toning mereka turun sehingga pengunjung situs Anda akan lebih mudah untuk membaca dan mengkonsumsi informasi utama Anda

3. Langkah pergi dan datang kembali: apa yang Anda lihat?

Kita semua menderita apa yang saya sebut "desain kebutaan," yang mirip dengan kebutaan editorial.

Ini titik dalam proses pembuatan di mana Anda tidak bisa lagi melihat pekerjaan Anda secara objektif, dan itu biasanya terjadi setelah Anda telah menempatkan beberapa waktu dalam menciptakan itu.

Perbaikan untuk kebutaan desain? Menjauh dari halaman Anda.

Berikan sehari, atau setidaknya semalam, sebelum tweaking akhir dan penerbitan. Kembali dengan mata segar dan melihat lagi.

Bertanya pada diri sendiri:

  • Apakah mata saya langsung pergi ke arah item yang paling penting?
  • Apakah mereka secara alami mengalir melalui informasi pendukung?
  • Adalah informasi penting setidaknya ada pada halaman, tetapi tidak dalam persaingan dengan barang-barang lainnya?

Jika Anda tidak dapat menjawab ya untuk pertanyaan di atas, membuat penyesuaian. Kembali ke Langkah 2 di atas dan tweak yang diperlukan sampai hirarki visual Anda jelas.

Jika Anda benar-benar dalam keadaan darurat dan Anda memiliki teman dekatnya, melakukan ini: meminta dia untuk duduk di depan halaman Anda dan menceritakan keras apa yang dia pikirkan saat ia menavigasi melalui itu.

Jika dia tidak yakin apa yang harus dilakukan setelah dia memukul halaman Anda, Anda tahu bahwa Anda masih punya beberapa pekerjaan yang harus dilakukan.

Meninjau langkah-langkah di atas, dan terus tweaking sampai hirarki visual halaman Anda jernih.

Visual hirarki: kuat, alat halus

Visual hirarki adalah salah satu teknik desain yang dapat membuat atau menghancurkan halaman situs Web Anda.

Ketika halaman Anda menggunakan kekuatannya, mudah untuk membaca dan memahami, dan panduan pengunjung dengan mudah melalui informasi Anda.

Ketika itu tidak digunakan dengan baik - atau tidak digunakan sama sekali - pengunjung Anda akan meninggalkan perasaan seperti situs Anda tidak teratur dan sulit untuk menavigasi.

Siap untuk digunakan hirarki visual?

Bergabung dengan diskusi di Google+ dan terhubung dengan saya di Twitter .