:

contoh

姓:

姓:

Cobalah »

Nasihat: Untuk mencegah jQuery Mobile menambahkan gaya secara otomatis ke elemen interaktif, gunakan atribut data role="none" .

Tanyakan kepada orang dewasa mana pun barang apa yang tidak dapat mereka tinggalkan tanpanya, dan mereka akan menjawab Anda: kunci, dompet, ponsel. Dengan pertumbuhan produsen perangkat seluler dan peluncuran model-model baru dan lebih baik, mustahil untuk tidak menyerah pada tren yang sedang berkembang ini.

Data tahun 2014 menunjukkan bahwa di AS saja, 90% orang dewasa memiliki ponsel, dan 58% di antaranya adalah pemilik ponsel pintar. 42% orang Amerika memiliki tablet. Dalam sebuah laporan, eMarketer memperkirakan bahwa pada akhir tahun 2014, orang akan menggunakan sekitar 1,75 miliar ponsel pintar di seluruh dunia.

Angka-angka ini hanya menegaskan bahwa perangkat seluler saat ini telah berubah dari barang mewah menjadi kebutuhan sehari-hari. Jika dulu ponsel hanya sekedar alat komunikasi, kini kita mengandalkannya saat bekerja, bersantai, atau berbelanja.

Mengoptimalkan formulir untuk perangkat seluler

Maraknya smartphone tidak hanya memudahkan konsumen dalam berbelanja. Itu menjadi tambahan yang bagus ke industri belanja online yang sudah berkembang. Seiring berjalannya waktu, tidak hanya bisnis online, tetapi juga bisnis offline mulai memahami pentingnya ponsel, beserta saluran promosi lainnya, dalam memperoleh pelanggan.

Formulir masukan memainkan peran besar dalam belanja online, mereka juga merupakan elemen inti dalam platform seluler. Kami biasanya menemukannya saat melakukan pembelian dan situs meminta kami memberikan informasi spesifik seperti nama, alamat, nomor telepon, dan informasi kartu kredit. Namun, banyak pembeli menganggap mengisi formulir adalah tugas yang membosankan, sehingga dapat merusak minat mereka. Selain itu, pembeli online biasanya menghadapi tantangan seperti kurangnya waktu atau koneksi internet yang buruk, yang dapat berdampak negatif pada tingkat konversi situs seluler Anda.

Di bawah ini tercantum 10 cara untuk mempercepat kinerja transaksi seluler pelanggan Anda dan juga menjadikan pengalaman belanja online mereka menyenangkan.

1. Sertakan hanya sebagian besar saja detail penting ke dalam formulir Anda

Jika Anda tidak memiliki kesabaran untuk mengisi banyak formulir di halaman web saat Anda berbelanja online, pelanggan Anda mungkin merasakan hal yang sama. Ada perbedaan antara mengisi formulir Full-On dan mengisi formulir sederhana untuk membeli sesuatu dari toko online. Dibandingkan dengan yang terakhir, formulir versi pertama bisa sangat mengganggu, dan Anda berisiko kehilangan klien ketika dia bosan mengisi formulir, terutama jika dia melihat bahwa dia perlu memberikan tiga nomor telepon berbeda.

Jadikan belanja online seluler nyaman dengan menyediakan formulir pemesanan yang sederhana namun lengkap kepada pelanggan Anda. Hanya minta validitas pengguna informasi penting, seperti nama lengkap, alamat e-mail, nomor telepon, informasi pengiriman dan informasi kartu kredit. Anda juga dapat menyertakan daftar tarik-turun negara bagian atau negara tujuan pengiriman Anda, atau lebih baik lagi, memilikinya aplikasi seluler meminta geolokasi dari klien. Dengan cara ini, Anda bisa mendapatkan alamatnya dengan cepat dan akurat.

2. Gunakan perataan ketinggian untuk label dan kolom masukan.

