3 Konsep Kreatif Navigasi Tab Bar Seluler

Ketika memilih pola untuk membuat sebuah konsep kreatif navigasi tab bar seluler, perancang produk biasanya memilih antara dua opsi - side drawer (juga dikenal sebagai menu hamburger) dan tab bar. Kedua pola navigasi memiliki pro dan kontra.

• Visibilitas lokasi pengguna saat ini. Tidak perlu mengetuk menu hamburger untuk mencari tahu di mana Anda berada di aplikasi. Sekilas mungkin untuk mendapatkan informasi ini.
• Penemuan yang bagus. Pengguna melihat semua opsi navigasi tingkat atas sejak awal.
• Mudah dijangkau. Bilah tab terletak di zona yang mudah dijangkau (di bawah layar). Pengguna tidak perlu meregangkan jari untuk mencapai opsi tertentu.

Tetapi tab bar juga memiliki beberapa kelemahan:

• Jumlah terbatas opsi navigasi. Dimungkinkan untuk menempatkan lima hingga tujuh opsi navigasi di bilah tab tanpa menjadikan ukuran target sentuh terlalu kecil.
• Tab bar mengambil bagian layar. Karena navigasi yang baik harus selalu terlihat, tab bar akan mengambil bagian dari ruang layar yang berharga.

Di artikel ini, Anda akan menemukan tiga konsep navigasi tab bar yang menarik, seperti contoh berikut ini:

1. Nested Navigation Option

Seperti yang disebutkan di atas, salah satu kelemahan tab bar yang signifikan adalah sejumlah opsi. Pada ponsel, dimungkinkan untuk menempatkan maksimal tujuh opsi navigasi tingkat atas di bilah tab. Meskipun jumlah opsi navigasi yang terbatas tidak akan menjadi masalah bagi sebagian besar aplikasi seluler, beberapa aplikasi mungkin perlu menyediakan lebih banyak opsi.

Di bawah ini Anda dapat menemukan konsep yang mencoba menyelesaikan masalah dengan sejumlah opsi terbatas. Ketika pengguna mengetuk ikon folder, beberapa opsi lain menjadi terlihat dalam ruang fisik yang sama. Ukuran ikon folder (yang bertindak sebagai induk untuk tiga opsi lainnya) menyiratkan bahwa objek ini melakukan lebih dari opsi lain untuk pengguna.

Kelebihan: Memberikan lebih banyak opsi dalam ruang fisik yang sama.

• Efek animasi mungkin memerlukan waktu pengembangan ekstra.
• Biaya interaksi tinggi. Tap ekstra yang diperlukan untuk memilih opsi bersarang ini.

2. Memisahkan tombol tab aktif dari tab bar

Karena tab bar biasanya memiliki opsi navigasi tingkat atas, setiap opsi di bilah bertindak sebagai tujuan independen. Konsep yang ditunjukkan di bawah ini mencoba memisahkan target secara visual.

Ketan (penulis animasi ini) memberikan kode sumber bilah animasi ini React Native Tabbar Interaction. Dia juga menjelaskan proses pembuatan bilah ini secara rinci dalam artikelnya FAB Tabbar - Concept to Reality

• Kelebihan: Transisi visual yang bagus dengan jelas membedakan sumber dan tujuan.
• Kekurangan: Animasi terasa agak lambat. Ini bisa menjengkelkan terutama ketika Anda harus terus beralih di antara tab untuk berinteraksi dengan aplikasi.

3. Efek animasi tap/ketuk

Menciptakan kesan pertama yang baik adalah salah satu tujuan terpenting yang dimiliki pengembang seluler saat ini. Mengingat fakta bahwa aplikasi rata-rata kehilangan 80% dari pengguna mereka segera setelah instalasi, menciptakan kesan yang baik adalah peluang untuk mengurangi persentase ini.

Salah satu cara untuk mencapai tujuan ini adalah dengan menciptakan pengalaman yang tak terlupakan. Saat berinteraksi dengan produk digital, Anda tidak mengingat seluruh proses interaksi, yang biasanya diingat adalah detail spesifik. Ini mungkin sesuatu yang sederhana seperti maskot lucu, warna-warna cerah atau animasi halus. Itu sebabnya banyak desainer mengatakan itu berulang-ulang

Efek animasi smooth yang digunakan dalam konsep berikut ini mampu menciptakan pengalaman pertama yang benar-benar mengesankan. Ramotion (penulis konsep ini) menyediakan kode sumber untuk animasi ini.

• Kelebihan: Efek animasi membantu menciptakan kesan pertama yang baik.
• Kekurangan: Efek animasi dapat mengganggu bagi pengguna biasa. Bayangkan saja pengguna yang melihat efek seperti itu setiap kali mereka berinteraksi dengan suatu aplikasi.

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini