Dasar-dasar desain navigasi untuk aplikasi Windows

Jika Anda menganggap aplikasi sebagai kumpulan halaman, navigasi menjelaskan tindakan pemindahan antar halaman dan di 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 untuk 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-prinsip dasar desain navigasi yang baik:

• Konsistensi: Memenuhi harapan pengguna.
• Kesederhanaan: Jangan lakukan lebih dari yang kau butuhkan.
• Clarity: Menyediakan jalur dan opsi yang jelas.

Konsistensi

Navigasi harus konsisten dengan harapan pengguna. Menggunakan kontrol standar yang sudah dikenal 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 dikenal.

Jangan membuat pengguna kewalahan dengan banyak opsi navigasi.

Kejelasan

Bersihkan 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 ambil prinsip desain kita --konsistensi, kesederhanaan, dan kejelasan--dan gunakan 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 berada 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 kembali dengan cepat. Jika tidak, Anda berisiko membela 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.

Menggunakan 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 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 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 menyarankan agar elemen navigasi peer-to-peer hanya menautkan ke rekan-rekan dalam subtree mereka saat ini. Pertimbangkan ilustrasi yang berdampingan, yang menunjukkan 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 halaman tersebut. XAML menyediakan berbagai kontrol navigasi untuk membantu memastikan pengalaman navigasi yang konsisten dan andal di aplikasi Anda.

Bingkai

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 memuat dan menampilkannya.

Navigasi atas

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.

Tab

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 berharap 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.

Remah roti

Menampilkan daftar tautan horizontal ke halaman pada masing-masing tingkat yang lebih tinggi. Kontrol BreadcrumbBar mengimplementasikan pola navigasi atas.

Gunakan remah roti saat:

• Anda ingin memperlihatkan jalur ke lokasi saat ini
• Anda memiliki banyak tingkat navigasi
• Anda mengharapkan pengguna dapat kembali ke tingkat sebelumnya

Navigasi kiri

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.

Daftar/detail

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.

Hyperlink

Elemen navigasi yang disematkan dapat muncul dalam 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.