Ponsel cerdas memiliki area tampilan yang terbatas dibandingkan PC, jadi penting bagi Anda untuk merancang bentuk yang memaksimalkan area tersebut. Salah satu cara untuk melakukan ini adalah dengan menggunakan kesejajaran vertikal untuk bidang formulir Anda. Soalnya, kapan untuk suatu formulir digunakan perataan horizontal, ada kemungkinan tidak semua informasi muat di layar ponsel cerdas, dan label atau kolom input mungkin hilang. Formulir pemesanan seperti itu mungkin terlihat rumit bagi pembeli, sehingga dapat mengurangi minat mereka.

Sebaliknya, jika label dan kolom input diposisikan secara vertikal, pelanggan Anda akan lebih mudah untuk langsung melihat informasi yang mereka minta, termasuk apa yang harus mereka isi. Ini akan membantu mereka yakin akan keamanan transaksi. Tata letak ini juga akan mencegah pembeli melewatkan kolom input apa pun, atau lebih buruk lagi, mengisi formulir lagi.

Selain itu, ini akan meminimalkan kekacauan visual pada bentuk Anda. Tombol “Apa ini” dan “Detail selengkapnya” dapat ditempatkan di versi seluler situs web Anda. Jika tombol-tombol ini perlu ditempatkan pada formulir, maka posisikan agar pelanggan tidak terganggu saat melakukan pembelian.

3. Gunakan menu drop-down dan daftar drop-down

Keterbatasan lain disebabkan oleh terbatasnya area pandang di dalamnya perangkat seluler, ini adalah pengguliran tanpa akhir yang harus kita lakukan untuk melihat seluruh halaman atau mengisi formulir. Meskipun scrolling adalah hal yang umum, pengguna ponsel cerdas lebih memilih cara cepat untuk membeli produk secara online.

Menggunakan menu tarik-turun dan daftar tarik-turun dapat membantu Anda mengurangi waktu yang dihabiskan pelanggan untuk mengisi formulir. Daripada memaksa pembeli untuk memilih jumlah yang sangat besar pilihan, Anda dapat mengelompokkan masing-masing produk ke dalam kategori. Menu pull-down juga berguna untuk menghubungkan deskripsi produk utama yang ingin Anda tempatkan dalam satu halaman. Ingatlah untuk tidak mulai mendeskripsikannya saat menu diperluas.

4. Gunakan daftar pilihan yang memadai

Jika daftar tarik-turun atau menu tarik-turun tidak sesuai dengan formulir situs seluler, Anda memiliki dua opsi bagus untuk formulir seluler: bidang masukan penelusuran prediktif dan daftar tarik-turun pribadi.

Bidang input pencarian prediktif memungkinkan pelanggan Anda mencari produk atau layanan yang mereka perlukan kata kunci, dan juga menampilkan daftar semua hasil serupa. Jenis formulir ini ideal jika pencarian diperkirakan memakan waktu lama, atau bila ada sejumlah produk yang tidak termasuk dalam kategori ini. kategori terpisah. Sebaliknya, daftar dropdown tertutup berfungsi dengan baik untuk daftar item menu tertentu yang ada di dalamnya dalam urutan tertentu, misalnya dalam urutan abjad atau kronologis.

5. Entri data masukan yang mudah

Anda mungkin pernah menemukan kolom masukan pada formulir di situs web dan seluler. Terkadang dibagi menjadi 2-3 bagian, seperti nama, alamat, nomor telepon. Dan meskipun ini berfungsi di situs, di situs mereka versi seluler Penggunaan formulir ini tidak selalu tepat.

Seringkali, pemisahan masukan mengharuskan pembeli seluler untuk mengisi ketiga (atau dua) kolom masukan agar dapat dengan mudah merespons satu label. Jika Anda mengizinkan terlalu banyak hal ini dalam bentuk yang sama, pelanggan Anda mungkin kehilangan minat pada proses tersebut. Selain itu, pemisahan data masukan mungkin dianggap ambigu oleh klien, atau bahkan membingungkan mereka. Saat mendesain formulir untuk platform seluler, gunakan lebih banyak bidang sederhana input alih-alih memisahkannya. Misalnya, daripada menggunakan dua kolom terpisah untuk nama depan dan belakang, gunakan satu. Ini akan membantu pelanggan Anda mengisi formulir lebih cepat.

