Saturday, November 27, 2021
spot_imgspot_imgspot_imgspot_img

HomeVisual DesignDesain UX untuk Handphone: Pentingnya Tombol Navigasi Bawah

Desain UX untuk Handphone: Pentingnya Tombol Navigasi Bawah

Desainer tahu bahwa desain lebih dari sekadar ketampanan. Desain juga mencakup bagaimana pengguna terlibat dengan suatu produk, apakah itu situs web atau aplikasi. Ini seperti percakapan. Navigasi adalah percakapan. Karena tidak masalah seberapa bagus situs atau aplikasi Anda jika pengguna tidak dapat menemukan jalan keluarnya.

Mengapa Navigasi Bawah begitu Penting?

Steven Hoober dalam penelitiannya tentang penggunaan perangkat seluler, menemukan bahwa 49% orang bergantung pada satu jempol untuk menyelesaikan sesuatu di ponsel mereka. Pada gambar di bawah, diagram yang muncul pada layar ponsel adalah perkiraan grafik jangkauan, di mana warna menunjukkan area apa yang dapat dijangkau pengguna dengan ibu jari untuk berinteraksi dengan layar. Hijau menunjukkan area yang mudah dijangkau pengguna; kuning, area yang membutuhkan peregangan; dan merah, area yang mengharuskan pengguna untuk mengubah cara mereka memegang perangkat.

Image for post

Representasi kenyamanan jangkauan satu tangan seseorang pada smartphone. Sumber Gambar: uxmatters

Penting untuk menempatkan tindakan tingkat atas dan yang sering digunakan di bagian bawah layar, karena mereka dapat dijangkau dengan nyaman dengan interaksi satu jempol.

Tab Bar

Banyak aplikasi mengikuti aturan ini dan menggunakan navigasi bawah (bilah tab a) untuk fitur-fitur aplikasi yang paling penting. Facebook menyediakan fungsionalitas inti utama dengan satu ketukan, memungkinkan peralihan cepat antar fitur.

Image for post
Bilah tab bawah Facebook untuk iOS.
3 Momen Penting untuk Desain Navigasi Bawah

Navigasi umumnya adalah kendaraan yang membawa pengguna ke tempat yang mereka inginkan. Dan navigasi bawah harus digunakan untuk tujuan tingkat atas yang memiliki kepentingan yang sama. Tujuan-tujuan ini membutuhkan akses langsung dari mana saja di aplikasi.

Desain navigasi bawah yang baik mengikuti tiga aturan ini.

1. Tampilkan Hanya Destinasi Paling Penting

Gunakan tiga hingga lima tujuan tingkat atas dalam navigasi bawah. Jika ada kurang dari tiga tujuan, pertimbangkan untuk menggunakan tab saja.

Image for post

Hindari menggunakan lebih dari lima tujuan di navigasi bawah karena target tap akan terletak terlalu dekat satu sama lain. Menempatkan terlalu banyak tab di bilah tab dapat menyulitkan orang untuk mengetuk tab yang mereka inginkan. Dan dengan setiap tab tambahan yang Anda tampilkan, Anda meningkatkan kompleksitas aplikasi Anda.

Image for post

Jika navigasi tingkat atas Anda memiliki lebih dari lima tujuan, berikan akses ke tujuan yang tidak tercakup dalam navigasi bawah melalui lokasi alternatif.

Hindari Konten yang Dapat Digulir

Navigasi yang disembunyikan sebagian adalah solusi yang cukup jelas untuk layar kecil – Anda tidak perlu khawatir tentang estate layar terbatas, cukup tempatkan opsi navigasi Anda ke tab yang dapat digulir. Tetapi konten yang dapat digulirkan kurang efisien, karena Anda harus menggulir sekali sebelum Anda bahkan diizinkan untuk melihat opsi yang Anda inginkan.

Image for post

Masalah “tak terlihat, tidak masuk akal” dalam aplikasi Rookie Cam untuk iOS.
2. Komunikasikan Lokasi Saat Ini

Gagal menunjukkan lokasi saat ini mungkin merupakan satu-satunya kesalahan paling umum untuk dilihat pada menu aplikasi. “Dimana saya?” adalah salah satu pertanyaan mendasar yang perlu dijawab oleh pengguna untuk menavigasi dengan sukses.

Pengguna harus tahu cara beralih dari titik A ke titik B berdasarkan pandangan pertama mereka dan tanpa bimbingan dari luar. Anda harus menggunakan isyarat visual yang tepat (ikon, label, dan warna) sehingga navigasi tidak memerlukan penjelasan apa pun.

Ikon

Karena tindakan navigasi bawah disajikan sebagai ikon, mereka harus digunakan untuk konten yang dapat dikomunikasikan dengan ikon. Ada ikon universal yang diketahui pengguna dengan baik, sebagian besar yang mewakili fungsi seperti pencarian, email, cetak, dan sebagainya. Sayangnya ikon “universal” jarang. Dan desainer aplikasi sering menyembunyikan fungsi di balik ikon yang sebenarnya cukup sulit dikenali.

Versi aplikasi Bloom.fm sebelumnya untuk Android. Sangat sulit untuk memahami lokasi saat ini bagi pengguna.

Saya telah menyoroti masalah ini dalam Ikon artikel sebagai Bagian dari Pengalaman Pengguna yang Luar Biasa.

Warna

Hindari menggunakan berbagai ikon dan label teks berwarna di bilah tab bawah Anda. Alih-alih menggunakan warna primer aplikasi untuk menunjukkan tampilan dalam fokus.

Image for post

