Daftar periksa UX 30 poin untuk aplikasi seluler

gambar

Artikel ini adalah pengingat tentang apa yang Anda perlukan untuk memeriksa ulang desain aplikasi Anda sebelum mengirimnya ke AppStore / GooglePlay. Daftar ini dibagi menjadi beberapa blok tematik:

  1. Login / Daftar
  2. Pengalaman pertama
  3. Interaksi harian
  4. Notifikasi
  5. Pengaturan Akun
  6. Pita
  7. Cari
  8. AppStore / GooglePlay

Perangkat Lunak EDISON - pengembangan web
Artikel ini diterjemahkan dengan dukungan EDISON Software, sebuah perusahaan yang mengembangkan aplikasi dan situs , dan juga berurusan dengan antarmuka pengguna .

1. Masuk / Daftar


1. Screensaver

Layar splash ditampilkan saat aplikasi dimulai. Ini adalah hal pertama yang dilihat pengguna, ini menciptakan kesan pertama produk, bahkan sebelum mulai bekerja.

gambar

Layar splash logo oleh Gleb Kuznetsov

gambar

Rider Launch Transition oleh Uber

Berikut adalah beberapa tips untuk membuat screensaver yang bagus .

2. Lupa kata sandi Anda

Rata-rata orang terdaftar di 90 layanan online yang memerlukan kata sandi. Oleh karena itu, kata sandi seringkali “dilupakan”. Menurut statistik, 21% pengguna lupa kata sandi mereka selama 2 minggu, dan 25% lupa satu kata sandi setidaknya sekali sehari. Jika aplikasi Anda memerlukan kata sandi, maka rawatlah formulir pemulihan kata sandi.

gambar

Lupa aliran kata sandi oleh Emmanuel Torres

2. Pengalaman pertama


3. Layar selamat datang / instruksi saat dijalankan pertama kali (Onboarding)

Onboarding adalah istilah desain-UX yang berarti cara memahami pengguna apa yang harus dilakukan dengan aplikasi Anda, cara menavigasinya, ke mana harus mengklik. Orientasi yang baik meningkatkan kemungkinan bahwa "pendatang baru" akan menjadi "permanen."

gambar

Pengalaman orientasi animasi oleh Cuberto

Berikut adalah tips praktis untuk orientasi yang baik .

Berikut adalah konsep kreatif untuk orientasi .

4. Layar dengan pemberitahuan konfirmasi data yang berhasil

Banyak aplikasi seluler meminta konfirmasi surat / telepon. Pemberitahuan tentang operasi konfirmasi data yang berhasil muncul setelah pengguna menyelesaikan semua yang diperlukan.

gambar

Layar konfirmasi oleh Diana Caballero

Untuk layar ini, sangat penting untuk memastikan:

  • kemampuan untuk mengirim lagi kode konfirmasi (untuk ponsel)
  • petunjuk tentang cara menemukan pesan konfirmasi (pencarian berdasarkan judul, pencarian dalam spam, dll.) (untuk surat)

5. Rintisan bertopik untuk "Belum ada konten"

Konten adalah tujuan pengguna memasang sebagian besar aplikasi. Penting untuk memikirkan tempat-tempat di mana pengguna berhasil melirik, di mana belum ada konten. Tempat-tempat yang belum dijelajahi ini tidak boleh kosong.

Alih-alih meninggalkan kekosongan, masukkan tutorial atau instruksi tentang apa yang harus dilakukan selanjutnya.

gambar

Keadaan kosong aplikasi karir symplicity

6. Avatar pengguna default


Sebagian besar pengguna (~ 95% menurut Jared M. Spool ) tidak mengubah pengaturan default. Ini berarti bahwa pengguna akan memiliki avatar yang telah Anda pilih untuk mereka.

gambar

Avatar pengguna default yang lucu di Dropbox

Berikut adalah beberapa ide tentang cara membuat avatar default .