6. Format tombol formulir Anda

Tombol “Konfirmasi” adalah langkah terakhir dalam belanja online, dan juga yang paling penting tombol penting dalam bentuk. Jika iya, maka sebaiknya Anda mengaturnya sedemikian rupa agar pelanggan Anda tetap terlibat dalam proses pengisian formulir tersebut.

Jadikan tombol “Konfirmasi” menarik dengan mengatur lebarnya menjadi 1/3 dari formulir Anda, atau dengan mengecatnya dengan warna cerah. Dan daripada hanya menggunakan kata “Konfirmasi” atau “Kirim”, gunakan ajakan bertindak yang lebih fasih, seperti “Daftar sekarang” atau “Kirim lamaran Anda.”

Namun, hindari penggunaan terlalu banyak warna cerah, atau membuat tombol yang terlalu banyak bergerak karena mengganggu pelanggan untuk mengklik. Anda dapat menggunakan perubahan warna yang halus atau melayang ketika tombol ditekan, sehingga pelanggan Anda tahu bahwa mereka telah selesai bertransaksi.

7. Atur zoom menggunakan meta tag viewport

Menjelajah di perangkat seluler mungkin cocok untuk pelanggan atau mereka mungkin harus terus memperbesar halaman, namun jika mereka melakukan ini secara tidak sengaja, mereka mungkin tersesat di halaman tersebut. Anda akan dapat mengontrol ini menggunakan tag meta viewport di formulir Anda. Hal ini akan memungkinkan pelanggan Anda menghindari penskalaan halaman secara tidak sengaja, atau lebih buruk lagi, kehilangan tampilan formulir sama sekali.

8. Memberikan kemampuan untuk menyimpan data

Belanja menggunakan ponsel pun bisa tugas yang menantang untuk beberapa klien, karena ada risiko mengklik tombol “Kembali” atau memuat ulang halaman secara tidak sengaja, dan jika semua informasi lengkap hilang, kemungkinan besar pembeli Anda akan menolak transaksi. Anda dapat menghindari kemungkinan ini dengan memberikan opsi “Buka di tab baru” kepada klien Anda saat mereka mengeklik tautan apa pun di luar formulir.

Selain itu, jika pengguna tidak dapat kembali lagi halaman sebelumnya, buatlah jendela dengan peringatan dan tombol seperti “Setuju”, “OK” atau “Batal”. Dengan melakukan ini, Anda dapat mengingatkan pelanggan apakah data mereka telah disimpan di situs atau di browser, dan dengan demikian membantu mereka memutuskan untuk melanjutkan ke pembayaran.

9. Bantu klien melacak kemajuan mereka

Tidak semua pembeli tertarik mengisi formulir feedback. Dalam hal ini, akan berguna bagi Anda untuk menemukan cara untuk menunjukkan kepada klien bahwa mereka hampir mencapai akhir pengisian. Anda dapat melakukan ini dengan menempatkan bilah pemuatan di bagian atas formulir, atau dengan menggunakan garis waktu dan persentase sederhana untuk menunjukkan langkah mereka saat ini. Ingatlah untuk membatasi jumlah langkah ini untuk menghemat waktu klien Anda.

10. Buat formulir dimuat dengan cepat

Faktor lain yang tidak boleh Anda lupakan adalah kecepatan memuat formulir seluler Anda. Jika laman memerlukan waktu agak lama untuk dimuat, pelanggan Anda mungkin lolos. Fakta bahwa pengguna Anda telah sampai pada tahap pengisian formulir menunjukkan bahwa mereka siap untuk melakukan pemesanan. Jangan kecewakan mereka dengan pemuatan halaman yang buruk. Kecepatan memuat formulir Anda juga bergantung pada jumlah elemen yang Anda masukkan ke halaman, jadi berhati-hatilah saat menggunakan gambar berukuran besar.

Dan seperti biasa, uji formulir Anda di semua sistem dan perangkat

Saat ini, beragamnya perangkat seluler dan antarmukanya mengharuskan kita merancang formulir untuk masing-masing perangkat. Oleh karena itu, pastikan Anda menguji formulir Anda pada berbagai jenis perangkat seluler, dengan mempertimbangkan perbedaan dalam sistem operasi, ukuran, dan browser. Dengan pengujian, Anda tidak hanya dapat meningkatkan formulir Anda, tetapi juga memastikan formulir berfungsi di semua perangkat yang tersedia.

Artikel ini adalah pengumuman fungsi baru.
Tidak disarankan menggunakan konten artikel ini untuk mempelajari fungsi baru.
Deskripsi lengkap fungsionalitas baru akan disediakan dalam dokumentasi untuk versi yang sesuai.
Daftar lengkap perubahan dalam versi baru disediakan dalam file v8Update.htm.

Diimplementasikan pada versi 8.3.11.2867.

Kami terus mengembangkan platform seluler, menambahkan fungsionalitas yang sudah tersedia di platform komputer pribadi. Selain itu, kami sedang mengembangkan kemampuan platform spesifik yang hanya relevan untuk perangkat seluler. Sekarang kami akan memberi tahu Anda tentang beberapa peningkatan terpenting.

Penjadwal

Model objek penjadwal "seluler" tidak berubah, tetapi cara pengguna berinteraksi dengan penjadwal telah berubah, karena metode memasukkan informasi pada perangkat seluler berbeda dengan yang digunakan pada komputer desktop.

Misalnya, pengeditan cepat elemen dilakukan dengan satu klik pada elemen. Panggilan tekan lama menu konteks, dan tampilan penanda yang memungkinkan Anda meregangkan elemen. Menyeret dilakukan dengan menekan lama lalu menggerakkan jari.

Menggulir seluruh perencana dilakukan dengan menggulir dengan satu jari, memperbesar dengan dua jari, dan seterusnya.

Salah satu fitur implementasi penjadwal “seluler” saat ini adalah belum mendukung pencetakan.

Dokumen Terformat

Objek “baru” lainnya yang kami tambahkan ke platform seluler adalah Dokumen Terformat. Dari sudut pandang pengguna, dokumen berformat "seluler" hanya berbeda karena panel pengeditannya terpasang di kontrol itu sendiri, dan merupakan bagian logis papan ketik maya. Anda, sebagai pengembang, tidak diharuskan melakukannya tambahan terpisah ke konfigurasi. Panel pengeditan memiliki tipe yang berbeda tergantung pada jenis perangkat seluler (ponsel atau tablet).

Pratinjau formulir "seluler" di konfigurator

Di konfigurator, saat mengembangkan formulir, kami menambahkan kemampuan untuk melihat tampilan formulir Anda di perangkat seluler.

Di panel perintah Anda dapat memilih opsi antarmuka Perangkat seluler, dan lihat seperti apa bentuknya dalam orientasi standar.

Di sini Anda dapat memutar perangkat seluler Anda.

Selain itu, kami telah memberi Anda kesempatan untuk memilih jumlah besar perangkat umum.

Selain itu, Anda dapat melihat formulir seluler dalam tiga skala berbeda:

• Piksel ke piksel- ketika piksel layar perangkat seluler sesuai dengan piksel layar jendela pratinjau;
• Ukuran sebenarnya - bila ukuran perangkat seluler di layar cocok dimensi geometris perangkat;
• Berdasarkan ukuran jendela- ketika skala tampilan dipilih sedemikian rupa sehingga area tampilan "seluler" pas dengan jendela pratinjau tanpa menggulir.

Pemrosesan batch dokumen spreadsheet

Kami telah menambahkan sejumlah objek baru ke platform seluler yang memungkinkan Anda membuat paket dokumen yang ditampilkan. Fungsionalitas ini serupa dengan yang terdapat pada platform PC. Jadi, kini Anda dapat, misalnya, mengirim beberapa dokumen untuk dicetak sekaligus.

Pengembangan notifikasi yang dapat disampaikan

Kami telah menerapkan dukungan untuk layanan pemberitahuan push Windows (WNS, Layanan Pemberitahuan Windows). Sekarang Anda dapat menggunakan fungsi notifikasi yang dikirimkan saat menjalankan aplikasi seluler pada platform keluarga Windows.

Kami juga telah mengerjakan ulang sistem penanganan kesalahan untuk mengirimkan notifikasi yang dikirimkan. Dalam situasi di mana kesalahan sebelumnya ditampilkan sebagai pengecualian, kesalahan tersebut kini ditampilkan sebagai nilai yang dapat Anda tangani dalam bahasa bawaan.

Akselerasi perangkat keras di sistem operasi Android

Pada versi sistem operasi Android 4.4.2 dan lebih tinggi platform seluler sekarang menggunakan akselerasi perangkat keras. Hal ini memungkinkan kami meningkatkan kecepatan rendering antarmuka sebesar 1,5 – 3 kali lipat.

Orang yang menggunakan aplikasi seluler atau situs web Anda memiliki tujuan tertentu. Biasanya, yang menghalangi pengguna dan tujuannya adalah bentuk. Faktanya, formulir dipertimbangkan langkah terakhir dalam proses mencapai tujuan pengguna. Inilah mengapa sangat penting bagi pengguna untuk mengisi formulir secepat mungkin dan tanpa hambatan apa pun.

Ikuti tujuh aturan berikut untuk membuat formulir yang sederhana dan jelas:

Aturan #1: Formulir harus kompatibel dengan cara pengguna memasukkan datanya

Pastikan bidang formulir tidak tertutup oleh elemen antarmuka (seperti keyboard). Saat pengguna mengisi kolom formulir, secara otomatis memindahkan kolom tersebut ke atas.

Aturan #2: Minimalkan jumlah kolom input dan kebutuhan pengguna untuk mengetik

Semakin panjang dan rumit tampilan formulir, semakin kecil kemungkinan pengguna ingin mengisinya kursi kosong, terutama di layar kecil. Mengurangi jumlah kolom input akan membuat formulir Anda tidak terlalu sibuk, terutama saat Anda meminta pengguna jumlah besar informasi.

Buatlah formulir sesederhana dan sesingkat mungkin

Namun mengurangi jumlah lahan saja tidak cukup. Anda juga harus memperhatikan usaha yang dikeluarkan pengguna saat memasukkan data. Diperlukan pencetakan derajat tinggi interaksi; ada kemungkinan besar terjadinya kesalahan, bahkan saat mengetik dari keyboard ukuran penuh (terutama pada layar sentuh).

Oleh karena itu, cobalah untuk meminimalkan kebutuhan akan pengetikan dan kesalahan pengguna.

Default cerdas

Default cerdas membantu pengguna mengisi semua kolom formulir dengan lebih cepat dan akurat. Misalnya, Anda dapat memilih terlebih dahulu negara tempat tinggal pengguna berdasarkan data geolokasi mereka.

Deteksi otomatis lokasi akan menghemat waktu pengguna mencari kamar hotel

Tombol radio untuk pilihan serupa namun saling eksklusif

Saat pengguna dihadapkan pada pilihan dari daftar opsi, pertimbangkan untuk menggunakan daftar tag horizontal. Ini memungkinkan Anda menggunakan ruang layar yang tersedia secara lebih efisien.

Penggeser untuk harga min/maks atau kisaran anggaran

Pertimbangkan untuk menggunakan penggeser untuk bidang yang berisi harga atau anggaran. Dengan cara ini pengguna dapat memindahkan penggeser ke nilai minimum/maksimum. Penggesernya mudah dipindahkan secara horizontal, dan Anda dapat dengan mudah menyesuaikan tindakan ini menggunakan isyarat visual. Namun perlu diingat bahwa angka tersebut tidak boleh disembunyikan saat berinteraksi dengan slider (terutama saat menggunakan ibu jari).

Penggeser AirBnB untuk memilih harga

Aturan #3: Header formulir harus berada di atas kolom itu sendiri atau mengambang

Judul memberi tahu pengguna tujuan utama suatu bidang, dan teks yang jelas adalah salah satu cara utama untuk membuat UI lebih mudah diakses.

