Responsif saja belum cukup untuk pengalaman mobile.
Hal-hal kecil pada navigasi, teks, dan formulir yang membuat website lebih nyaman di ponsel.
Halaman yang berhasil mengecil ke layar ponsel belum tentu mudah digunakan. Pengalaman mobile perlu mempertimbangkan ruang baca, jangkauan jari, koneksi yang berubah, dan perhatian pengunjung yang terbatas.
Susun ulang, bukan sekadar perkecil
Tentukan informasi mana yang harus terlihat lebih dulu. Grid desktop bisa berubah menjadi satu kolom, tetapi urutannya tetap harus masuk akal. Judul pembuka boleh rata tengah; paragraf panjang biasanya lebih mudah dipindai dengan rata kiri dan lebar baca yang nyaman.
Beri ruang untuk tindakan
Hindari tombol kecil yang berdempetan. Gunakan label yang menjelaskan tindakan, jarak yang cukup, dan area tekan yang nyaman. Tombol selebar kartu dapat membantu pada layar kecil, asalkan tidak menutupi konten atau mengganggu tindakan lain.
Periksa dengan satu tangan
- Area tekan. Tombol harus nyaman disentuh tanpa harus membidik ikon kecil di tengahnya.
- Jarak kontrol. Pisahkan tindakan yang berdekatan, terutama pilihan yang akibatnya berbeda jauh.
- Teks yang terbaca. Coba membaca tanpa memperbesar layar dan pastikan label tidak terpotong.
Buat formulir terasa ringan
Tanyakan informasi yang memang dibutuhkan, tandai kolom opsional, dan gunakan jenis input yang sesuai. Pesan kesalahan harus dekat dengan kolom terkait. Pertahankan isian saat terjadi kegagalan agar pengguna tidak perlu mengulang seluruh proses.
Periksa kondisi yang berbeda
Uji layar sempit, teks yang diperbesar, keyboard terbuka, dan orientasi mendatar. Periksa juga navigasi dengan keyboard serta preferensi pengurangan gerak. Screenshot membantu menilai tampilan; mencoba alur secara langsung memastikan halaman benar-benar bisa digunakan.
Satu putaran pengujian mobile
- Buka keyboard. Isi formulir dan pastikan kolom aktif, petunjuk, dan tombol lanjut masih bisa dijangkau.
- Perbesar teks. Periksa apakah konten tetap mengalir tanpa saling menimpa atau kehilangan tindakan penting.
- Coba kondisi gagal. Periksa pesan kesalahan dan pastikan isian tetap tersimpan ketika pengguna mencoba lagi.
Rancang untuk kondisi penggunaan yang nyata
Pengunjung mobile bisa membuka website sambil berpindah tempat, dengan satu tangan, atau saat jaringan tidak stabil. Informasi utama sebaiknya hadir tanpa harus menunggu animasi panjang atau menutup banyak elemen mengambang. Berikan konteks yang cukup sebelum meminta pengguna menelusuri menu lebih jauh.
Saat memilih prioritas, tentukan tugas yang paling sering dilakukan dari ponsel: mencari alamat, membaca harga, melihat jadwal, atau menghubungi tim. Tempatkan jalurnya dengan jelas. Hindari menyembunyikan informasi penting hanya agar halaman tampak lebih pendek; atur ulang penyajiannya sehingga tetap mudah ditemukan.
Jaga konteks saat keyboard terbuka
Formulir yang terlihat nyaman pada screenshot dapat menjadi sulit saat keyboard muncul. Label perlu tetap terlihat, kolom aktif tidak tertutup, dan tombol untuk melanjutkan harus bisa dijangkau lewat scroll. Jangan mengandalkan placeholder sebagai satu-satunya petunjuk karena tulisan itu hilang ketika pengguna mulai mengetik.
Coba isi formulir dengan nama panjang, alamat email yang salah, serta informasi yang belum lengkap. Pastikan pesan kesalahan menjelaskan cara memperbaikinya dan tidak menghapus kolom lain. Jika pengiriman memerlukan waktu, tampilkan status yang jelas agar pengguna tidak menekan tombol berulang kali tanpa mengetahui hasilnya.
Gunakan gerak sebagai petunjuk
Animasi dapat membantu menjelaskan menu yang terbuka, panel yang berganti, atau tindakan yang selesai. Hubungkan gerakan dengan perubahan yang benar-benar terjadi. Teks bacaan dan tombol utama sebaiknya tetap tersedia ketika animasi gagal, dimatikan, atau belum sempat dijalankan oleh perangkat.
Periksa pengalaman dengan pengurangan gerak dan pembesaran teks. Pastikan indikator fokus terlihat saat navigasi memakai keyboard. Kualitas mobile tidak hanya ditentukan oleh susunan elemen di lebar layar tertentu, tetapi juga oleh kemampuan halaman menyesuaikan diri dengan kebutuhan orang yang berbeda.
