Gunakan fitur browser lintas platform untuk membuat formulir login yang aman, dapat diakses, dan mudah digunakan.
Jika pengguna perlu masuk ke situs Anda, maka desain formulir masuk yang baik sangat penting. Terutama untuk orang-orang dengan koneksi internet yang buruk, di perangkat seluler, di terburu-buru, atau merasa stres. Formulir login yang tidak dirancang dengan baik akan mendapatkan rasio pantulan yang tinggi. Setiap pantulan dapat berarti pengguna yang hilang dan tidak puas—bukan hanya login yang terlewat peluang.
Berikut adalah contoh formulir login sederhana yang menunjukkan semua praktik terbaik:
Checklist
- Menggunakan elemen HTML yang bermakna:
<form>
,<input>
,<label>
, dan<button>
. - Beri label setiap input dengan
<label>
. - Menggunakan atribut elemen untuk mengakses browser bawaan
fitur:
type
,name
,autocomplete
,required
. - Memberikan input
name
danid
mengatribusikan nilai stabil yang tidak berubah antara pemuatan halaman atau deployment situs. - Tempatkan login di <form> sendiri elemen ini.
- Pastikan pengiriman formulir berhasil.
- Gunakan
autocomplete="new-password"
danid="new-password"
untuk input {i>password<i} di formulir pendaftaran, dan {i> password<i} baru di formulir {i>reset-password<i}. - Gunakan
autocomplete="current-password"
danid="current-password"
untuk input sandi login. - Menyediakan fungsi Tampilkan sandi.
- Gunakan
aria-label
danaria-describedby
untuk input sandi. - Jangan menggandakan input.
- Desain formulir agar keyboard seluler tidak mengaburkan input atau tombol.
- Pastikan formulir dapat digunakan di perangkat seluler: gunakan teks yang dapat dibaca, serta pastikan input dan tombol cukup besar untuk berfungsi sebagai target sentuh.
- Pertahankan branding dan gaya di halaman pendaftaran dan login Anda.
- Melakukan pengujian di lapangan dan di lab: membuat analisis halaman, interaksi, analisis interaksi, dan pengukuran performa yang berfokus pada pengguna ke dalam alur pendaftaran dan login.
- Menguji di berbagai browser dan perangkat: perilaku formulir bervariasi secara signifikan di berbagai platform.
Gunakan HTML yang bermakna
Gunakan elemen yang dibuat untuk tugas: <form>
, <label>
, dan <button>
. Tombol-tombol ini memungkinkan
fungsi browser bawaan, meningkatkan aksesibilitas, dan memberi makna pada
markup.
Gunakan <form>
Anda mungkin tergoda untuk menggabungkan input dalam <div>
dan menangani data input
pengiriman hanya dengan JavaScript. Umumnya lebih baik menggunakan
<form>
. Hal ini membuat situs Anda dapat diakses oleh pembaca layar dan alat bantu lainnya
memungkinkan berbagai perangkat browser bawaan,
sehingga semakin mudah untuk
fungsi dasar untuk browser yang lebih lama, dan masih dapat berfungsi meskipun
JavaScript gagal.
Gunakan <label>
Untuk memberi label pada input, gunakan <label>
.
<label for="email">Email</label>
<input id="email" …>
Dua alasan:
- Ketukan atau klik pada label akan memindahkan fokus ke inputnya. Kaitkan label dengan
input dengan menggunakan atribut
for
label denganname
atauid
input. - Pembaca layar mengucapkan teks label ketika label atau input label mendapat fokus.
Jangan gunakan placeholder sebagai label input. Orang biasanya melupakan apa yang digunakan ketika mereka mulai memasukkan teks, terutama jika mereka mulai teralihkan ("Apakah saya memasukkan alamat email, nomor telepon, atau akun tanda pengenal?"). Ada banyak potensi masalah dengan placeholder: lihat Jangan Menggunakan Placeholder Atribut dan Placeholder di Kolom Formulir Adalah Berbahaya jika Anda tidak yakin.
Sebaiknya tempatkan label di atas input. Hal ini memungkinkan konsistensi desain di perangkat seluler dan desktop, serta menurut AI Google riset, memungkinkan pemindaian yang lebih cepat oleh pengguna. Anda mendapatkan label dan input dengan lebar penuh, dan Anda tidak perlu menyesuaikan label dan lebar input agar sesuai dengan teks label.
![Screenshot yang menunjukkan posisi label input formulir di perangkat seluler: di samping input dan di atas input.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-showing-form-i-8eaa2616f31e3.png?hl=id)
Buka Glitch posisi label pada perangkat seluler untuk memeriksanya sendiri.
Gunakan <button>
Gunakan <button>
untuk tombol! Elemen tombol memberikan perilaku yang mudah diakses dan bentuk bawaan
fungsionalitas kiriman, dan
mereka dapat dengan mudah ditata. Tidak ada gunanya
menggunakan <div>
atau beberapa elemen lain
yang berpura-pura menjadi tombol.
Pastikan tombol kirim menunjukkan fungsinya. Contohnya mencakup Buat akun atau Login, bukan Submit atau Start.
Memastikan keberhasilan pengiriman formulir
Membantu pengelola sandi memahami bahwa formulir telah dikirim. Ada dua cara untuk melakukannya:
- Buka halaman lain.
- Emulasikan navigasi dengan
History.pushState()
atauHistory.replaceState()
, dan hapus formulir {i>password<i}.
Dengan permintaan XMLHttpRequest
atau fetch
, pastikan proses login yang berhasil
dilaporkan dalam respons dan ditangani dengan mengeluarkan formulir dari DOM
sebagai menunjukkan keberhasilan bagi pengguna.
Pertimbangkan untuk menonaktifkan tombol Login setelah pengguna mengetuk atau mengklik anotasi. Banyak pengguna mengklik tombol beberapa kali bahkan di situs yang cepat dan responsif. Hal itu memperlambat interaksi dan menambah beban server.
Sebaliknya, jangan nonaktifkan pengiriman formulir yang menunggu input pengguna. Misalnya, jangan nonaktifkan tombol Login jika pengguna belum memasukkan informasi pelanggan mereka PIN. Pengguna mungkin melewatkan sesuatu pada formulir, lalu coba ketuk berulang kali (dinonaktifkan) Login dan merasa fitur ini tidak berfungsi. Paling tidak, jika Anda harus menonaktifkan pengiriman formulir, jelaskan kepada pengguna apa yang tidak diperlukan saat mereka klik pada tombol yang dinonaktifkan.
Jangan menggandakan input
Beberapa situs memaksa pengguna untuk memasukkan email atau sandi dua kali. Itu mungkin mengurangi error untuk beberapa pengguna, tetapi menyebabkan pekerjaan ekstra bagi semua pengguna, dan meningkatkan pengabaian tarif. Mengajukan dua kali pertanyaan juga tidak masuk akal di mana browser mengisi otomatis alamat email atau menyarankan {i>password<i} yang kuat. Sebaiknya izinkan pengguna untuk mengonfirmasi email mereka (Anda tetap harus melakukannya) dan permudah mereka untuk mereset {i>password<i} jika perlu.
Memaksimalkan atribut elemen
Di sinilah keajaiban benar-benar terjadi! Browser memiliki beberapa fitur bawaan bermanfaat yang menggunakan atribut elemen input.
Jaga kerahasiaan sandi—tetapi izinkan pengguna melihatnya jika mereka mau
Input sandi harus memiliki type="password"
untuk menyembunyikan teks sandi dan membantu
browser memahami bahwa input itu untuk sandi. (Perhatikan bahwa {i>browser<i} menggunakan
berbagai teknik untuk memahami peran input dan memutuskan
apakah menawarkan untuk menyimpan {i>password<i} atau tidak.)
Anda harus menambahkan tombol Tampilkan sandi agar pengguna dapat memeriksa teks yang dimasukkan—dan jangan lupa untuk menambahkan link Lupa sandi. Lihat Aktifkan tampilan sandi.
![Formulir login Google menampilkan ikon Tampilkan sandi.](https://web.dev/static/articles/sign-in-form-best-practices/image/google-sign-form-showing-c9486bea5e685.png?hl=id)
Berikan keyboard yang tepat kepada pengguna seluler
Gunakan <input type="email">
untuk memberi pengguna seluler keyboard yang tepat dan
mengaktifkan validasi alamat email bawaan dasar oleh browser... tanpa JavaScript
wajib!
Jika Anda perlu menggunakan nomor telepon, bukan alamat email, <input
type="tel">
akan mengaktifkan keypad telepon di perangkat seluler. Anda juga dapat menggunakan
Atribut inputmode
jika diperlukan: inputmode="numeric"
ideal untuk PIN
angka. Semua Hal yang Ingin Anda Ketahui
inputmode
memiliki detail yang lebih lengkap.
Mencegah keyboard seluler menghalangi tombol Login
Sayangnya, jika Anda tidak berhati-hati, {i>keyboard<i} dapat menutupi formulir Anda atau, lebih buruk, menghalangi sebagian tombol Login. Pengguna mungkin menyerah sebelum menyadari apa yang telah terjadi.
![Dua screenshot formulir login di ponsel Android: satu screenshot menunjukkan bagaimana tombol Kirim dikaburkan oleh keyboard ponsel.](https://web.dev/static/articles/sign-in-form-best-practices/image/two-screenshots-a-sign-084751e480027.png?hl=id)
Jika memungkinkan, hindari hal ini dengan hanya menampilkan input email/ponsel dan sandi dan tombol Login di bagian atas halaman login. Tempatkan konten lainnya di bawah.
![Screenshot formulir login di ponsel Android: tombol Login tidak terhalang oleh keyboard ponsel.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-83485069857ef.png?hl=id)
Uji di berbagai perangkat
Anda harus melakukan pengujian di berbagai perangkat untuk target audiens, dan menyesuaikannya sebagaimana mestinya. BrowserStack memungkinkan pengujian gratis untuk open source project di berbagai perangkat sungguhan dan browser.
![Screenshot formulir login di iPhone 7, 8, dan 11. Di iPhone 7 dan 8, tombol Login terhalang oleh keyboard ponsel, tetapi tidak di iPhone 11](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-a-sign-form-7ab582516302b.png?hl=id)
Coba gunakan dua halaman
Beberapa situs (termasuk Amazon dan eBay) menghindari masalah dengan meminta email/telepon dan sandi pada dua halaman. Pendekatan ini juga menyederhanakan pengalaman: pengguna hanya ditugaskan untuk satu hal pada satu waktu.
![Screenshot formulir login di situs Amazon: email/telepon dan sandi di dua 'halaman' terpisah.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-ade5c293b1904.png?hl=id)
Idealnya, ini harus diimplementasikan dengan satu <form>. Gunakan JavaScript untuk awalnya hanya menampilkan input email, lalu menyembunyikannya dan menampilkan input sandi. Jika Anda harus memaksa pengguna untuk membuka halaman baru antara memasukkan email {i>password<i}, formulir di halaman kedua harus memiliki elemen input tersembunyi dengan nilai email, untuk membantu mengaktifkan pengelola sandi untuk menyimpan nilai yang benar. Sandi Gaya Formulir yang Dipahami Chromium menyediakan contoh kode.
Membantu pengguna menghindari memasukkan kembali data
Anda dapat membantu browser menyimpan data dengan benar dan mengisi otomatis input, sehingga pengguna tidak harus ingat untuk memasukkan nilai email dan {i>password<i}. Hal ini sangat penting di perangkat seluler, dan penting untuk input email, yang mendapatkan rasio pengabaian tinggi.
Ada dua bagian untuk ini:
Atribut
autocomplete
,name
,id
, dantype
membantu browser memahami peran input untuk menyimpan data yang nantinya dapat digunakan untuk {i>autofill.<i} Agar data dapat disimpan untuk isi otomatis, browser modern juga memerlukan input untuk memiliki nilainame
atauid
yang stabil (tidak dihasilkan secara acak pada setiap pemuatan halaman atau deployment situs), dan berada dalam <form> dengan tombolsubmit
.Atribut
autocomplete
membantu browser mengisi otomatis input dengan benar menggunakan data yang disimpan.
Untuk input email, gunakan autocomplete="username"
, karena username
dikenali
oleh pengelola sandi di browser modern—meskipun Anda harus menggunakan type="email"
dan Anda mungkin perlu menggunakan id="email"
dan name="email"
.
Untuk input sandi, gunakan nilai autocomplete
dan id
yang sesuai untuk membantu browser
membedakan antara {i>password<i} baru dan saat ini.
Gunakan autocomplete="new-password"
dan id="new-password"
untuk sandi baru
- Gunakan
autocomplete="new-password"
danid="new-password"
untuk input sandi saat pendaftaran formulir, atau {i>password<i} baru dalam bentuk {i>change-password<i}.
Gunakan autocomplete="current-password"
dan id="current-password"
untuk sandi yang sudah ada
- Gunakan
autocomplete="current-password"
danid="current-password"
untuk input sandi di formulir login, atau input untuk sandi lama pengguna dalam formulir ubah sandi. Fungsi ini memberi tahu {i>browser<i} Anda ingin menggunakan {i>password<i} saat ini yang disimpan untuk situs tersebut.
Untuk formulir pendaftaran:
<input type="password" autocomplete="new-password" id="new-password" …>
Untuk login:
<input type="password" autocomplete="current-password" id="current-password" …>
Mendukung pengelola sandi
Browser yang berbeda menangani isi otomatis email dan saran sandi secara berbeda, tetapi dampaknya hampir sama. Pada Safari 11 dan yang lebih baru di desktop, misalnya, pengelola sandi ditampilkan, lalu menampilkan autentikasi (sidik jari atau pengenalan wajah) digunakan jika tersedia.
![Screenshot tiga tahap proses login di Safari di desktop: pengelola sandi, autentikasi biometrik, isi otomatis.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-three-stages-b113ab6379e04.png?hl=id)
Chrome di desktop menampilkan saran email, menampilkan pengelola sandi, dan mengisi otomatis sandi.
![Screenshot empat tahap proses login pada Chrome di desktop: pelengkapan email, saran email, pengelola sandi, isi otomatis saat memilih.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-four-stages-da9ebdff879c3.png?hl=id)
Sandi browser dan sistem isi otomatis tidak mudah. Algoritma untuk menebak, menyimpan, dan menampilkan nilai tidak terstandardisasi, dan bervariasi dari antarplatform. Misalnya, sebagaimana ditunjukkan oleh Hidde de Vry: "Pengelola sandi Firefox melengkapi heuristiknya dengan sistem resep."
Isi otomatis: Hal yang harus diketahui developer web, tetapi
Jangan
memiliki informasi selengkapnya tentang penggunaan name
dan autocomplete
. Elemen HTML
spesifikasi
mencantumkan semua 59 kemungkinan nilai.
Aktifkan browser untuk menyarankan sandi kuat
Browser modern menggunakan heuristik untuk memutuskan kapan harus menampilkan UI pengelola sandi dan menyarankan {i>password<i} yang kuat.
Berikut cara Safari melakukannya di desktop.
![Screenshot pengelola sandi Firefox di desktop.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-firefox-passw-00fc03de0450e.png?hl=id)
(Saran kata sandi unik yang kuat telah tersedia di Safari sejak versi 12.0.)
Generator sandi browser bawaan memungkinkan pengguna dan developer untuk mencari tahu seperti apa “{i>password<i} yang kuat” alamat IP internalnya. Karena {i>browser<i} dapat menyimpan dengan aman {i>password<i} dan mengisinya secara otomatis sesuai kebutuhan, pengguna tidak perlu mengingat atau memasukkan sandi. Mendorong pengguna untuk memanfaatkan browser bawaan pembuat {i>password<i} juga berarti mereka lebih cenderung menggunakan {i>password<i} yang unik dan kuat {i>password<i} di situs Anda, dan cenderung tidak menggunakan ulang {i>password<i} yang dapat disusupi di tempat lain.
Membantu menyelamatkan pengguna dari input yang tidak sengaja hilang
Tambahkan atribut required
ke kolom email dan sandi.
Browser modern akan otomatis meminta dan menetapkan fokus untuk data yang hilang.
JavaScript tidak diperlukan!
![Screenshot Firefox desktop dan Chrome untuk Android yang menampilkan 'Harap isi kolom ini' jika ada data yang hilang.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-desktop-firef-eb20cb4ab2ed6.png?hl=id)
Desain untuk jari dan ibu jari
Ukuran browser default untuk hampir semua yang berkaitan dengan elemen input dan tombolnya terlalu kecil, terutama di seluler. Ini mungkin tampak jelas, tapi masalah umum terkait formulir login di banyak situs.
Memastikan input dan tombol cukup besar
Ukuran dan {i>padding<i} default untuk {i>input<i} dan tombol terlalu kecil di desktop dan bahkan lebih buruk lagi di perangkat seluler.
![Screenshot bentuk tanpa gaya di Chrome untuk desktop dan Chrome untuk Android.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-ddf413b33ec2b.png?hl=id)
Menurut aksesibilitas Android panduan ukuran target yang disarankan untuk objek layar sentuh adalah 7–10 mm. Antarmuka Apple pedoman menyarankan 48x48 px, dan W3C menyarankan setidaknya 44x44 CSS piksel. Pada saat itu tambahan, tambahkan (setidaknya) sekitar 15 px padding untuk elemen input dan tombol untuk seluler, dan sekitar 10 piksel di desktop. Cobalah ini dengan perangkat seluler sungguhan dan jari atau ibu jari sungguhan. Anda seharusnya dapat mengetuk setiap {i>wireframe<i} tombol input dan input lainnya.
Target ketuk tidak memiliki ukuran yang tepat Audit Lighthouse dapat membantu Anda mengotomatiskan proses deteksi elemen input yang terlalu kecil.
Desain jempol
Telusuri target sentuh dan Anda akan melihat banyak gambar jari telunjuk. Namun, di dunia nyata, banyak orang menggunakan ibu jari untuk berinteraksi dengan ponsel. Jempol lebih besar dari jari telunjuk, dan kontrol yang kurang tepat. Semua alasan itu untuk menyediakan target sentuh berukuran tertentu.
Buat teks yang cukup besar
Seperti ukuran dan {i>padding<i}, ukuran {i>font<i} browser default untuk elemen input dan terlalu kecil, terutama di perangkat seluler.
![Screenshot bentuk tanpa gaya di Chrome di desktop dan Android.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-e9a00e9267421.png?hl=id)
Browser pada platform yang berbeda menentukan ukuran {i>font<i} yang berbeda, sehingga sulit untuk menentukan ukuran font tertentu yang bekerja dengan baik di mana saja. Survei singkat tentang situs populer menunjukkan ukuran 13–16 piksel di desktop: sesuai dengan ukuran fisik adalah standar minimum yang baik untuk teks di seluler.
Artinya, Anda perlu menggunakan ukuran piksel yang lebih besar di perangkat seluler: 16px
di Chrome untuk
desktop cukup mudah dibaca, tetapi dengan penglihatan yang baik sekalipun sulit untuk membacanya 16px
teks di Chrome untuk Android. Anda dapat menyetel ukuran piksel font yang berbeda untuk
ukuran area pandang menggunakan media
kueri.
20px
sudah tepat di perangkat seluler—tetapi Anda harus mengujinya dengan teman atau
kolega yang memiliki
gangguan penglihatan.
Dokumen tidak menggunakan ukuran font yang dapat dibaca Audit Lighthouse dapat membantu Anda mengotomatisasi proses deteksi teks yang terlalu kecil.
Menyediakan ruang yang cukup di antara input
Tambahkan margin yang cukup agar input berfungsi dengan baik sebagai target sentuh. Dengan kata lain, arahkan sekitar selebar jari.
Pastikan input Anda terlihat jelas
Gaya visual batas default untuk input membuatnya sulit dilihat. Hampir tidak terlihat di beberapa platform, seperti Chrome untuk Android.
Seperti halnya padding, tambahkan batas: pada latar belakang putih, aturan umum yang baik adalah
untuk menggunakan #ccc
atau yang lebih gelap.
![Screenshot bentuk bergaya di Chrome pada Android.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-styled-form-e2baf84fd81fe.png?hl=id)
Gunakan fitur bawaan browser untuk memperingatkan tentang nilai input yang tidak valid
Browser memiliki fitur bawaan untuk melakukan validasi formulir dasar untuk input dengan
Atribut type
. Browser akan memperingatkan saat Anda mengirimkan formulir dengan nilai yang tidak valid,
dan mengatur fokus pada {i>input
<i}yang bermasalah.
![Screenshot formulir login di Chrome di desktop yang menampilkan perintah browser dan fokus untuk nilai email yang tidak valid.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-4a4d1d374a2a8.png?hl=id)
Anda dapat menggunakan pemilih CSS :invalid
untuk menandai data yang tidak valid. Gunakan
:not(:placeholder-shown)
untuk menghindari pemilihan input tanpa konten.
input[type=email]:not(:placeholder-shown):invalid {
color: red;
outline-color: red;
}
Coba berbagai cara untuk menandai input yang memiliki nilai tidak valid.
Gunakan JavaScript jika diperlukan
Aktifkan/nonaktifkan tampilan sandi
Anda harus menambahkan tombol Tampilkan sandi agar pengguna dapat memeriksa teks yang mereka masukkan. Kegunaan yang dialami pengguna tidak dapat melihat teks yang mereka masukkan. Saat ini tidak ada cara bawaan untuk melakukan ini, meskipun ada rencana untuk penerapan. Anda akan harus menggunakan JavaScript.
![Formulir login Google menampilkan tombol Tampilkan sandi dan link Lupa sandi.](https://web.dev/static/articles/sign-in-form-best-practices/image/sign-in-form.png?hl=id)
Kode berikut menggunakan tombol teks untuk menambahkan fungsi Tampilkan sandi.
HTML:
<section>
<label for="password">Password</label>
<button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
<input id="password" name="password" type="password" autocomplete="current-password" required>
</section>
Berikut ini CSS untuk membuat tombol terlihat seperti teks biasa:
button#toggle-password {
background: none;
border: none;
cursor: pointer;
/* Media query isn't shown here. */
font-size: var(--mobile-font-size);
font-weight: 300;
padding: 0;
/* Display at the top right of the container */
position: absolute;
top: 0;
right: 0;
}
Dan JavaScript untuk menampilkan sandi:
const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');
togglePasswordButton.addEventListener('click', togglePassword);
function togglePassword() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
togglePasswordButton.textContent = 'Hide password';
togglePasswordButton.setAttribute('aria-label',
'Hide password.');
} else {
passwordInput.type = 'password';
togglePasswordButton.textContent = 'Show password';
togglePasswordButton.setAttribute('aria-label',
'Show password as plain text. ' +
'Warning: this will display your password on the screen.');
}
}
Inilah hasil akhirnya:
![Screenshot formulir login dengan Tampilkan teks sandi 'button' di Safari di Mac dan di iPhone 7.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-sign-form-61274420cf598.png?hl=id)
Membuat input sandi dapat diakses
Gunakan aria-describedby
untuk menguraikan aturan sandi dengan memberinya ID
elemen yang mendeskripsikan batasan-batasannya. Pembaca layar menyediakan teks label,
tipe input ({i>password<i}), dan kemudian {i>description<i}.
<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
Saat menambahkan fungsi Tampilkan sandi, pastikan untuk menyertakan
aria-label
untuk memperingatkan bahwa sandi akan ditampilkan. Jika tidak, pengguna mungkin
secara tidak sengaja mengungkapkan {i>
password<i}.
<button id="toggle-password"
aria-label="Show password as plain text.
Warning: this will display your password on the screen.">
Show password
</button>
Anda dapat melihat cara kerja kedua fitur ARIA di Glitch berikut:
Membuat Formulir yang Mudah Diakses memiliki tips lainnya untuk membantu membuat formulir mudah diakses.
Lakukan validasi secara real time dan sebelum pengiriman
Elemen dan atribut formulir HTML memiliki fitur bawaan untuk validasi dasar, tetapi Anda juga harus menggunakan JavaScript untuk melakukan validasi yang lebih kuat saat pengguna memasukkan data dan kapan mereka mencoba mengirimkan formulir.
Langkah 5 formulir login codelab menggunakan Constraint Validation API (yang merupakan didukung secara luas) untuk menambahkan validasi kustom menggunakan UI browser bawaan untuk mengatur fokus dan menampilkan prompt.
Cari tahu lebih lanjut: Menggunakan JavaScript untuk real-time yang lebih kompleks validasi.
Analytics dan RUM
"Apa yang tidak dapat Anda ukur, Anda tidak dapat meningkatkannya" terutama berlaku untuk pendaftaran dan formulir login. Anda perlu menetapkan sasaran, mengukur keberhasilan, meningkatkan kualitas situs, dan ulangi.
Kegunaan diskon pengujian dapat berupa berguna untuk mencoba perubahan, tetapi Anda akan membutuhkan data di dunia nyata untuk memahami pengalaman pengguna pada formulir pendaftaran dan login Anda:
- Analisis halaman: penayangan halaman pendaftaran dan login, rasio pantulan, dan keluar.
- Analisis interaksi: sasaran funnel (di mana pengguna mengabaikan alur login atau login Anda?) dan peristiwa (tindakan apa yang dilakukan pengguna saat berinteraksi dengan formulir Anda?)
- Performa situs: yang berpusat pada pengguna metrik (adalah pendaftaran dan login Anda formulir lambat karena beberapa alasan dan, jika ya, apa penyebabnya?).
Anda juga dapat mempertimbangkan penerapan pengujian A/B untuk mencoba pendekatan untuk mendaftar dan login, serta peluncuran bertahap untuk memvalidasi perubahan pada sekelompok pengguna sebelum merilis perubahan itu untuk semua pengguna.
Panduan umum
UI dan UX yang didesain dengan baik dapat mengurangi pengabaian formulir login:
- Jangan membuat pengguna mencari-cari untuk login! Tempatkan link ke formulir login di bagian atas halaman, menggunakan kata-kata yang dipahami dengan baik seperti Login, Buat Akun atau Daftar.
- Jaga agar tetap fokus! Formulir pendaftaran bukanlah tempat untuk mengalihkan perhatian orang dengan penawaran dan fitur situs lainnya.
- Minimalkan kerumitan pendaftaran. Mengumpulkan data pengguna lainnya (seperti alamat atau detail kartu kredit) hanya saat pengguna melihat manfaat yang jelas dari penyediaan layanan otomatis dan data skalabel.
- Sebelum pengguna memulai formulir pendaftaran, jelaskan apa nilainya proposisi yang berbeda. Apa manfaat yang diperoleh mereka dari login? Memberikan informasi konkret kepada pengguna insentif untuk menyelesaikan pendaftaran.
- Jika memungkinkan, izinkan pengguna untuk mengidentifikasi diri mereka dengan nomor ponsel alih-alih alamat email, karena beberapa pengguna mungkin tidak menggunakan email.
- Permudah pengguna untuk mereset sandi mereka, dan buat agar halaman Lupa sandi? sudah jelas.
- Link ke dokumen persyaratan layanan dan kebijakan privasi Anda: jelaskan untuk pengguna sejak awal bagaimana Anda melindungi data mereka.
- Cantumkan logo dan nama perusahaan atau organisasi Anda pada pendaftaran dan laman masuk, dan pastikan bahasa, {i>font<i}, dan gaya sesuai dengan di situs Anda. Beberapa formulir tidak terasa seperti milik situs yang sama dengan lainnya terutama jika keduanya memiliki URL yang sangat berbeda.
Terus belajar
- Membuat Formulir yang Menarik
- Praktik Terbaik untuk Desain Formulir Seluler
- Kontrol formulir yang lebih andal
- Membuat Formulir yang Mudah Diakses
- Menyederhanakan Alur Login Menggunakan Credential Management API
- Memverifikasi nomor telepon di web dengan WebOTP API
Foto oleh Meghan Schiereck di Unsplash.