Input bentuk yang lebih baik untuk pengalaman pengguna mudah alih yang lebih baik

Cara yang mudah dan praktikal untuk meningkatkan prestasi aplikasi mudah alih: Sentiasa konfigurasikan medan input HTML dengan type yang betul, inputmode , dan sifat autocomplete . Walaupun ketiga -tiga atribut ini sering dibincangkan secara berasingan, mereka paling penting dalam pengalaman pengguna mudah alih apabila anda menganggapnya secara keseluruhan.

Seperti yang kita semua tahu, borang mengisi pada peranti mudah alih adalah memakan masa dan rumit, tetapi dengan betul mengkonfigurasi medan input, kita dapat memastikan bahawa proses input data adalah lancar yang mungkin untuk pengguna. Mari kita lihat beberapa contoh dan amalan terbaik untuk mencipta pengalaman pengguna mudah alih yang lebih baik.

Gunakan jenis input yang betul

Ini adalah perkara paling mudah untuk dilakukan dengan betul. Jenis input seperti email , tel , dan url disokong dengan baik dalam pelbagai pelayar. Walaupun manfaat menggunakan jenis tel pada penyemak imbas desktop dan bukannya jenis text yang lebih umum mungkin sukar untuk dikesan, jelas sekilas pada peranti mudah alih.

Memilih jenis yang betul mengubah papan kekunci yang muncul apabila pengguna memfokuskan bidang pada peranti Android dan iOS. Dengan usaha yang sangat sedikit, kami dapat memaparkan papan kekunci tersuai untuk e -mel, nombor telefon, URL dan juga input carian dengan jenis yang betul.

Harus diingat bahawa kedua -dua input type="email" dan input type="url" mempunyai fungsi pengesahan. Apabila pengguna mengemukakan borang, pelayar moden akan memaparkan mesej ralat apabila nilainya tidak sepadan dengan format yang diharapkan. Jika anda ingin mematikan ciri ini, tambahkan harta novalidate ke borang yang disertakan.

Pengenalan ringkas kepada Jenis Tarikh

Input HTML bukan sahaja termasuk input teks khas -tetapi juga butang radio, kotak semak, dan banyak lagi. Walau bagaimanapun, untuk tujuan artikel ini, saya membincangkan lebih banyak input berasaskan teks .

Terdapat jenis input yang terletak di ruang kritikal antara lebih banyak input teks percuma dan widget input seperti butang radio: tarikh . Terdapat banyak variasi jenis input tarikh dan disokong dengan baik pada peranti mudah alih, termasuk date , time , datetime-local , dan month . Apabila mereka fokus, ini muncul widget tersuai dalam iOS dan Android. Daripada mencetuskan papan kekunci yang berdedikasi, mereka menunjukkan antara muka seperti pilihan dalam iOS, menunjukkan pelbagai jenis widget pada Android (di mana pemilih tarikh dan masa sangat lancar).

Saya teruja pada mulanya untuk dapat menggunakan tetapan lalai asli pada peranti mudah alih saya sehingga saya melihat sekeliling dan menyedari bahawa kebanyakan aplikasi utama dan tapak mudah alih menggunakan pemetik tarikh tersuai dan bukannya jenis input tarikh asli. Mungkin terdapat beberapa sebab untuk ini. Pertama, saya dapati bahawa pemetik tarikh iOS asli tidak begitu intuitif seperti widget jenis kalendar. Kedua, pelaksanaan Android yang direka dengan indah agak terhad berbanding dengan komponen tersuai - contohnya, tidak ada cara mudah untuk memasuki julat tarikh dan bukannya satu tarikh.

Walau bagaimanapun, jika pemetik tarikh tersuai yang anda gunakan tidak berfungsi dengan baik pada peranti mudah alih anda, jenis input tarikh patut dicuba. Jika anda ingin mencuba widget input asli pada iOS dan Android, sambil memastikan pengguna desktop melihat widget tersuai dan bukannya menu lungsur lalai, kod CSS ini dapat menyembunyikan menu drop-down kalendar dari pelayar desktop yang melaksanakannya:

 ::-WebKit-Calendar-Picker-Indicator {
  Paparan: Tiada;
}

Akhirnya, adalah penting untuk diperhatikan bahawa jenis tarikh tidak dapat ditindih oleh harta inputmode yang akan kita bincangkan.

Mengapa saya perlu mengambil berat tentang InputMode?

Harta inputmode membolehkan anda menimpa papan kekunci mudah alih yang ditentukan oleh jenis input dan secara langsung mengisytiharkan jenis papan kekunci yang dipaparkan kepada pengguna. Apabila saya mula -mula belajar tentang harta ini, saya tidak kagum - mengapa tidak menggunakan jenis yang betul dari awal? Walau bagaimanapun, sementara inputmode biasanya tidak perlu, ia boleh menjadi sangat berguna di beberapa tempat. Kes penggunaan yang paling penting untuk inputmode yang saya dapati adalah untuk membina input digital yang lebih baik.

