Utilitas Navigasi Bagaimana Pengaruhnya Desain Pengalaman Pengguna

Untuk merancang navigasi yang efektif dan ramah pengguna, kita tidak hanya perlu memikirkan bagaimana caranya kelompokkan konten kami ke dalam menu yang terstruktur dengan baik untuk memungkinkan pengguna untuk dengan mudah menemukan apa yang mereka inginkan, tetapi juga tentang bagaimana caranya rancang alat yang mereka perlukan untuk berinteraksi dengan situs

Navigasi yang tidak terkait erat dengan konten, dan membantu pengguna melakukan tindakan berbeda disebut navigasi utilitas, dan itu adalah aspek yang kurang banyak dibahas tetapi sangat penting dari desain pengalaman pengguna. Bilah pencarian, formulir masuk dan pendaftaran, berlangganan, berbagi dan mencetak tombol, keranjang belanja, menu kontekstual, dan alat yang memungkinkan pengguna untuk beralih bahasa atau ukuran font adalah contoh khas navigasi utilitas.

Mendesainnya tidak semudah yang terlihat pada pandangan pertama membutuhkan pertimbangan untuk mengetahui elemen apa yang kita butuhkan, di mana menempatkan dan bagaimana menampilkannya untuk memastikan bahwa pengunjung kami dapat dengan cepat menemukan mereka dan memahami cara kerjanya.

Bagaimana Dampak Utilitas Navigasi UX

Saat kami merancang navigasi utilitas, kami perlu memutuskan bagaimana kami ingin pengguna kami berinteraksi dengan situs kami. Kita perlu memberi mereka struktur interaksi yang sesuai dengan tujuan bisnis kami, mengarahkan pengguna melalui perjalanan pelanggan, memberi mereka pilihan yang mudah dipahami, dan memberi mereka pengalaman pengguna yang menyenangkan.

Pertama-tama, mereka harus dapat dengan cepat melakukan tindakan yang mereka inginkan. Jika kami memungkinkan mereka melakukannya, kepuasan pelanggan akan meningkat, dan pengguna yang senang cenderung menghabiskan lebih banyak waktu dan lebih banyak uang di situs web.

Halaman beranda AirBnB mengikuti prinsip UX ini, dan menu utamanya hanya berisi alat utilitas. Ini bukan solusi yang biasa, tetapi jika kita melihat pada laju pertumbuhan AirBnB yang luar biasa, itu adalah pilihan yang sempurna bagi mereka.

4 item menu utama menargetkan 4 persona utama yang biasanya mengunjungi situs AirBnB: orang-orang yang tertarik untuk menjadi tuan rumah (“Menjadi Tuan Rumah”), orang yang ingin menyelesaikan masalah yang terjadi saat mereka menggunakan layanan (“Membantu”), pengguna baru dan yang kembali (“Daftar” dan “Masuk”). Halaman muka AirBnB yang berfokus pada utilitas juga berisi bilah pencarian cepat yang merupakan alat penting pada situs web sewaan akomodasi.

Kedua, pengguna tidak memerlukan utilitas berlebihan, karena terlalu banyak kekacauan mengganggu perhatian dan mengurangi fokus. Alat apa yang diperlukan dalam navigasi utilitas kami dan apa yang tidak bergantung pada sifat situs kami. Misalnya bermanfaat untuk menyertakan tampilan Cetak di blog atau situs berita, tetapi fitur yang sama dapat menjadi gangguan yang tidak perlu pada papan forum atau situs web media sosial.

Washington Post misalnya menampilkan navigasi utilitas pada halaman-halaman posting tunggal berbeda dari pada homepage. Dengan cara ini pengguna hanya menemukan alat utilitas yang relevan, dan tidak direcoki dengan opsi yang tidak ingin mereka gunakan.

Ada 3 item navigasi utilitas yang mungkin ingin digunakan pengunjung di seluruh situs. Ini dimasukkan dengan cerdas di bilah atas tetap (alat pencarian, “Masuk”, dan “Berlangganan”), tetapi pengguna tidak perlu memikirkan opsi yang terkait dengan pos tunggal seperti “Membaca daftar” ketika mereka menjelajahi halaman beranda atau salah satu halaman kategori.

Ketiga, pengguna perlu dengan cepat memahami apa yang dapat mereka lakukan di situs kami. Pengunjung tidak perlu tahu apa yang mereka inginkan, jadi kami selalu perlu memberi mereka informasi tentang opsi yang mereka miliki.

Jika Anda melihat tangkapan layar di bawah ini, Anda dapat melihat bahwa The New York Times memberi tahu pengguna tentang ketersediaan 3 edisi berbeda: Amerika, Internasional, dan Cina, dan juga memungkinkan mereka untuk cepat beralih di antara ketiganya. Contoh hebat dari navigasi utilitas pintar ini menunjukkan kepada pengguna opsi yang kurang jelas yang mungkin tidak akan mereka temukan sendiri, dengan cara yang tidak mencolok dan elegan..