Kiri: Ikon berwarna berbeda membuat aplikasi Anda terlihat seperti pohon natal. Kanan: Gunakan hanya satu insead warna primer.

Ikuti aturan sederhana – tint tindakan navigasi bawah saat ini (termasuk ikon dan label teks yang ada) dengan warna utama aplikasi.

Menu bilah bawah di aplikasi Twitter untuk iOS. Tampilan pesan aktif.

Jika bilah navigasi bawah berwarna, buat ikon dan label teks dari tindakan saat ini menjadi hitam atau putih.

Image for post

Left: Avoid pairing colored icons with a colored bottom navigation bar. Right: Use black or white iconography.

Label teks

Label teks harus memberikan definisi singkat dan bermakna untuk ikon navigasi. Hindari label teks yang panjang karena label ini tidak memotong atau membungkus.

Image for post
Hindari membungkus, memotong, dan mengecilkan label teks.

Elemen menu harus mudah dipindai. Pengguna harus dapat memahami apa yang sebenarnya terjadi ketika mereka mengetuk elemen.

Ukuran Target

Buat target cukup besar untuk dengan mudah disadap atau diklik. Untuk menghitung lebar setiap tindakan navigasi bawah, bagi lebar tampilan dengan jumlah tindakan. Atau, buat semua tindakan navigasi bawah menjadi lebar dari tindakan terbesar.

Pedoman Android menyarankan dimensi berikut untuk bilah navigasi bawah di ponsel.

Image for post
Memperbaiki bilah navigasi bawah di ponsel. Unit dalam piksel kepadatan-independen (dp). Sumber: Desain Material.
Lencana pada Tab

Anda dapat menampilkan lencana pada ikon bilah tab untuk menunjukkan bahwa ada informasi baru yang terkait dengan tampilan atau mode itu.

Image for post

Pertimbangkan untuk memberi tanda pada ikon bilah tab untuk berkomunikasi secara tidak mencolok.
3. Jadikan Navigasi Mandiri

Navigasi yang baik harus terasa seperti tangan yang tak terlihat yang memandu pengguna sepanjang perjalanan mereka. Lagipula, bahkan fitur paling keren atau konten paling menarik tidak berguna jika orang tidak dapat menemukannya.

Tingkah laku

Setiap ikon navigasi bawah harus mengarah ke tujuan target, dan tidak boleh membuka menu atau pop-up lainnya. Mengetuk ikon navigasi bawah akan memandu pengguna langsung ke tampilan terkait, atau menyegarkan tampilan yang sedang aktif.

Image for post

Jangan gunakan bilah tab untuk memberi pengguna kontrol yang bekerja pada elemen di layar saat ini atau mode aplikasi. Jika Anda perlu memberikan kontrol, gunakan bilah alat.

Image for post

Image for post

Toolbar for iOS.

Berjuang untuk Konsistensi

Sebisa mungkin, tampilkan tab yang sama di setiap orientasi. Yang terbaik adalah ketika Anda dapat memberikan rasa stabilitas visual kepada pengguna dengan memberikan tab yang sama di setiap orientasi.

Jangan hapus tab saat fungsinya tidak tersedia. Jika Anda menghapus tab dalam beberapa kasus tetapi tidak pada tab lain, Anda membuat UI aplikasi Anda tidak stabil dan tidak dapat diprediksi. Solusi terbaik adalah memastikan bahwa semua tab diaktifkan, tetapi jelaskan mengapa konten tab tidak tersedia. Misalnya, jika pengguna tidak memiliki file offline, tab Offline di aplikasi Dropbox menampilkan layar yang menjelaskan cara memilikinya. Fitur ini disebut Status kosong.

Image for post

Empty state screen for Dropbox app.

Sembunyikan itu

Jika layar adalah umpan gulir, bilah tab dapat disembunyikan ketika orang menggulirkan konten baru dan mengungkapkan jika mereka mulai menarik ke bawah mencoba untuk kembali ke atas.

Image for post

Bilah navigasi bawah dapat muncul dan menghilang secara dinamis saat menggulir.
Kesenangan visual

Hindari menggunakan gerakan lateral untuk transisi antar tampilan. Transisi antara tampilan aktif dan tidak aktif harus menggunakan animasi lintas fade.

Image for post

Animasi lintas-pudar. Sumber: Desain Material.
Takeaways

Navigasi bawah seharusnya

Terlihat dan Terstruktur Dengan Baik (Gunakan tiga hingga lima tujuan tingkat atas dan hindari konten yang dapat digulir dalam navigasi bawah).
Jelas (Elemen batang harus mudah dipindai dan target harus cukup besar agar mudah disadap).
Sederhana (Pastikan bahwa setiap ikon navigasi mengarah ke tujuan yang tepat dan menggunakan semua elemen, termasuk navigasi bawah, di seluruh aplikasi Anda secara konsisten).
Kesimpulan

Membantu menavigasi pengguna harus menjadi prioritas tinggi untuk hampir setiap situs dan aplikasi. Tujuan di balik momen ini adalah untuk menciptakan sistem interaksi yang secara alami selaras dengan model mental pengguna.

Anda mendesain untuk pengguna Anda. Selalu pikirkan tentang persona pengguna Anda, pikirkan tujuan yang mereka miliki saat menggunakan aplikasi Anda, dan gunakan navigasi Anda untuk membantu mereka memenuhi tujuan tersebut. Semakin mudah produk Anda digunakan, semakin besar kemungkinan mereka akan menggunakannya.

sumber:uxplanet.org babich.biz

RELATED ARTICLES
- Advertisment -

Most Popular

Recent Comments