Oturum açma formuyla ilgili en iyi uygulamalar

Güvenli, erişilebilir ve kullanımı kolay oturum açma formları oluşturmak için platformlar arası tarayıcı özelliklerinden yararlanın.

Sam Dutton

Kullanıcıların sitenize giriş yapması gerekiyorsa iyi bir oturum açma formu tasarımı çok önemlidir. Bu durum özellikle kötü bağlantısı olan, mobil cihaz kullanan, acelesi olan veya stres altındaki kişiler için geçerlidir. Kötü tasarlanmış oturum açma formları yüksek hemen çıkma oranlarına sahiptir. Her geri tepme, yalnızca kaçırılmış bir oturum açma fırsatı değil, aynı zamanda kaybedilen ve memnuniyetsiz bir kullanıcı anlamına da gelebilir.

Tüm en iyi uygulamaları gösteren basit bir oturum açma formu örneğini aşağıda bulabilirsiniz:

Yapılacaklar listesi

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 artırır ve işaretlemenize anlam katar.

<form> hareketini kullanın

Girişleri <div> içine sarmalamak ve giriş verilerinin gönderimini tamamen JavaScript ile işlemek isteyebilirsiniz. Sade, eski bir <form> öğesi kullanmak genellikle daha iyidir. Bu, sitenizi ekran okuyucular ve diğer yardımcı cihazlar için erişilebilir hale getirir, bir dizi yerleşik tarayıcı özelliğini etkinleştirir, eski tarayıcılar için temel işlevsel oturum açmayı kolaylaştırır ve JavaScript başarısız olsa bile çalışmaya devam edebilir.

<label> hareketini kullanın

Bir girişi etiketlemek için <label> kullanın.

<label for="email">Email</label>
<input id="email" …>

Bunun iki nedeni vardır:

  • Bir etikete dokunulduğunda veya etiket tıklandığında odak, etiketin girişine taşınır. Etiketin for özelliğini girişin name veya id değerleriyle kullanarak etiketi bir girişle ilişkilendirin.
  • Ekran okuyucular, etiket veya etiketin girişi odaklandığında etiket metnini sesli olarak okur.

Giriş etiketleri olarak yer tutucular kullanmayın. Kullanıcılar, özellikle dikkatleri dağılırsa ("E-posta adresi mi, telefon numarası mı yoksa hesap kimliği mi giriyordum?") metin girmeye başladıktan sonra girişin ne için olduğunu unutabilir. Yer tutucularla ilgili birçok olası sorun vardır: Bu konuda ikna olmadıysanız Yer tutucu özelliğini kullanmayın ve Form alanlarındaki yer tutucular zararlı başlıklı makaleleri inceleyin.

Etiketlerinizi girişlerinizin üzerine yerleştirmeniz en iyi seçenektir. Bu, mobil ve masaüstü cihazlarda tutarlı bir tasarım sağlar ve Google Yapay Zeka araştırmasına göre kullanıcıların daha hızlı taramasına olanak tanır. Tam genişlikte etiketler ve girişler alırsınız, ayrıca etiket metnini sığdırmak için etiketi ve giriş genişliğini ayarlamanız gerekmez.

Mobil cihazlarda form girişi etiketi konumunu gösteren ekran görüntüsü: girişin yanında ve girişin üzerinde.
Her ikisi de aynı satırda olduğunda etiket ve giriş genişliği sınırlıdır.

label-position Glitch'i mobil cihazınızda açıp kendiniz görebilirsiniz.

<button> hareketini kullanın

Düğmeler için <button> simgesini kullanın. Düğme öğeleri erişilebilir davranış ve yerleşik form gönderme işlevi sağlar ve kolayca şekillendirilebilir. Düğme gibi görünen bir <div> veya başka bir öğe kullanmanın bir anlamı yoktur.

Gönder düğmesinin ne işe yaradığını belirttiğinden emin olun. Örneğin, Hesap oluştur veya Oturum aç, Gönder veya Başlat değil.

