Desain UI untuk Seluler yang Menarik? Ini Dia Contohnya

Saat ini, diperkirakan lebih dari 5 miliar orang memiliki perangkat seluler, dan lebih dari setengah perangkat ini adalah ponsel pintar. Lansekap seluler berubah dengan cepat, dan pengguna memiliki harapan tinggi tentang pengalaman seluler. Desainer berusaha keras untuk membuat desain aplikasi seluler yang tidak hanya memenuhi kebutuhan pengguna tetapi juga memberikan pengalaman yang menyenangkan. Pada artikel ini, kami akan membahas layar umum yang dimiliki hampir semua aplikasi seluler, serta berbagi beberapa kiat desain untuk setiap layar. Tetapi sebelum kita membahas detail tentang layar seluler, kita akan membahas perbedaan utama dari desain UI seluler .

Spesifikasi desain UI seluler

Seperti yang Anda ketahui, pengalaman seluler sangat terfokus karena ukuran layarnya. Karena Anda tidak dapat menempatkan sebanyak mungkin konten di layar seluler dan di desktop, konten dan fitur yang kami sediakan di perangkat seluler harus selalu diprioritaskan sesuai dengan kebutuhan audiens target.

Layar splash

Kita semua tahu pentingnya kesan pertama dalam komunikasi antarpribadi. Kesan pertama adalah apa yang seseorang pikirkan tentang Anda ketika mereka pertama kali bertemu dengan Anda. Hanya perlu sekilas bagi seseorang untuk mengevaluasi Anda ketika Anda bertemu untuk pertama kalinya. Tayangan pertama ini mengatur nada untuk hubungan yang mengikuti. Aturan yang sama berlaku untuk pengalaman digital.

Layar pertama yang dilihat pengguna saat mereka mulai menggunakan produk Anda menciptakan kesan pertama. Dan layar pertama yang ditunjukkan sebagian besar aplikasi kepada penggunanya adalah layar splash. Peran layar splash adalah untuk menciptakan perasaan bahwa aplikasi memuat dengan cepat. Layar splash biasanya minimalis dan hanya menampilkan logo dan nama produk. Disarankan untuk menampilkan splash screen tidak lebih dari 3-5 detik jika tidak, pengguna akan berpikir bahwa memuat terlalu lama.

Layar splash logo
Layar splash logo oleh Gleb Kuznetsov

Layar onboarding

Onboarding adalah istilah sumber daya manusia yang dipinjam oleh desainer produk. Tujuan orientasi adalah untuk memperkenalkan pengguna pertama kali pada produk dan membuat mereka ‘siap pakai’. Di banyak aplikasi seluler, layar orientasi didedikasikan untuk membuat pengguna terbiasa dengan fitur-fitur produk atau manfaat menggunakan suatu produk. Beberapa aplikasi mencoba mengedukasi pengguna tentang cara berinteraksi dengan UI seluler — mereka membungkus tutorial cepat atau panduan kontekstual ke dalam pengalaman onboarding untuk membiasakan pengguna dengan operasi umum. Apa pun jenis orientasi yang Anda pilih untuk digunakan, penting untuk diingat bahwa orientasi tidak boleh terasa seperti penghalang bagi pengguna pertama kali. Pastikan itu terasa alami bagi pengguna dan memungkinkan pengguna untuk melompat ke atas jika mereka ingin mulai menggunakan aplikasi.

Layar animasi onboarding pada ponsel
Pengalaman orientasi animasi oleh Cuberto

Tampilan depan

Layar beranda adalah layar yang dilihat pengguna saat mereka menyelesaikan orientasi. Layar ini bertindak sebagai titik awal untuk perjalanan pengguna. Desain layar beranda dapat bervariasi secara dramatis tergantung pada tujuan produk, tetapi ada beberapa elemen yang dimiliki hampir semua layar beranda:

  • Tidak bisa. Layar beranda harus membantu pengguna menavigasi ke berbagai bagian produk Anda. Ketika datang untuk merancang pengalaman navigasi, lebih baik menggunakan pola navigasi yang ada. UI seluler biasanya memiliki navigasi tab bar atau menu hamburger.
  • Cari kolom input. Bidang pencarian adalah elemen khas aplikasi eCommerce. Ini bertindak sebagai jalan pintas dan memungkinkan pengguna untuk mencari produk tertentu.
  • Konten yang relevan. Bergantung pada sifat suatu produk, layar beranda dapat memiliki umpan dengan item atau jenis konten lain yang akan berharga bagi pengguna.