3. Interaksi harian


7. Layar permintaan resolusi

Ketika pengguna membuka aplikasi baru, hal terakhir yang ingin mereka lihat adalah banyak pop-up yang bertanya:

  • Izinkan aplikasi mengakses lokasi Anda.
  • Izinkan aplikasi mengakses kontak Anda.
  • memungkinkan akses aplikasi ke kamera Anda

Permintaan seperti itu secara negatif memengaruhi pengalaman pengguna, dan mengarah pada fakta bahwa aplikasi tersebut dapat dihapus dengan marah. Permintaan izin tersebut memiliki dampak yang sangat negatif pada pengalaman pengguna dan biasanya mengarah pada pengabaian aplikasi. Karena itu, lebih baik meminta izin pada saat interaksi pengguna.

gambar

Dialog Izin Pemberitahuan oleh Anton Tkachuk

Di sini lebih detail tentang permintaan izin .

8. Berbagai status untuk elemen interaktif

Tombol dan elemen interaktif lainnya memiliki beberapa status. Sangat penting untuk memikirkan status default / ditekan / tidak tersedia untuk setiap elemen interaktif dalam aplikasi Anda.

gambar

Status tiga tombol

gambar

Tombol desain bahan oleh Vadim Gromov

Berikut tips tentang cara mendesain tombol .

9. Ikon diatur

Akan lebih baik jika ikon Anda memiliki gaya yang sama.

gambar

Ikon bilah tab di aplikasi Twitter untuk iOS

Berikut adalah daftar periksa untuk ikon-ikon tersebut .

10. Pesan kesalahan

Pesan kesalahan terbaik adalah yang tidak muncul sama sekali. Cara yang lebih baik untuk menghindari kesalahan adalah menginstruksikan pengguna dengan benar sebelumnya. Tetapi jika, bagaimanapun, kesalahan telah terjadi, maka pesan kesalahan yang kompeten tidak hanya mengajarkan pengguna bagaimana mencegahnya di masa depan, tetapi juga menjelaskan kepada pengguna bahwa mereka dirawat dan tidak diabaikan.

gambar

Interaksi Kesalahan oleh Dwinawan

Berikut adalah beberapa kasus yang perlu Anda pikirkan tentang pesan kesalahan:

  • Tidak ada koneksi internet. Pikirkan tentang apa yang harus dilihat pengguna ketika tidak ada koneksi.
  • Pengguna memasukkan data dengan tidak benar.
  • Kesalahan sistem

Berikut artikel cara-cara membuat pesan kesalahan yang baik .

11. Proses boot

Meskipun respons instan dari aplikasi adalah yang terbaik, ada kalanya aplikasi Anda harus "menyelam". Koneksi internet yang buruk dapat menyebabkan respons yang lambat, atau operasi itu sendiri mungkin memakan waktu lama. Dalam kasus seperti itu, untuk meminimalkan tekanan pengguna, Anda harus meyakinkan pengguna bahwa aplikasi berfungsi atas permintaan mereka. Ketika suatu aplikasi tidak dapat memberi tahu pengguna bahwa dibutuhkan waktu untuk menyelesaikan suatu tindakan, pengguna sering berpikir bahwa aplikasi tersebut belum menerima permintaan, dan mereka mencoba lagi. Karena kurangnya umpan balik, pengguna dapat menekan semua tombol dengan keras.

Indikator progres beranimasi adalah bentuk paling umum menyediakan status sistem kepada pengguna ketika sesuatu terjadi atau dimuat.

gambar

Smile loader untuk desain produk AI oleh Gleb Kuznetsov

Berikut adalah beberapa kiat untuk membuat indikator pemuatan .

12. Pesan bahwa Anda melakukan segalanya dengan benar