Form gönderme işleminin başarılı olmasını sağlayın

Şifre yöneticilerinin bir formun gönderildiğini anlamasına yardımcı olun. Bunu yapmanın iki yolu vardır:

  • Farklı bir sayfaya gidin.
  • History.pushState() veya History.replaceState() ile gezinmeyi taklit edin ve şifre formunu kaldırın.

XMLHttpRequest veya fetch isteğiyle, oturum açma işleminin yanıtta raporlandığından ve formun DOM'dan kaldırılarak işlendiğinde kullanıcıya başarının gösterildiğinden emin olun.

Kullanıcı Oturum aç düğmesine dokunup tıkladıktan sonra düğmeyi devre dışı bırakabilirsiniz. Birçok kullanıcı, hızlı ve duyarlı sitelerde bile düğmeleri birden çok kez tıklar. Bu durum etkileşimleri yavaşlatır ve sunucu yükünü artırır.

Buna karşılık, 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 gözden kaçırıp (devre dışı bırakılmış) Oturum aç düğmesine tekrar tekrar dokunmayı deneyebilir ve bunun işe yaramadığını düşünebilirler. Form göndermeyi devre dışı bırakmanız gerekiyorsa en azından devre dışı bırakılmış düğmeyi tıklayan kullanıcıya eksik olan şeyi açıklayın.

Girişleri iki katına çıkarmayın

Bazı siteler, kullanıcıları iki kez e-posta adresi veya şifre girmeye zorlar. Bu, birkaç kullanıcı için hataları azaltabilir ancak tüm kullanıcılar için ek iş yükü oluşturur ve kullanıcıların vazgeçme oranlarını artırır. Tarayıcıların e-posta adreslerini otomatik olarak doldurduğu veya güçlü şifreler önerdiği durumlarda da iki kez sormak anlamsızdır. Kullanıcıların e-posta adreslerini onaylamasına izin vermeniz (bu işlemi zaten yapmanız gerekir) ve gerekirse şifrelerini sıfırlamalarını kolaylaştırmanız daha iyidir.

Öğe özelliklerinden en iyi şekilde yararlanma

İşte gerçek sihir burada gerçekleşir. Tarayıcılar, giriş öğesi özelliklerini kullanan birden fazla faydalı yerleşik özelliğe sahiptir.

Şifreleri gizli tutun ancak kullanıcıların dilerse şifreleri görmesine izin verin

Şifre metinlerini gizlemek ve tarayıcıya girişin şifre için olduğunu bildirmek amacıyla şifre girişlerinde type="password" olmalıdır. (Tarayıcıların giriş rollerini anlamak ve şifreleri kaydetmeyi teklif edip etmeme konusunda karar vermek için çeşitli teknikler kullandığını unutmayın.)

Kullanıcıların girdikleri metni kontrol edebilmesi için bir Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir. Ayrıca bir Şifrenizi mi unuttunuz? bağlantısı eklemeyi unutmayın. Şifre görüntülemeyi etkinleştirme başlıklı makaleyi inceleyin.

Şifre göster simgesini gösteren Google oturum açma formu.
Google oturum açma formunda şifre girişi: Şifreyi göster simgesi ve Şifrenizi mi unuttunuz? bağlantısı bulunur.

Mobil kullanıcılara doğru klavyeyi sunma

Mobil kullanıcılara uygun bir klavye sunmak ve tarayıcı tarafından temel yerleşik e-posta adresi doğrulamasını etkinleştirmek için <input type="email"> öğesini kullanın. JavaScript gerekmez.

E-posta adresi yerine telefon numarası kullanmanız gerekiyorsa <input type="tel">, mobil cihazlarda telefon tuş takımını etkinleştirir. Gerekirse inputmode özelliğini de kullanabilirsiniz: inputmode="numeric", PIN numaraları için idealdir. Daha fazla bilgi için inputmode hakkında bilmek istediğiniz her şey başlıklı makaleyi inceleyin.

Mobil klavyenin Oturum aç düğmesini engellemesini önleme

Dikkatli olmazsanız mobil klavyeler formunuzu kapatabilir veya daha da kötüsü Oturum aç düğmesini kısmen gizleyebilir. Kullanıcılar, ne olduğunu anlamadan önce vazgeçebilir.

Android telefondaki bir oturum açma formunun iki ekran görüntüsü: Biri, Gönder düğmesinin telefon klavyesi tarafından nasıl engellendiğini gösteriyor.
Oturum aç düğmesi: Bazen görünür, bazen görünmez.

Mümkün olduğunda, oturum açma sayfanızın üst kısmında yalnızca e-posta/telefon ve şifre girişlerini ve Oturum aç düğmesini göstererek bu durumdan kaçının. Diğer içerikleri aşağıya koyun.

Android telefondaki bir oturum açma formunun ekran görüntüsü: Oturum açma düğmesi, telefon klavyesi tarafından gizlenmiyor.
Klavye, Oturum aç düğmesini engellemez.

Çeşitli cihazlarda test etme

Hedef kitlenizin kullandığı çeşitli cihazlarda test yapmanız ve buna göre düzenlemeler yapmanız gerekir. BrowserStack, çeşitli gerçek cihaz ve tarayıcılarda açık kaynak projeleri için ücretsiz test yapmanızı sağlar.

iPhone 7, 8 ve 11&#39;deki oturum açma formunun ekran görüntüleri. iPhone 7 ve 8&#39;de oturum açma düğmesi telefon klavyesi tarafından gizlenir ancak iPhone 11&#39;de gizlenmez.
Oturum aç düğmesi: iPhone 7 ve 8'de gizlenir ancak iPhone 11'de gizlenmez.

İki sayfa kullanmayı düşünün

Amazon ve eBay gibi bazı siteler, e-posta/telefon ve şifreyi iki sayfada sorarak bu sorunu önler. Bu yaklaşım, deneyimi de basitleştirir: Kullanıcıya aynı anda yalnızca bir görev verilir.

Amazon web sitesindeki bir oturum açma formunun ekran görüntüsü: İki ayrı &quot;sayfada&quot; e-posta/telefon ve şifre.
İki aşamalı oturum açma: e-posta veya telefon, ardından şifre.

İdeal olarak bu, tek bir <form> ile uygulanmalıdır. Başlangıçta yalnızca e-posta girişini görüntülemek, ardından onu gizleyip şifre girişini göstermek için JavaScript'i kullanın. Kullanıcıyı e-posta adresini ve şifresini girmek için yeni bir sayfaya yönlendirmeniz gerekiyorsa şifre yöneticilerinin doğru değeri depolayabilmesi 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 girmemesini sağlayın

Tarayıcıların verileri doğru şekilde depolamasına ve girişleri otomatik olarak doldurmasına yardımcı olarak kullanıcıların e-posta ve şifre değerlerini girmeyi hatırlamalarına gerek kalmamasını sağlayabilirsiniz. Bu durum özellikle mobil cihazlarda önemlidir ve yüksek ayrılma oranları elde edilen e-posta girişleri için çok önemlidir.

Bunun iki bölümü vardır:

  1. autocomplete, name, id ve type özellikleri, tarayıcıların daha sonra otomatik doldurma için kullanılabilecek verileri depolamak amacıyla girişlerin rolünü anlamasına yardımcı olur. Modern tarayıcılar, verilerin otomatik doldurma için depolanmasına izin vermek amacıyla girişlerin sabit bir name veya id değerine sahip olmasını (her sayfa yüklendiğinde veya site dağıtıldığında rastgele oluşturulmamasını) ve submit düğmesi içeren bir <form> içinde olmasını da gerektirir.

  2. autocomplete özelliği, tarayıcıların depolanan verileri kullanarak girişleri doğru şekilde otomatik olarak doldurmasına yardımcı olur.