Temukan Tempat Terbaik

Ada penempatan umum untuk navigasi utilitas di mana pengguna secara intuitif mencari alat-alat ini, karena itulah yang telah mereka gunakan di sebagian besar situs web. Melanggar konvensi desain web dianggap praktik pengalaman pengguna yang buruk, dan itu terutama berlaku untuk navigasi utilitas yang, dalam banyak kasus, lebih tentang kegunaan daripada kreativitas.

Karena navigasi utilitas adalah sekunder untuk navigasi berbasis konten di sebagian besar situs web, itu sering ditempatkan di area yang kurang menonjol tetapi masih terlihat. Ini biasanya berarti (1) sudut kanan atas situs web, dan (2) bagian bawah dari footer. Nya ide yang bagus untuk mengikuti konvensi ini, sebagai ini adalah tempat di mana sebagian besar pengguna mencari alat utilitas terlebih dahulu.

Seperti yang dapat Anda lihat di bawah, Reuters telah memposisikan sebagian besar alat utilitasnya ke dalam dua area khusus ini, sudut kanan atas situs, dan bagian bawah dari footer di bawah navigasi berbasis konten. Solusi unik di sini adalah footer ekstra tetap dengan 2 item utilitas yang dianggap paling penting oleh desainer: “Masuk atau mendaftar” dan “Terbaru dari My Wire”.

Sangat menarik untuk dicatat bahwa area navigasi utilitas tambahan masih ditempatkan di semacam footer di mana pengguna biasanya mencari alat yang serupa, jadi desainer Reuters kreatif dengan cara tertentu tapi masih mengikuti konvensi desain web untuk menjaga kegunaan.

Bangun Struktur yang Logis

Mengelompokkan alat utilitas ke dalam struktur logis sangat penting jika kita ingin membangun situs dengan tingkat konversi yang tinggi. Ini bisa menjadi tantangan bahkan jika kami tidak ingin memberikan banyak pilihan kepada pengguna, tetapi Amazon membawa kompleksitas navigasi utilitas ke tingkat berikutnya. Amazon memiliki navigasi utilitas yang sangat rumit dengan banyak opsi, tetapi jika kita cukup sering menggunakan Amazon, sepertinya tidak. Inilah keajaiban desain yang cerdas.

Mereka tidak hanya menempatkan navigasi utilitas di sudut kanan atas di mana pengguna berharap menemukannya, tetapi mereka juga membaginya menjadi 3 kelompok utama: (1) bilah pencarian, (2) informasi terkait pengguna (di bawah bilah pencarian ), dan (3) tindakan yang dapat dilakukan pengguna di situs.

Ini cerdas karena, berkat petunjuk visual seperti keranjang belanja atau ikon pencarian, pelanggan dapat memutuskan dengan sekejap mata kelompok mana yang ingin mereka gunakan, dan sejak saat itu mereka dapat mengabaikan dua lainnya. Hanya ada satu grup (“Akun Anda”, “Coba Prime”, “Keranjang”, dan “Daftar Keinginan”) yang memiliki submenu yang juga terstruktur secara logis, dan berbagai submenu grup dibagi dengan pemisah yang bijaksana tetapi terlihat untuk membantu pengguna dengan cepat menemukan apa yang mereka inginkan.

Buat Desain Visual Yang Efektif

Desain visual dari navigasi utilitas yang efektif perlu mengikuti prinsip KISS yang terkenal (Keep It Simple, Stupid). Dianjurkan untuk memberikan ikon dengan label teks, membuat kontrol terlihat seperti kontrol, dan secara visual menekankan tindakan yang paling penting. Ini juga bisa menjadi ide yang baik untuk membedakan utilitas dan navigasi berbasis konten dengan menggunakan desain yang sedikit berbeda.

Dua contoh hebat desain visual yang efektif dapat ditemukan di situs web Walmart dan Etsy. Desainer menempatkan navigasi utilitas di bagian paling atas kedua situs, dan menyorotnya dengan warna yang berbeda dari sisa navigasi, Walmart dengan latar belakang biru, dan Etsy dengan font biru.

Kedua situs tersebut menekankan tindakan pengguna yang paling penting dengan elemen desain visual yang berbeda, Walmart menggunakan warna kuning untuk tombol Cari dan Masuk, sementara Etsy memberikan batas biru diam-diam ke tombol Masuk, dan termasuk ikon keranjang belanja abu-abu di atas menu Keranjang.

Ini adalah satu-satunya tempat di mana Etsy menggunakan ikon di menu utilitasnya, sementara Walmart menampilkan ikon di sebelah setiap item, tetapi masih tidak lupa untuk menyertakan label teks yang diperlukan tepat di sebelah ikon.