Status keberhasilan adalah layar yang kami tunjukkan kepada pengguna saat mereka menyelesaikan tugas. Desainer harus mempertimbangkan jenis kondisi keberhasilan berikut:

  • Status luar biasa (kesuksesan pertama). Pada saat pengguna pertama kali melakukan tugas penting, Anda memiliki peluang besar untuk menciptakan hubungan emosional positif antara dia dan produk Anda. Biarkan pengguna Anda tahu bahwa mereka berhasil, mengenali kemajuan mereka dan merayakan kesuksesan dengan pengguna.
  • Layar konfirmasi. Layar konfirmasi adalah layar yang diperlukan untuk aplikasi e-commerce. Pada saat pengguna menyelesaikan pembelian, kami perlu menunjukkan layar yang akan memberikan semua informasi yang diperlukan tentang pembelian.

gambar

Layar konfirmasi dalam Booking.com

13. IsiOtomatis

Desainer harus selalu berusaha untuk meminimalkan biaya interaksi dengan menghilangkan tindakan yang tidak perlu. Autocomplete menyederhanakan input pengguna dengan mengurangi jumlah klik yang harus diselesaikan pengguna untuk menyelesaikan permintaan.

gambar

Gambar: Louise Chang

14. Batalkan operasi

Kita semua membuat kesalahan, tetapi ketika berinteraksi dengan pengguna, sangat penting untuk memberikan opsi yang membantu pengguna memulihkan data penting.

gambar

Undo untuk item Hapus. Gambar: Sashoto Seeam

gambar

Batalkan untuk mengirim email. Gambar: Tyler Beauchamp

15. Lokalisasi / Internasionalisasi

Karena banyak tim pengembangan memiliki rencana untuk jangkauan global, penting untuk menjadikan lokalisasi / internasionalisasi sebagai bagian alami dari proses desain. Properti visual elemen (mis. Ukuran) dan salinan UX harus dipilih berdasarkan lokalisasi / internasionalisasi.

gambar

Tombol upvote dalam berbagai bahasa. Gambar: Chier Hu

16. Bantuan / Instruksi

Ketika pengguna memiliki masalah, reaksi alami pertama mereka adalah menemukan solusi dalam aplikasi. Oleh karena itu, ada baiknya untuk memberikan tautan ke bagian bantuan / pertanyaan umum dalam aplikasi.

gambar

Bantuan dan Umpan Balik oleh Alex Muench

17. Aksesibilitas

Aksesibilitas memungkinkan orang dengan semua kemampuan untuk memahami, memahami, dan berinteraksi dengan produk Anda. Berikut ringkasan hebat dari Lillian Xiao tentang apa yang perlu diketahui perancang tentang ketersediaan perangkat seluler.

Dan berikut adalah daftar alat untuk memeriksa kontras warna .

4. Pemberitahuan


18. Notifikasi aplikasi / pemberitahuan push

Tahukah Anda bahwa pemberitahuan buruk adalah alasan utama mengapa pengguna menghapus instalan aplikasi?

gambar

Pemberitahuan yang mengganggu adalah alasan orang mencopot pemasangan aplikasi seluler (71% responden mengatakan).

Namun, Anda dapat mengubah antipattern UX ini menjadi sesuatu yang bermakna dan berguna untuk bisnis dan pengguna. Untuk mencapai hasil yang baik dengan pemberitahuan di aplikasi, desainer memerlukan strategi penerbitan yang paling cocok untuk perangkat seluler.

Berikut adalah artikel yang memberikan informasi tentang cara membuat notifikasi yang baik .

Dan inilah beberapa ide desain yang inspirasional .

19. Pengaturan Pemberitahuan

Itu selalu menyenangkan untuk memberi pengguna kebebasan memilih. Dalam konteks notifikasi seluler, ini berarti dapat memilih notifikasi mana yang ingin mereka terima.

gambar

Tetapkan opsi pemberitahuan di Slack

5. Pengaturan Akun


20. Alat untuk memotong foto profil

