Website Navigation

13 Tips Membuat Navigasi Website yang Baik

Banyak desainer website yang memiliki pengetahuan tentang navigasi website yang efektif. Hanya saja banyak di antara mereka yang berusaha memperlihatkan kemampuannya dibandingkan mengutamakan keefektifan website. Selain itu, desainer website juga sering menempatkan faktor-faktor yang memiliki nilai lebih justru pada hal lain diluar konten.

Ada beberapa tujuan navigasi website, salah satu tujuan utamanya adalah untuk membantu pengguna untuk mendapatkan informasi dengan mudah dan cepat. Jika pengguna masih kesulitan dalam mencari informasi penting (halaman, tombol, dll) di website, berarti navigasi yang dimiliki masih kurang efektif.

Berikut adalah daftar tips membuat desain navigasi dan arsitektur yang baik untuk website :

1. Navigasi Website yang Memudahkan Pengguna

Navigasi global, lokal, utilitas dan kontekstual harus mampu memudahkan pengguna dan teknologi (manusia & mesin pencari). Elemen navigasi harus ditempatkan di area yang mudah dilihat oleh pengguna. Selain itu, elemen label navigasi juga harus dibuat agar mudah dimengerti oleh pengguna.

Navigasi Website
Contoh penempatan elemen navigasi website

Umumnya, pengguna mencari link navigasi yang akan membawa mereka ke halaman utama, log in akun, keranjang belanja dan infromasi kontak. James Kalbach dalam bukunya yang berjudul “Designing Web Navigation” mengatakan pengguna website akan terbantu oleh navigasi utilitas yang baik dan menghubungkan ke perangkat serta fitur yang tersedia.

Jika Anda ingin website yang unik, maka Anda harus lebih berhati-hati. Hal itu bisa berdampak negatif pada konversi (jumlah pengunjung yang menjadi konsumen) dan kenyamanan pengguna (UX).

Untuk memastikannya, Anda dapat menguji keefektifan navigasi dalam mendukung penyelesaian tugas pengguna (dalam mengakses website) dengan bantuan profesional. Mereka akan melakukan sejumlah tes seperti penyortiran kartu, tes kinerja website dan tes tingkat harapan pengguna.

Berikut beberapa contoh tes yang dapat Anda pelajari :

https://www.usability.gov/how-to-and-tools/methods/card-sorting.html
http://www.measuringu.com/blog/card-sorting-ia.php
http://www.measuringu.com/blog/cardsort-tree-test.php

2. Navigasi Website yang Memperkuat Arsitektur Informasi Website

Jangan sampai Anda bagian arsitektur informasi agar tidak berujung pada perombakan website yang menghasilkan tingginya biaya perancangan ulang.

Salah satu contoh, banyak praktisi SEO memberikan saran yang justru berdampak negatif bagi navigasi website. Mereka menyarankan memindahkan sebuah elemen content pada posisi hirarki agar lebih mudah diindex oleh mesin pencari. Bahkan sampai merubah kategorisasi dan sistem navigasi global(utama).

Seorang arsitek informasi seharusnya tahu kapan dan dimana penempatan yang baik untuk menambah link dan bagian penting lain di dalam template. Hal ini merupakan faktor yang sama pentingnya baik untuk manusia maupun teknologi. Dengan demikian navigasi bisa mudah digunakan oleh pengguna tapi juga tetap mendukung SEO.

Mungkin Anda masih sulit membedakan antara arsitektur informasi dan navigasi website. Pembedanya,arsitektur informasi mengacu pada kategorisasi, organisasi, dan pelabelan konten. Sedangkan navigasi adalah bagian dari user interface yang memungkinkan keefektifan sebuah website.

Ketika membuat, merancang, dan mengcoding navigasi website, seorang desainer webiste yang baik tidak boleh melupakan kedua hal tersebut.

3. Navigasi Website Harus Lebih Mencolok Dari Bagian Lain

Sebuah website yang baik dan efektif harus bisa membuat pengguna langsung menemukan navigasi website tersebut. Seorang desainer website harus bisa menempatkan navigasi di area yang memungkinkan seseorang langsung melihatnya.

Baca Juga  Kelebihan & Kekurangan Website Gratis

Perancangan dan penempatan navigasi website juga harus mencakup aspek penting lain. Diantaranya adalah warna latar belakang website, foto atau gambar di halaman utama, serta besar kecil dan area dimana navigasi tersebut diletakkan.

Pengguna akan meninggalkan website Anda (bounce) jika pada beberapa detik awal tak bisa menemukan navigasi atau fitur yang ia inginkan.

Sebagai contoh, gambar dibawah digunakan untuk melakukan uji coba langsung kepada pengguna. Meskipun para pengguna mengakui bahwa website memiliki desain yang menarik, namun persentase efektifitas penggunaan navigasi adalah 0%.

contoh navigasi website
Contoh navigasi website dan persentase efektifitas penggunaan navigasi

