4 Pola Navigasi yang Kreatif dan Unik untuk UX yang Hebat

Tidak masalah seberapa bagus situs web Anda jika pengguna tidak dapat menemukan jalan keluarnya.

Kredit foto: Pola Ketuk

Dalam posting ini, kami akan membantu Anda lebih memahami prinsip-prinsip navigasi yang baik, kemudian menunjukkan kepada Anda bagaimana hal itu dilakukan dengan beberapa pola favorit kami. Untuk saran lebih lanjut, silakan periksa e-book gratis Merancang UX yang Lebih Baik Dengan Pola UI dan Pola Web UI.

Untungnya, pola navigasi UI adalah jalan pintas untuk kegunaan situs web yang baik.

Pola UI sangat menakjubkan untuk dipelajari, karena pengguna Anda harus mencari tahu lebih sedikit di situs Anda. Pikirkan saja bilah navigasi atas: jika Anda melihat kata-kata diletakkan di bagian atas layar, mereka secara naluriah tahu itu adalah tautan internal.

Masalah dengan pola adalah sulit untuk menonjol ketika Anda melakukan hal yang sama dengan yang dilakukan orang lain. Tetapi Anda tidak ingin menyimpang terlalu jauh dari fungsionalitas dengan sesuatu yang sama pentingnya dengan navigasi. Anda perlu menemukan sweet spot itu antara keakraban dan kreativitas.

Prinsip Navigasi Web

Meskipun berpikir di luar kotak biasanya merupakan ide yang bagus, ada beberapa aturan yang tidak bisa Anda langgar. Ini adalah prinsip navigasi yang pertama kali kami gambarkan dalam Praktik Terbaik Desain Web.

Pertama, dan yang paling penting, sistem navigasi harus sederhana . Tanpa kecuali, setiap situs harus memiliki struktur sesederhana mungkin. Sama seperti situs Anda hanya harus memasukkan halaman sesedikit mungkin, pastikan navigasi Anda tidak mengganggu mungkin. Navigasi yang baik harus terasa seperti tangan yang tak terlihat yang memandu pengguna sepanjang perjalanan mereka.

Selanjutnya, sistem navigasi harus jelas . Fungsi harus jelas. Tidak ada penjelasan atau kurva pembelajaran yang diperlukan. Pengguna Anda harus tahu cara beralih dari titik A ke titik B berdasarkan pandangan pertama mereka.

Kredit foto: White Frontier Brewery  via awwwards

Aturan lain yang tidak dapat dinegosiasikan adalah memberikan orientasi – dengan kata lain, memberi tahu pengguna di mana halaman saat ini terkait dengan halaman lain, dan bagaimana cara kembali ke halaman sebelumnya jika perlu. Misalnya, beberapa pola bermanfaat termasuk remah roti dan tab.

Terakhir, diperlukan konsistensi . Sistem navigasi untuk halaman rumah harus sama pada setiap halaman. Anda dapat memilih jenis sistem navigasi mana yang paling cocok untuk situs Anda, tetapi begitu Anda mengambil keputusan, tetaplah menggunakannya.

Prinsip-prinsip ini berlaku untuk semua navigasi situs, apa pun dari empat pola berikut di bawah ini yang Anda pilih.

# 1: Menu Navigasi Vertikal

Ini sangat sederhana dan mudah, namun sebagian besar situs bahkan tidak mempertimbangkannya: jika Anda menginginkan semua kegunaan bilah menu horizontal tetapi dengan putaran unik, cukup putar vertikal.

Menu navigasi vertikal sama efektifnya dengan rekan horisontal, dengan perbedaan yang jelas antara halaman dan fungsionalitas yang mudah dikenali.

Meskipun menempatkan kolom vertikal di sisi kiri sedikit familier (Facebook), menu navigasi vertikal sisi kanan masih jarang terasa berbeda.

Sumber: AIAIAI via awwwards

Mari kita lihat pembuat headphone AIAIAI. Tanpa mengorbankan kegunaan apa pun, situs ini bertentangan dengan norma dalam dua cara: tidak berjalan horizontal dan tidak turun sisi kiri.