Mengapa Anda tidak boleh menggunakan judul teks di dalam bidang

Header dalam bidang (atau placeholder) adalah teks yang berada di dalam bidang formulir yang menghilang segera setelah pengguna mulai memasukkan datanya.

Judul di dalam lapangan
Meskipun judul dalam kotak terlihat bagus dari sudut pandang estetika, manfaat ini sering kali dilebih-lebihkan. Kesalahan utamanya adalah kehilangan konteks. Setelah pengguna mengklik bidang tersebut, tulisan tersebut menghilang. Oleh karena itu, dia tidak dapat memverifikasi bahwa dia menulis dengan tepat apa yang dibutuhkan.

Teks di dalam kolom bukanlah yang terbanyak pengganti terbaik tajuk visual

Selain itu, beberapa pengguna yang melihat ada sesuatu yang telah ditulis dalam suatu bidang mungkin berpikir bahwa bidang tersebut sudah diisi sebelumnya dan mereka tidak perlu memasukkan apa pun lagi dan mungkin mengabaikan pengisian.

Mengapa header bidang rata kiri berdampak buruk bagi perangkat seluler

Hal utama yang perlu dipertimbangkan saat menggunakan judul rata kiri pada perangkat seluler adalah ukuran layar dan rasio aspek. Jika judul di sebelah kiri berlawanan dengan bidang, maka dengan orientasi layar vertikal, Anda akan memiliki sedikit ruang tersisa untuk bidang itu sendiri. Hal ini menimbulkan kesulitan dalam penggunaan karena tidak tersedia cukup ruang untuk menampilkan apa yang diketik pengguna. Tidak dapat melihat teks yang dimasukkan menimbulkan masalah bagi pengguna karena mencegah mereka menyadari kesalahan input dengan cepat sebelum mengirimkan formulir.

Sangat sulit untuk melihat kesalahan jika data tidak terlihat sepenuhnya

Header Atas atau Header Responsif

Judul formulir harus berada di bagian atas kolom formulir sehingga pengguna dapat melihat apa yang mereka isi dan bagaimana caranya. Keuntungan utama menempatkan header formulir di atas formulir adalah Anda bisa merentangkan formulir ke seluruh lebar layar dan membuatnya cukup besar untuk entri data (misalnya, dengan ukuran font 16 piksel). Manfaat tambahan Dimungkinkan untuk menulis judul yang jelas dan mudah dipahami (tidak terbatas pada 1-2 kata).

Kerugian utama menempatkan judul di atas bidang adalah memenuhi seluruh formulir lebih banyak ruang secara vertikal, yang berarti pengguna perlu menggulir layar. Namun, ini tidak terlalu bagus masalah serius– saat ini, semua orang terbiasa menggulir.

Sebagai alternatif, Anda dapat menggunakan header responsif untuk memahami bahwa pengguna mengisi kolom dengan benar. Teks placeholder ditampilkan secara default, namun setelah mengetuk bidang dan memasukkan teks, teks placeholder berpindah ke bagian atas bidang, seperti yang ditunjukkan di bawah ini.

Aturan #4: Validasi bidang formulir harus dilakukan secara real time

Idealnya, pengguna akan mengisi formulir informasi yang diperlukan dan akan berhasil menyelesaikan tugas ini. Di dunia nyata, pengguna sering melakukan kesalahan. Pada saat yang sama, pengguna tidak menyukai kenyataan bahwa setelah seluruh proses pengisian kolom, mereka mencapai tombol "kirim" dan menemukan bahwa mereka telah melakukan kesalahan. Adalah benar untuk memberi tahu pengguna tentang keberhasilan/kesalahan di bidang segera setelah mengisinya. Pesan validasi segera menginformasikan kepada pengguna bahwa informasi yang dimasukkan sudah benar. Pendekatan ini memungkinkan pengguna untuk memperbaiki kesalahan lebih cepat dan tanpa harus menunggu kesalahan ditampilkan setelah mengklik tombol kirim.

Jika Anda mengharapkan jawaban spesifik atas pertanyaan, Anda perlu segera menunjukkan apa yang perlu dimasukkan dan dalam bentuk apa.