Artinya, navigasi yang terletak pada bagian bawah sudah tertutupi oleh desain website yang “terlalu” menarik. Ditambah pemilihan warna abu-abu membuatnya semakin tidak menonjol dari background website yang berwarna putih.

4. Navigasi Website Harus Mudah Discan

Dengan kemampuan penglihatan perifer (jauh dari pusat), pengguna dapat melihat dan memilih item mana yang paling menarik perhatian mereka dari sebuah website.

Dalam tes pelacakan mata, pengguna tak langsung fokus pada area navigasi website karena mungkin belum diperlukan ketika awal mula membuka website. Namun pada akhirnya jika navigasi website Anda tak terbaca, sulit dimengerti atau eror, maka pengguna tidak akan mungkin terpaku pada hal itu karena penglihatan perifer mereka menunjukkan bahwa navigasi tidak mudah untuk dipahami.

Seorang ahli Information Architecture, Dan Brown, menyebutkan adanya prinsip pilihan. Jika Anda terlalu sedikit memberikan pilihan pada navigasi website Anda, maka pengguna akan berpikir bahwa mungkin Anda mengendalikan mereka. Sesungguhnya, pengguna ingin berinteraksi dengan website Anda sesuai dengan keinginan mereka.

Namun di sisi lainnya, pilihan yang terlalu banyak pada sebuah navigasi website juga dapat membingungkan pengguna. Mereka memerlukan banyak waktu untuk memilih navigasi, atau bahkan mungkin menyerah dan meninggalkan website tersebut.

Sebaiknya Anda melakukan pengujian terlebih dahulu sebelum meluncurkan website Anda secara penuh sehingga bisa membantu Anda dalam memutuskan banyak pilihan yang dibutuhkan demi keefektifan website.

5. Navigasi Website Harus Masuk Akal Bagi Pengguna

Menu Navigasi Website
Rancang arsitektur website yang akan memudahkan pengguna

Banyak website yang tidak melakukan praktek kegunaan dan pencarian yang mudah bagi pengguna sehingga berujung pada ditinggalkannya website tersebut. Pemakaian ‘bahasa pengguna’ merupakan salah satu faktor penting lainnya yang berlaku dalam perancangan navigasi serta konten website.

Pemakaian bahasa atau kata-kata yang tak umum akan menyulitkan pengguna dalam mengartikan maksud dari kata tersebut. Misalnya FAQ (Frequently Asked Question) atau pertanyaan yang sering diajukan, sebaiknya diganti dengan Q & A (Question and Answer) atau pertanyaan dan jawaban. Bahasa Q & A lebih umum dan dimengerti secara umum oleh banyak orang.

Anda juga tidak boleh melupakan penggunakan ikon. Penggunaan ikon tanpa label penjelasan tentu saja akan membingungkan pengguna.

Baca Juga  Buat Website Sendiri Dengan Mudah

6. Navigasi Website Tak Harus Diformat Rata Kanan

Meskipun banyak digunakan, namun teks rata kanan sebetulnya lebih sulit untuk dibaca. Hal itu juga menghambat kemampuan scan sehingga akan lebih baik jika Anda tak menggunakannya.

7. Pastikan Item Menu Diletakkan Secara Logis

Menu Navigasi Website
Penempatan menu website harus memudahkan pengguna

Jika website Anda menggunakan menu drop-down (vertikal), Anda harus memastikan item menu pada website Anda terorganisir secara konsisten dan logis. Banyak desainer website yang ingin bereksperimen dengan mencampurkan navigasi website, khususnya pada footer menu vertikal. Mereka juga menambahkan banyak item menu yang aneh dan membingungkan untuk navigasi website.

Sebagai contoh menu list vertikal berikut ini :

Liburan :

  • Orlando
  • Disney
  • Florida
  • California

Dari sini Anda dapat menilai bahwa menu tersebut tidak konsisten dalam pengkategorian. Disney adalah sebuah taman hiburan, California dan Florida adalah nama negara, sedangkan Orlando adalah nama sebuah kota.

Selain itu, menu tersebut juga tak diatur sesuai dengan urutan abjad sehingga semakin menyulitkan pemindaian atau scan.

Ketika seorang pengguna tidak yakin link mana yang akan diklik, maka terjadilah perilaku pogo-sticking. Menurut ahli Jared Spool, perilaku pogo-sticking adalah ketika pengguna bolak-balik membuka halaman produk dari sebuah halaman kategori umum. Hal ini merupakan sebuah perilaku negatif dan menunjukkan adanya kesalahan dari navigasi website.

8. Navigasi Website Harus Memberikan Posisi Halaman yang Sedang Diakses

Dari peninjauan, salah satu navigasi website yang baik adalah yang dapat menunjukkan kepada pengguna bahwa “Anda sedang berada disini”. Tampilkan perbedaan pada navigasi atau menu ketika pengguna sedang berada di suatu halaman tertentu.

