it-swarm-id.com

Apakah ada alternatif untuk menu hamburger + laci?

Di internet ada banyak bashing pada Icon Hamburger & Nav Drawer yang cocok.

Saya menyadari kadang-kadang mungkin pola yang harus dihindari ketika pilihan yang lebih sederhana dan lebih eksplisit tersedia.

Namun, saya belum melihat alternatif yang tepat untuk menu navigasi sisi besar yang tidak akan membuat pengguna seperti saya ingin menghapus aplikasi.

Saya bertanya-tanya alternatif apa yang ada sebagai pengganti Navigasi Drawer, untuk aplikasi asli dan situs web.

Opsi paling umum yang pernah saya lihat adalah bilah tab yang berfungsi baik dengan 3 atau 4 item. Namun, kami masih menggulir vertikal secara umum untuk membaca lebih banyak baris dan ketika Anda memiliki 10+ item, ini akan merepotkan.

  • Nav Drawer, 2 langkah: klik ikon atau geser dari kiri ke kanan untuk mengungkapkan. Ketika terungkap Anda harus melihat semua opsi yang tersedia.

  • Tab Bar, 2 langkah: Geser ke atas bar dengan harapan menemukan item yang Anda cari jika Anda tahu apa yang harus dicari, lalu ketika ditemukan ketuk item tersebut.

Juga masalah dalam aplikasi saat ini yang sedang saya kerjakan adalah bahwa ada tampilan yang sebenarnya mengandung bilah tab, hingga 3 item di sini yang sebagian besar mengklik melalui ke tingkat tampilan berikutnya.

Mungkin relevan: Saya tidak membangun ekstensi situs web sederhana itu untuk komunitas tempat orang aktif berpartisipasi dan ada banyak kedalaman dan detail. Tentang 8 Modul yang berbeda dan beberapa konten khusus tersedia, membuka semua ini dalam satu halaman/tampilan tunggal akan hampir mustahil. Ini mungkin alasan mengapa saya bersedia hidup dengan Nav Drawer karena pada akhirnya sangat rumit.

Permintaan maaf karena membawa ini secara negatif tetapi saya ingin melihat opsi lain untuk kasus apa pun, saya setuju bahwa ketika navigasi sederhana itu harus sesuai dengan tampilan utama.

22
Mathijs Segers

IYA

Anda menunjukkan bahwa ada surplus kritik dan kelangkaan alternatif untuk menu hamburger.


Latar Belakang

Menu Hamburger telah dikritik karena:

  • Mereka menyembunyikan tautan dan konten dari pengguna alih-alih menghadirkan opsi langsung kepada pengguna.
  • Ikon hamburger ditempatkan di bagian atas layar di mana pengguna cenderung mengabaikannya .
  • Ikon hamburger tidak familier untuk banyak pengguna (tetapi ini berubah).
  • Mereka memfasilitasi desain yang ceroboh karena desainer dapat menumpuk banyak tautan dan konten secara sembrono ke dalam laci.
  • Mereka bisa sulit dijangkau untuk pengguna ponsel dengan layar lebih besar ketika mereka ditempatkan di kanan atas atau (lebih buruk) di kiri atas.
  • Mereka pengujian buruk di A/B dan pengujian pengguna lainnya . Lihat artikel ini yang memiliki tautan tambahan yang dapat Anda ikuti.

Penginjil UX Apple memberikan kritik singkat tentang hamburger di WWDC 2014 yang merupakan bacaan yang baik.


Alternatif khas

Alternatif khas yang disarankan untuk hamburger + drawer adalah nav bar dan kontrol tab . Alternatif ini mengatasi masalah di atas dengan mengurangi jumlah opsi untuk pengguna (penyederhanaan pilihan) dan dengan membuatnya eksplisit:

enter image description here


Alternatif yang lebih baru

Masalah dengan kontrol tab dan navbars bawah, seperti yang Anda tunjukkan, adalah bahwa mereka tidak berguna ketika ada banyak opsi dalam menu . Anda kemudian memiliki pertukaran jelek tentang apakah akan meluap konten atau untuk memotong jumlah opsi.

Puritan desain akan mencemooh karena tidak dapat mengurangi opsi, tetapi dalam banyak aplikasi (mis. Perusahaan atau teknis) ini tidak dapat dihindari dan mengarah ke UI yang lebih buruk.

Berikut adalah tiga alternatif untuk menu hamburger yang menyediakan lebih banyak pilihan menu (klik untuk memperbesar).

enter image description here

  • Lembaran bawah digunakan dalam kerangka UX Material Desain Google sebagai alternatif untuk menu. Lihat spesifikasi ini . Penempatan bawah lembar membantu ergonomi dengan layar ponsel yang lebih besar saat ini.

  • Bilah menu bawah membuat opsi Menu eksplisit karena ini menguji lebih baik . Sekali lagi, penempatan tombol memberikan ergonomi yang lebih baik. Selain itu, penempatannya berada di akhir aliran visual dari atas ke bawah sehingga pengguna cenderung mengabaikan opsi tersebut.

  • Tombol mengambang hamburger menggunakan prinsip-prinsip tata letak yang sama seperti di atas untuk meningkatkan ergonomi dan penempatan akhir aliran, tetapi juga menggunakan bayangan drop, warna, dan pemecahan jaringan superposisi untuk membuat menu lebih terlihat sebagai ajakan untuk bertindak.

Alternatif ini bukan alasan untuk desain yang buruk, juga tidak boleh digunakan ketika opsi yang lebih eksplisit tersedia. Tetapi mereka dapat membantu ketika ada terlalu banyak opsi menu yang sah untuk masuk ke dalam tab control atau nav bar.

22
tohster

Exis menjalankan tes A/B pada topik ini. enter image description here

Dalam kasusnya hasilnya adalah bahwa menu teks dengan perbatasan (membuatnya sangat jelas bahwa itu adalah tombol yang Anda tekan untuk melihat menu) bekerja paling baik. Siapa yang tahu;)

Artikel lengkap: https://web.archive.org/web/20160711135801/http://exisweb.net/mobile-menu-abtest

4
Tom.K

Saya menyarankan cara alternatif untuk menyediakan menu hamburger adalah penggunaan tombol menu mengambang atau tab yang akan membantu pengguna untuk melihat opsi di muka dan tidak menggunakan seluruh real estat. Ini akan meningkatkan efisiensi juga.

0
user87571