Image

QUICK CONTACT













Image

4 Creative Navigation UI Patterns for Great UX

29 Jan 2021 by Billy Gani
Entah  seberapa baik website Anda bekerja , kehadirannya tidak akan berjalan efektif jika pengguna tidak dapat menemukan jalan untuk mengaksesnya. Untungnya, pola navigasi UI dapat menjadi salah satu jalan pintas untuk website yang baik dalam penggunaannya. Pola dari UI ini memang biasanya digunakan untuk pembelajaran, karena semakin sedikit hal yang harus dikuasai oleh pengguna dalam website Anda. Pikirkan bagian atas dari kolom navigasi - Jika Anda melihat beberapa kata yang terpisah dari bagian atas layar, tentunya pengguna langsung tahu bahwa hal tersebut merupakan tautan internal.
 
Masalah dengan pola ini adalah sulit untuk menjadi menonjol ketika melakukan hal yang sama dengan apa yang mungkin kompetitor Anda juga lakukan. Tetapi, Anda juga tidak ingin terlalu menyimpang dari fungsi yang ingin Anda berikan pada hal-hal lain yang sama pentingnya dengan navigasi. Anda tentunya perlu mencari area yang tepat di antara familiaritas dan kreativitas. 
 
Maka dari itu, pada artikel berikut ini, kami akan mencoba memberikan beberapa pemahaman untuk Anda dalam prinsip navigasi yang baik :
 
Ketika berpikir di luar zona nyaman menjadi salah satu ide baik, ada beberapa aturan yang tetap perlu Anda ikuti. 
 
Yang pertama dan paling penting adalah, sebuah sistem navigasi haruslah sederhana. Tanpa terkecuali, setiap website harus memiliki struktur sesederhana mungkin. Sama seperti website yang hanya dapat memiliki beberapa halaman kecil, pastikan bahwa navigasi Anda juga demikian. Navigasi yang baik harus dapat terasa ringan dalam genggaman tangan pengguna yang menuntun mereka  selama perjalanan.
 
Selanjutnya, sistem navigasi Anda juga haruslah jelas. Fungsinya sendiri haruslah dapat dibuktikan. Tidak ada penjelasan atau kurva pembelajaran yang diperlukan. Pengguna Anda harus mengetahui bagaimana cara berpindah dari titik A ke B secara akurat hanya dengan sekilas. Dan juga, aturan lain yang tidak dapat dinegosiasikan adalah penyajian orientasi - dengan kata lain, pengguna harus dapat mengetahui pada halaman apa mereka berada, apakah halaman tersebut terhubung dengan halaman lain, dan bagaimana cara mereka kembali pada halaman sebelumnya jika diperlukan. 
 
Terakhir, konsistensi. Sistem navigasi senantiasa diperlukan untuk halaman beranda haruslah sama pada halaman lainnya. Anda dapat memilih sistem navigasi yang paling efektif untuk website Anda. tetapi, Ketika keputusan sudah Anda ambil, senantiasa gunakan keputusan tersebut. Prinsip ini juga bekerja untuk setiap navigasi halaman, entah pola mana yang Anda gunakan dari beberapa contoh dibawah ini:
 
Menu Navigasi Vertikal
 
Hal ini cukup sederhana dan mudah, tetapi banyak website yang kurang memperhatikannya. Jika Anda ingin menggunakan tab menu horizontal tetapi dengan twist yang unik, putarlah tab tersebut menjadi vertikal. Navigasi menu vertikal ini sama efektifnya dengan yang horizontal, dengan perbedaan yang jelas di antara halaman dan kemudahan untuk disadari fungsinya. Meskipun menempatkan kolom vertikal pada bagian kiri cukup familiar (Facebook), menu navigasi vertikal di bagian kanan juga dapat menarik perhatian dan berbeda untuk pengguna Anda. 
 
 
Mari kita lihat contoh di atas dari AIAIAI. Tanpa mengorbankan fungsionalitas apapun, websitenya melanggar dua norma umum yaitu dengan tidak menggunakan menu navigasi horizontal dan juga tidak bertempat pada bagian kiri layar.
 
Long Scrolling
 
Dengan meningkatnya popularitas dari pengguliran (scrolling) website dengan konten yang berada pada halaman tunggal senantiasa muncul terus-menerus - meskipun tidak sebanyak dalam format halaman yang terpisah. Hal ini menjadikan saat ini sebagai waktu yang tepat untuk mencoba pola pengguliran (scrolling) panjang satu halaman, karena senantiasa memberikan kesan rasa yang baru, tetapi cukup familiar sehingga pengguna dengan mudah dapat memahami cara kerjanya.
 
