Thursday, December 2, 2021
spot_imgspot_imgspot_imgspot_img
HomeVisual DesignPola Dasar untuk Navigasi Seluler

Pola Dasar untuk Navigasi Seluler

Navigasi melalui aplikasi Anda harus intuitif dan dapat diprediksi. Baik pengguna baru maupun yang kembali harus dapat mengetahui cara bergerak melalui aplikasi Anda dengan mudah. Tetapi membuat navigasi dapat ditemukan dan diakses adalah tantangan pada ponsel karena keterbatasan layar kecil dan perlunya memprioritaskan konten di atas elemen UI. Pola navigasi yang berbeda berusaha untuk menyelesaikan tantangan ini dengan cara yang berbeda, tetapi mereka semua menderita berbagai masalah kegunaan.

Dalam artikel ini, kami akan memeriksa tiga pola navigasi dasar untuk aplikasi seluler – menu hamburger, bilah tab, dan navigasi berbasis gesture – dan menjelaskan kekuatan dan kelemahan masing-masing.

Menu Hamburger

Ruang layar adalah komoditas berharga di ponsel dan menu hamburger (atau laci samping) adalah salah satu pola navigasi seluler paling populer yang membantu Anda menyimpannya. Panel laci memungkinkan Anda untuk menyembunyikan navigasi di luar tepi kiri layar dan mengungkapkannya hanya setelah tindakan pengguna. Pola ini bisa sangat berguna jika Anda ingin pengguna Anda fokus pada konten utama.

Image for post

Dalam keadaan standarnya, menu hamburger dan semua isinya tetap tersembunyi
ContohSeperti yang Anda lihat, menu aktual disembunyikan di belakang ikon hamburger.

Image for post

Versi sebelumnya dari Foursquare. Kredit gambar: lmjabreu
Pro
Sejumlah besar opsi navigasi. Keuntungan utama dari menu navigasi adalah dapat berisi sejumlah besar opsi navigasi dalam ruang yang kecil.
Desain bersih. Membebaskan real estat layar dengan menggeser opsi dari layar ke menu samping.
Cons
Navigasi tersembunyi kurang dapat ditemukan. Apa yang tidak terlihat, tidak terpikirkan. Saat navigasi disembunyikan, pengguna cenderung menggunakan navigasi. Sementara jenis navigasi ini menjadi standar dan banyak pengguna ponsel yang mengenalnya, banyak orang masih tidak berpikir untuk membukanya.
Bentrok dengan aturan navigasi platform. Menu hamburger telah menjadi hampir standar di Android (pola memiliki nama Navigasi laci dalam Desain Bahan), tetapi di iOS itu tidak dapat diimplementasikan tanpa berbenturan dengan elemen navigasi dasar, dan ini dapat membebani bilah navigasi.

Image for post

Coba gunakan menu hamburger di aplikasi iOS. Kredit gambar: lmjabreu
Ikon hamburger menyembunyikan konteks. Menu Hamburger tidak mengkomunikasikan lokasi saat ini dalam pandangan, lebih sulit untuk memunculkan informasi tentang lokasi saat ini karena hanya terlihat ketika dan orang tersebut mengklik ikon burger.
Diperlukan tindakan ekstra untuk pindah ke tujuan. Mencapai halaman tertentu biasanya membutuhkan setidaknya dua klik (satu klik pada ikon menu dan yang lainnya – ke halaman target).
Kiat
Prioritaskan opsi navigasi. Jika navigasi Anda rumit, menyembunyikannya tidak menjadikannya ramah seluler. Banyak contoh praktis dengan jelas menunjukkan bahwa mengekspos opsi menu dengan cara yang lebih terlihat meningkatkan keterlibatan dan kepuasan pengguna. Tanyakan kepada diri sendiri: “Apa yang cukup penting untuk terlihat di ponsel?” Menjawab pertanyaan itu membutuhkan pemahaman tentang apa yang penting bagi pengguna Anda.

Image for post