E-posta girişleri için autocomplete="username" kullanın. username, modern tarayıcılarda şifre yöneticileri tarafından tanındığı için type="email" kullanmalı ve id="email" ile name="email" kullanmak isteyebilirsiniz.

Ş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" simgesini kullanın

  • Kayıt formunda şifre girişi veya şifre değiştirme formunda yeni şifre için autocomplete="new-password" ve id="new-password" değerlerini kullanın.

Mevcut bir şifre için autocomplete="current-password" ve id="current-password" politikalarını kullanma

  • Oturum açma formunda şifre girişi veya şifre değiştirme formunda kullanıcının eski şifresinin girilmesi için autocomplete="current-password" ve id="current-password" kullanın. Bu komut, tarayıcıya, site için depoladığı mevcut şifreyi kullanmasını istediğinizi bildirir.

Kaydolma 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 destekleme

Farklı tarayıcılar, e-posta otomatik doldurma ve şifre önerisini biraz farklı şekilde ele alır ancak etkileri hemen hemen aynıdır. Örneğin, masaüstünde Safari 11 ve sonraki sürümlerde şifre yöneticisi gösterilir ve ardından biyometrik kimlik doğrulama (parmak izi veya yüz tanıma) kullanılır.

Masaüstünde Safari&#39;de oturum açma işleminin üç aşamasının ekran görüntüleri: şifre yöneticisi, biyometrik kimlik doğrulama, otomatik doldurma.
Otomatik tamamlama özelliğiyle oturum açın. Metin girişi gerekmez.

Masaüstündeki Chrome, e-posta önerileri gösterir, şifre yöneticisini gösterir ve şifreyi otomatik olarak doldurur.

Masaüstünde Chrome&#39;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çimle otomatik doldurma.
Chrome 84'te oturum açma akışını otomatik olarak tamamlama

Tarayıcı şifre ve otomatik doldurma sistemleri basit değildir. Değerleri tahmin etme, depolama ve görüntüleme algoritmaları standart değildir ve platformdan platforma değişiklik gösterir. Örneğin, Hidde de Vries'in belirttiği gibi: "Firefox'un şifre yöneticisi, buluşsal yöntemlerini bir tarif sistemi ile tamamlar."

Otomatik Doldurma: Web geliştiricilerin bilmesi gereken ancak name ve autocomplete kullanımı hakkında daha fazla bilgiye sahip olmayanlar. Olası 59 değerin tümü HTML spesifikasyonunda listelenir.

Tarayıcının güçlü bir şifre önermesini etkinleştirme

Modern tarayıcılar, şifre yöneticisi kullanıcı arayüzünün ne zaman gösterileceğine karar vermek ve güçlü bir şifre önermek için sezgisel yöntemler kullanır.

Safari, masaüstünde bunu aşağıdaki şekilde yapar.

Masaüstünde Firefox şifre yöneticisinin ekran görüntüsü.
Safari'deki şifre öneri akışı.