Dengan prompt cepat seperti "scroll down", pengguna memulai perjalanan di mana setiap layar mereka menampilkan sebuah halaman. Pola ini bekerja paling baik untuk perkembangan, seperti menampilkan fase yang berbeda dalam suatu proses, tetapi juga dapat diterapkan ke konten apapun, 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 lebih baik, terutama dengan parallax scrolling. Sisi negatifnya adalah pembatasan kebebasan untuk pengguna, karena mereka memiliki sedikit kendali atas urutan mereka saat melihat  halaman website. Solusi untuk hal ini adalah dengan menyertakan navigasi tetap yang ada secara bersamaan, sehingga pengguna dapat bereksperimen dengan scroll atau langsung melompat ke halaman yang diinginkan.
 
Mari kita lihat contoh dari website For Better Coffee di bawah ini.
 
 
Saat pengguna menggulirkan halaman ke bawah, mereka akan mengikuti biji kopi (dengan posisi yang tetap pada layar) melalui beberapa fase berbeda dari proses produksi kopi dengan grafis yang senantiasa berganti. Sepanjang jalan di setiap fase perjalanan tersebut, website mencantumkan aturan yang digarisbawahi tentang cara pembuatan kopi yang lebih baik, dengan tautan untuk informasi Anda. Di satu sisi, tautan bergaris bawah yang dapat diakses melalui pengguliran panjang tidaklah menjadi menu navigasi yang rumit.
 
Di bagian bawah, Anda juga dapat menemukan tombol CTA untuk mendaftar ke newsletter yang mereka miliki. Pengoptimalan konversi merupakan tempat website dengan halaman tunggal benar-benar bersinar, menurut sebuah studi yang dilakukan oleh Basecamp pada website mereka sendiri. Pengalaman linier ini memanfaatkan ketertarikan pada penceritaan sehingga Anda dapat melihat titik konversi sebagai "akhir" alami dari pengalaman tersebut.
 
Opsi Tunggal Dari Halaman Beranda (Single Option Home Page)
 
Pola halaman beranda yang memiliki opsi tunggal memberi Anda kontrol paling besar atas langkah pertama pengguna karena hanya ada satu opsi yang mereka dapatkan. Pola ini bekerja dengan sempurna pada pengguliran yang disebutkan di atas, karena satu-satunya pilihan pengguna adalah dengan menggulir ke bawah. Halaman beranda dengan opsi tunggal ini juga dapat bertindak sebagai titik masuk ke seluruh website dengan banyak halaman yang Anda miliki.
 
Hal yang menarik dari pola ini adalah bahwa Anda menuntun pengguna ke tempat yang Anda inginkan dengan mengeliminasi seluruh hal berantakan yang muncul dalam perjalanan pengguna. Biasanya, pola ini terlihat dalam halaman beranda dengan:
 
  • Judul

  • Tagline / slogan (opsional)

  • Paragraf pengenalan yang deskriptif

  • Penggunaan gambar yang bernilai

  • Tombol CTA

Sama seperti long scroll, kekurangan yang paling terlihat adalah keterbatasan dari kebebasan pengguna. Biasanya, pola ini digunakan dengan hamburger menu, untuk memberikan pengguna kebebasan lebih tanpa mengacaukan gaya minimalis dari website. Tetapi, pola tersebut tetaplah rancu, dan hanya dapat digunakan pada beberapa website yang memiliki layar tidak terlalu lebar.
 

 
Website eksperimental Sonoran Valley memulai perjalanan pengguna dengan satu opsi di dalamnya. Setelah diklik, pengguna memiliki lebih banyak kebebasan. Jadi, mengapa mereka memulai pengalaman di halaman selanjutnya? Halaman beranda dengan satu opsi memberikan kesan pertama yang lebih kuat dengan grafis tengkorak dan kutipan filosofisnya. Hal ini menciptakan suasana misteri yang membuat pengguna ingin belajar lebih banyak.
 
Dan juga, opsi tunggal menjadi salah satu pilihan termudah untuk dibuat, menurut Hick’s Law. Setelah pengguna Anda melakukan klik pertama dari website yang berkaitan, mereka sudah berinvestasi pada website Anda, dan kemungkinan besar akan melanjutkan perjalanan mereka.
 
Navigasi Layar Penuh (Full-Screen Navigation)
 
Untuk kesederhanaan dan kemudahan penggunaan, menjadi lebih besar terkadang lebih baik. Menampilkan opsi Anda pada seluruh layar memastikan pengguna Anda untuk melihat cara menavigasikan website, dan memungkinkan beberapa visual kreatif untuk Anda tempatkan di dalamnya. Meskipun Anda tidak dapat menampilkan konten lain dengan pola ini, keuntungannya penggunaan menu navigasi ini adalah konten di dalamnya, sehingga gambar atau ikon yang menyertainya memiliki arti yang lebih besar.
 

 
Clothing line KATVIG memperluas menu navigasinya di seluruh layar, dengan setiap halaman yang diwakili dengan foto sentimental, dan setiap opsi diselingi dengan citra yang menarik. Website ini juga menghindari kebingungan pengguna dengan menempatkan opsi yang sama pada tab menu horizontal di bagian atas.
 