Walaupun beberapa jenis input HTML5, seperti url dan email , mudah, input type="number" adalah berbeza. Ia mempunyai beberapa isu kebolehcapaian, dan UI yang agak janggal. Sebagai contoh, penyemak imbas desktop seperti Chrome akan memaparkan anak panah tambahan kecil yang mudah dicetuskan tanpa diduga apabila menatal.

Jadi ini adalah corak yang perlu diingat dan digunakan kemudian. Untuk kebanyakan input digital, jangan gunakan ini:

<input type="number">

... Anda sebenarnya mahu menggunakan ini:

<input type="text" inputmode="decimal">

Mengapa tidak menggunakan inputmode="numeric" dan bukannya inputmode="decimal" ?

Nilai atribut numeric dan decimal menghasilkan papan kekunci yang sama pada Android. Pada iOS, bagaimanapun, numeric menunjukkan papan kekunci yang memaparkan kedua-dua nombor dan tanda baca, sementara decimal menunjukkan grid angka yang fokus yang hampir sama dengan jenis input tel , kecuali tidak ada pilihan yang berkaitan dengan nombor telefon yang berlebihan. Itulah sebabnya ia adalah pilihan pertama saya untuk kebanyakan jenis input angka.

Christian Oliff menulis artikel yang sangat baik khusus memperkenalkan atribut inputmode .

Jangan lupa autocomplete

Lebih penting daripada menunjukkan papan kekunci mudah alih yang betul adalah untuk memaparkan cadangan autocomplete yang berguna. Ini jauh untuk mewujudkan pengalaman pengguna yang lebih cepat dan lancar pada peranti mudah alih.

Walaupun penyemak imbas mempunyai heuristik untuk memaparkan medan autocomplete, anda tidak boleh bergantung kepada mereka dan anda masih perlu memastikan untuk menambah atribut autocomplete yang betul. Sebagai contoh, dalam safari iOS, saya mendapati bahawa pilihan input type="tel" hanya akan menunjukkan pilihan autocomplete jika saya secara eksplisit menambah atribut autocomplete="tel" .

Anda mungkin fikir anda sudah biasa dengan pilihan autocomplete asas, seperti pilihan yang membantu pengguna mengisi nombor kad kredit atau medan borang alamat, tetapi saya cadangkan anda menyemaknya untuk memastikan anda memahami semua pilihan. Spesifikasi menyenaraikan lebih daripada 50 nilai! Adakah anda tahu autocomplete="one-time-code" boleh membuat proses pengesahan telefon sangat lancar?

Mengenai Autocomplete ...

Saya ingin menyebut elemen lain yang membolehkan anda membuat fungsi autocomplete tersuai anda sendiri: datalist . Walaupun ia mewujudkan yang boleh digunakan - walaupun sedikit asas - pengalaman autocomplete pada desktop chrome dan safari, ia menonjol pada iOS dengan menunjukkan cadangan dalam garis mudah di atas papan kekunci, yang sering terletak di lokasi tersebut. Di samping itu, ia membolehkan pengguna menukar antara teks dan input terpilih.

Sebaliknya, di Android, datalist mencipta menu drop-down autocomplete yang lebih tipikal, dengan kawasan di atas papan kekunci yang mengekalkan fungsi yang ditaip sistem sendiri. (Dalam iOS, untuk melihat kandungan selain daripada tiga perlawanan teratas, pengguna mesti mencetuskan pemilih pemilihan dengan menekan ikon anak panah bawah.)

Anda boleh menggunakan demo ini untuk mencuba datalist :

Anda boleh menggunakan alat ini yang saya buat untuk meneroka semua pilihan autocomplete bersama -sama dengan nilai inputtype dan inputmode untuk membantu anda dengan cepat melihat pelbagai konfigurasi input pada peranti mudah alih anda.

Meringkaskan

Apabila saya membina borang, saya sering cenderung untuk memberi tumpuan kepada menyempurnakan pengalaman desktop dan memikirkan rangkaian mudah alih sebagai peringatan. Tetapi sementara ia memerlukan beberapa kerja tambahan untuk memastikan borang berfungsi dengan baik pada peranti mudah alih, ia tidak semestinya sukar. Mudah -mudahan, artikel ini telah menunjukkan bahawa dengan beberapa langkah mudah anda boleh membuat borang pada peranti mudah alih anda lebih mudah untuk pengguna.

Atas ialah kandungan terperinci Input bentuk yang lebih baik untuk pengalaman pengguna mudah alih yang lebih baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!