Kredit gambar: suam-suam kuku
Pertimbangkan untuk menggunakan tab atau bilah tab jika Anda memiliki sejumlah opsi navigasi yang sangat diprioritaskan.
Image for post
YouTube menyediakan fungsionalitas inti utama dengan satu ketukan, memungkinkan peralihan cepat antar fitur. Penghargaan: Luke Wroblewski
Tinjau arsitektur informasi Anda. Aplikasi yang bagus sangat fokus. Jadi jika Anda memiliki satu aplikasi kompleks, Anda dapat membagi fungsinya antara dua (atau lebih) aplikasi sederhana. Facebook merilis aplikasi Messenger mereka untuk menyelesaikan masalah kompleksitas ini. Fungsi yang berkurang menghasilkan serangkaian opsi menu yang dikurangi, dan sedikit kebutuhan untuk menu hamburger.
Image for post

Tab Bar

Pola bilah tab diwarisi dari desain desktop. Biasanya berisi beberapa tujuan yang relatif sama pentingnya dan tujuan-tujuan ini memerlukan akses langsung dari mana saja di aplikasi.

Image for post

Bilah tab tidak menyembunyikan navigasi, mengizinkan akses langsung, dan menyajikan umpan balik pada ikon yang terkait dengannya.
ContohBilah tab di Twitter memungkinkan pengguna menavigasi langsung ke layar yang terkait dengan item.

Image for post
Aplikasi Twitter untuk iOS. Kredit gambar: Mashable
Pro
Tab bar cukup mudah mengkomunikasikan lokasi saat ini. Isyarat visual yang digunakan dengan benar (ikon, label dan warna) membuat jelas sendiri sehingga tidak memerlukan penjelasan apa pun.
Image for post
  • Bilah tab tetap ada. Mereka mempertahankan semua opsi navigasi di layar setiap saat sehingga pengguna Anda memiliki visibilitas yang jelas dari semua tampilan aplikasi utama dan akses sekali klik ke sana.
    Cons
    Jumlah terbatas opsi navigasi. Jika aplikasi Anda memiliki lebih dari 5 opsi, sulit untuk memasangnya di tab atau bilah navigasi dan tetap mempertahankan ukuran target sentuh yang optimal.

Image for post

Jangan gunakan lebih dari 5 opsi di bilah tab
Lokasi dan logika yang berbeda di belakang opsi bilah tab untuk iOS dan Android. Platform memiliki aturan dan pedoman berbeda tentang UI dan kegunaan dan Anda harus mempertimbangkan ini saat mendesain bilah tab untuk platform tertentu. Itu dapat muncul di bagian atas (kebanyakan Android) atau di bagian bawah halaman (sebagian besar iOS). Juga di iOS, biasa menggunakan bilah tab bawah untuk beralih di antara tampilan di aplikasi. Konvensi platform Android adalah menampilkan tab untuk kontrol tampilan di bagian atas layar. Selain itu, aplikasi Android dapat menggunakan bilah bawah untuk menampilkan tindakan.
Image for post
Lokasi dan logika yang tepat akan membantu mempertahankan pengalaman yang konsisten dengan aplikasi lain di platform dan mencegah kebingungan antara tindakan dan pengalihan tampilan. Kredit gambar: Google
Kiat
Buat target sentuh cukup besar. Buat target cukup besar untuk dengan mudah disadap atau diklik. Untuk menghitung lebar setiap tindakan navigasi bawah, bagi lebar tampilan dengan jumlah tindakan. Atau, buat semua tindakan navigasi bawah menjadi lebar dari tindakan terbesar.

Image for post

Sebagian besar pengguna dapat dengan nyaman dan andal mencapai target sentuh 10mm x 10mm. Kredit gambar: uxmag
Ikon Anda harus diuji kegunaannya. Gunakan aturan 5 detik: jika Anda membutuhkan lebih dari 5 detik untuk memikirkan ikon yang sesuai untuk sesuatu, kecil kemungkinan ikon dapat mengomunikasikan makna itu secara efektif.
Selalu gunakan ikon bersama label. Karena tidak adanya penggunaan standar untuk sebagian besar ikon, label teks diperlukan untuk mengkomunikasikan makna dan mengurangi ambiguitas. Pengguna harus dapat memahami apa yang sebenarnya terjadi ketika mereka mengetuk elemen.
Image for post
Gunakan label teks untuk memberikan definisi pendek, bermakna untuk ikon navigasi bawah
Navigasi Berbasis Gerakan29 Juni 2007, adalah game-changer. Sejak Apple meluncurkan smartphone layar sentuh sepenuhnya pertama di pasar, perangkat mobile telah didominasi oleh interaksi layar sentuh.

