Bagikan melalui


Dasar-dasar desain navigasi untuk aplikasi Windows

Header dasar navigasi

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:

contoh navigasi 1 Mengharuskan pengguna untuk menelusuri serangkaian halaman secara berurutan.

contoh navigasi 2 Berikan menu yang memungkinkan pengguna melompat langsung ke halaman mana pun.

contoh navigasi 3 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.

gambar komponen halaman

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.

Cuplikan layar pertama bilah hijau yang memiliki tanda centang hijau dan kata Lakukan di dalamnya.

navview baik

Sajikan item navigasi di menu navigasi yang sudah tidak asing lagi.

jangan contoh

navview buruk

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.

Cuplikan layar tiruan aplikasi yang memperlihatkan jalur yang jelas untuk navigasi bagi pengguna.

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.

Halaman yang disusun dalam struktur datar

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

Halaman disusun dalam hierarki

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.

aplikasi dengan struktur hibrid

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.

Gambar bingkai

Menengah

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.

tab dan gambar pivot

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 dan gambar pivot

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

tab dan gambar pivot

Remah roti

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

gambar navview

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.

Gambar detail daftar

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.

Gambar hyperlink dan tombol

Hyperlink

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.