Mencampurkan Pola
 
Pola-pola ini tidak eksklusif, dan dapat digunakan bersama untuk menciptakan efek yang lebih baik. Misalnya, tab menu horizontal dapat ditambahkan ke salah satu pola hanya untuk keamanan (seperti contoh KATVIG), atau long scrolling dapat mengabaikan opsi lain selain menggulir, menjadikan halaman beranda Anda  beropsi tunggal.
 
Faktanya, satu website, Bad Assembly, memanfaatkan keempat pola navigasi kreatif ini.
 

 
Pengguna memulai perjalanannya pada halaman beranda, dengan satu ajakan bertindak yang terpusat. Namun, hamburger menu pada bagi kanan atas ditarik ke bawah ke menu navigasi sisi kanan yang vertikal untuk lebih banyak memberikan kebebasan pada pengguna.
 
(Perhatikan juga, logo Bad Assembly yang dapat diklik di sudut kiri atas - hal ini menjunjung tinggi prinsip dari orientasi navigasi, karena pengguna juga dapat kembali ke halaman beranda jika mereka tersesat pada halaman lainnya.)
 

 
Pengguna dapat menekan tombol CTA, atau menggulir ke bawah. Faktanya, pengguna dapat menavigasikan website Anda sepenuhnya dengan menggeser (jika mereka mau). Layar berikutnya menampilkan menu layar penuh dari berbagai pilihan.
 
Keempat pola navigasi kreatif sudah diterapkan, tetapi alih-alih bersaing, mereka sebenarnya saling melengkapi. Bekerja sama, mereka menciptakan sistem yang lebih aman dan lebih komprehensif bagi pengguna untuk berpindah dari halaman ke halaman - dan jika hal tersebut bukan inti dari sistem navigasi, lalu apalagi?
 
 
Nah, berikut empat pola navigasi UI untuk UX yang lebih baik yang dapat mulai Anda terapkan pada website Anda. Jika Anda masih membutuhkan bantuan, kami dapat membantu.
 
Eannovate sebagai salah satu agency web development di Jakarta dengan kualitas dan layanan terbaik dapat membantu anda dalam bidang UI UX Design di Jakarta. Atau juga jika sebenarnya anda hanya memerlukan aplikasi perangkat dan website sederhana yang berkualitas dengan harga yang terjangkau, ExpressWeb juga kini hadir sebagai bagian dari Eannovate untuk memenuhi kebutuhan anda dalam pembuatan UI UX Design di Jakarta dengan memberikan website dan aplikasi perangkat dengan harga yang lebih terjangkau serta cepat dan mudah, tanpa mengurangi kesan profesional dari perusahaan anda.
 
Selain itu, Eannovate sebagai salah satu SEO agency di Jakarta dengan kualitas dan layanan terbaik juga hadir untuk melengkapi bisnis anda dalam bidang SEO marketing di Jakarta. Dengan memberikan layanan terbaik untuk SEO services di Jakarta seperti FREE SEO Audit, kami menjamin bahwa website anda dapat kami diagnosa dan membuatnya muncul pada pencarian page 1 di Google. Buatlah perusahaan anda lebih dikenal oleh target audiens anda dengan menyerahkan layanan jasa Digital Marketing di Jakarta hanya pada Eannovate.
 
Anda mencari website yang menyajikan informasi teknologi kreatif yang dilengkapi dengan berita startup, info gadget terupdate, dan berita di dunia IT terbaru dan terkini? Anda dapat mengunjungi blog kami, AlterSpace.
 
Jika ada pertanyaan mengenai aplikasi perangkat (mobile apps), UI UX dan digital marketing Jakarta,  jangan sungkan untuk langsung menghubungi kami di
Telp : 021-5437-5601 (Senin - Jumat, 9 pagi - 5 sore) ,
 
Email : hello@eannovate.com atau menggunakan contact form.
 
 
 
 
 
Reference: Awwwards

AYO BUAT IDEMU JADI KENYATAAN!

Hubungi kami untuk membicarakan ide anda. Ayo bersama membuatnya menjadi kenyataan!

AYO MULAI!

CONTACT

Image
LOKASI
INDONESIA

Ruko Kosambi Baru blok A ext 1 no 66. Jakarta Barat.


Image
TELEPON
INDONESIA
+6221 5437 5601
+62813 8251 8448


Whatsapp no of Eannovate
WHATSAPP
+62813 8251 8448
Click number above

Whatsapp of Web, UI UX Design, Mobile App Development, SEO in Jakarta, Indonesia
E-MAIL
hello [at] eannovate.com

Office hours of Web, UI UX Design, Mobile App Development, SEO in Jakarta, Indonesia
JAM KERJA
Mon-Fri 9.30am - 6.00pm