Kredit gambar: Aaron Wade

Gerakan segera menjadi populer di kalangan desainer dan ada banyak aplikasi yang dirancang untuk bereksperimen dengan kontrol gerakan.

Image for post
Aplikasi tugas yang digerakkan gerakan HapusDi dunia saat ini, keberhasilan aplikasi seluler dapat secara dramatis bergantung pada seberapa baik gerakan diterapkan ke dalam pengalaman penggunanya.

Contoh

Tinder mengubah industri mereka dengan gerakan gesek, sehingga hampir menjadi gerakan yang menentukan produk. Orang mengaitkan aplikasi dengan “geser ke kiri” atau “gesek ke kanan.”

Image for post
Pro
Menghapus kekacauan UI. Membangun gerakan ke jantung desain Anda memungkinkan Anda membuat antarmuka yang lebih minimal dan menghemat ruang layar untuk konten yang berharga.
“Antarmuka Pengguna Alami.” Luke Wroblewski, dalam artikelnya, memberikan informasi tentang studi di mana 40 orang di sembilan negara yang berbeda diminta untuk membuat gerakan untuk 28 tugas yang berbeda seperti menghapus, menggulir, memperbesar, dll. Hal penting yang perlu diperhatikan adalah bahwa gerakan cenderung untuk. menjadi serupa lintas budaya dan pengalaman. Misalnya, ketika diminta untuk “menghapus,” kebanyakan orang – terlepas dari kebangsaan – mencoba menyeret objek dari layar.
Cons
Navigasi yang tak terlihat. Aturan desain penting dari UI adalah visibilitas: melalui menu, semua tindakan yang mungkin dapat dibuat terlihat dan, karenanya, mudah ditemukan. Antarmuka pengguna yang tidak terlihat bisa menjadi sangat menarik, tetapi karena tidak terlihat, kemungkinan memiliki banyak masalah kegunaan: karena gerakan selalu disembunyikan, pengguna harus menemukannya terlebih dahulu dan seperti halnya pada menu hamburger: jika Anda menyembunyikan suatu opsi, semakin sedikit orang yang akan menggunakannya.
Upaya pengguna meningkat. Kebanyakan gerakan tidak alami atau mudah dipelajari atau diingat. Saat merancang navigasi berbasis gesture, ketahuilah bahwa setiap kali Anda menghapus kekacauan UI, kurva pembelajaran aplikasi naik dan tanpa petunjuk dan isyarat visual yang tepat, pengguna bisa bingung tentang cara berinteraksi dengan aplikasi.
Kiat
Pastikan Anda tidak harus mengajari orang cara baru berinteraksi dengan antarmuka. Rancang pengalaman yang akrab. Untuk merancang navigasi berbasis isyarat yang baik, Anda harus mulai dengan melihat kondisi gerakan saat ini di dunia seluler. Misalnya, jika Anda mendesain aplikasi email, Anda dapat menggunakan sapuan gerakan email karena ada kemungkinan kuat bahwa itu akan menjadi gerakan akrab bagi banyak pengguna:

Image for post

  • Gunakan pengungkapan progresif dengan sedikit isyarat visual untuk mengajari orang bagaimana berinteraksi dengan antarmuka Anda. Perlu diingat, bahwa Anda hanya perlu menampilkan informasi yang relevan dengan aktivitas pengguna saat ini, hampir sama dengan permainan yang mengungkapkan mekanisme permainan saat Anda melangkah lebih jauh ke dalam permainan.

Image for post

Pudding Monsters menggunakan tangan animasi untuk menyajikan skenario baru bagi pengguna.
KesimpulanMembantu navigasi pengguna harus menjadi prioritas tinggi untuk setiap aplikasi. Selalu pikirkan tentang persona pengguna Anda, pikirkan tujuan yang mereka miliki saat menggunakan aplikasi Anda, dan gunakan navigasi Anda untuk membantu mereka memenuhi tujuan tersebut. Semakin mudah produk Anda digunakan, semakin besar kemungkinan mereka akan menggunakannya.

Terima kasih!

 

 

 

 

 

 

 

 

 

 

 

sumber:uxplanet.org

RELATED ARTICLES
- Advertisment -

Most Popular

Recent Comments