Izinkan pengguna untuk tidak hanya mengunggah avatar, tetapi juga memodifikasinya sesuai dengan kebutuhan mereka di aplikasi Anda.

gambar

Mengedit avatar oleh Scott Thomas

21. Layar untuk melihat / mengubah data pribadi

Izinkan pengguna mengedit data pribadi mereka langsung di aplikasi seluler. Buat layar untuk melihat pratinjau informasi pengiriman / penagihan dan untuk menambahkan informasi ini ke daftar yang dapat diedit.

gambar

Alamat rumah dan kantor dapat diedit. Pilih alamat pengiriman dari Dhiraj S. Karki

22. Logout

Jika aplikasi Anda mengharuskan untuk masuk, maka harus ada peluang untuk keluar juga.

gambar

Logout di Facebook untuk iOS

23. Ketentuan penggunaan

Tambahkan Ketentuan Penggunaan ke aplikasi Anda untuk menghindari tindakan hukum.

gambar

Gambar: Cristian Dina / Shutterstock

24. Pengaturan privasi

Biarkan pengguna melihat data apa yang mereka kirimkan kepada Anda dan biarkan mereka memilih.

gambar

Gambar: Vitaly Friedman

Berikut adalah tips tentang cara menangani privasi dalam aplikasi .

25. Kirim umpan balik

Memberikan cara cepat untuk membagikan umpan balik tentang produk Anda, Anda tidak hanya mengumpulkan informasi berharga tentang produk Anda dari pengguna sungguhan, tetapi juga membuat mereka percaya bahwa ulasan mereka bermanfaat bagi Anda.

gambar

Skype untuk iOS memberi pengguna opsi untuk "Tinggalkan umpan balik", "Laporkan masalah" atau "Sarankan fitur."

6. Pita


26. Menggulir

Tampilan seluler kecil. Untuk menghemat ruang pada layar, desainer sering ingin mengoptimalkan informasi yang ditampilkan dan menyembunyikan segala sesuatu yang tidak bernilai bagi pengguna. Inilah sebabnya mengapa banyak layar saluran memiliki dua status: status default (layar yang dilihat pengguna saat mereka memasuki saluran) dan status gulir (saat pengguna menggulir ke atas untuk melihat lebih banyak konten).

gambar

Perhatikan bahwa area judul runtuh saat menggulir. Craiglist Mobile animation oleh Aurélien Salomon

Cari di dalam aplikasi


27. Perilaku default

Wang perlu memutuskan seperti apa urutan pencarian defaultnya. Misalnya, jika Anda mendesain halaman hasil pencarian untuk aplikasi e-commerce, Anda perlu memutuskan apakah akan mengurutkan output berdasarkan waktu pencocokan / harga / pengiriman terbaik.

28. Bagikan / Bookmark

Izinkan pengguna berbagi dan menandai apa yang mereka temukan.

gambar

Suka, Bookmark dan Bagikan opsi di App AE oleh Martin Berbesson

29. Formulir kosong untuk "Tidak ada hasil"

Apa yang akan dilihat pengguna jika mereka mencari sesuatu, tetapi tidak ada hasil pencarian? Layar “Tanpa Hasil” seharusnya tidak berarti akhir. Beri tahu pengguna apa langkah yang harus diambil selanjutnya.

gambar

Aplikasi Google Flights menawarkan pengguna menghapus semua filter untuk menemukan penerbangan

8. AppStore / GooglePlay


30. Ikon untuk aplikasi

Anda perlu merancang ikon yang menarik untuk aplikasi Anda, sesuatu yang mencerminkan esensi produk Anda dan membangkitkan minat di antara pengguna potensial.

gambar

Monument Valley adalah gim yang indah, dan ikon aplikasi OS sangat cocok untuk petualangan indah yang akan Anda lakukan.


Baca juga blognya
Perusahaan EDISON:


20 perpustakaan untuk
aplikasi iOS yang spektakuler

Source: https://habr.com/ru/post/id474472/


All Articles