Validasi string juga bisa menjadi solusi. Pada contoh di bawah ini, Anda dapat melihatnya contoh yang baik, bagaimana Anda dapat memperbaiki potensi kesalahan.

Aturan #5: Tampilkan tata letak keyboard sesuai dengan data input

Pengguna lebih menyukai tata letak keyboard yang sesuai dalam aplikasi. Misalnya saja ketika pengguna perlu memasukkan nomor kartu kredit, tampilkan hanya input angka sehingga pengguna memasukkan angka dan bukan simbol. Ini akan meningkatkan kecepatan pengisian dan mengurangi jumlahnya kemungkinan kesalahan masukan.

Anda perlu memastikan bahwa fitur ini diterapkan di seluruh aplikasi, dan bukan pada bagian individualnya.

Aturan #6: Berikan informasi yang berguna dalam konteks

Terkadang, ada kebutuhan untuk memberikan informasi yang relevan dan informasi yang berguna untuk menyederhanakan proses bagi pengguna untuk mengisi formulir. Namun teks yang menyertainya hanya boleh digunakan jika benar-benar diperlukan:

• Saat merencanakan tanggal, pengguna menghargai konteks seperti kalender bawaan untuk menentukan hari dalam seminggu. Hal ini mengurangi kebutuhan untuk keluar dari aplikasi untuk melihat kalender, sehingga mengurangi risiko pengguna terganggu dari tugas utamanya.

• Orang-orang mungkin mengkhawatirkan keamanan data mereka, jadi Anda perlu menunjukkan kepada mereka bahwa data mereka tidak akan dibagikan kepada pihak ketiga.

Sebagai aturan sopan santun, Anda tidak boleh memperluas penjelasan hingga 100 karakter.

Aturan #7: Gunakan format yang fleksibel

Beberapa tugas memerlukan informasi yang sangat tepat dari pengguna. Namun, pada saat yang sama, mengharuskan pengguna untuk memberikan informasi dalam bentuk tertentu mungkin bertentangan dengan prinsip kegunaan yang baik. Jika Anda meminta pengguna untuk memasukkan informasi digital (seperti nomor telepon) ke dalam formulir, bersikaplah fleksibel dan buatlah layar yang dapat mendukung format yang berbeda memasukkan dan menampilkan informasi dalam bentuk yang paling mudah digunakan untuk mencegah kesalahan.

Jangan gunakan format entri data tetap

Kesimpulan

Pengguna mungkin mengalami berbagai jenis keraguan saat mengisi formulir, jadi sebaiknya usahakan prosesnya semudah mungkin. Semua tip yang dijelaskan dalam artikel ini dapat meningkatkan kegunaan formulir secara signifikan.

Pada artikel ini, kita akan melihat beberapa penyempurnaan formulir baru di HTML5 dan menganalisis bagaimana penyempurnaannya membantu antarmuka pengguna di ponsel. Secara khusus, kita akan melihat bagaimana formulir dapat diperluas dengan tambahan jenis masukan, ditawarkan oleh HTML5, dan menunjukkan apa yang dapat Anda harapkan dari berbagai browser seluler.

Jenis Masukan HTML5

HTML5 memiliki banyak tipe input baru untuk formulir. Jenis masukan ini memungkinkan kontrol dan verifikasi data masukan yang lebih besar. Beberapa di antaranya sangat berguna untuk pengguna seluler yang sering mengalami kesulitan pekerjaan HTML Masukan. Daftar lengkap tipe data masukan diberikan di bawah ini:

• warna — pemilihan warna
• tanggal — pemilihan tanggal
• datetime - pilih tanggal dan waktu
• email — validasi masker email
• nomor - masukkan nomor
• rentang — penggeser rentang
• pencarian - bidang pencarian
• telp — validasi masker telepon
• waktu - waktu
• url - validasi URL

Tentu saja daftar ini belum lengkap. Ini tidak termasuk tipe yang diterima oleh standar, tetapi esensinya belum jelas. Kami akan mempertimbangkan jenis yang paling populer dan relevan di atas dalam artikel ini dengan contoh.