Ada beberapa perdebatan mengenai manfaat dari menu vertikal sisi kiri, tidak sedikit dari itu adalah bahwa ia mengambil nilai layar real estat. Untuk analisis yang lebih menyeluruh tentang menu vertikal sisi kiri dan cara menggunakannya dengan benar, baca artikel Majalah Smashing ini.

Pola # 2: Pengguliran Panjang

Dengan semakin populernya pengguliran, situs-situs dengan sebagian besar konten mereka pada satu halaman semakin banyak – meskipun tidak sebanyak format halaman terpisah yang tradisional. Itu membuat ini saat yang tepat untuk mencoba pola gulir panjang satu halaman, karena masih terasa baru, tetapi cukup familiar sehingga pengguna mengerti cara kerjanya.

Dengan prompt cepat seperti “gulir ke bawah,” pengguna memulai perjalanan di mana setiap layar baru menyajikan halaman. Pola ini bekerja paling baik untuk kemajuan, seperti menampilkan fase yang berbeda dalam suatu proses, tetapi juga dapat diterapkan pada konten apa pun, dari sampel dalam portofolio hingga lini produk yang berbeda untuk toko online.

Jika Anda ingin menceritakan narasi visual yang kaya, gulungan panjang adalah teman terbaik Anda.

Pola ini juga membuka potensi visual yang luar biasa, terutama dengan penggiliran paralaks. Seperti yang kami jelaskan dalam Desain UI Web untuk Mata Manusia , gulir panjang satu halaman dan gulir paralaks berjalan beriringan.

Kelemahannya adalah pembatasan kebebasan pengguna, karena mereka memiliki sedikit kontrol atas urutan mereka melihat halaman. Solusi untuk ini adalah dengan memasukkan navigasi persisten secara bersamaan, sehingga pengguna dapat bereksperimen dengan gulir atau hanya melompat ke halaman yang mereka inginkan.

Sumber: For Better Coffee melalui awwwards

Sumber: For Better Coffee melalui awwwards

Mari kita lihat For Better Coffee.

Saat pengguna menggulir ke bawah, mereka mengikuti biji kopi (dalam posisi tetap di layar) melalui berbagai fase produksi kopi, mengubah grafik saat berjalan. Sepanjang jalan pada setiap fase, situs mencantumkan aturan yang digarisbawahi tentang cara membuat kopi yang lebih baik, dengan tautan untuk saya informasi. Di satu sisi, tautan yang digarisbawahi yang dapat diakses melalui scroll panjang tidak lebih dari menu navigasi yang rumit.

Di bagian bawah, Anda juga akan menemukan ajakan bertindak untuk mendaftar nawala. Optimasi konversi adalah tempat situs satu halaman benar-benar bersinar, menurut sebuah studi yang dilakukan oleh Basecamp di situs mereka sendiri . Pengalaman linear mengambil keuntungan dari afinitas kami untuk bercerita sehingga kami melihat titik konversi sebagai “akhir” alami dari pengalaman.

Pola # 3: Halaman Beranda Opsi Tunggal

Pola beranda opsi tunggal memberi Anda kendali penuh atas langkah pertama pengguna Anda karena hanya ada satu opsi.

Pola ini bekerja sempurna dengan gulir panjang yang disebutkan di atas, karena satu-satunya pilihan adalah gulir ke bawah. Halaman beranda opsi tunggal juga dapat bertindak sebagai titik masuk ke situs multi-halaman lainnya.

Daya tarik dari pola ini adalah Anda mengarahkan pengguna ke tempat yang Anda inginkan sembari menghilangkan segala kekacauan. Biasanya, pola ini terlihat di beranda dengan:

  • judul
  • slogan / slogan (opsional)
  • paragraf pengantar nilai / nilai yang deskriptif tapi ringkas
  • citra yang bermakna (biasanya pahlawan)
  • ajakan bertindak tunggal yang menarik perhatian

Seperti gulir panjang, downside jelas adalah pembatasan kebebasan pengguna. Seringkali, pola ini digunakan dengan menu hamburger, untuk memberi pengguna lebih banyak kebebasan tanpa mengganggu gaya minimalis. Meski begitu, pola ini adalah pertaruhan, dan hanya boleh digunakan oleh situs tertentu yang secara inheren memiliki rentang penggunaan yang sempit.

