Güvenli, erişilebilir ve kullanımı kolay oturum açma formları oluşturmak için platformlar arası tarayıcı özelliklerini kullanın.
Kullanıcıların sitenize giriş yapması gerekirse iyi bir oturum açma formu tasarımı çok önemlidir. Bu durum özellikle zayıf bağlantısı olan, mobil cihaz kullanan, acelesi veya stres altındaki kişiler için geçerlidir. Kötü tasarlanmış oturum açma formları, hemen çıkma oranlarının artmasına neden olur. Her hemen çıkma, yalnızca bir oturum açma fırsatının kaçırılması değil, kaybedilmiş ve rahatsız olmuş bir kullanıcının anlamına gelebilir.
Aşağıda, en iyi uygulamaların tümünü gösteren basit bir oturum açma formu örneği verilmiştir:
Yapılacaklar listesi
- Anlamlı HTML öğeleri kullanın:
<form>
,<input>
,<label>
ve<button>
. - Her girişi bir
<label>
ile etiketleyin. - Yerleşik tarayıcı özelliklerine erişmek için öğe özelliklerini kullanın:
type
,name
,autocomplete
,required
. - Giriş
name
veid
özellikleri için, sayfa yüklemeleri veya web sitesi dağıtımları arasında değişmeyen sabit değerler verin. - Oturum açmayı kendi <form> öğesine yerleştirin.
- Form gönderme işleminin başarılı olmasını sağlayın.
- Kayıt formundaki şifre girişi için
autocomplete="new-password"
veid="new-password"
simgelerini, şifre sıfırlama biçiminde yeni şifre girmek için iseautocomplete="new-password"
veid="new-password"
araçlarını kullanın. - Oturum açma şifresi girişi için
autocomplete="current-password"
veid="current-password"
uygulamalarını kullanın. - Şifreyi göster işlevini sağlayın.
- Şifre girişleri için
aria-label
vearia-describedby
kullanın. - Girişleri iki kez artırmayın.
- Formları, mobil klavyenin girişleri veya düğmeleri engellemeyecek şekilde tasarlayın.
- Formların mobil cihazlarda kullanılabildiğinden emin olun: okunabilir metin kullanın ve girişlerle düğmelerin dokunma hedefleri olarak çalışacak kadar büyük olduğundan emin olun.
- Kaydolma ve oturum açma sayfalarınızda marka bilincini ve stili koruyun.
- Hem sahada hem de laboratuvarda test edin: Kayıt ve oturum açma akışınıza sayfa analizleri, etkileşim analizleri ve kullanıcı odaklı performans ölçümü ekleyin.
- Tarayıcılar ve cihazlar arasında test edin: Form davranışı, platformlar arasında önemli ölçüde değişiklik gösterir.
Anlamlı HTML kullanın
İş için oluşturulan öğeleri kullanın: <form>
, <label>
ve <button>
. Bunlar, yerleşik tarayıcı işlevlerini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemenize anlam katar.
<form>
hareketini kullanın
Girişleri bir <div>
içinde sarmalamak ve giriş verisi gönderimini yalnızca JavaScript ile işlemek isteyebilirsiniz. Düz eski bir <form>
öğesi kullanmak genellikle daha iyidir. Bu yöntem, sitenizin ekran okuyucular ve diğer yardımcı cihazlar tarafından erişilebilir olmasını sağlar, bir dizi yerleşik tarayıcı özelliğini etkinleştirir, eski tarayıcılar için temel işlevsel oturum açma bilgilerini basitleştirir ve JavaScript başarısız olsa bile çalışmaya devam eder.
<label>
hareketini kullanın
Bir girişi etiketlemek için <label>
kullanın!
<label for="email">Email</label>
<input id="email" …>
İki neden:
- Bir etikete dokunulduğunda veya tıklandığında odak girişe taşınır. Etiketin
for
özelliğini, girişinname
veyaid
değeriyle kullanarak bir etiketi girişle ilişkilendirin. - Ekran okuyucular, etikete veya etiketin girişine odaklanıldığında etiket metnini duyurur.
Yer tutucuları giriş etiketleri olarak kullanmayın. Kullanıcılar metin girmeye başladıklarında, özellikle de dikkatleri dağılırsa ("E-posta adresi mi, telefon numarası mı yoksa hesap kimliği mi giriyorum?") ne için giriş yapıldığını unutabilir. Yer tutucularla ilgili başka birçok olası sorun vardır: Emin değilseniz Yer Tutucu Özelliğini Kullanma ve Form Alanlarındaki Yer Tutucular Zararlı Olur konularına bakın.
Etiketlerinizi girişlerin üzerine yerleştirmeniz muhtemelen en iyisidir. Bu, mobil ve masaüstü genelinde tutarlı bir tasarım sağlar ve Google Yapay Zeka araştırmalarına göre kullanıcıların daha hızlı tarama yapmasını sağlar. Tam genişlikte etiketler ve girişler alırsınız. Ayrıca etiket metnine sığması için etiket ve giriş genişliğini ayarlamanız gerekmez.
![Mobil cihazlarda form girişi etiketinin konumunu gösteren ekran görüntüsü: girişin yanında ve üzerindeki giriş.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-showing-form-i-8eaa2616f31e3.png?authuser=5&hl=tr)
Kendi başınıza görmek için bir mobil cihazda label-position Glitch'i açın.
<button>
hareketini kullanın
Düğmeler için <button>
kullanın. Düğme öğeleri erişilebilir davranış ve yerleşik form gönderme işlevi sağlar ve kolayca stilize edilebilir. Düğme gibi davranan bir <div>
veya başka bir öğe kullanmanın bir anlamı yoktur.
Gönder düğmesinin işlevi hakkında bilgi verdiğinden emin olun. Örneğin, Gönder veya Başlat değil, Hesap oluşturun veya Oturum açın.
Form gönderme işleminin başarılı olmasını sağlama
Şifre yöneticilerinin bir formun gönderildiğini anlamalarına yardımcı olun. Bunu yapmanın iki yolu vardır:
- Farklı bir sayfaya gidin.
History.pushState()
veyaHistory.replaceState()
ile gezinme emülasyonu yapın ve şifre formunu kaldırın.
XMLHttpRequest
veya fetch
isteği ile oturum açma başarısının yanıtta belirtildiğinden, form DOM'den çıkarılarak ve kullanıcıya işlemin başarılı olduğu bildirilerek işlendiğinden emin olun.
Kullanıcı dokunduktan veya tıkladıktan sonra Oturum aç düğmesini devre dışı bırakmayı düşünün. Hızlı ve duyarlı sitelerde bile birçok kullanıcı düğmeleri birden fazla kez tıklar. Bu da etkileşimleri yavaşlatır ve sunucu yükünü artırır.
Bununla birlikte, kullanıcı girişi bekleyen form gönderimini devre dışı bırakmayın. Örneğin, kullanıcılar müşteri PIN'lerini girmediyse Oturum aç düğmesini devre dışı bırakmayın. Kullanıcılar formda bir şeyi atlayabilir ve (devre dışı) Oturum aç düğmesine sürekli olarak dokunmayı deneyebilir ve düğmenin çalışmadığını düşünebilir. En azından, form göndermeyi devre dışı bırakmanız gerekiyorsa kullanıcıya devre dışı bırakılan düğmeyi tıkladığında nelerin eksik olduğunu açıklayın.
Girişleri ikiye katlamayın
Bazı siteler, kullanıcıların e-posta veya şifre girmesini iki kez zorunlu kılar. Bu, birkaç kullanıcı için hataları azaltabilir ancak tüm kullanıcılar için ek iş yüküne neden olur ve vazgeçme oranlarını artırır. İki kez soru sormak, tarayıcıların e-posta adreslerini otomatik olarak doldurduğu veya güçlü şifreler önerdiği durumlarda da anlamlı değildir. Kullanıcıların e-posta adreslerini onaylamalarını sağlamak (bunu yine de yapmanız gerekir) ve gerektiğinde şifrelerini sıfırlamalarını kolaylaştırmak daha iyidir.
Öğe özelliklerinden en iyi şekilde yararlanın
İşte tüm sihir burada gerçekleşir! Tarayıcılarda, giriş öğesi özelliklerini kullanan yararlı yerleşik özellikler bulunur.
Şifreleri gizli tutun ancak isterlerse kullanıcıların bu şifreleri görmesini sağlayın
Şifre metinlerini gizlemek ve tarayıcının, girişin şifreler için yapıldığını anlamasına yardımcı olmak için şifre girişlerinde type="password"
ifadesi bulunmalıdır. (Tarayıcıların giriş rollerini anlamak ve şifrelerin kaydedilmesinin teklif edilip edilmeyeceğini belirlemek için çeşitli teknikler kullandığını unutmayın.)
Kullanıcıların, girdikleri metni kontrol etmelerine olanak tanımak için bir Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir ve bir Şifremi unuttum bağlantısı eklemeyi unutmayın. Şifre görüntülemeyi etkinleştirme bölümüne bakın.
![Şifreyi göster simgesini gösteren Google oturum açma formu.](https://web.dev/static/articles/sign-in-form-best-practices/image/google-sign-form-showing-c9486bea5e685.png?authuser=5&hl=tr)
Mobil kullanıcılara doğru klavyeyi verin
Mobil kullanıcılara uygun bir klavye sağlamak ve tarayıcı tarafından
temel yerleşik e-posta adresi doğrulamayı etkinleştirmek için <input type="email">
kullanın... JavaScript gerekmez!
E-posta adresi yerine telefon numarası kullanmanız gerekirse, <input
type="tel">
mobil cihazlarda telefon tuş takımını etkinleştirir. Gerektiğinde inputmode
özelliğini de kullanabilirsiniz: inputmode="numeric"
, PIN numaraları için idealdir. inputmode Hakkında Bilmek İstediğiniz Her Şey sayfasında daha ayrıntılı bilgi bulabilirsiniz.
Mobil klavyenin Oturum aç düğmesini engellemesini önle
Maalesef dikkatli değilseniz mobil klavyeler formunuzun üzerini kaplayabilir veya daha da kötüsü, Oturum aç düğmesini kısmen engelleyebilir. Kullanıcılar ne olduğunu anlamadan vazgeçebilir.
![Android telefondaki bir oturum açma formunun iki ekran görüntüsü: Gönder düğmesinin telefon klavyesi tarafından nasıl engellendiğini gösteren bir ekran.](https://web.dev/static/articles/sign-in-form-best-practices/image/two-screenshots-a-sign-084751e480027.png?authuser=5&hl=tr)
Mümkünse yalnızca e-posta/telefon ve şifre girişlerini ve Oturum aç düğmesini oturum açma sayfanızın üst kısmında görüntüleyerek bunu önleyin. Diğer içerikleri aşağıya yerleştirin.
![Android telefondaki bir oturum açma formunun ekran görüntüsü: Oturum aç düğmesi, telefon klavyesi tarafından gizlenmemiş.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-83485069857ef.png?authuser=5&hl=tr)
Çeşitli cihazlarda test edin
Hedef kitleniz için bir dizi cihazda test yapmanız ve buna göre ayarlama yapmanız gerekir. BrowserStack bir dizi gerçek cihaz ve tarayıcıda açık kaynak projeler için ücretsiz test yapılmasını sağlar.
![iPhone 7, 8 ve 11'de oturum açma formunun ekran görüntüleri. iPhone 7 ve 8'de Oturum aç düğmesi telefon klavyesi tarafından gizleniyor ancak iPhone 11'de engellenmiyor](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-a-sign-form-7ab582516302b.png?authuser=5&hl=tr)
İki sayfa kullanmayı düşünün
Bazı siteler (Amazon ve eBay dahil) iki sayfada e-posta/telefon ve şifre girilmesini isteyerek bu sorundan kaçınır. Bu yaklaşım, deneyimi basitleştirir: Kullanıcıya tek seferde yalnızca bir işlem verilir.
![Amazon web sitesindeki bir oturum açma formunun ekran görüntüsü: iki ayrı 'sayfada' e-posta/telefon ve şifre.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-ade5c293b1904.png?authuser=5&hl=tr)
İdeal olarak, bunun tek bir <form> ile uygulanması gerekir. Başlangıçta yalnızca e-posta girişini görüntülemek, ardından bunu gizlemek ve şifre girişini göstermek için JavaScript kullanın. E-posta ve şifre girme arasında kullanıcıyı yeni bir sayfaya gitmeye zorlamanız gerekiyorsa şifre yöneticilerinin doğru değeri depolamasına yardımcı olmak için ikinci sayfadaki formda e-posta değerini içeren gizli bir giriş öğesi bulunmalıdır. Chromium'un Anladığı Şifre Formu Stilleri, bir kod örneği sağlar.
Kullanıcıların verileri yeniden girmesini önlemeye yardımcı olun
Kullanıcıların e-posta ve şifre değerlerini girmek zorunda kalmaması için tarayıcıların verileri ve otomatik doldurma girişlerini doğru bir şekilde depolamasına yardımcı olabilirsiniz. Bu özellikle mobil cihazlarda önemlidir ve yüksek vazgeçme oranları alan e-posta girişleri için büyük önem taşır.
Bunun iki bölümü vardır:
autocomplete
,name
,id
vetype
özellikleri, tarayıcıların daha sonra otomatik doldurma için kullanılabilecek verileri depolamak için girişlerin rolünü anlamasına yardımcı olur. Verilerin otomatik doldurma amacıyla depolanmasına izin vermek için modern tarayıcılar, girişlerin sabit birname
veyaid
değerine sahip olmasını (her sayfa yüklemesinde veya site dağıtımında rastgele oluşturulmaz) vesubmit
düğmeli bir <form> biçiminde olmasını da gerektirir.autocomplete
özelliği, tarayıcıların kaydedilen verileri kullanarak girişleri doğru şekilde otomatik olarak doldurmasına yardımcı olur.
type="email"
kullanıyor olsanız ve id="email"
ve name="email"
kullanmak isteyebilirsiniz. Ancak username
, modern tarayıcılarda şifre yöneticileri tarafından tanındığından e-posta girişleri için autocomplete="username"
kullanın.
Şifre girişlerinde, tarayıcıların yeni ve mevcut şifreleri ayırt etmesine yardımcı olmak için uygun autocomplete
ve id
değerlerini kullanın.
Yeni şifre için autocomplete="new-password"
ve id="new-password"
e-posta adreslerini kullanın
- Kayıt formunda şifre girişi için
autocomplete="new-password"
veid="new-password"
kodunu, şifre değiştirme formunda ise yeni şifreyi kullanın.
Mevcut şifre için autocomplete="current-password"
ve id="current-password"
kullan
- Oturum açma formuna şifre girmek için veya kullanıcının eski şifresinin şifre değiştirme biçiminde girmek için
autocomplete="current-password"
veid="current-password"
kullanın. Bu işlem, tarayıcıya site için sakladığı mevcut şifreyi kullanmasını istediğinizi söyler.
Kayıt formu için:
<input type="password" autocomplete="new-password" id="new-password" …>
Oturum açmak için:
<input type="password" autocomplete="current-password" id="current-password" …>
Şifre yöneticilerini destekle
Otomatik e-posta doldurma ve şifre önerileri, farklı tarayıcılarla kısmen farklı şekilde ele alınır. Ancak etkileri hemen hemen aynıdır. Örneğin masaüstü bilgisayarlardaki Safari 11 ve sonraki sürümlerde şifre yöneticisi gösterilir ve varsa biyometrik kimlik doğrulama (parmak izi veya yüz tanıma) kullanılır.
![Masaüstü bilgisayarlardaki Safari uygulamasında üç aşamada (şifre yöneticisi, biyometrik kimlik doğrulama, otomatik doldurma) oturum açma sürecinin ekran görüntüleri.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-three-stages-b113ab6379e04.png?authuser=5&hl=tr)
Masaüstündeki Chrome, e-posta önerilerini görüntüler, şifre yöneticisini gösterir ve şifreyi otomatik olarak doldurur.
![Masaüstünde Chrome'da oturum açma sürecinin dört aşamasının ekran görüntüleri: e-posta tamamlama, e-posta önerisi, şifre yöneticisi, seçimde otomatik doldurma.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-four-stages-da9ebdff879c3.png?authuser=5&hl=tr)
Tarayıcı şifresi ve otomatik doldurma sistemleri basit değildir. Değerleri tahmin etme, depolama ve gösterme algoritmaları standart hale getirilmemiştir ve platformdan platforma değişiklik gösterir. Örneğin, Hidde deVries tarafından belirtildiği gibi: "Firefox'un şifre yöneticisi, buluşsal yöntemlerini bir tarif sistemi ile tamamlar."
Otomatik Doldurma: Web geliştiricilerin bilmesi gerekenler ancak bilmediği name
ve autocomplete
hakkında daha fazla bilgi içerir. HTML spesifikasyonunda 59 olası değerin tamamı listelenir.
Güçlü bir şifre önermesi için tarayıcıyı etkinleştir
Modern tarayıcılar, şifre yöneticisi kullanıcı arayüzünün ne zaman gösterileceğine ve güçlü bir şifrenin ne zaman önerileceğine karar vermek için buluşsal yöntemler kullanır.
Safari'nin bunu masaüstünde nasıl yaptığını aşağıda görebilirsiniz.
![Masaüstündeki Firefox şifre yöneticisinin ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-firefox-passw-00fc03de0450e.png?authuser=5&hl=tr)
(12.0 sürümünden bu yana Safari'de güçlü bir benzersiz şifre önerisi kullanılmaktadır.)
Yerleşik tarayıcı şifresi oluşturma araçları, kullanıcıların ve geliştiricilerin "güçlü şifrenin" ne olduğunu öğrenmek zorunda olmamaları anlamına gelir. Tarayıcılar şifreleri güvenli bir şekilde saklayıp gerektiğinde otomatik olarak doldurabildiğinden, kullanıcıların şifre hatırlamasına veya girmesine gerek yoktur. Kullanıcıları, yerleşik tarayıcı şifresi oluşturma araçlarından yararlanmaya teşvik etmek, aynı zamanda sitenizde benzersiz ve güçlü bir şifre kullanma olasılıklarının daha yüksek olduğu, başka bir yerde güvenliği ihlal edilebilecek bir şifreyi ise daha az kullanacakları anlamına gelir.
Kullanıcıların yanlışlıkla giriş girmelerini önlemeye yardımcı olun
Hem e-posta hem de şifre alanlarına required
özelliğini ekleyin.
Modern tarayıcılar, eksik verileri otomatik olarak isteyip odağı ayarlar.
JavaScript gerekmez!
![Masaüstü Firefox ve Android için Chrome'un eksik veriler için 'Lütfen bu alanı doldurun' istemini gösteren ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-desktop-firef-eb20cb4ab2ed6.png?authuser=5&hl=tr)
Parmaklar ve başparmaklar için tasarım yapın
Giriş öğeleri ve düğmelerle ilgili hemen her şey için varsayılan tarayıcı boyutu, özellikle mobil cihazlarda çok küçüktür. Bu açık gibi görünse de, birçok sitedeki oturum açma formlarında yaygın bir sorundur.
Girişlerin ve düğmelerin yeterince büyük olduğundan emin olun
Girişler ve düğmeler için varsayılan boyut ve dolgu, masaüstünde çok küçük, mobil cihazlarda ise daha da kötüdür.
![Masaüstü için Chrome ve Android için Chrome'daki stilsiz formun ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-ddf413b33ec2b.png?authuser=5&hl=tr)
Android erişilebilirlik kılavuzuna göre, dokunmatik ekran nesneleri için önerilen hedef boyut 7-10 mm'dir. Apple arayüz yönergeleri 48x48 piksel, W3C ise en az 44x44 CSS pikseli önerir. Bu temelde, giriş öğeleri ve düğmeler için mobil cihazlarda en az 15 piksellik, masaüstünde ise yaklaşık 10 piksellik dolgu ekleyin. Bunu gerçek bir mobil cihazla ve gerçek bir veya başparmakla deneyin. Her bir giriş ve düğmenize rahatça dokunabilmeniz gerekir.
Dokunma hedefleri uygun boyutta değil Lighthouse denetimi, çok küçük giriş öğelerini algılama işlemini otomatikleştirmenize yardımcı olabilir.
Parmaklara göre tasarlayın
Dokunma hedefi araması yaptığınızda bir sürü işaret parmağı resmi görürsünüz. Ancak, gerçek dünyada pek çok kişi telefonlarla etkileşim kurmak için başparmaklarını kullanır. Baş parmaklar işaret parmağından daha büyüktür ve kontrol daha azdır. Yeterli boyutta dokunma hedefleri için daha fazla neden.
Metni yeterince büyük hale getirin
Boyut ve dolguda olduğu gibi, giriş öğelerinin ve düğmelerin varsayılan tarayıcı yazı tipi boyutu (özellikle mobil cihazlarda) çok küçüktür.
![Masaüstü ve Android'deki Chrome'daki stilsiz formun ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-unstyled-form-e9a00e9267421.png?authuser=5&hl=tr)
Farklı platformlardaki tarayıcılar yazı tiplerini farklı şekilde boyutlandırırlar. Bu nedenle, her yerde iyi çalışan belirli bir yazı tipi boyutu belirlemek zordur. Popüler web siteleriyle ilgili kısa bir anket, masaüstü cihazlarda 13-16 piksel boyutlarını göstermektedir; mobil cihazlarda metinler için bu fiziksel boyutun ideal olması yeterlidir.
Bu nedenle, mobil cihazlarda daha büyük bir piksel boyutu kullanmanız gerekir: Masaüstü için Chrome'da 16px
metni oldukça okunaklıdır, ancak Android için Chrome'da 16px
metni iyi görüşürken bile okumak zordur. Medya sorgularını kullanarak farklı görüntü alanı boyutları için farklı yazı tipi pikseli boyutları ayarlayabilirsiniz.
20px
, mobil cihazlarda doğru bir yaklaşımdır, ancak bunu görme bozuklukları olan arkadaşlarınız veya
iş arkadaşlarınızla test etmeniz gerekir.
Belge, okunabilir yazı tipi boyutları kullanmıyor Lighthouse denetimi, çok küçük metinleri tespit etme işlemini otomatikleştirmenize yardımcı olabilir.
Girişler arasında yeterli boşluk bırakılmalıdır
Girişlerin dokunma hedefleriyle iyi çalışmasını sağlamak için yeterli kenar boşluğu ekleyin. Başka bir deyişle, bir parmak genişliğinde bir kenar boşluğu hedefleyin.
Girişlerinizin net bir şekilde göründüğünden emin olun
Girişler için varsayılan kenarlık stili, girişlerin görülmesini zorlaştırır. Bunlar, Android için Chrome gibi bazı platformlarda neredeyse görünmezdir.
Dolguya ek olarak kenarlık ekleyin: Beyaz bir arka plan üzerinde #ccc
veya daha koyu bir rengi kullanmak iyi bir genel kuraldır.
![Android'deki Chrome'daki stil oluşturulmuş formun ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-styled-form-e2baf84fd81fe.png?authuser=5&hl=tr)
Geçersiz giriş değerleri konusunda uyarı almak için yerleşik tarayıcı özelliklerini kullanın
Tarayıcılar, type
özelliğine sahip girişler için temel form doğrulaması yapmak üzere yerleşik özelliklere sahiptir. Tarayıcılar, geçersiz değere sahip bir form gönderdiğinizde uyarı verir ve sorunlu girişe odaklanır.
![Masaüstünde Chrome'da, tarayıcı istemini ve geçersiz e-posta değeri odağını gösteren oturum açma formunun ekran görüntüsü.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshot-a-sign-form-4a4d1d374a2a8.png?authuser=5&hl=tr)
Geçersiz verileri vurgulamak için :invalid
CSS seçiciyi kullanabilirsiniz. İçeriksiz girişleri seçmekten kaçınmak için :not(:placeholder-shown)
değerini kullanın.
input[type=email]:not(:placeholder-shown):invalid {
color: red;
outline-color: red;
}
Geçersiz değerlere sahip girişleri vurgulamanın farklı yollarını deneyin.
Gerektiğinde JavaScript kullanın
Şifre görüntülemeyi aç/kapat
Kullanıcıların girdikleri metni kontrol edebilmeleri için bir Şifreyi göster açma/kapatma düğmesi eklemelisiniz. Kullanıcılar girdikleri metni göremediklerinde kullanılabilirlik bozulur. Uygulamaya yönelik planlar olsa da şu anda bunu yapmanın yerleşik bir yolu yoktur. Bunun yerine JavaScript kullanmanız gerekir.
![Şifreyi göster düğmesini ve Şifremi unuttum bağlantısını gösteren Google oturum açma formu.](https://web.dev/static/articles/sign-in-form-best-practices/image/sign-in-form.png?authuser=5&hl=tr)
Aşağıdaki kod, Şifreyi göster işlevini eklemek için bir metin düğmesi kullanır.
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>
Düğmenin düz metin gibi görünmesini sağlamak için CSS'yi burada görebilirsiniz:
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;
}
Şifreyi göstermek için kullanılan JavaScript:
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.');
}
}
Sonuç şöyle olur:
![Mac'teki Safari'de ve iPhone 7'de "Şifre metnini göster" düğmesiyle oturum açma formunun ekran görüntüleri.](https://web.dev/static/articles/sign-in-form-best-practices/image/screenshots-sign-form-61274420cf598.png?authuser=5&hl=tr)
Şifre girişlerini erişilebilir hale getirin
Şifre kurallarını, kısıtlamaları açıklayan öğenin kimliğini vererek şifre kurallarını özetlemek için aria-describedby
kullanın. Ekran okuyucular etiket metnini, giriş türünü (şifre) ve ardından açıklamayı girer.
<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>
Şifreyi göster işlevini eklediğinizde, şifrenin gösterileceğine dair uyarı almak için aria-label
eklediğinizden emin olun. Aksi takdirde, kullanıcılar şifreleri
yanlışlıkla ifşa edebilir.
<button id="toggle-password"
aria-label="Show password as plain text.
Warning: this will display your password on the screen.">
Show password
</button>
Aşağıdaki arızada her iki ARIA özelliğini çalışırken görebilirsiniz:
Erişilebilir Form Oluşturma bölümünde, formları erişilebilir hale getirmeye yardımcı olacak başka ipuçları bulabilirsiniz.
Gerçek zamanlı olarak ve göndermeden önce doğrulayın
HTML form öğelerinin ve özellikleri, temel doğrulama için yerleşik özelliklere sahiptir ancak kullanıcılar veri girerken ve formu göndermeye çalışırken daha sağlam doğrulama yapmak için JavaScript'i de kullanmanız gerekir.
Oturum açma formu codelab'inin 5. adımında odak ve görüntüleme istemlerini ayarlamak amacıyla yerleşik tarayıcı kullanıcı arayüzünü kullanarak özel doğrulama eklemek için Kısıtlama Doğrulama API'si (genel olarak desteklenen) kullanılır.
Daha fazla bilgi edinin: Daha karmaşık gerçek zamanlı doğrulama için JavaScript'i kullanın.
Analiz ve RUM
"Neyi ölçemezsin, iyileştiremezsin" ifadesi özellikle kayıt ve oturum açma formları için geçerlidir. Hedefler belirlemeniz, başarıyı ölçmeniz, sitenizi iyileştirmeniz ve bunları tekrarlamanız gerekir.
İndirim kullanılabilirliği testi, değişiklikleri denerken yararlı olabilir ancak kullanıcılarınızın kayıt ve oturum açma formlarınızda nasıl bir deneyim yaşadığını gerçekten anlamak için gerçek verilere ihtiyacınız vardır:
- Sayfa analizi: Kaydolma ve oturum açma sayfası görüntülemeleri, hemen çıkma oranları ve çıkışlar.
- Etkileşim analizleri: hedef dönüşüm hunileri (kullanıcılar oturum açma veya oturum açma akışınızdan nerede ayrılıyor?) ve etkinlikler (kullanıcılar formlarınızla etkileşimde bulunurken hangi işlemleri yapıyor?)
- Web sitesi performansı: Kullanıcı odaklı metrikler (kayıt ve oturum açma formlarınız bir nedenle yavaş mı ve geliyorsa bunun nedeni nedir?).
Ayrıca kaydolma ve oturum açmayla ilgili farklı yaklaşımları denemek için A/B testi, değişiklikleri tüm kullanıcılara yayınlamadan önce bir kullanıcı alt kümesindeki değişiklikleri doğrulamak için aşamalı sunumlar uygulamayı da düşünebilirsiniz.
Genel yönergeler
İyi tasarlanmış kullanıcı arayüzü ve kullanıcı deneyimi, oturum açma formunu terk etme oranını azaltabilir:
- Kullanıcılar oturum açmak için zaman ayırmak zorunda kalmayın. Oturum Açın, Hesap Oluşturun veya Kaydolun gibi iyi anlaşılan ifadeler kullanarak sayfanın üst kısmına oturum açma formu bağlantısı yerleştirin.
- Konsantrasyonunuzu koruyun. Teklifler ve diğer site özellikleriyle kullanıcıların dikkatini dağıtan yer kayıt formları değildir.
- Kaydolma işleminin karmaşıklığını en aza indirin. Diğer kullanıcı verilerini (adresler veya kredi kartı ayrıntıları gibi) yalnızca kullanıcılar bu verileri sağlamanın açık bir faydasını gördüklerinde toplayın.
- Kullanıcılar kayıt formunuza başlamadan önce, değer teklifinin ne olduğunu açıkça belirtin. Oturum açmanın avantajı nasıl? Kullanıcılara kaydolma işlemini tamamlamaları için somut teşvikler sunun.
- Bazı kullanıcılar e-posta kullanmayabileceğinden, mümkünse kullanıcılara kendilerini e-posta adresi yerine cep telefonu numarasıyla tanıtma olanağı verin.
- Kullanıcıların şifrelerini sıfırlamasını kolaylaştırın ve Şifrenizi mi unuttunuz? bağlantısını açıkça gösterin.
- Hizmet şartları ve gizlilik politikası belgelerinizin bağlantılarını verin: Kullanıcılara verilerini nasıl koruduğunuzu en baştan itibaren açıkça belirtin.
- Kayıt ve oturum açma sayfalarınıza şirketinizin veya kuruluşunuzun logosunu ve adını ekleyin ve dil, yazı tipi ve stillerin sitenizin geri kalanıyla eşleştiğinden emin olun. Bazı formlar, özellikle önemli ölçüde farklı bir URL'ye sahiplerse, diğer içeriklerle aynı siteye ait olduklarını hissetmezler.
Öğrenmeye devam edin
- Mükemmel Formlar Oluşturun
- Mobil Form Tasarımı için En İyi Uygulamalar
- Daha yetenekli form denetimleri
- Erişilebilir Formlar Oluşturma
- Credential Management API'yi Kullanarak Oturum Açma Akışını Kolaylaştırma
- WebOTP API ile telefon numaralarını web'de doğrulama
Fotoğraf, Unsplash'ta Meghan Schiereck tarafından paylaşıldı.