- Menu konteks mengurangi gangguan visual dan menurunkan biaya interaksi, tetapi memiliki trade-off berupa information scent yang rendah dan discoverability yang lemah
- Cocok digunakan untuk mengelompokkan dan menyediakan tindakan sekunder atau tambahan yang terhubung ke objek tertentu seperti postingan, foto, atau acara kalender, dan ikon kebab (⋮)·meatball (⋯) umumnya dikenali sebagai “lebih banyak/aksi tambahan”
- Jika ukuran, kontras, atau posisi ikon buruk, sering terjadi kasus di mana ikon itu sendiri tidak terlihat atau maknanya disalahartikan, dan jika tindakan penting disembunyikan, itu akan menjadi fitur inti yang sulit ditemukan sehingga memperburuk pengalaman pengguna
- Agar efektif, diperlukan aturan yang konsisten seperti hanya memasukkan tindakan sekunder, menempatkannya dekat dengan konten terkait, tidak menyembunyikan hanya satu-dua tindakan, membedakan perannya dari hamburger, serta memastikan aksesibilitas
- Menu konteks yang dirancang dengan baik bisa menjadi alat untuk menyederhanakan tata letak dan meningkatkan fokus, tetapi jika dipakai berlebihan atau keliru, ia berisiko menambah kebingungan, klik tambahan, dan beban belajar, sehingga perlu digunakan dengan hati-hati
Gambaran umum menu konteks
- Menu konteks adalah menu yang mengumpulkan sekumpulan tindakan terkait yang terhubung ke elemen UI tertentu, area layar, potongan data, atau tampilan aplikasi
- Pada postingan bisa berisi tindakan seperti Edit, Pin, Delete, pada foto Share, Download, Set as Background, dan pada acara kalender Delete, Reschedule, Duplicate, Invite
- Menu seperti ini biasanya digunakan untuk menempatkan fungsi sekunder yang kadang dibutuhkan tetapi tidak harus selalu terlihat dalam jangkauan pengguna
- Di desktop, pemicunya biasanya klik kanan atau klik dua jari pada trackpad, di lingkungan sentuh long press, dan semakin sering juga menggunakan ikon kebab (⋮)·meatball (⋯)
Persepsi dan keterbatasan ikon kebab·meatball
- Para peserta riset secara umum mengenali ikon kebab (⋮)·meatball (⋯) sebagai tanda bahwa “ada lebih banyak opsi/tindakan lain yang tersembunyi”
- Persepsi ini tetap muncul baik di mobile maupun desktop, dan dipahami lebih konsisten bila panduannya diterapkan dengan baik
- Ikon ini diterima sebagai “saklar untuk membuka sekumpulan fungsi/ikon yang untuk sementara disembunyikan”
- Pada saat yang sama, ikon-ikon ini memiliki information scent yang rendah, sehingga pengguna mencoba mengekliknya dalam keadaan hampir tidak tahu opsi spesifik apa yang ada di baliknya
- Jika ikon terlalu jauh dari konten, terlalu kecil, atau didesain dengan kontras rendah, juga ditemukan kasus di mana menu konteksnya sendiri sama sekali tidak disadari pengguna
Kelebihan dan trade-off menu konteks
- Dari sisi kelebihan, menu konteks membantu mengurangi gangguan visual, menyederhanakan tata letak, dan menjaga fokus
- Namun di sisi lain, ia disertai masalah usability berikut
- Sulit ditemukan (findability menurun): jika ikon kecil, samar, atau jauh dari area fokus tugas, ia menjadi elemen yang sangat mudah terlewat
- Kurangnya information scent: sulit memprediksi apa isi menu, sehingga pengguna sulit menilai apakah layak untuk ditekan
- Potensi salah tafsir: jika penempatan atau cara pakainya buruk, pengguna bisa mengiranya sebagai indikator progres atau kontrol carousel
- Karena itu, keputusan apakah akan memakai menu konteks harus ditentukan dengan menyeimbangkan keterbatasan tata letak, ekspektasi pengguna, dan prioritas tugas
1. Masukkan hanya tindakan sekunder dan non-inti ke dalam menu konteks
- Menu konteks bukan tempat untuk tindakan inti yang sering digunakan, melainkan untuk tindakan tambahan dengan prioritas lebih rendah
- Disarankan menyembunyikan fitur yang bukan bagian dari alur inti tetapi cukup sering dipakai melalui seleksi berbasis riset
- Penting untuk tidak menyembunyikan tindakan esensial yang sering digunakan di balik menu konteks
- Sebagai contoh, pada antarmuka chat AT&T, kasus End Chat yang ditempatkan di dalam menu konteks adalah contoh buruk karena menyembunyikan tindakan penutupan yang inti
- Jika tugas penting disembunyikan di balik menu, pengguna akan mengalami kesulitan menemukan fungsi tersebut atau ketidaknyamanan berulang pada tugas yang sering dilakukan
2. Letakkan menu konteks dekat dengan konten yang dipengaruhinya
- Pengguna menafsirkan hubungan antarelemen melalui kedekatan spasial, jadi posisi ikon menu konteks harus jelas menunjukkan tindakan itu milik objek yang mana
- Jika menu hanya berlaku untuk elemen tertentu, ikonnya harus ditempatkan di dalam elemen itu atau tepat di sebelahnya
- Jika tindakannya berlaku untuk seluruh field atau seluruh transaksi, maka ikonnya perlu diletakkan dekat area tempat informasi terkait berkumpul
- Hindari menaruh ikon di posisi acak atau di lokasi yang terasa tiba-tiba dan tidak terhubung dengan elemen mana pun
- Seperti pada kasus Ramp.com, ketika ikon kebab kecil dengan kontras rendah diletakkan jauh di kanan bawah layar, sulit memahami ikon itu untuk elemen yang mana, sehingga discoverability dan keterkaitannya sama-sama menurun
3. Pastikan ukuran dan kontras ikon memadai agar visibilitas terjaga
- Ikon menu konteks sering kali diperlakukan terlalu halus hingga hampir tidak terlihat, terutama pada layar yang padat atau aplikasi yang kompleks
- Ikon harus memiliki ukuran dan kontras yang memadai, dan jika memungkinkan sebaiknya tetap selalu terlihat tanpa perlu hover
- Disarankan mengikuti panduan desain visual yang sudah teruji dengan menggunakan kontras warna yang tegas serta border dan latar yang jelas
- Membuatnya hanya muncul saat hover, atau membuatnya terlalu samar atas nama minimalisme, akan menurunkan discoverability
- Seperti contoh Ramp, ikon kebab yang kecil, berkontras rendah, dan berada jauh mudah terlewat
- Sebaliknya, seperti pada aplikasi mobile Rippling, contoh ikon yang dibungkus kotak border dan memakai titik hitam di atas latar putih untuk meningkatkan kontras adalah contoh positif yang meningkatkan kemudahan ditap dan information scent
4. Susun menu konteks hanya dengan tindakan yang saling terkait
- Opsi dalam menu konteks harus dikelompokkan sebagai tindakan yang secara logis terkait dengan satu objek/elemen/hirarki
- Misalnya untuk file, hanya berisi tindakan terkait file seperti Duplicate, Share, Delete
- Jika memungkinkan, disarankan juga menampilkan sebagian tindakan langsung di samping ikon menu untuk menambah information scent yang memberi petunjuk “jenis tindakan apa lagi yang tersembunyi”
- Hindari mencampur tindakan global dengan tindakan untuk elemen tertentu dalam satu menu, atau mencampur tindakan yang tidak saling berhubungan
- Campuran seperti itu merugikan dari sisi clarity, kemudahan ditemukan, memori spasial, dan beban kognitif
- Seperti pada aplikasi desktop Slack, struktur yang hanya menyembunyikan tindakan terkait pesan di menu yang menempel pada pesan, sementara tindakan untuk seluruh thread ditempatkan di lokasi lain adalah contoh yang baik
5. Jaga konsistensi ikon dan perilaku di seluruh antarmuka
- Ikon menu konteks harus mempertahankan fungsi, perilaku, dan tampilan yang sama di seluruh produk
- Jika memutuskan memakai ikon meatball atau kebab untuk menu konteks, ikon itu harus tidak dipakai ulang untuk tujuan lain dan hanya digunakan untuk makna tersebut
- Hindari penggunaan ulang ikon yang sama, misalnya di satu tempat untuk membuka konten tersembunyi, di tempat lain untuk memanggil popup, dan di tempat lain lagi untuk membuka side panel
- Penggunaan seperti ini merusak mental model dan kepercayaan pengguna, serta menurunkan kemudahan belajar dan daya ingat
- Pada hasil pencarian Google, terlihat bahwa ikon kebab pada hasil sponsor membuka modal My Ad Center, sementara kebab pada hasil biasa membuka panel kanan, sehingga perilaku dan posisinya tidak konsisten
- Akibatnya, tindakan berguna seperti Like/Block/Report/Share/Save tersembunyi dan sulit ditemukan, dan pengguna kesulitan memprediksi apa yang akan terjadi saat mengeklik ikon yang sama
6. Jika ikon ambigu, perkuat maknanya dengan tooltip atau label
- Ikon kebab·meatball adalah ikon abstrak dengan makna yang lemah, sehingga sedikit petunjuk teks saja bisa sangat meningkatkan usability
- Jika memungkinkan, tambahkan label yang terlihat atau tooltip saat hover untuk menjelaskan secara spesifik jenis tindakan apa yang ada di dalam menu
- Misalnya menggunakan ungkapan jelas yang menyertakan elemen target seperti Post Actions, Message Options
- Hindari label ambigu seperti Options, atau label seperti Ellipses yang hanya menjelaskan bentuk ikonnya
- Seperti pada contoh Patagonia, kasus aksi memperbesar gambar dipetakan ke ikon meatball, lalu saat hover diberi label Ellipses adalah contoh kegagalan dalam menyampaikan makna
- Sebaliknya, seperti pada aplikasi desktop Notion, tooltip saat hover seperti “Style, Export, and more…” yang secara spesifik mengisyaratkan kategori tindakan di dalam menu adalah pola positif yang sangat meningkatkan information scent
- Tooltip ini juga bekerja dengan berubah sesuai konteks berdasarkan isi menu
7. Gunakan ikon menu konteks hanya untuk menandai tindakan, bukan untuk memperluas konten
- Karena ikon meatball·kebab dikenali sebagai sinyal untuk membuka tindakan/opsi tambahan, sebaiknya jangan menggunakannya untuk memperluas teks atau gambar
- Untuk membuka teks yang terpotong atau memperbesar gambar, disarankan memakai label teks yang eksplisit seperti Read more atau Expand
- Seperti pada contoh ulasan Etsy, pola membuka seluruh teks dengan ikon meatball di bawah ulasan adalah contoh buruk karena information scent-nya rendah
- Fungsi yang sama pada ulasan Google disediakan melalui tautan teks More, yang merupakan ekspresi yang lebih cocok untuk tindakan memperluas konteks
- Ikon kebab di bagian atas ulasan Google yang hanya menyediakan satu tindakan yaitu Report juga merupakan contoh yang melanggar panduan berikutnya, yaitu jangan menyembunyikan hanya satu-dua tindakan
8. Jangan gunakan menu konteks hanya untuk satu atau dua tindakan
- Jika memungkinkan, saat hanya ada satu atau sedikit tindakan, lebih baik tampilkan tindakan itu langsung di antarmuka
- Menyembunyikan satu-dua opsi di balik menu hanya akan menghemat ruang secara minim, tetapi menambah jumlah klik dan biaya discoverability
- Terutama jika sudah ada ikon standar yang dikenal luas seperti “x”, ikon tempat sampah, atau bendera laporan, menyembunyikannya lagi di bawah meatball/kebab tidak memberi manfaat
- Pada kasus Weather.com, ketika ikon kebab diklik, ia berubah menjadi tombol hitam yang hanya berisi satu tombol Delete
- Dalam situasi ini, jika sejak awal Delete ditampilkan langsung, penggunaan ruang layar hampir sama, sehingga tidak ada alasan untuk menyembunyikannya
- Sebaliknya, pada contoh Pinterest, ketika kursor diarahkan ke pin, tindakan penting seperti Save (tombol kanan atas) dan Share (ikon kanan bawah) ditampilkan langsung
- Cara seperti ini adalah pola positif karena tidak menyembunyikan tindakan penting di balik menu konteks dan memungkinkan langsung digunakan saat diperlukan
9. Jangan gunakan ikon hamburger sebagai pemicu menu konteks
- Ikon hamburger (☰) dikenal luas sebagai simbol untuk navigasi global/utama, sedangkan ikon kebab·meatball (⋮·⋯) telah menjadi pola yang berarti tindakan kontekstual yang melekat pada elemen atau item tertentu
- Ikon hamburger sebaiknya hanya dipakai untuk navigasi global situs/aplikasi, dan tindakan kontekstual sebaiknya memakai kebab·meatball
- Hindari memakai hamburger dekat konten untuk menampung tindakan kontekstual, atau sebaliknya memasukkan tindakan global seperti pengaturan akun atau preferensi seluruh situs ke dalam kebab·meatball
- Pencampuran seperti ini mengaburkan makna kedua pola tersebut dan merusak mental model pengguna sehingga memicu keraguan dan kelalaian
- Pada contoh chat Banana Republic, saat ikon hamburger di kiri bawah jendela chat ditekan, yang muncul hanya satu tindakan kontekstual yaitu Save Transcript
- Ini bukan hanya penggunaan hamburger sebagai menu konteks alih-alih navigasi global, tetapi juga melanggar panduan nomor 8 karena menyembunyikan hanya satu tindakan
10. Pastikan aksesibilitas keyboard dan screen reader
- Menu konteks harus dapat digunakan bukan hanya oleh pengguna mouse atau sentuh, tetapi juga perlu bisa dibuka dan dinavigasi dengan keyboard serta screen reader
- Menu harus bisa dibuka dan dipindahkan dengan Tab, Enter, dan tombol panah, dan item di dalam menu juga harus bisa dibacakan screen reader serta dapat dipindahkan fokusnya dan dijalankan
- Hindari menu yang hanya bisa diakses dengan klik atau tap, maupun interaksi kustom yang merusak pola aksesibilitas standar
- Desain yang memprioritaskan aksesibilitas memberi efisiensi bukan hanya bagi pengguna disabilitas, tetapi juga bagi power user, serta membantu kepatuhan terhadap standar desain inklusif
Kesimpulan
- Menu konteks adalah alat yang kuat untuk menjaga antarmuka tetap sederhana sambil tetap menyediakan tindakan tambahan saat diperlukan
- Terutama berguna sebagai pola untuk merapikan tata letak dan membuka opsi tambahan hanya saat dibutuhkan ketika pengguna sedang fokus pada tugas
- Namun, karena merupakan struktur dengan keterbatasan pada discoverability dan kejelasan, penggunaannya selalu memerlukan kehati-hatian
- Gunakan hanya untuk tindakan yang benar-benar sekunder, dan rancang dengan mempertimbangkan posisi, konsistensi, information scent, dan aksesibilitas
- Pesan utamanya adalah menyeimbangkan minimalisme visual dengan usability yang nyata, dan
- menu konteks memberikan dampak terbesar saat digunakan sebagai alat untuk merapikan antarmuka tanpa menyembunyikan alur inti
Belum ada komentar.