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ı ö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 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şin name veya id 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ş.
Her ikisi de aynı satırda olduğunda etiket ve giriş genişliği sınırlanır.

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() veya History.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.
Google ile oturum açma formundan şifre girişi: Şifreyi göster simgesi ve Şifremi unuttum bağlantısı.

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.
Oturum aç düğmesi: Artık gördüğünüz gibi görünmüyor.

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ş.
Klavye, Oturum aç düğmesini engellemiyor.

Ç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&#39;de oturum açma formunun ekran görüntüleri. iPhone 7 ve 8&#39;de Oturum aç düğmesi telefon klavyesi tarafından gizleniyor ancak iPhone 11&#39;de engellenmiyor
Oturum aç düğmesi: iPhone 7 ve 8'de belirsizleştirilir, ancak iPhone 11'de gösterilmez.

İ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ı &#39;sayfada&#39; e-posta/telefon ve şifre.
İki aşamalı oturum açma: e-posta veya telefon ve ardından şifre.

İ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:

  1. autocomplete, name, id ve type ö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 bir name veya id değerine sahip olmasını (her sayfa yüklemesinde veya site dağıtımında rastgele oluşturulmaz) ve submit düğmeli bir <form> biçiminde olmasını da gerektirir.

  2. 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" ve id="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" ve id="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.
Otomatik tamamlama özelliğiyle oturum açın. Metin girmeniz gerekmez.

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&#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çimde otomatik doldurma.
Chrome 84'te oturum açma akışını otomatik tamamlama.

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ü.
Safari'de şifre önerisi akışı.

(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&#39;un eksik veriler için &#39;Lütfen bu alanı doldurun&#39; istemini gösteren ekran görüntüsü.
Masaüstü için Firefox (sürüm 76) ve Android için Chrome'da (sürüm 83) eksik verileri sor ve odakla.

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&#39;daki stilsiz 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, 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&#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ı ş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&#39;deki Chrome&#39;daki stil oluşturulmuş formun ekran görüntüsü.
Okunabilir metin, görünür giriş kenarlıkları, yeterli dolgu ve kenar boşlukları.

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&#39;da, tarayıcı istemini ve geçersiz e-posta değeri odağını gösteren oturum açma formunun ekran görüntüsü.
Tarayıcı tarafından gerçekleştirilen temel yerleşik doğrulama.

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.
Google ile oturum açma formu: Şifreyi göster açma/kapatma düğmesi ve Şifremi unuttum bağlantısı.

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&#39;teki Safari&#39;de ve iPhone 7&#39;de &quot;Şifre metnini göster&quot; düğmesiyle oturum açma formunun ekran görüntüleri.
Mac ve iPhone 7'deki Safari'de Şifreyi göster metni "düğmesi" ile oturum açma formu.

Ş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

Fotoğraf, Unsplash'ta Meghan Schiereck tarafından paylaşıldı.