(Güçlü ve benzersiz şifre önerisi, Safari'de 12.0 sürümünden beri kullanılabilir.)

Yerleşik tarayıcı şifre oluşturucuları sayesinde kullanıcıların ve geliştiricilerin "güçlü şifre"nin ne olduğunu öğrenmesi gerekmez. Tarayıcılar şifreleri güvenli bir şekilde saklayabilir ve gerektiğinde otomatik olarak doldurabilir. Bu nedenle, kullanıcıların şifreleri hatırlaması veya girmesi gerekmez. Kullanıcıları yerleşik tarayıcı şifre oluşturucularından yararlanmaya teşvik etmek, sitenizde benzersiz ve güçlü bir şifre kullanma olasılıklarını artırırken başka bir yerde güvenliği ihlal edilmiş bir şifreyi yeniden kullanma olasılıklarını azaltır.

Kullanıcıların yanlışlıkla eksik giriş yapmalarını önlemeye yardımcı olun

required özelliğini hem e-posta hem de şifre alanlarına ekleyin. Modern tarayıcılar, eksik veriler için otomatik olarak istem verir ve odağı ayarlar. JavaScript gerekmez!

Eksik veriler için &quot;Lütfen bu alanı doldurun&quot; istemini gösteren masaüstü Firefox ve Android için Chrome ekran görüntüsü.
Masaüstü için Firefox (76 sürümü) ve Android için Chrome'da (83 sürümü) eksik veriler için istem ve odaklanma.

Parmaklar ve başparmaklar için tasarım

Giriş öğeleri ve düğmelerle ilgili hemen hemen her şey için varsayılan tarayıcı boyutu, özellikle mobil cihazlarda çok küçüktür. Bu açık bir nokta gibi görünse de birçok sitedeki oturum açma formlarında sık karşılaşılan 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 ve mobil cihazlarda daha da kötü.

Masaüstü için Chrome ve Android için Chrome&#39;daki stil uygulanmamış formun ekran görüntüsü.

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, mobil cihazlar için giriş öğelerine ve düğmelere en az 15 piksel, masaüstü için ise yaklaşık 10 piksel dolgu ekleyin. Bunu gerçek bir mobil cihazla ve gerçek parmakla deneyin. Girişlerinizin ve düğmelerinizin her birine rahatça dokunabilmeniz gerekir.

Dokunma hedefleri uygun boyutta değil Lighthouse denetimi, çok küçük giriş öğelerini algılama sürecini otomatikleştirmenize yardımcı olabilir.

Parmaklara göre tasarlayın

Dokunma hedefi için arama yaptığınızda birçok işaret parmağı resmi görürsünüz. Oysa gerçek dünyada pek çok kişi telefonla etkileşimde bulunmak için başparmaklarını kullanır. Baş parmaklar parmaklardan daha büyük ve kontrol daha az hassastır. Bu da dokunma hedeflerinin yeterince büyük olması için bir neden daha.

Metni yeterince büyük yap

Boyut ve dolgu gibi, giriş öğeleri ve düğmeler için varsayılan tarayıcı yazı tipi boyutu özellikle mobil cihazlarda çok küçük.

Masaüstü ve Android&#39;deki Chrome&#39;daki stilsiz formun ekran görüntüsü.
Masaüstü ve mobil cihazlarda varsayılan stil: Giriş metni, birçok kullanıcı tarafından okunamayacak kadar küçük.

Farklı platformlardaki tarayıcılar, yazı tiplerini farklı şekillerde boyutlandırır. Bu nedenle, her yerde iyi çalışan belirli bir yazı tipi boyutu belirtmek zordur. Popüler web sitelerine yapılan kısa bir anket, masaüstünde 13-16 piksel boyutlarının kullanıldığını gösteriyor. Mobil cihazlardaki metinler için bu fiziksel boyuta uymak iyi bir minimum değerdir.

Bu nedenle, mobil cihazlarda daha büyük bir piksel boyutu kullanmanız gerekir: Masaüstü için Chrome'daki 16px metni oldukça okunaklı olsa da Android için Chrome'daki 16px metnini iyi görüşe sahip olsanız bile okumak zordur. Medya sorgularını kullanarak farklı görüntü alanı boyutları için farklı yazı tipi piksel boyutları ayarlayabilirsiniz. 20px, mobil cihazlarda kullanıma uygundur, ancak az gören arkadaşlarınız veya iş arkadaşlarınızla test etmeniz gerekir.

Dokümanda okunabilir yazı tipi boyutları kullanılmıyor Lighthouse denetimi, çok küçük metinleri algılama sürecini otomatikleştirmenize yardımcı olabilir.

Girişler arasında yeterli boşluk bırakın

Girişlerin dokunma hedefleriyle birlikte iyi çalışmasını sağlayacak kadar kenar boşluğu ekleyin. Başka bir deyişle, yaklaşık bir parmak genişliğinde kenar boşluğu bırakın.

Girişlerinizin net bir şekilde göründüğünden emin olun

Girişler için varsayılan kenar stili, girişlerin görülmesini zorlaştırıyor. Android için Chrome gibi bazı platformlarda neredeyse görünmezler.

Ekran boşluğu eklemenin yanı sıra bir kenar da ekleyin: Beyaz arka planda #ccc veya daha koyu bir renk kullanmak iyi bir genel kuraldır.

Android&#39;de Chrome&#39;daki biçimlendirilmiş formun ekran görüntüsü.
Okunabilir metin, görünür giriş kenarları, yeterli dolgu ve kenar boşlukları.

Geçersiz giriş değerleriyle ilgili uyarı vermek için yerleşik tarayıcı özelliklerini kullanın

Tarayıcılar, type özelliğine sahip girişler için temel form doğrulamasını yapacak yerleşik özelliklere sahiptir. Tarayıcılar, geçersiz bir değer içeren bir formu gönderdiğinizde uyarı verir ve odak noktasını sorunlu girişe ayarlar.

Masaüstündeki Chrome&#39;da, geçersiz bir e-posta değeri için tarayıcı istemi ve odak gösterilen oturum açma formunun ekran görüntüsü.
Tarayıcı tarafından yerleşik olarak yapılan temel doğrulama.

Geçersiz verileri vurgulamak için :invalid CSS seçicisini kullanabilirsiniz. İçeriği olmayan girişleri seçmemek için :not(:placeholder-shown) simgesini kullanın.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

Geçersiz değerler içeren girişleri vurgulamanın farklı yollarını deneyin.

Gerektiği yerlerde JavaScript kullanın

Şifre görüntülemeyi aç/kapat

Kullanıcıların girdiği metni kontrol edebilmesi için Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir. Kullanıcılar girdikleri metni göremediğinde kullanılabilirlik olumsuz etkilenir. Şu anda bunu yapmanın yerleşik bir yolu yoktur ancak bu özelliği uygulamaya koyma planlarımız vardır. Bunun yerine JavaScript kullanmanız gerekir.

Şifreyi göster açma/kapatma düğmesini ve Şifremi unuttum bağlantısını gösteren Google ile oturum açma formu.
Google oturum açma formu: Şifreyi göster açma/kapatma düğmesi ve Şifreyi unuttum bağlantısı bulunur.

Aşağıdaki kodda, Şifreyi göster işlevi eklemek için bir metin düğmesi kullanılmaktadı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üğmeyi düz metin gibi gösterecek CSS şu şekildedir:

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;
}