Sumber: Sonoran’s Valley via awwwards

Situs eksperimental Sonoran’s Valley memulai perjalanan pengguna dengan satu opsi. Setelah diklik, pengguna memiliki lebih banyak kebebasan.

Jadi mengapa tidak memulai pengalaman di halaman 2 saja? Halaman beranda opsi tunggal membuat kesan pertama yang lebih kuat dengan grafik tengkorak dan kutipan filosofisnya. Ini menciptakan suasana misteri yang membuat Anda ingin belajar lebih banyak.

Bagaimanapun, satu opsi adalah pilihan termudah untuk dibuat, menurut Hukum Hick (dibahas dalam Praktik Terbaik Desain Interaksi ). Setelah pengguna Anda melakukan klik pertama yang mudah, mereka akan berinvestasi di situs, dan lebih cenderung untuk melanjutkan.

Pola # 4: Navigasi Layar Penuh

Untuk kesederhanaan dan kemudahan penggunaan, lebih besar terkadang lebih baik.

Menampilkan opsi Anda di seluruh layar memastikan bahwa pengguna Anda akan melihat cara menavigasi, dan memungkinkan beberapa visual kreatif. Meskipun Anda tidak dapat menampilkan konten lain dengan pola ini, sisi baiknya adalah menu navigasi adalah konten, sehingga gambar atau ikon yang menyertainya memiliki makna yang lebih besar.

Sumber: KATVIG via awwwards

Lini pakaian sadar lingkungan KATVIG memperluas menu navigasi di seluruh layar, dengan setiap halaman diwakili oleh foto sentimental, dan setiap opsi diselingi dengan gambar yang menarik. Situs ini juga menghindari kebingungan dengan menempatkan opsi yang sama di bilah menu horizontal di bagian atas.

Mencampur Pola

Pola-pola ini tidak eksklusif, dan dapat digunakan bersama satu sama lain untuk menciptakan efek yang lebih baik. Misalnya, bilah menu horizontal dapat ditambahkan ke salah satu pola hanya untuk keamanan (seperti contoh KATVIG ), atau gulir panjang dapat mengabaikan opsi lain selain menggulir, menjadikannya sebagai beranda satu opsi.

Faktanya, satu situs, Bad Assembly , mengambil keuntungan dari keempat pola navigasi kreatif ini.

Sumber: Bad Assembly via awwwards

Pengguna mulai di halaman beranda, dengan satu ajakan untuk bertindak. Namun, menu hamburger di kanan atas menarik ke bawah, menu navigasi sisi kanan untuk lebih banyak kebebasan pengguna.

(Perhatikan, juga, logo Bad Assembly yang dapat diklik di sudut kiri atas – ini menjunjung tinggi prinsip navigasi orientasi, karena pengguna juga dapat kembali ke beranda jika mereka tersesat.)

Sumber: Bad Assembly

Pengguna dapat mengklik ajakan bertindak, atau gulir ke bawah. Bahkan, pengguna dapat menavigasi situs sepenuhnya dengan menggulir (jika mereka mau). Layar selanjutnya menampilkan menu layar penuh dari berbagai pilihan.

Keempat pola navigasi kreatif kami diterapkan, tetapi alih-alih bersaing, mereka sebenarnya saling melengkapi. Bekerja bersama, mereka menciptakan sistem yang lebih aman dan lebih komprehensif bagi pengguna untuk berpindah dari halaman ke halaman – dan jika itu bukan poin dari sistem navigasi, lalu apa itu?

Untuk saran lebih lanjut tentang menemukan dan memilih pola UI yang sempurna, lihat e-book gratis Merancang UX Dengan Pola UI yang lebih baik . Anda akan belajar pendekatan 4 langkah untuk mendapatkan pola UI terbaik, bersama dengan contoh dari Dribbble, Jawbone, Duolingo, Dropbox, MailChimp, Medium, dan banyak lagi.

sumber: awwwards.com

Latest articles

12.6k Followers
Follow

Related articles