👨🏾‍🏭 🏊 🌜 Bagaimana memikirkan navigasi di aplikasi seluler 👳🏿 🚶🏼 🍝

Penting untuk menempatkan tombol hanya di tempat yang diinginkan, agar tidak menyumbat antarmuka dan secara visual tidak membebaninya untuk pengguna. Penting untuk memberi pengguna informasi yang diperlukan untuk membuat keputusan untuk mengklik tombol yang ada atau tidak. Sekarang tentang navigasi. Saya mencoba berspekulasi mengapa elemen-elemen tertentu dalam aplikasi diimplementasikan seperti ini.

roti isi daging

Dalam menu drop-down jenis "hamburger", masuk akal untuk menempatkan item menu non-target yang jarang diminta, karena Anda perlu mengklik tombol untuk mengakses item-item ini. Ini mengurangi kemungkinan bahwa pengguna pada prinsipnya akan mengenali keberadaan item menu yang berada di belakang tombol (jika ini bukan satu-satunya tombol di antarmuka). Juga, banyak hal mulai tergantung pada seberapa terlihat tombol ini dalam konteks layar. Di hamburger, Anda sering dapat melihat Kebijakan dan Perjanjian Pengguna, Bantuan, FAQ, dan informasi teknis terperinci yang jarang diminta oleh pengguna. Pada saat yang sama, tombol target terletak di menu bawah - secepat mungkin bagi pengguna.

Hanya satu klik - beberapa detik jika Anda melakukannya hanya sekali. Dan ketika klik ini perlu dilakukan setiap kali Anda ingin menggunakan fungsi target aplikasi, itu dapat mengakibatkan beberapa jam waktu terbuang secara total. Kami peduli dengan pengguna kami.

Ara. 1. Contoh menu hamburger

Profil

Pengguna menyukai personalisasi. Oleh karena itu, kehadiran profil sangat umum dalam aplikasi di mana ada sebagian kecil dari orientasi sosial. Itu jika aplikasi menyiratkan pertukaran informasi atau hal lain yang melibatkan pengidentifikasian Anda sebagai orang di depan orang lain - secara otomatis tersirat bahwa aplikasi tersebut juga harus memiliki profil, dengan kemungkinan pengaturan yang fleksibel. Jika pengguna tidak memiliki kesempatan untuk memperbaiki kesalahan ketik yang terjadi selama pendaftaran dalam data pribadi seperti login atau email, atau mengubah gambar profil yang ditampilkan kepada pengguna lain, ini akan membawa rasa sakit dan penderitaan. Merupakan kebiasaan untuk menetapkan profil dengan ikon manusia atau avatar yang ditetapkan oleh pengguna.

Anda harus memperhatikan bagaimana Instagram melakukannya. Agar tidak mengganggu pengguna dengan satu akun yang terhubung dengan ikon profil berwarna - profil ditunjukkan oleh ikon standar dengan warna yang sama dengan menu utama. Ketika beberapa akun terhubung, maka dari akun mana Anda mengambil tindakan - itu menjadi cukup penting untuk lebih menekankan pada profil yang sedang digunakan pengguna. Oleh karena itu, ikon profil "aktif" sudah terlihat di menu.

Ara. 2. Screenshot dari menu bawah instagram. Di sebelah kiri - satu profil pengguna, di kanan - dua profil yang terhubung ke satu akun

Saya juga mencatat bahwa saya melihat beberapa aplikasi yang tidak menyiratkan identifikasi pengguna di depan orang lain, tetapi pada saat yang sama, terlalu banyak ruang dan perhatian dibayarkan ke avatar pengguna. Dan, tentu saja, dalam kasus seperti itu, orang jarang berusaha untuk menggantinya dengan sesuatu yang dipersonalisasi, karena tidak ada yang melihat avatar ini kecuali diri mereka sendiri. Ini sering terjadi dalam sistem yang berorientasi teknis, seperti aplikasi untuk menghitung sesuatu di beberapa gudang atau melacak statistik apa pun. Dalam kasus seperti itu, sangat layak untuk mengajukan pertanyaan "apakah fungsi ini diperlukan di sini atau diperlukan dalam volume seperti itu?".