Şifrenin gösterilmesi için 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:

Mac&#39;te Safari ve iPhone 7&#39;de &quot;Şifreyi göster&quot; metnini içeren oturum açma formunun ekran görüntüleri.
Mac ve iPhone 7'de Safari'de Şifreyi göster metin "düğmesi" olan oturum açma formu.

Şifre girişlerini erişilebilir hale getirme

Şifre kurallarını özetlemek için aria-describedby öğesini kullanın. Bu öğeye, kısıtlamaları açıklayan öğenin kimliğini verin. Ekran okuyucular etiket metnini, giriş türünü (şifre) ve ardından açıklamayı sağlar.

<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 eklerken şifrenin gösterileceği konusunda uyarıda bulunmak için bir aria-label eklediğinizden emin olun. Aksi takdirde kullanıcılar yanlışlıkla şifreleri açığa çıkarabilir.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

Her iki ARIA özelliğinin nasıl çalıştığını aşağıdaki Glitch'de görebilirsiniz:

Formları erişilebilir hale getirmeye yardımcı olacak daha fazla ipucuna Erişilebilir Formlar Oluşturma başlıklı makalede ulaşabilirsiniz.

Gerçek zamanlı olarak ve göndermeden önce doğrulama

HTML form öğeleri ve özellikleri temel doğrulama için yerleşik özelliklere sahiptir ancak kullanıcılar veri girerken ve formu göndermeye çalışırken daha güçlü doğrulama yapmak için JavaScript'i de kullanmanız gerekir.

