Menguji formulir di berbagai perangkat dan platform

Anda dapat mengisi formulir dengan banyak cara. Orang mungkin menggunakan formulir Anda di smartphone saat berdiri di dalam bus yang ramai, dengan pembaca layar, atau dari laptop tua. Mari kita lihat cara memastikan formulir Anda berfungsi di berbagai perangkat dan dalam konteks yang berbeda.

Memastikan formulir Anda berfungsi untuk pengguna keyboard

Pengujian pertama yang baik untuk memastikan formulir Anda dapat diakses adalah dengan mengisi formulir hanya menggunakan keyboard. Buka formulir dan coba bernavigasi dengan tombol tab. Apakah sudah jelas bidang formulir apa yang saat ini aktif? Untuk membantu pengguna memahami kolom formulir mana yang aktif, Anda dapat menggunakan indikator fokus.

Coba. Gunakan tombol tab untuk membuka input. Apakah Anda melihat garis batas saat input aktif? Itulah indikator fokus. Anda dapat menambahkan indikator fokus menggunakan class pseudo CSS :focus.

input:focus {
  outline: 4px solid #222;
}

Pelajari lebih lanjut cara mendesain indikator fokus yang mudah diakses.

Membantu pengguna membuka formulir Anda

Pengujian kegunaan dan aksesibilitas lainnya yang baik adalah dengan memastikan bahwa urutan tab yang logis mengikuti urutan tab visual. Bagaimana cara menguji urutan tab? Tekan tab sepenuhnya di formulir Anda. Apakah Anda melihat ada lompatan navigasi yang tidak logis? Pastikan urutan DOM sesuai dengan urutan visual.

Pelajari lebih lanjut cara memastikan urutan visual pada halaman mengikuti urutan DOM.

Membantu pengguna melengkapi formulir di perangkat sentuh

Bagus. Anda telah memastikan formulir berfungsi dengan keyboard. Sekarang, mari kita lihat bagaimana Anda dapat memastikan fitur ini juga berfungsi di perangkat sentuh seperti ponsel.

Buka formulir di perangkat sentuh, isi semua kolom, dan kirim formulir. Apakah Anda harus mengetuk beberapa kali untuk memilih kontrol formulir? Masalahnya mungkin adalah area ketuk terlalu kecil. Pastikan ukuran target ketuk tombol minimal berukuran 48 piksel, dan setiap <input> dan <select> cukup besar untuk diketuk. Anda juga dapat membantu pengguna membuka formulir di perangkat sentuh dengan menambahkan jarak yang cukup di antara kontrol formulir.

Memastikan pengguna mendapatkan keyboard yang dioptimalkan

Dalam modul sebelumnya, Anda telah mempelajari cara mengaktifkan keyboard virtual yang berbeda menggunakan atribut type atau inputmode.

Buka demo di ponsel, lalu ketuk kolom nomor telepon. Perhatikan bahwa angka ditampilkan secara default pada keyboard virtual, beserta karakter lain yang mungkin Anda perlukan untuk nomor telepon. Gunakan type="tel" untuk mendapatkan keyboard virtual yang dioptimalkan untuk memasukkan nomor telepon.

Gunakan telepon untuk mencobanya sendiri, dan lihat apakah Anda dapat dengan mudah memasukkan setiap karakter yang diperlukan untuk mengisi nomor telepon. Jika Anda ingin tahu cara kerja keyboard virtual untuk type lainnya, coba type="email" di demo.

Pastikan tombol formulir tidak tersembunyi

Bayangkan Anda mengisi formulir yang panjang, dan Anda siap untuk mengirimkannya. Namun, di mana tombol Kirim? Ikon ini mungkin berada di belakang toolbar browser, yang terletak di bagian bawah layar. Salah satu cara untuk memastikan tombol terlihat adalah dengan menggunakan fungsi CSS env(). Pelajari cara memastikan tombol tidak terhalang oleh antarmuka pengguna perangkat.

Memastikan formulir Anda dapat digunakan di berbagai platform

Coba uji formulir Anda di sebanyak mungkin perangkat. Punya laptop lama? Buka browser default di browser tersebut dan uji formulir Anda. Teman Anda punya tablet? Pinjam dan juga uji formulir Anda di sana.

Apakah beberapa gaya terlihat berbeda pada satu browser? Anda dapat mempelajari cara memastikan gaya berfungsi di seluruh platform pada modul selanjutnya.

BrowserStack menawarkan akun pengujian gratis untuk project open source, dan Browserling menawarkan uji coba gratis untuk melakukan pengujian pada berbagai browser, perangkat, dan sistem operasi.

Bantu pengguna melengkapi formulir dalam berbagai konteks

Orang tidak hanya menggunakan {i>browser<i}, perangkat, dan sistem operasi yang berbeda. Orang juga menggunakan formulir Anda dalam konteks yang berbeda. Cobalah! Apakah saat ini matahari bersinar di luar? Bawa ponsel dan pergilah ke luar. Menggunakan formulir Anda dalam cahaya terang adalah cara yang baik untuk menguji apakah rasio kontras dapat digunakan.

Pelajari aksesibilitas warna dan kontras lebih lanjut.

Memastikan formulir Anda berfungsi dengan konektivitas yang buruk

Misalnya Anda bepergian ke suatu tempat dengan kereta. Anda membuka halaman web di ponsel. Anda bertanya-tanya bagaimana pemuatan situs web bisa memakan waktu begitu lama ()}.

Anda dapat menyimulasikan koneksi lambat dan berbagai jenis jaringan dengan WebPageTest atau DevTools.

Pelajari lebih lanjut cara menguji dengan bandwidth rendah dan latensi tinggi.

Bantu pengguna menggunakan formulir Anda saat mereka dalam perjalanan

Bayangkan Anda sedang berjalan menuju sebuah janji temu. Tiba-tiba, ponsel Anda berdering, lalu Anda menjawab panggilan, dan pada saat yang sama, mendapatkan pemberitahuan dari perusahaan asuransi untuk melengkapi formulir permohonan yang Anda mulai. Anda membuka formulir, mencoba mengisinya sambil berjalan dan berbicara.

Ingatlah bahwa orang akan menggunakan formulir Anda dalam berbagai konteks yang berbeda. Dalam situasi yang menegangkan, saat melakukan hal lain, saat dalam perjalanan. Anda dapat membantu pengguna dengan memastikan formulir Anda mudah digunakan.

Coba tetapkan batas waktu untuk melengkapi formulir Anda. Coba simulasikan kondisi yang tidak sempurna tempat Anda dapat menguji formulir.

Pastikan untuk membagikan hasil pengujian

Dokumentasikan semua pengujian, dan bagikan hasilnya dengan tim Anda. Hal ini akan membantu memprioritaskan item tindakan, untuk memastikan semua anggota tim mengetahui tugas yang paling penting.

Pelajari lebih lanjut cara membagikan hasil pengujian.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang pengujian lintas platform

Referensi

• WebPageTest: Pengujian Performa dan Pengoptimalan Situs
• Pengujian dengan bandwidth rendah dan latensi tinggi
• Membagikan hasil pengujian