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.
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.
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.
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.
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.
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.
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.
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.
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.
Lencana pada Tab
Anda dapat menampilkan lencana pada ikon bilah tab untuk menunjukkan bahwa ada informasi baru yang terkait dengan tampilan atau mode itu.
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.
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.
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.
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.
Kesenangan visual
Hindari menggunakan gerakan lateral untuk transisi antar tampilan. Transisi antara tampilan aktif dan tidak aktif harus menggunakan animasi lintas fade.
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