Ketika datang untuk merancang layar awal, penting untuk mempertimbangkan kepadatan informasi. Informasi pada layar beranda harus sangat diprioritaskan. Jangan mencoba meletakkan semua yang Anda miliki di layar beranda, jika tidak layar akan terlihat berantakan.

Status kosong untuk “Tidak ada konten”

Konten adalah apa yang memberikan nilai bagi sebagian besar aplikasi. Ini adalah alasan utama mengapa orang menggunakannya – untuk konten. Karenanya, penting untuk mempertimbangkan bagaimana merancang tempat dalam perjalanan pengguna di mana pengguna mungkin belum memiliki konten. Tempat-tempat seperti itu dikenal sebagai keadaan kosong, dan keadaan kosong seharusnya tidak terlihat … yah, kosong.

Keadaan kosong adalah titik alami untuk menyuntikkan beberapa orientasi untuk memandu pengguna bersama. Alih-alih membiarkannya kosong, Anda harus menggunakannya secara efisien – untuk mendidik dan membimbing.

Keadaan kosong aplikasi Karier symplicity
Keadaan kosong aplikasi Karir Symplicity

Layar hasil pencarian

Pencarian adalah elemen penting dari UI seluler. Ketika datang untuk merancang pencarian, penting untuk mengingat beberapa aturan mendasar:

  • Gunakan pelengkapan otomatis untuk mengurangi biaya interaksi. Saat pengguna mulai mengetik sesuatu di bidang input pencarian, aplikasi Anda harus memberikan saran yang paling relevan untuk menghilangkan kebutuhan untuk mengetik seluruh permintaan pencarian, tetapi juga untuk mengurangi kemungkinan hasil pencarian nol (ketika tidak ada item yang ditemukan).
Kotak kolom pencarian kosong pada layar ungu.
Pengisian otomatis di UI seluler. GIF oleh Louise Chang.
  • Putuskan apa yang akan menjadi urutan default untuk hasil pencarian. Misalnya, jika Anda mendesain halaman hasil pencarian untuk aplikasi e-commerce, Anda perlu memutuskan apakah output harus diurutkan berdasarkan pertandingan / harga / waktu pengiriman terbaik.
  • Izinkan pengguna untuk memfilter hasil pencarian. Penyaringan sangat penting untuk aplikasi eCommerce di mana pengguna dapat memiliki puluhan opsi berbeda dalam hasil pencarian.
  • Izinkan pengguna untuk mem-bookmark item. Di aplikasi eCommerce, pengguna mungkin ingin menyimpan item tertentu untuk menyelesaikan pembelian nanti.
Opsi Bookmark dan Bagikan di APP AE
Kredit gambar: Martin Berbesson
  • Selalu pertimbangkan kondisi “Tidak ada hasil”. Layar apa yang akan dilihat pengguna ketika aplikasi tidak memiliki hasil yang cocok. Layar “Tidak ada hasil” tidak boleh bertindak sebagai jalan buntu. Alih-alih menampilkan halaman kosong dengan catatan cepat “Tidak ada hasil,” Anda harus merancang layar yang memandu pengguna dan menunjukkan apa yang dapat mereka lakukan selanjutnya.
Cuplikan layar aplikasi penerbangan Google
Cuplikan layar aplikasi penerbangan Google

Layar profil

Banyak aplikasi seluler meminta pengguna untuk membuat akun sebelum mengakses pengalaman. Pengguna memiliki tempat khusus di aplikasi seluler tempat mereka melihat dan menyesuaikan pengaturan akun mereka — layar profil. Berikut adalah beberapa hal yang perlu diingat ketika mendesain layar profil:

  • Izinkan pengguna mengubah informasi pribadi mereka dan menyesuaikan preferensi (mis. Menyesuaikan pemberitahuan yang ingin mereka terima).