Codelab'in 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 Constraint Validation API kullanılır (bu API geniş ölçüde desteklenir).

Daha fazla bilgi: Daha karmaşık gerçek zamanlı doğrulama için JavaScript'i kullanma.

Analizler ve RUM

"Ölçemediğiniz unsurları geliştiremezsiniz" ifadesi özellikle kayıt ve oturum açma formları için geçerlidir. Hedefler belirlemeniz, başarıları ölçmeniz, sitenizi iyileştirmeniz ve bu adımları tekrarlamanız gerekir.

Kullanılabilirlik testini indirimli olarak kullanmak, değişiklikleri denemek için yararlı olabilir ancak kullanıcılarınızın kayıt ve oturum açma formlarınızı nasıl deneyimlediğini gerçekten anlamak için gerçek verilere ihtiyacınız vardır:

  • Sayfa analizleri: kayıt 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ızı nerede terk ediyor?) ve etkinlikler (Kullanıcılar formlarınızla etkileşim kurarken 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ı? Yavaşsa nedeni nedir?).

Kaydolma ve oturum açma ile ilgili farklı yaklaşımları denemek için A/B testi uygulamayı ve değişiklikleri tüm kullanıcılara sunmadan önce bir kullanıcı alt kümesinde değişiklikleri doğrulamak için aşamalı kullanıma sunmayı da düşünebilirsiniz.

Genel yönergeler

İyi tasarlanmış bir kullanıcı arayüzü ve kullanıcı deneyimi, oturum açma formlarını terk etme oranını azaltabilir:

  • Kullanıcıların oturum açma sayfasını aramasını gerektirmeyin. Sayfanın en üstüne, Oturum Aç, Hesap Oluştur veya Kaydol gibi herkes tarafından anlaşılan ifadeler kullanarak oturum açma formunun bağlantısını ekleyin.
  • Odak noktanızı kaybetmeyin. Kayıt formları, teklifler ve diğer site özellikleriyle kullanıcıların dikkatini dağıtacak bir yer değildir.
  • Kaydolma sürecinin karmaşıklığını en aza indirin. Diğer kullanıcı verilerini (adresler veya kredi kartı bilgileri gibi) yalnızca kullanıcılar bu verileri sağlayarak net bir avantaj elde ettiğinde toplayın.
  • Kullanıcılar kayıt formunuza başlamadan önce değer teklifinin ne olduğunu net bir şekilde açıklayın. Oturum açmalarının avantajı nedir? Kullanıcılara kaydolma işlemini tamamlamaları için somut teşvikler sunun.
  • Mümkünse kullanıcıların kendilerini e-posta adresi yerine cep telefonu numarasıyla tanımlamasına izin verin. Bazı kullanıcılar e-posta kullanmayabilir.
  • Kullanıcıların şifrelerini sıfırlamasını kolaylaştırın ve Şifrenizi mi unuttunuz? bağlantısını belirgin bir yere yerleştirin.
  • Hizmet Şartları ve Gizlilik Politikası belgelerinizin bağlantısını ekleyin: Kullanıcılara verilerini nasıl koruduğunuzu baştan açıklayın.
  • Kayıt ve oturum açma sayfalarınıza şirketinizin veya kuruluşunuzun logosunu ve adını ekleyin. Ayrıca dil, yazı tipi ve stilin sitenizin geri kalanıyla eşleştiğinden emin olun. Bazı formlar, özellikle de URL'leri önemli ölçüde farklıysa diğer içeriklerle aynı siteye aitmiş gibi görünmez.

Öğrenmeye devam edin

Fotoğraf: Meghan Schiereck, Unsplash.