Dasar-dasar desain navigasi untuk aplikasi Windows
Jika Anda menganggap aplikasi sebagai kumpulan halaman, navigasi menjelaskan tindakan pemindahan antar halaman dan dalam halaman. Ini adalah titik awal pengalaman pengguna, dan itulah cara pengguna menemukan konten dan fitur yang mereka minati. Ini sangat penting, dan mungkin sulit untuk memperbaikinya.
Anda memiliki sejumlah besar pilihan untuk membuat navigasi. Anda bisa:
Mengharuskan pengguna untuk menelusuri serangkaian halaman secara berurutan.
Berikan menu yang memungkinkan pengguna melompat langsung ke halaman mana pun.
Tempatkan semuanya di satu halaman dan berikan mekanisme pemfilteran untuk melihat konten.
Meskipun tidak ada desain navigasi tunggal yang berfungsi untuk setiap aplikasi, ada prinsip dan panduan untuk membantu Anda memutuskan desain yang tepat untuk aplikasi Anda.
Prinsip navigasi yang baik
Mari kita mulai dengan prinsip dasar desain navigasi yang baik:
- Konsistensi: Memenuhi harapan pengguna.
- Kesederhanaan: Jangan lakukan lebih dari yang Anda butuhkan.
- Kejelasan: Menyediakan jalur dan opsi yang jelas.
Konsistensi
Navigasi harus konsisten dengan harapan pengguna. Menggunakan kontrol standar yang terbiasa dengan pengguna dan mengikuti konvensi standar untuk ikon, lokasi, dan gaya akan membuat navigasi dapat diprediksi dan intuitif bagi pengguna.
Pengguna berharap menemukan elemen UI tertentu di lokasi standar.
Kesederhanaan
Lebih sedikit item navigasi menyederhanakan pengambilan keputusan untuk pengguna. Menyediakan akses mudah ke tujuan penting dan menyembunyikan item yang kurang penting akan membantu pengguna mendapatkan tempat yang mereka inginkan, lebih cepat.
Sajikan item navigasi di menu navigasi yang sudah tidak asing lagi.
Jangan membuat pengguna kewalahan dengan banyak opsi navigasi.
Kejelasan
Hapus jalur memungkinkan navigasi logis untuk pengguna. Membuat opsi navigasi menjadi jelas dan mengklarifikasi hubungan antar halaman akan mencegah pengguna tersesat.
Tujuan diberi label dengan jelas sehingga pengguna tahu di mana mereka berada.
Rekomendasi umum
Sekarang, mari kita mengambil prinsip desain kita --konsistensi, kesederhanaan, dan kejelasan--dan menggunakannya untuk membuat beberapa rekomendasi umum.
- Pikirkan tentang pengguna Anda. Lacak jalur umum yang mungkin mereka ambil melalui aplikasi Anda, dan untuk setiap halaman, pikirkan mengapa pengguna ada di sana dan ke mana mereka mungkin ingin pergi.
- Hindari hierarki navigasi mendalam. Jika Anda melampaui dua tingkat navigasi, berikan bilah remah roti yang menunjukkan pengguna di mana mereka berada dan mari kita mereka cepat kembali. Jika tidak, Anda berisiko terdampar pengguna Anda dalam hierarki mendalam bahwa mereka akan mengalami kesulitan untuk pergi.
- Hindari "pogo-sticking." Pogo-sticking terjadi ketika ada konten terkait, tetapi menavigasi ke sana mengharuskan pengguna untuk naik tingkat dan kemudian turun lagi.
Gunakan struktur yang tepat
Sekarang setelah Anda terbiasa dengan prinsip navigasi umum, bagaimana Anda harus menyusun aplikasi Anda? Ada dua struktur umum: datar dan hierarkis.
Datar/lateral
Dalam struktur datar/lateral, halaman ada berdampingan. Anda dapat pergi dari satu halaman ke halaman lain dalam urutan apa pun.
Sebaiknya gunakan struktur datar saat:
- Halaman dapat dilihat dalam urutan apa pun.
- Halaman ini jelas berbeda satu sama lain dan tidak memiliki hubungan induk/anak yang jelas.
- Ada kurang dari 8 halaman dalam grup.
(Ketika ada lebih banyak halaman, mungkin sulit bagi pengguna untuk memahami bagaimana halaman unik atau untuk memahami lokasi mereka saat ini dalam grup. Jika Anda tidak berpikir itu adalah masalah untuk aplikasi Anda, lanjutkan dan buat halaman serekan. Jika tidak, pertimbangkan untuk menggunakan struktur hierarkis untuk memecah halaman menjadi dua grup atau lebih kecil.)
Hirarkis
Dalam struktur hierarkis, halaman diatur ke dalam struktur seperti pohon. Setiap halaman anak memiliki satu induk, tetapi induk dapat memiliki satu atau beberapa halaman anak. Untuk mencapai halaman anak, Anda melakukan perjalanan melalui induk.
Struktur hierarkis baik untuk mengatur konten kompleks yang mencakup banyak halaman. Kelemahannya adalah beberapa overhead navigasi: semakin dalam struktur, semakin banyak klik yang diperlukan untuk mendapatkan dari halaman ke halaman.
Kami merekomendasikan struktur hierarkis saat:
- Halaman harus dilalui dalam urutan tertentu.
- Ada hubungan induk-anak yang jelas antara halaman.
- Ada lebih dari 7 halaman dalam grup.
Menggabungkan struktur
Anda tidak perlu memilih satu struktur atau yang lain; banyak aplikasi yang dirancang dengan baik menggunakan keduanya. Aplikasi dapat menggunakan struktur datar untuk halaman tingkat atas yang dapat dilihat dalam urutan apa pun, dan struktur hierarkis untuk halaman yang memiliki hubungan yang lebih kompleks.
Jika struktur navigasi Anda memiliki beberapa tingkat, kami sarankan elemen navigasi peer-to-peer hanya menautkan ke rekan-rekan dalam subtree mereka saat ini. Pertimbangkan ilustrasi yang berdekatan, yang memperlihatkan struktur navigasi yang memiliki dua tingkat:
- Pada tingkat 1, elemen navigasi peer-to-peer harus menyediakan akses ke halaman A, B, dan C.
- Pada tingkat 2, elemen navigasi peer-to-peer untuk halaman A2 hanya boleh ditautkan ke halaman A2 lainnya. Mereka tidak boleh menautkan ke halaman tingkat 2 di subtree C.
Menggunakan kontrol yang tepat
Setelah memutuskan struktur halaman, Anda perlu memutuskan bagaimana pengguna menavigasi melalui halaman tersebut. XAML menyediakan berbagai kontrol navigasi untuk membantu memastikan pengalaman navigasi yang konsisten dan andal di aplikasi Anda.
Dengan beberapa pengecualian, aplikasi apa pun yang memiliki beberapa halaman menggunakan bingkai. Biasanya, aplikasi memiliki halaman utama yang berisi bingkai dan elemen navigasi utama, seperti kontrol tampilan navigasi. Saat pengguna memilih halaman, bingkai akan dimuat dan menampilkannya.
Menampilkan daftar tautan horizontal ke halaman pada tingkat yang sama. Kontrol NavigationView mengimplementasikan pola navigasi atas.
Gunakan navigasi atas saat:
- Anda ingin menampilkan semua opsi navigasi pada layar.
- Anda menginginkan lebih banyak ruang untuk konten aplikasi Anda.
- Ikon tidak dapat menjelaskan kategori navigasi Anda dengan jelas.
Menampilkan sekumpulan tab horizontal dan isinya masing-masing. Kontrol TabView berguna untuk menampilkan beberapa halaman (atau dokumen) sambil memberi pengguna kemampuan untuk mengatur ulang, membuka, atau menutup tab.
Gunakan tab saat:
- Anda ingin pengguna dapat membuka, menutup, atau menyusun ulang tab secara dinamis.
- Anda mengharapkan bahwa mungkin ada sejumlah besar tab yang terbuka sekaligus.
- Anda mengharapkan pengguna dapat dengan mudah memindahkan tab antar jendela di aplikasi Anda yang menggunakan tab, mirip dengan browser web seperti Microsoft Edge.
Menampilkan daftar tautan horizontal ke halaman di masing-masing tingkat yang lebih tinggi. Kontrol BreadcrumbBar mengimplementasikan pola navigasi atas.
Gunakan remah roti saat:
- Anda ingin menampilkan jalur ke lokasi saat ini
- Anda memiliki banyak tingkat navigasi
- Anda mengharapkan pengguna untuk dapat kembali ke tingkat sebelumnya
Menampilkan daftar tautan vertikal ke halaman tingkat atas. Gunakan saat:
- Halaman ada di tingkat atas.
- Ada banyak item navigasi (lebih dari 5)
- Anda tidak mengharapkan pengguna sering beralih antar halaman.
Menampilkan daftar item. Memilih item menampilkan halaman terkait di bagian detail. Gunakan saat:
- Anda mengharapkan pengguna sering beralih antar item anak.
- Anda ingin mengaktifkan pengguna untuk melakukan operasi tingkat tinggi, seperti menghapus atau mengurutkan, pada item atau grup item individual, dan juga ingin mengaktifkan pengguna untuk melihat atau memperbarui detail untuk setiap item.
Daftar/detail sangat cocok untuk kotak masuk email, daftar kontak, dan entri data.
Elemen navigasi yang disematkan dapat muncul di konten halaman. Tidak seperti elemen navigasi lainnya, yang harus konsisten di seluruh halaman, elemen navigasi yang disematkan konten unik dari halaman ke halaman.
Berikutnya: Menambahkan kode navigasi ke aplikasi Anda
Artikel berikutnya, Menerapkan navigasi dasar, menunjukkan kode yang Frame diperlukan untuk menggunakan kontrol untuk mengaktifkan navigasi dasar antara dua halaman di aplikasi Anda.
Windows developer