Menu lebih rendah

Bentuk menu yang paling umum saat ini. Dan popularitas ini memiliki dasar.

Lebih mudah, mudah dibaca, dijelaskan dalam panduan untuk desain android dan ayos. Ini telah memantapkan dirinya dan telah dikonfirmasi dengan penggunaan jangka panjang, nyaman dan mudah dimengerti.

Secara umum, saya akan menunjukkan beberapa tahapan menu ini. Untuk aplikasi yang benar-benar inovatif yang masih digunakan oleh pengguna ikon yang tidak biasa untuk menunjukkan item menu, pertama kali, ketika audiens aplikasi akan menjadi pemasaran yang agresif, adalah menggunakan tanda tangan pada item menu, seperti Ticktok, misalnya. Tanda tangan untuk item menu juga harus diserahkan ke aplikasi dengan navigasi yang kompleks atau fungsionalitas yang luas di mana sulit untuk menafsirkan secara ambigu ikon satu atau lainnya.

Ketika sebagian besar audiens untuk aplikasi dengan fokus sempit telah terbentuk dan kemudian terserah dari mulut ke mulut dan pemasaran yang kurang agresif, Anda dapat menghapus prasasti item menu dan memberi lebih banyak ruang ke konten utama aplikasi. Mengurangi ruang yang dialokasikan sebelumnya di bawah menu, seperti Instagram, misalnya. Untuk aplikasi standar standar, atau aplikasi yang telah mengumpulkan pemirsa aktif konstan mereka, Anda dapat menggunakan menu tanpa tanda tangan.

Fig. 3. Ticktock screenshot aplikasi

Dalam beberapa kasus, biasanya untuk menyorot tindakan target paling dasar secara visual. Berada di setiap bagian menu, kita dapat beralih ke membuat konten, karena masing-masing item menu entah bagaimana terkait dengan konten, dan seluruh esensi aplikasi adalah tepatnya pembuatan dan pertukaran konten. Contohnya adalah tangkapan layar Ticktock.

Saya perhatikan menu yang terlihat tidak biasa dan menikmati popularitas di situs desain, tetapi pada saat yang sama, dalam aplikasi nyata yang mengandalkan audiens yang besar, kemungkinan besar tidak akan naik popularitasnya. Karena itu tidak nyaman untuk membaca item menu.

Fig. 4. Menu vertikal

Tab di bagian

Jika data milik satu bagian, tetapi pada saat yang sama memiliki beberapa perbedaan.

Misalnya, di aplikasi Dribble untuk desainer, ada pengalihan umpan antara orang-orang yang Anda ikuti, publikasi populer dan terkini. Itu informasinya sama, tetapi disortir dan disaring, masing-masing, dan disajikan secara berbeda. Contoh serupa adalah beralih di antara langganan dan video unggulan di Ticktock.

Tab digunakan di Instagram sedikit berbeda. Dengan bantuan tab, Anda dapat beralih antar subbagian di profil. Secara umum, ini juga logis, karena kita pergi ke profil untuk berinteraksi dengan objek tertentu - baik itu posting saya, menyebutkan menu di publikasi orang lain, atau sesuatu yang lain.

Dan dengan contoh instagram juga mudah untuk menunjukkan bahwa beberapa bagian tidak perlu ditampilkan kepada semua pengguna. Khususnya pada contoh bagian topeng. Sampai saya tahu tentang keberadaan mereka dan Anda dapat membuatnya sendiri, saya tidak memiliki bagian seperti itu. Segera setelah saya mengunggah topeng pertama saya ke jejaring sosial ini, bagian ini mulai muncul dalam diri saya. Tidak ada gunanya bagi orang yang tidak tahu tentang topeng, tetapi menggunakan Instagram untuk tujuan lain. Pengguna ini tidak perlu membebani layar dengan informasi yang tidak perlu. Dan bagi mereka yang mengetahui tentang peluang seperti itu, bagian ini sangat diperlukan.

