Kebab vs. Hamburger: Pahami Perbedaan Ikon Menu yang Sering Tertukar dalam Desain UI/UX



Apakah Anda pernah bertanya-tanya, "Mengapa ada dua jenis ikon menu yang berbeda di aplikasi dan website?"

Mungkin Anda sering melihat ikon tiga garis horizontal (≡) dan tiga titik vertikal (⋮). Kedua ikon ini memang terlihat mirip, sama-sama mewakili 'menu', tetapi memiliki fungsi dan makna yang sangat berbeda dalam dunia User Interface (UI) dan User Experience (UX) design. Memahami perbedaannya sangat penting untuk menciptakan produk digital yang intuitif dan mudah digunakan.

Mari kita bahas tuntas perbedaan mendasar antara ikon menu Hamburger dan ikon menu Kebab.

1. Mengenal Ikon Menu Hamburger (≡)

Ikon menu Hamburger, dengan tiga garis horizontalnya, adalah salah satu elemen navigasi yang paling dikenal di internet. Namanya diambil dari bentuknya yang menyerupai tumpukan roti dan daging hamburger.

Fungsi utamanya adalah sebagai gerbang menuju navigasi utama atau global sebuah aplikasi atau website.

Saat Anda mengeklik ikon Hamburger, biasanya akan muncul side-drawer atau menu geser yang berisi daftar halaman utama, kategori, atau pengaturan aplikasi secara keseluruhan.

  • Contoh Penggunaan:

    • Menu utama di pojok kiri atas aplikasi seluler seperti Spotify atau Google Maps.

    • Menu navigasi di situs web yang responsif untuk tampilan mobile.

    • Daftar pengaturan akun atau profil pengguna secara umum.

Intinya, jika Anda ingin menampilkan daftar navigasi global yang berlaku untuk seluruh aplikasi, ikon Hamburger adalah pilihan yang paling tepat.

2. Mengenal Ikon Menu Kebab (⋮)

Di sisi lain, ikon menu Kebab (⋮), yang terdiri dari tiga titik vertikal, memiliki fungsi yang jauh lebih spesifik. Ikon ini sering disebut juga sebagai overflow menu atau context menu.

Fungsi utamanya adalah untuk menampilkan daftar aksi atau opsi yang berhubungan dengan satu item tertentu.

Ikon Kebab tidak ditujukan untuk navigasi global. Sebaliknya, ia memberikan opsi kontekstual yang hanya relevan dengan objek di sampingnya. Dengan kata lain, ia memberikan menu 'tambahan' untuk suatu item, seperti kebab yang memiliki beberapa isian dalam satu tusuk.

  • Contoh Penggunaan:

    • Di samping setiap email di Gmail, ada ikon Kebab untuk "Balas", "Arsipkan", atau "Tandai sebagai belum dibaca".

    • Di samping nama file di Google Drive, ikon ini memunculkan opsi "Bagikan", "Pindahkan", atau "Hapus".

    • Di samping setiap video di YouTube, untuk opsi "Simpan ke daftar putar" atau "Laporkan".

Mengapa Memahami Perbedaan Ini Penting untuk UX?

Menggunakan ikon menu yang tepat sangat krusial untuk menciptakan pengalaman pengguna yang mulus. Bayangkan Anda mengeklik ikon Hamburger, tetapi yang muncul adalah opsi untuk mengedit satu foto saja—tentu ini akan membingungkan.

  • Hindari Kebingungan: Pengguna telah terbiasa dengan konvensi ini. Menggunakan ikon yang salah dapat meningkatkan beban kognitif dan membuat pengguna frustrasi.

  • Tingkatkan Efisiensi: Dengan menggunakan ikon yang benar, pengguna dapat memprediksi fungsi sebuah tombol tanpa harus berpikir keras, membuat interaksi dengan produk Anda menjadi lebih cepat dan efisien.


Singkatnya:

  • Hamburger (≡) = Navigasi Global.

  • Kebab (⋮) = Opsi Kontekstual untuk Item Tertentu.

Jadi, sebelum Anda merancang antarmuka selanjutnya, pastikan Anda menempatkan ikon yang tepat sesuai dengan fungsinya. Ini adalah salah satu detail kecil yang dapat membuat perbedaan besar dalam desain UX Anda.