1. Jenis masukan warna

Jika tipe ini didukung sinyal masukan, lalu browser pengguna akan memanggil pemilih warna bawaan untuk perangkat klien. Warna yang dipilih akan disajikan sesuai nilai heksadesimal RGB.

< input type = "color" / >

Contoh pekerjaan:

Gaya popup akan bergantung pada browser Anda. Klik tombol untuk melihat cara kerjanya.

Pilih warna Anda:

Sayangnya, mendukung dari jenis ini browser seluler meninggalkan banyak hal yang diinginkan. Dari semua yang ada, pemetaan yang benar hanya dapat ditemukan di Opera Seluler Dan Chrome Android. Untuk semua browser lain, kolom teks kosong akan ditampilkan. Hal ini perlu diingat. Alternatifnya, Anda dapat membuat sketsa palet di JS atau menggunakan plugin.

2. Jenis masukan tanggal

Jika didukung oleh browser, ini menyediakan blok yang nyaman untuk memilih tanggal.

< input type = "date" / >

Contoh pekerjaan:

Pilihan tanggal:

Perhatikan bahwa tipe masukan Tanggal, serta varian tipe datetime dan datetime-lokal, menawarkan atribut yang berguna, nilai seperti min dan max , yang dapat menetapkan batasan dan validasi pada masukan pengguna. Kami akan mendemonstrasikannya di bawah dalam teks.

Jenis Tanggal Input HTML didukung oleh hampir semua browser. Pengecualian adalah OperaMini dan browser bawaan Android.

3. Tipe input datetime dan datetime-lokal

Jenis Input ini memungkinkan pengguna untuk menentukan tanggal dan waktu dalam format yang nyaman. Jika didukung, ini akan ditampilkan sebagai widget tanggal/waktu asli perangkat. Perbedaan antara tipe input ini adalah tipe input pertama terikat dengan waktu dunia, dan tipe input kedua tidak berisi informasi zona waktu apa pun.

< input type = "datetime-local" / >

Contoh pekerjaan:

Pilih tanggal dan waktu:

Tidak didukung di IE Mobile dan Opera Mini. Di browser populer lainnya (seluler), jenis ini berfungsi kurang lebih dengan benar, tetapi kasus bug dan gangguan tidak jarang terjadi. Ingatlah hal ini juga, dan jangan lupa tentang fallback JavaScript.

4. Masukkan jenis email

Tipe ini tidak memerlukan representasi. Banyak orang sudah menggunakannya dan didukung oleh hampir semua browser.

< input type = "email" / >

Contoh pekerjaan:

Masukkan alamat email Anda:

Sebelum mengirim, browser memeriksa kebenaran kolom yang diisi dan memberi tahu pengguna jika format input tidak valid. Perhitungannya didasarkan pada ekspresi berikut (teks)@(domain)

5. Masukkan nomor jenis dan telp

Ini adalah tipe lain yang tidak memerlukan banyak diskusi. Namun, dalam lingkungan seluler, hal ini sangat penting alat yang berguna. Gunakan ini jika pengguna diberikan serangkaian angka saja. Dalam situasi ini, dia akan ditawari antarmuka yang ramah pengguna papan tombol angka.

Contoh pekerjaan:

Pilih nilai:

Rentang default di sebagian besar browser adalah antara 0 dan 100. Artinya, posisi paling kiri dari penggeser adalah 0, dan posisi terjauh adalah 100. Anda dapat mengubah rentang menggunakan atribut min dan max. Kita juga dapat mengatur nilai langkah melalui atribut step. Jadi, untuk menentukan rentang dari 5 hingga 50, dengan kelipatan 5, kita akan menggunakan:

< input type = "range" min = "5" max = "50" step = "5" / >

Dukungan dari semua orang browser populer, kecuali Opera Mini.

7. Validasi formulir

Sangat mudah untuk mengaturnya secara khusus Atribut HTML Input untuk memeriksa data yang dimasukkan. Misalnya kita ingin membuat field yang harus diisi: