8 Tips Berguna untuk UX yang Lebih Baik di Flutter

May 07 2023
Kemanusiaan selalu memperhatikan hal-hal yang rumit, tetapi kebanyakan perbaikan kecil membuat perbedaan.
Aplikasi Anda mungkin bekerja dengan sempurna—sangat cepat, tanpa pengecualian, tanpa error, tanpa crash—seperti yang diharapkan. Tetapi jika Anda tidak memberikan pengalaman yang lancar dan bermanfaat kepada pengguna, produk Anda akan menjadi aplikasi biasa, bukan aplikasi yang luar biasa.

Aplikasi Anda mungkin bekerja dengan sempurna—sangat cepat, tanpa pengecualian, tanpa error, tanpa crash—seperti yang diharapkan. Tetapi jika Anda tidak memberikan pengalaman yang lancar dan bermanfaat kepada pengguna, produk Anda akan menjadi aplikasi biasa, bukan aplikasi yang luar biasa. Lebih buruk lagi, pengguna mungkin tidak puas dengan pengalaman tersebut dan menjadi gila seiring waktu.
(Misalnya, tidak menutup keyboard setelah mengklik tombol pencarian.)

Jadi mari kita buat aplikasi kita menonjol!

1. Jadikan widget Anda yang dapat digulir selalu dapat digulir.

BouncingScrollPhysics hebat! Namun jika kita tidak memiliki cukup item untuk melampaui tampilan, itu tidak akan terpental sama sekali. Agak masuk akal, sebenarnya.

Tapi bagaimana jika kita ingin me-refresh daftar?

Untuk membuat efek bouncing/overscroll terlepas dari ukuran item, kita harus menggunakan AlwaysScrollableScrollPhysics dengannya .

selalu dapat digulir

2. Fokus otomatis saat terbuka

Terkadang kami ingin menggunakan halaman hanya untuk mengisi bidang teks.

Itu bisa berupa bidang pencarian atau email. Kami ingin memfokuskannya segera setelah terbuka karena kami tahu pengguna pada akhirnya akan memfokuskannya, jadi mengapa repot-repot membuat pengguna mengambil langkah ekstra dengan mengetuk bidang teks?

fokus otomatis saat terbuka

3. Pastikan bidang teks terlihat.

Anggaplah kita memiliki formulir dan perlu memvalidasi beberapa masukan. Pengguna akan mengklik tombol kirim, tetapi tunggu, tombol tidak berfungsi karena beberapa bidang tidak divalidasi.

Pengguna mungkin tidak mengerti karena bidang ini tidak terlihat di layar pada saat itu. Itu dapat menyebabkan beberapa pengalaman yang tidak memuaskan.

Tapi jangan khawatir, mencegahnya cukup sederhana! Lalu mari kita lihat caranya!

pastikan bidang teks terlihat

4. Fokus pada widget berikutnya saat memasukkan atau mengirimkan.

Yang itu cukup mudah. Anda mengetik nama Anda, dan Anda ingin pergi ke bidang teks kedua saat masuk. Itu yang diharapkan dari semua orang, dan mereka juga harus mendapatkannya!

selanjutnya fokus pada enter

Saya juga memperhatikan sesuatu: banyak orang menggunakan FocusNode untuk itu. Tidak ada yang salah dengan FocusNode, tetapi kami juga tidak terlalu membutuhkannya. Kita cukup mengatur textInputAction, dan ini dia! Menggunakan FocusNode adalah langkah ekstra yang tidak kita perlukan.

5. Ingat posisi gulir.

Asumsikan bahwa Anda menggulir halaman dan mengklik kartu untuk melihat detail atau beralih ke tab lain. Kemudian kembali ke daftar lagi, tetapi Anda melihat posisi itu disetel ulang, dan Anda harus memulai dari awal lagi! Benar-benar bencana!

ingat posisi gulir

6. Ketuk lagi untuk keluar.

Pengguna Android mungkin secara tidak sengaja mengklik tombol kembali saat berada di halaman beranda, dan aplikasi akan segera beralih ke latar belakang.

Apakah itu akan menjadi pengalaman yang baik bagi mereka?

Saya akan meninggalkan Anda dengan pertanyaan ini sendirian dan menunjukkan kepada Anda bagaimana Anda dapat dengan mudah mencegah hal ini terjadi!

(Maaf untuk contoh yang buruk, saya terlalu malas untuk beralih ke emulator Android untuk mendemonstrasikan kasus dengan tombol kembali fisik.)

ketuk lagi untuk keluar

7. Tidak fokus saat menggulir.

Kami telah mengetik, kami telah masuk, dan kami ingin keyboard membiarkan kami sendirian dengan kontennya. Itu saja yang kami inginkan! Tolong jangan lepaskan dari kami!

tidak fokus pada gulir

8. Tidak fokus merekam di luar.

Jika kita tidak ingin membuat pengguna tergila-gila, kita juga harus membiarkan mereka menutup keyboard saat mereka mengetuk di luar kolom teks.

tidak fokus pada penyadapan di luar

akhirnya

Tidak ada keajaiban, itu hanya detail kecil.

Perhatikan detail kecilnya agar orang berpikir bahwa Anda seorang pesulap!

- Pesulap

Proyek Github

Ambil dan tinggalkan tepuk tanganmu!

Terima kasih telah membaca!

Saya rasa saya akan memperpanjang artikel ini menjadi sebuah seri.

Anda dapat mengikuti saya dan terus mengabari Anda tentang bagian-bagian baru!

Jangan lupa klik tombol dan semoga harimu menyenangkan!