Dengan demikian pengguna tahu posisi mereka sedang berada di halaman mana, dan bisa menentukan referensi ke navigasi atau menu lainnya.

9. Desain Link Harus Dibedakan Antara Hover, Telah Dikunjungi dan Belum Dikunjungi

Halaman website terlihat berantakan jika terlalu banyak warna dalam sistem navigasi website. Umumnya, warna biru akan digunakan pada link yang belum pernah dikunjungi. Sementara itu warna ungu digunakan pada link yang telah dikunjungi. Namun tak selamanya hal tersebut harus diikuti.

Selama Anda memiliki warna yang digunakan secara konsiten pada website, maka pengguna tidak akan berkomentar dan berpikir website Anda menyulitkan mereka. Pemakaian warna yang konsisten (terlepas dari biru dan ungu), akan memandu pengguna dan berkomunikasi mengenai mana saja halaman yang belum dan sudah dikunjungi.

10. Teks Harus Bisa Diklik

Untuk membuat navigasi website yang efektif, pengguna harus tahu mana teks yang bisa diklik dan mana yang tidak bisa. Pasalnya, banyak pengguna yang tidak mengklik sebuah tombol menu hanya karena ia tidak mengetahui teks atau tombol tersebut bisa diklik.

Banyak desainer website yang mengatakan pengguna bisa dengan mudah mendeteksi link dengan minesweeping. Minesweeping adalah tindakan yang dirancang untuk mengidentifikasi di mana halaman link berada.

Baca Juga  Macam-Macam Browser Terbaru & Fiturnya

Minesweeping melibatkan pengguna berulang kali memindahkan kursor atau pointer di atas halaman, melihat di mana kursor atau pointer mengalami perubahan warnya yang menunjukkan adanya link. Namun minesweeping biasanya dilakukan oleh anak-anak yang belum memahami dengan benar link atau teks yang bisa diklik.

11. Label Pada Link Harus Menyerupai Nama Halaman Tujuan

Navigasi website yang efektif harus bisa berkomunikasi dan memberikan informasi yang jelas. Salah satu cara untuk mengkomunikasikan informasi kepada pengguna dan teknologi adalah menggunakan label pada link yang merepresentasikan halaman tujuan.

Banyak orang yang menghubungkan link ke halaman yang tidak sesuai pada label yang ada di link tersebut. Misalnya Anda ingin mencari halaman mengenai informasi website, manakah yang akan Anda pilih ?

  • About.php
  • Product.php
  • Cart.php

Pasti Anda akan memilih About.php bukan ?

12. Link ke Sitemap atau Indeks Website

Sebuah sitemap (peta website) Wayfinder tidak sama dengan peta website XML. Sebuah sitemap Wayfinder adalah bantuan navigasi dan bentuk pencegahan kesalahan pada sebuah website. Bagi mereka yang ingin melewatkan penjelajahan atau tidak dapat menemukan konten yang diinginkan melalui navigasi global / resmi / kontekstual, sitemap dapat menjadi jalan pintas yang sangat berguna.

Sebuah indeks website berbeda pula dengan sitemap. Indeks website adalah daftar dari awal hingga akhir dari keseluruhan konten dan area yang ada pada website.

Sebuah indeks website yang baik adalah yang mengandung beberapa hal dibawah ini :

  • Menampilkan referensi dari istilah atau kata yang membingungkan pengguna serta singkatan-singkatan yang ada pada konten
  • Mengimplementasikan rotasi jangka panjang
  • Menampilkan daftar halaman yang sudah dan belum dikunjungi
  • Sebuah website memang akan lebih menarik jika memiliki keindahan artistik, tapi website bukanlah sebuah lukisan yang hanya perlu dipandangi saja.
  • Karena pada dasarnya website diciptakan untuk menyampaikan informasi, dan hal ini harus bisa dilakukan dengan sangat efektif dan efisien bagi penggunanya.

13. Gunakan Konsep Three-Click Rule

Banyak pekerjaan dan pertimbangan yang harus dilakukan ketika merancang desain navigasi dan arsitektur website yang baik, salah satunya adalah konsep three-click rule.

Sebuah arsitektur website yang baik harus bisa sepenuhnya melayani pengguna hanya dengan tiga kali klik saja.

Three Click Rule
Ilustrasi penerapan konsep three-click rule

Gambar di atas menunjukkan halaman website yang tidak memiliki lebih dari tiga level. Setiap halaman memiliki banyak link dan pengguna yang berada di halaman utama tidak akan pernah harus mengklik lebih dari tiga kali untuk bisa mencapai konten di level bawah.

Tapi apakah konsep ini benar-benar efektif dalam pembuatan desain website? Berikut artikel yang menjelaskan apakah three click rule masih efektif dalam web design.

Sumber :

http://marketingland.com/fundamental-checklist-website-navigation-design-architecture-part-1-90743

http://marketingland.com/fundamental-checklist-website-navigation-design-architecture-part-2-92109

Leave a Reply

Your email address will not be published. Required fields are marked *