Cuplikan layar halaman preferensi pemberitahuan Slack
Cuplikan layar dari preferensi pemberitahuan kendur.
  • Izinkan pengguna keluar. ‘Keluar’ adalah salah satu fitur penting yang harus diperkenalkan oleh banyak aplikasi seluler di layar profil. Fitur ini memungkinkan pengguna untuk keluar dari aplikasi dan masuk menggunakan akun yang berbeda. 
Keluar layar Facebook untuk iOS
Layar logout Facebook untuk seluler.

Layar UI seluler khusus produk

Aplikasi e-niaga

Karena tujuan utama aplikasi eCommerce adalah untuk menjual produk kepada penggunanya, aplikasi tersebut memiliki empat layar yang relevan dengan aliran pembelian produk:

  • Layar katalog produk. Layar ini menyediakan daftar barang yang ditawarkan perusahaan untuk dijual. Bergantung pada sifat produk, tata letak visual dapat berupa daftar tampilan kisi. Tampilan daftar bekerja lebih baik untuk produk-produk seperti peralatan karena pengguna ingin membaca deskripsi teks untuk membuat keputusan sementara tampilan grid bekerja lebih baik untuk pakaian di mana pengguna bergantung pada item tampilan visual ketika membuat keputusan.
  • Layar detail produk. Layar detail produk berisi informasi penting tentang item, menawarkan foto atau ilustrasi produk dan memberikan tombol ajakan untuk bertindak ‘Tambahkan ke troli.’ Tujuan dari layar ini adalah untuk membantu pengguna memutuskan apakah mereka ingin membeli produk ini atau tidak. Itu sebabnya sangat penting untuk memberikan detail yang cukup tentang barang-barang untuk menyederhanakan proses pengambilan keputusan.
  • Checkout kereta. Layar checkout adalah layar akhir yang dilihat pengguna sebelum mereka membeli produk. Layar ini harus memberikan semua informasi tentang produk dan harga akhir (termasuk pengiriman produk) dan detail pengiriman (alamat untuk pengiriman serta biayanya).
  • Beli layar konfirmasi. Layar ini menyatakan bahwa pengguna memesan item yang dipilih. Dianjurkan untuk memberikan nomor pesanan pada layar ini serta informasi tentang pengiriman (yaitu pesan seperti “Barang Anda akan tiba pada 22 Sep 2019 akan membantu pengguna memahami kapan mereka harus mengharapkan paket itu).
Layar konfirmasi dalam Booking.com
Layar konfirmasi di ponsel

Aplikasi media sosial

Karena tujuan utama aplikasi media sosial adalah komunikasi, pengalaman aplikasi dibuat untuk memberikan informasi berharga kepada pengguna secara tepat waktu:

  • Makan. Feed adalah daftar acara yang terus berubah. Ini adalah bagian penting dari aplikasi jejaring sosial apa pun. Setiap item umpan harus dirancang untuk pemindaian cepat (ingat, pengguna tidak membaca, mereka memindai !). Umpan harus dioptimalkan untuk gulir vertikal — pengguna harus merasa nyaman saat mencerna informasi.
Animasi seluler oleh Aurélien Salomon
Gif gulir feed
seluler Animasi seluler oleh Aurélien Salomon ➔
  • Teman / kontak. Layar teman / kontak menyajikan kontak pengguna dalam daftar. Biasanya daftar ini diurutkan berdasarkan nama dalam urutan abjad, tetapi beberapa aplikasi dapat memprioritaskan daftar berdasarkan frekuensi interaksi (mis. Kontak yang sering pergi ke bagian atas daftar). Biasanya, setiap item dalam daftar ini memiliki avatar, nama, dan deskripsi singkat. Layak untuk memasukkan bidang pencarian pada layar ini untuk menyederhanakan proses menemukan konten yang relevan.

Kesimpulan

Ketika datang ke desain produk, sangat penting untuk mempertimbangkan semua halaman / layar bagian dari perjalanan pengguna. Dengan melakukan itu Anda akan merancang layar yang akan selaras dengan harapan pengguna dan merampingkan proses interaksi dengan produk Anda.

sumber: xd.adobe.com

Latest articles

12.6k Followers
Follow

Related articles