Pola Navigasi Aplikasi Seluler: Tab, Drawer, dan Alur Bertingkat
Pilih pola navigasi aplikasi seluler berdasarkan frekuensi tugas, struktur informasi, kebutuhan aksesibilitas, dan kemudahan pengguna menemukan kembali posisinya.
Navigasi harus membuat struktur aplikasi mudah dipahami. Orang perlu mengetahui area apa saja yang tersedia, di mana posisi mereka, dan cara berpindah tanpa kehilangan pekerjaan. Bilah tab, drawer, atau alur bertingkat bukan sekadar pilihan gaya: masing-masing menunjukkan hubungan berbeda antartujuan.
Mulailah dari tugas yang sering dilakukan kembali, lalu petakan hierarki konten. Gunakan navigasi langsung untuk tujuan yang sejajar, navigasi bertingkat untuk hubungan induk-ke-detail, dan drawer atau navigasi adaptif pada layar lebih besar ketika aplikasi memiliki terlalu banyak tujuan untuk ditampilkan dengan nyaman di layar ringkas.
Poin utama
- Gunakan tab atau bilah navigasi untuk sejumlah kecil area tingkat atas yang berbeda dan sering dikunjungi kembali.
- Gunakan navigasi bertingkat ketika suatu tujuan memang berada di dalam tujuan lain, dan pertahankan jalur kembali yang jelas.
- Perlakukan drawer sebagai cara menampilkan daftar tujuan yang lebih luas, bukan tempat menyembunyikan tugas penting.
- Perjelas label, status terpilih, perilaku fokus, dan pemulihan status agar orang dapat berorientasi dan kembali ke posisinya.
Mulailah dari struktur, bukan komponen
Daftarkan tujuan dalam aplikasi dan kelompokkan menurut model mental pengguna. Tujuan seperti Cari dapat sejajar dengan Beranda; detail item yang disimpan berada di bawah Tersimpan. Jika orang perlu sering berpindah di antara tujuan sejajar, buat pilihan itu tetap terlihat. Jika biasanya mereka bergerak dari koleksi ke satu item lalu kembali, tumpukan atau alur bertingkat menyampaikan hubungan itu secara alami.
Bedakan tujuan navigasi dari tindakan. Tulis, bagikan, saring, dan urutkan mengubah atau bertindak atas konteks saat ini; biasanya itu bukan lokasi dalam aplikasi. Tempatkan tindakan tersebut di bilah alat, menu, atau kontrol kontekstual daripada menjadikan setiap tindakan sebagai item navigasi utama.
- Sebutkan pekerjaan yang berulang kali dilakukan orang dan tentukan area mana yang harus dapat dijangkau dari mana saja.
- Gambarkan hubungan induk-anak sebelum memilih kontrol navigasi.
- Pastikan tujuan pada tingkat hierarki yang sama konsisten secara visual dan perilaku.
Bandingkan ketiga pola
Bilah tab atau bilah navigasi membuat beberapa tujuan tingkat atas terlihat dan cepat diakses bergantian. Pola ini cocok ketika tujuan-tujuannya sejajar dan setiap label dapat dikenali tanpa penjelasan. Tampilkan area saat ini sebagai terpilih. Hindari memasukkan tindakan yang tidak terkait ke bilah atau membiarkan tujuan penting tersembunyi dalam menu tambahan.
Drawer navigasi dapat memuat kumpulan tujuan yang lebih besar dan berkelompok, terkadang juga pergantian akun atau ruang kerja. Drawer modal menghemat ruang layar, tetapi menambah langkah membuka lalu memilih dan untuk sementara menutupi konten. Pada ponsel ringkas, biaya interaksi itu dapat membuat tujuan yang sering dipakai terasa tersembunyi. Panduan Android Material 3 saat ini mengutamakan bilah navigasi untuk tiga hingga lima tujuan pada layar ringkas dan menyesuaikan navigasi untuk ukuran jendela yang lebih besar; panduan Material lama yang merekomendasikan drawer untuk lima tujuan atau lebih tidak boleh dianggap sebagai ambang batas universal saat ini.
Navigasi bertingkat menggunakan daftar, kartu, atau tautan untuk membuka tampilan anak, dengan judul dan kontrol kembali yang mempertahankan jalurnya. Pola ini cocok untuk kategori, pengaturan, detail produk, dan tugas bertahap. Tingkatan yang terlalu dalam menjadi menjengkelkan ketika hierarki tersembunyi, perilaku Kembali tidak konsisten, atau pengguna harus berulang kali mundur untuk mencapai tujuan sejajar. Tambahkan pencarian, pintasan, atau struktur tingkat atas yang lebih jelas jika orang sering berpindah antarcabang.
| Pola | Cocok ketika | Hal yang perlu diwaspadai |
|---|---|---|
| Tab / bilah navigasi | Beberapa area sejajar memerlukan akses langsung yang sering | Terlalu banyak tujuan, ikon ambigu, menu tambahan tersembunyi, status tiap tab hilang |
| Drawer navigasi | Orang memerlukan daftar tujuan yang banyak atau berkelompok dan teratur | Area penting tersembunyi di balik menu, daftar gulir panjang, masalah fokus atau penutupan |
| Navigasi bertingkat | Orang bergerak dari koleksi induk ke detail atau tugas terkait | Lokasi tidak jelas, Kembali tidak konsisten, kedalaman berlebihan, data yang dimasukkan hilang |
Pilih berdasarkan frekuensi tugas dan ukuran layar
Tanyakan seberapa sering orang berpindah antarea dalam satu sesi biasa. Kumpulan kecil tujuan yang stabil dan sering digunakan lebih cocok dengan bilah yang terlihat. Jika sebagian besar penggunaan berfokus pada satu tugas atau membaca detail, buat navigasi lebih tenang dan sisakan ruang untuk konten. Drawer dapat cocok untuk bagian yang lebih jarang digunakan, tetapi periksa apakah orang masih dapat menemukannya dan kembali tanpa menebak.
Rencanakan ukuran jendela, orientasi, dan konvensi platform. Human Interface Guidelines Apple saat ini menjelaskan bilah tab iPhone sebagai navigasi tingkat atas dan mendukung tampilan bilah tab/bilah samping yang adaptif di iPad. Material 3 menyebut pola ringkasnya bilah navigasi dan menawarkan bentuk navigasi berbeda saat lebar yang tersedia bertambah. Pola-pola ini memiliki tujuan yang sama tetapi bukan komponen yang identik; ikuti penempatan, perilaku, dan adaptasi asli platform alih-alih menyalin tampilan navigasi satu platform ke platform lain.
Pastikan orientasi dan pemulihan dapat diandalkan
Ikon saja membuat navigasi lebih sulit dipelajari dan dapat membingungkan pengguna pembaca layar. Berikan label singkat yang terlihat pada tujuan, tampilkan status terpilih secara semantis, dan pastikan kontrol memiliki nama yang aksesibel serta area sentuh yang mudah digunakan. Periksa kontras pada status terpilih dan tidak terpilih, teks yang diperbesar, lokalisasi, dan tata letak kanan-ke-kiri. Uji dengan VoiceOver atau TalkBack serta navigasi papan ketik atau sakelar bila didukung; fokus harus berpindah secara terduga saat drawer dibuka, tujuan dipilih, atau tampilan ditutup.
Pemulihan adalah bagian dari navigasi. Bedakan perilaku Kembali dan Tutup: Kembali menelusuri hierarki ke belakang, sedangkan Tutup keluar dari tampilan sementara atau modal. Pertahankan posisi yang berguna dan data yang dimasukkan ketika berpindah antararea tingkat atas atau kembali dari detail. Ketika tujuan kosong atau sementara tidak tersedia, pertahankan posisinya dan jelaskan kondisinya alih-alih diam-diam menghapus atau menonaktifkan navigasi. Untuk tugas yang merusak atau berbiaya, jelaskan jalur kembali sebelum pengguna berkomitmen.
Audit navigasi yang praktis
Telusuri aplikasi dengan tugas nyata, lalu ulangi dengan fitur aksesibilitas aktif. Catat apakah orang dapat mengenali area saat ini, mencapai tujuan yang sering dipakai, dan pulih setelah salah memilih jalur. Bandingkan perjalanan yang sama pada ponsel ringkas dan jendela lebih besar; tata letak adaptif harus mempertahankan arsitektur informasi saat bentuk kontrol berubah.
Gunakan pustaka layar untuk membandingkan contoh nyata bagian dan alur aplikasi, lalu nilai masing-masing terhadap tugas dalam produk Anda. Pola terbaik menjaga strukturnya tetap terbaca seiring pertumbuhan aplikasi dan memperjelas jalur kembali setelah gangguan.
- Dapatkah pengguna baru menjelaskan area tingkat atas hanya dari labelnya?
- Apakah tujuan yang sejajar mudah diakses bergantian, dengan pilihan saat ini ditampilkan jelas?
- Apakah layar detail menampilkan judul yang bermakna dan jalur Kembali yang dapat diprediksi?
- Apakah membuka dan menutup drawer mempertahankan konteks serta memindahkan fokus aksesibilitas secara masuk akal?
- Apakah label, area sentuh, kontras, dan status terpilih tetap dapat digunakan dengan teks lebih besar serta teknologi bantu?
- Dapatkah seseorang kembali tanpa kehilangan input draf, posisi gulir, atau lokasi penting dalam hierarki?
- Apakah strukturnya menyesuaikan layar lebih besar tanpa menggandakan navigasi utama yang saling bersaing?
