CROSEOWebsite

Navigation Bar – Struktur yang Mempermudah Navigasi

Di artikel struktur blog sebelumnya, penulis ada membahas soal navigation bar atau biasa disingkat sebagai navbar.

Navbar ini bukan sembarang bar loh. Bagian ini merupakan struktur penting pada blog/website.

Yuk kita kupas lebih lanjut soal si navbar ini!

Apa Itu Navigation Bar?

Navigation bar adalah bagian dari struktur blog/website yang berfungsi untuk membantu user dalam memilih dan mengklik topik atau tautan yang mereka inginkan di situsnya. Yah, intinya dengan navbar ini, mereka tidak perlu lagi capek-capek mengetik URL di browser karena bisa mengklik langsung tujuan mereka di navbarnya.

Blog ini juga punya navbar di header loh!

Tipe Navigation Bar

Terdapat berbagai tipe navigation bar, yaitu:

  • Horizontal (contohnya di blog ini)
  • Vertikal
  • Hamburger menu (garis 3 yang saling menumpuk satu sama lain)
  • Dropdown (blog ini juga memakai dropdown di navbar-nya)
  • Footer

Lumrahnya, sebuah situs memasang navbar di header dengan tipe horizontal atau di sidebar, namun horizontal. Namun, ada juga yang memakai hamburger menu atau dropdown, terutama jika banyak sekali tautan yang perlu diklik seperti karena kategori yang terlalu ramai.

Jarang sekali ada pemilik situs yang memasang navbar di situsnya karena secara desain, user pasti akan melihat bagian header dulu ketika masuk ke situs, bukan footer-nya.

Mengapa Navigation Bar Penting?

Navigation bar penting karena:

a. Mempermudah Navigasi Situs

Manfaat utama dari navbar adalah mempermudah navigasi situs.

Pernahkah kamu ketemu situs yang tidak ada navbarnya? Bingung kan saat mau di situsnya mau klik apa atau bagaimana cara mengeksplornya?

b. Memperkenalkan Niche dari Situs/Blog

Dari navbar, user bisa tahu apa sebenarnya niche dari situs/blog.

Yah, bisa juga user-nya tahu kalau ternyata situs/blognya gado-gado kalau terlalu banyak kategori di navbar-nya.

c. Memberikan Customer Journey yang Mulus

Dari navbar, kita bisa juga memberikan customer journey yang mulus.

Contohnya, dari homepage, user akan menglik tentang kami atau laman lead magnet, kemudian mengisi formulir di lead magnet, lalu di-approach oleh sales, dan berakhir closing.

Yah, paragraf sebelumnya adalah kondisi ideal. Di kehidupan nyata tidak semulus itu, namun bisa terjadi jika user-nya telah teredukasi dengan baik.

d. Mengurangi Bounce Rate

Lanjutan pertanyaan di poin a. Kalau user kebingungan dalam menavigasi situs karena tidak ada navbar, akhirnya mereka memilih untuk langsung cabut alias bounce.

e. Menganalisa Perilaku User

Dari navbar kita juga bisa tahu bagaimana perilaku dari user.

Dulu ada behavior user di universal analytics, sayang sekali sudah tidak ada. Namun, kita masih bisa melihat dari jumlah user yang mengakses homepage dan tautan pada navigasinya.

Cara Membuat Navigation Bar

a. Di WordPress

Di WordPress, kamu bisa masuk ke menu appereance, lalu customize sesuai dengan navbar dari theme yang kamu pilih.

navbar di farisyudza.com

Atau masuk ke header & navigation, lalu modifikasi sesuai dengan keinginanmu.

b. Dengan HTML

Terdapat beberapa kodingan HTML untuk membuat navbar. Misalnya, dari w3school, kamu bisa pakai kodingan ini untuk navbar horizontal:

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
background-color: #04AA6D;
color: red;
}
</style>
</head>
<body>

<div class=”topnav”>
<a class=”active” href=”#home”>Home</a>
<a href=”#news”>News</a>
<a href=”#contact”>Contact</a>
<a href=”#about”>About</a>
</div>

<div style=”padding-left:16px”>
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>

</body>
</html>

Bersama dengan CSS, kamu bisa mengubah warna dan ukuran font dari navbarnya.

Cara Mengoptimasi Navigation Bar

a. Ketahui Tujuan dan Tipe dari Website/Blog untuk Menentukan Navbar yang Cocok

Setiap jenis website punya tipe navbar terbaik untuk website/blog-nya.

Jika tujuanmu adalah blogging, jelas navbar tipe horizontal merupakan yang terbaik dan sebaiknya diisi oleh kategori yang merupakan topik utamamu.

Untuk bisnis, bisa memakai hamburger, terutama jika banyak tautan yang harus masuk. Misalnya halaman tentang kami dan kontak kami.

b. Prioritaskan Tautan yang Di-Crawl oleh Google

Tautan yang diprioritaskan untuk di-crawl oleh Google sebaiknya masuk ke navbar.

Hal ini berkaitan dengan click depth. Selengkapnya ada di tautan ini.

d. Pakai Font dengan Jenis, Warna, dan Ukuran yang Pas di Navbar-nya

Terakhir, pastikan aspek dari font sudah sesuai dengan navbar-nya. Misalnya:

  • Ukuran font tidak terlalu kecil atau lebih besar dari navbar
  • Warna font kontras dengan navbar
  • Jenis font merefeleksikan tujuan

Yuk Optimasi Navigation Bar Blog/Situsmu!

Navigation bar tidak hanya sekedar untuk membantu user untuk mengeksplorasi dalam situs/blogmu loh, namun juga sebagai sarana untuk mencapai tujuan situs/blogmu, terutama jika tujuannya adalah monetisasi.

Jadi, yuk optimasi navbarmu dengan baik seperti melampirkan laman yang memang diprioritaskan untuk di-crawl oleh Google, merupakan topik utama, serta masuk dalam rencana customer journey-mu.

Happy optimizing!

Author

Leave a Reply

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