Ara. 5. Instagram saat saya mengunggah topeng dan sebelum saya mengunggah topeng pertama

Panah kembali / Salib

Jika kita, misalnya, dalam kerangka bagian, mengungkapkan informasi terperinci, akan sangat bagus untuk menunjukkan dengan animasi bahwa bagian ini dibuka. Dan tanda silang atau panah belakang berfungsi untuk menciutkan informasi terperinci dan kembali ke layar sebelumnya.

Ini sering kali masuk akal ketika beralih dari daftar atau kartu produk, sehingga pengguna mengerti bahwa ia akan kembali ke tempat yang sama dengan tempat ia pindah dari daftar. Dan juga bahwa pengguna akan dapat melanjutkan meramban bermacam-macam lebih lanjut, tanpa harus menggulir ke tingkat katalog yang diinginkan dari mana ia pergi ke bagian rinci. Contohnya dapat dengan mudah dilihat di aplikasi Wildberry, Ozon, Lamoda, dll.

Ara. 6. Animasi membuka informasi rinci kartu dan melalui panah kembali ke daftar

Panel keluar dari bawah

Ini berfungsi mirip dengan transisi ke informasi rinci, tetapi digunakan dalam kasus di mana Anda perlu meninggalkan akses visual ke bagian dari mana transisi dibuat. Oleh karena itu, sering digunakan dalam peta, di mana untuk saat ini Anda memutuskan ke mana harus pergi dan dengan jarak yang perlu Anda atasi dan oleh beberapa informasi yang lebih rinci ditunjukkan dalam deskripsi tempat. Juga, teknik ini digunakan dalam aplikasi makanan. Ketika Anda meninggalkan akses ke informasi yang diposting sebelum memanggil formulir di mana Anda harus memasukkan jumlah makanan yang dipesan. Juga contoh yang baik adalah panel komentar perjalanan di Ticktock. Kami meninggalkan kesempatan untuk "mengingat" komentar publikasi mana yang dibuat, secara harfiah meninggalkan sepotong video ini terlihat ketika kami memperluas panel dengan komentar.

Ara. 7. Screenshot dari peta Google di sebelah kiri, makanan Yandex di tengah dan Ticktok di kanan

Ada banyak diskusi tentang pengaruh apa yang mereka miliki dan seberapa besar tergantung pada mereka. Tetapi sementara orang mencari persetujuan sosial dan belum membuat formulir yang berbeda, tombol untuk persetujuan sosial akan tetap ada dalam aplikasi.

Beberapa tombol melakukan tindakan itu sendiri, dan beberapa gulir ke titik di mana tindakan ini dapat dilakukan. Dalam hal ini, fokus bergerak langsung ke ruang di mana tindakan dilakukan. Sebagai contoh, dalam kasus pertama, ini seperti. Kami mengklik dan segera melihat bahwa jumlah mereka bertambah, dan hati mereka berwarna. Sebagai contoh opsi kedua, ini adalah komentar. Ketika Anda mengklik komentar, kami memperluas komentar untuk publikasi, atau segera fokus pada bidang input untuk meninggalkan komentar. Itu sebuah pengalihan kecil tetapi terjadi.

Kesimpulan

Untuk membangun navigasi dalam aplikasi adalah hal yang membutuhkan perhatian, ketekunan dan kehadiran logika.

Tulis dengan apa yang Anda setujui, dengan apa yang tidak Anda setujui, dan mungkin ada baiknya menambahkan sesuatu ke artikel tersebut.

Bagaimana memikirkan navigasi di aplikasi seluler