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.

Sam Dutton

Kullanıcıların sitenize giriş yapması gerekiyorsa oturum açma formu tasarımı kritik önem taşır. Bu durum özellikle kötü bağlantısı olan, mobil cihaz kullanan veya ya da stres altındasınız. Kötü tasarlanmış oturum açma formları, yüksek hemen çıkma oranları sağlar. Her hemen çıkma, kayıp ve rahatsız olmuş bir kullanıcı anlamına gelebilir fırsat.

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

ziyaret edin.

Anlamlı HTML kullanın

İş için oluşturulan öğeleri kullanın: <form>, <label> ve <button>. Bunlar, yerleşik tarayıcı işlevlerini kullanabilir, erişilebilirliği iyileştirebilir ve işaretleme.

<form> hareketini kullanın

Girişleri bir <div> içinde sarmalamak ve giriş verilerini işlemek isteyebilirsiniz. JavaScript ile gönderim olabilir. Düz eski bir model kullanmak genellikle daha iyidir <form> öğesine dokunun. Bu, sitenizi ekran okuyucular ve diğer yardımcı kullanıcılar için erişilebilir hale getirir bir dizi yerleşik tarayıcı özelliği sağlar, ayrıca tarayıcı oluşturma tarayıcılarla oturum açmanızı sağlar ve tarayıcıdaki bağlantı, JavaScript başarısız oluyor.

<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 dokunmak veya etiketi tıklamak odağı ilgili etikete taşır. Bir etiketi girişin name veya id değerleriyle etiketin for özelliği kullanılarak giriş yapılır.
  • Ekran okuyucular, etiket veya etiket girişi alındığında etiket metnini duyurur odaklanacağız.

Yer tutucuları giriş etiketleri olarak kullanmayın. Kullanıcılar, büyük önem taşıyan metin girmeye başladıklarında, özellikle de çok fazla dikkatimi dağıtıyor ("E-posta adresi mi, telefon numarası mı yoksa hesap mı giriyordum? kimliği mi?"). Yer tutucularla ilgili daha pek çok olası sorun vardır: Yer Tutucuyu Kullanma Attribute (Özellik) ve Form Alanlarındaki Yer Tutucular Aşağıdaki durumlarda zararlıdır: ikna edemedi.

Etiketlerinizi girişlerinizin üzerine yerleştirmeniz muhtemelen en iyisidir. Böylece kullanıcılar tasarımına sahip. Google AI'a göre araştırma, kullanıcılar tarafından daha hızlı tarama yapılmasını sağlar. Tam genişlikte etiketler ve girişler alırsınız ve etiketi ve giriş genişliğini etiket metnine sığacak şekilde ayarlamanız gerekmez.

Mobil cihazda form girişi etiketinin 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.

Şu cihazda label-position arızasını kendi gözlerinizle görün.

<button> hareketini kullanın

<button> kullanın kontrol edin! Düğme öğeleri erişilebilir davranış ve yerleşik form sağlar kolayca şekillendirilebilir ve gönderim işlevlerine dahildir. Tek bir cümlenin içinde <div> veya düğme gibi görünen başka bir öğe kullanarak.

Gönder düğmesinin ne işe yaradığını belirttiğinden emin olun. Örnekler arasında Hesap oluşturma veya Gönder veya Başlat'ı değil, oturum açın.

Form gönderiminin başarılı olduğundan emin olun

Şifre yöneticilerinin bir formun gönderildiğini anlamalarına yardımcı olun. İki tür şu yolları izleyebilirsiniz:

  • Farklı bir sayfaya gidin.
  • History.pushState() veya History.replaceState() ile navigasyon emülasyonu şifre formunu kaldırın.

XMLHttpRequest veya fetch isteğiyle oturum açma işleminin başarılı olduğundan emin olun yanıtta bildirilecek ve DOM'nin dışına da çıkarılarak işlenecektir. kullanıcıya başarılı olduğu anlamına gelir.

Kullanıcı dokunduktan veya tıkladıktan sonra Oturum aç düğmesini devre dışı bırakmayı düşünün somut olarak ortaya koyar. Birçok kullanıcı düğmeleri birden çok kez tıklar hızlı ve duyarlı sitelerde bile kullanılabilir. Bu da etkileşimleri yavaşlatır eklenir.

Öte yandan, kullanıcı girişi beklerken form gönderimini devre dışı bırakmayın. Örneğin, Kullanıcılar müşterilerini girmediyse Oturum aç düğmesini devre dışı bırakma PIN'i seçin. Kullanıcılar formda bir şeyi gözden kaçırabilir ve daha sonra (devre dışı) Oturum aç düğmesi ve çalışmadığını düşünüyor. En azından, form göndermeyi devre dışı bırakmalı, kullanıcıya form gönderimi sırasında devre dışı düğmesini tıklayın.

Girişleri iki katına çıkarma

Bazı siteler, kullanıcıları iki kez e-posta adresi veya şifre girmeye zorlar. Bu, projenin birkaç kullanıcı için hata oluştu. Ancak tüm kullanıcılar için ek iş yüküne neden olur ve kullanıcının vazgeçme fiyat. İki kez sormak, tarayıcıların e-posta adreslerini otomatik olarak doldurduğu veya güçlü şifreler önerir. Kullanıcıların e-posta adreslerini onaylamalarını sağlamak daha iyidir (yine de bunu yapmanız gerekecektir) ve hesap bilgilerini sıfırlamalarını parolayı girin.

Öğe özelliklerinden en iyi şekilde yararlanma

Asıl önemli olan da burasıdır! Tarayıcılar, giriş öğesi özelliklerini kullanan birçok yararlı yerleşik özelliğe sahiptir.

Şifreleri gizli tutun, ancak isterlerse kullanıcıların bunları görmelerini sağlayın

Şifre girişlerinde, şifre metnini gizlemek vetype="password" şifre için olduğunu anlar. (Tarayıcıların giriş rollerini anlamak ve karar vermek için çeşitli teknikler şifreleri kaydetmeyi teklif edip etmeyeceğini kontrol edin.)

Kullanıcıların şunları kontrol edebilmesi için Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir: metin girmelidir ve Şifremi unuttum bağlantısını eklemeyi unutmayın. Görüntüleyin Şifre görüntülemeyi etkinleştir.

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

Mobil kullanıcılara doğru klavyeyi verin

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

E-posta adresi yerine telefon numarası kullanmanız gerekirse <input type="tel"> uygulaması mobil cihazda telefon tuş takımını etkinleştirir. Ayrıca şunu da kullanabilirsiniz: Gerektiğinde inputmode özelliği: inputmode="numeric", PIN için idealdir numaraları'na dokunun. Hakkında Bilmek İstediğiniz Her Şey inputmode daha fazla ayrıntı içeriyor.

Mobil klavyenin Oturum aç düğmesini engellemesini engelleme

Dikkatli olmazsanız formunuzun üzerini mobil klavyeler kapatabilir veya Oturum aç düğmesinin çalışmasını kısmen engelleyebilir. Kullanıcılar daha önce vazgeçebilir fark etmeye başladım.

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: Artık bu düğmeyi görüyorsunuz, ama görmüyorsunuz.

Mümkünse 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örüntüleyerek bunu önleyin. Aşağıya diğer içerikleri ekleyin.

Android telefondaki oturum açma formunun ekran görüntüsü: Telefon klavyesi, Oturum aç düğmesini kapatmıyor.
Klavye, Oturum aç düğmesini engellemiyor.

Çeşitli cihazlarda test edin

Hedef kitleniz için çeşitli cihazlarda test yapmanız ve gerekli ayarlamaları yapmanız gerekir. buna göre hazırlar. Tarayıcı Yığını, açık kaynak için ücretsiz test olanağı sunar gerçek zamanlı çalışan kontrol edin.

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 bu durum geçerli değil.
Oturum aç düğmesi: iPhone 7 ve 8'de gizlenmiştir, ancak iPhone 11'de görünmez.

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

Bazı siteler (Amazon ve eBay dahil), e-posta/telefon ve şifre eklemeniz gerekir. Bu yaklaşım aynı zamanda kullanıcıya tek seferde 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, bunun tek bir <form> ile uygulanması gerekir. JavaScript kullan başlangıçta yalnızca e-posta girişini görüntüleyin, ardından bunu gizleyin ve şifre girişini gösterin. Kullanıcıyı, e-posta adresini girmesi ile yeni bir sayfaya gitmesi için zorlamanız gerekiyorsa ikinci sayfadaki formda e-posta değerini kullanarak şifre yöneticilerinin doğru değeri depolamasını sağlar. Şifre Chromium'un Anladığı Form Stilleri kod örneğidir.

Kullanıcıların verileri tekrar girmesini önlemeye yardımcı olur

Tarayıcıların verileri doğru şekilde depolamasına ve girişleri otomatik olarak doldurmasına yardımcı olabilirsiniz. Böylece kullanıcılar bunu yapmayabilir. e-posta ve şifre değerlerini girmeniz gerekiyor. Bu, özellikle de Bu özellik, yüksek vazgeçme oranları alan e-posta girişleri için son derece önemlidir.

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

  1. autocomplete, name, id ve type özellikleri, tarayıcıların girişlerin rolünü değil, daha sonra otomatik doldurma için kullanılabilecek verileri depolamasını sağlar. Modern tarayıcılarda, verilerin otomatik doldurma için depolanmasına izin vermek amacıyla sabit bir name veya id değerine sahiptir (her sayfa yüklemesinde veya site dağıtımı) ve <form> içinde olması gerekir. submit düğmesiyle.

  2. autocomplete özelliği, saklı tutar.

E-posta girişleri için username tanındığından autocomplete="username" kullanın modern tarayıcılarda şifre yöneticileri tarafından kullanılabilir. type="email" adresini kullanmanız gerekse bile id="email" ve name="email" alanlarını kullanmak da isteyebilirsiniz.

Şifre girişleri için tarayıcılara yardımcı olmak amacıyla uygun autocomplete ve id değerlerini kullanın Yeni ve mevcut şifreleri birbirinden ayırt edebilirsiniz.

Yeni bir şifre için autocomplete="new-password" ve id="new-password" adreslerini kullanın

  • Kayıt sırasında şifre girişi için autocomplete="new-password" ve id="new-password" kullanın şifre değiştirme formundaki yeni şifreyi kullanabilirsiniz.

Mevcut bir şifre için autocomplete="current-password" ve id="current-password" değerlerini kullanın

  • Şifre girişi için autocomplete="current-password" ve id="current-password" kullanın şifre değiştirme formunda kullanıcının eski şifresinin girilmesini sağlayabilirsiniz. Bu sayede geçerli şifreyi kullanmasını istediğiniz bir tarayıcı kullanın.

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 destekleme

Farklı tarayıcılar, e-posta otomatik doldurma ve şifre önerilerini kısmen işliyor farklı olsa da etkileri hemen aynıdır. Masaüstünde Safari 11 ve sonraki sürümlerde şifre yöneticisi ve ardından biyometri varsa 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 önerilerini görüntüler, şifre yöneticisini gösterir ve şifreyi otomatik olarak doldurur.

Masaüstü bilgisayarlardaki Chrome&#39;da oturum açma işleminin 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. Bu dönüşüm için algoritmalar Bu nedenle, tahmin yürütme, saklama ve görüntüleme yöntemleri standartlaştırılmamıştır. platformdan platforma. Örneğin, Hidde de Vries: "Firefox'un şifre yöneticisi, buluşsal yöntemlerini tarif sistemi."

Otomatik Doldurma: Web geliştiricilerin bilmesi gerekenler şunları yapmayın: name ve autocomplete kullanımıyla ilgili çok daha fazla bilgiye sahip. HTML özellikler 59 olası değerin tümünü listeler.

Güçlü bir şifre önermek için tarayıcıyı etkinleştirin

Modern tarayıcılar, şifre yöneticisi kullanıcı arayüzünün ve giriş bilgilerinin ne zaman gösterileceğine güçlü bir şifre önerir.

Safari'nin masaüstünde bunu nasıl yaptığına bakalım.

Masaüstündeki Firefox şifre yöneticisinin ekran görüntüsü.
Safari'de şifre önerisi akışı.

(Güçlü bir benzersiz şifre önerisi, Safari'nin 12.0 sürümünden itibaren kullanılmaktadır.)

Yerleşik tarayıcı şifresi oluşturma araçları, kullanıcıların ve geliştiricilerin şifrenin ne olduğunu anlamaya çalışın düşünülebilir. Tarayıcılar, öğeleri güvenli bir şekilde depolayabildiği için ve gerektiği şekilde otomatik olarak doldurma özelliği sayesinde, kullanıcıların ezberlemeleri gerekmez. veya şifre girin. Kullanıcıları yerleşik tarayıcıdan yararlanmaya teşvik etme şifre oluşturma araçları aynı zamanda bu kişilerin benzersiz, güçlü bir şifre bir şifreyi daha sık kullanırsınız ve ihlal edilmiş olabilir.

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

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

Masaüstü Firefox ve Android için Chrome&#39;da &quot;Lütfen bu alanı doldurun&quot; ifadesinin gösterildiği ekran görüntüsü istemini girin.
Masaüstü için Firefox'ta eksik veriler için istem ve odaklama (sürüm 76) ve Android için Chrome (sürüm 83) edinin.

Parmaklar ve parmaklar için tasarım

Giriş öğeleriyle ilgili hemen her şey için varsayılan tarayıcı boyutu ve düğmeler özellikle cep telefonunda çok küçük. Bu çok bariz bir şey gibi görünebilir, ancak oturum açma formlarıyla ilgili 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 ve daha da kötü hale getiriyor.

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

Android erişilebilirlik özelliklerine göre rehberlik dokunmatik ekran nesneleri için önerilen hedef boyut 7-10 mm'dir. Apple arayüzü yönergelere göre 48x48 piksel, W3C ise en az 44x44 CSS kullanılmasını önermektedir piksel. Bununla ilgili giriş öğelerine ve düğmelere (en az) yaklaşık 15 piksellik dolgu ekleyin. mobil cihazlarda yaklaşık 10 pikseldir. Bunu gerçek bir mobil cihazda deneyin ve gerçek parmak veya başparmaktır. Her bir öğenize kolayca dokunabilir, giriş ve düğmeler.

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

Beğenilere göre tasarlayın

Dokunma hedefi'ni arayın ve pek çok işaret resmi görürsünüz. Ancak gerçek dünyada kullanıcılar telefonlarla etkileşimde bulunmak için başparmaklarını kullanıyor. Beğenilerden büyük olanlar ve kontrol daha az hassastır. Bire bir görüşmeler yapmak, yeniden boyutlandırabilirsiniz.

Metni yeterince büyük yap

Boyut ve dolguda olduğu gibi, giriş öğeleri ve dolgu için varsayılan tarayıcı yazı tipi boyutu. düğme, ö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ılarda yazı tipleri farklı şekilde boyutlandırılır. Bu nedenle, her yerde iyi çalışan belirli bir yazı tipi boyutu belirleyin. Şu konuyla ilgili kısa bir anket: popüler web siteleri masaüstünde 13–16 piksel boyutlarında: , mobil cihazlarda metin kullanımı için iyi bir minimum değerdir.

Bu durumda mobil cihazlarda daha büyük bir piksel boyutu kullanmanız gerekir: Chrome'da 16px oldukça okunaklı, ancak iyi bir görüşte bile okumak zor 16px metin. Farklı öğeler için farklı yazı tipi piksel boyutları ayarlayabilirsiniz: medya boyutlarını kullanan görüntü alanı boyutları sorguları. 20px, mobil cihazlarda kullanıma uygundur, ancak bunu arkadaşlarınızla veya bir örnekle açıklayacağım.

Dokümanda okunabilir yazı tipi boyutları kullanılmıyor Lighthouse denetimi, fazlalık olan metinleri algılama sürecini otomatikleştirmenize yardımcı olabilir küçük 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, bir parmak boşluk kadar.

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

Girişlerin varsayılan kenarlık stili, bunların görülmesini zorlaştırır. Neredeyse bazı platformlarda görünmez.

Dolgunun yanı sıra, bir kenarlık ekleyin: Beyaz bir arka planda, genellikle kullanmak için #ccc veya daha koyu bir seçim yapın.

Android&#39;deki Chrome&#39;da stilize edilmiş 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ı vermek için yerleşik tarayıcı özelliklerini kullanın

Tarayıcılar, type özelliği için de kullanılmaktadır. Tarayıcılar, geçersiz değere sahip bir form gönderdiğinizde ve sorunlu girişe odaklanırsınız.

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

Geçersiz verileri vurgulamak için :invalid CSS seçiciyi kullanabilirsiniz. Tekliflerinizi otomatikleştirmek ve optimize etmek için İçeriksiz girişleri seçmekten kaçınmak için :not(:placeholder-shown).

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

Şifrenin gösterilmesini aç/kapat

Kullanıcıların şunları kontrol edebilmesi için Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir: otomatik olarak oluşturulur. Kullanışlılık girdiği metni göremez. Şu anda bunu yapmanın yerleşik bir yolu Bu konuda da belirli hakkında daha fazla bilgi edinin. Bir sonraki JavaScript kullanmanız gerekir.

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

Aşağıdaki kodda Şifreyi göster işlevini 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örünecek şekilde CSS'yi burada bulabilirsiniz:

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österen 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;te ve iPhone 7&#39;de Safari&#39;de &quot;Şifreyi göster&quot; metnini içeren oturum açma formunun ekran görüntüleri.
Mac ve iPhone 7'deki Safari'de, Şifreyi göster metnini içeren "düğme" ile oturum açma formu.

Şifre girişlerini erişilebilir hale getirin

aria-describedby öğesine öğesidir. Ekran okuyucular etiket metnini, giriş türünü (şifre) ve ardından açıklamayı girin.

<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 aria-label simgesini tıklayın. Aksi takdirde kullanıcılar fark etmeden ş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:

Erişilebilir Formlar Oluşturma bölümünde, formları erişilebilir hale getirmenize yardımcı olacak daha fazla ipucu bulunmaktadır.

Gerçek zamanlı olarak ve gönderilmeden önce doğrula

HTML form öğeleri ve özelliklerinde temel doğrulama, Ancak kullanıcılar arama yaparken daha sağlam doğrulamalar yapmak için ne zaman veri girdikleri ve formun ne zaman gönderilmeye çalışıldığı.

Oturum açma formunun 5. Adımı codelab, Kısıtlama Doğrulama API (yani genel olarak destekleniyor) odak ve görüntüleme istemlerini ayarlamak için yerleşik tarayıcı kullanıcı arayüzünü kullanarak özel doğrulama.

Daha fazla bilgi edinin: Daha karmaşık gerçek zamanlı işlemler için JavaScript'i kullanın doğrulama başlıklı makaleyi inceleyin.

Analytics ve RUM

"Neyi ölçemezseniz geliştiremezsiniz" hem de özellikle yeni modellere ve oturum açma formlarını kullanabilirsiniz. Hedefler belirlemeniz, başarıyı ölçmeniz, sitenizi iyileştirmeniz tekrarla.

İndirim kullanılabilirliği iyi bir sonuç elde etmek için faydalı olabilir, ancak yine de gerçekten deneme yapmak için nasıl bir deneyim yaşamış olabileceğini anlamanızı sağlar:

  • Sayfa analizi: kayıt ve oturum açma sayfası görüntülemeleri, hemen çıkma oranları, ve çıkarlar.
  • Etkileşim analizi: hedef dönüşüm hunileri (burada kullanıcılar oturum açma veya oturum açma akışınızı terk ediyor?) ve etkinlikler (kullanıcılar formlarınızla etkileşimde bulunurken hangi işlemleri yapıyor?)
  • Web sitesi performansı: kullanıcı odaklı metrikleri (kaydolma ve oturum açma bir nedenden dolayı yavaş oluşur. Varsa, nedeni nedir?).

A/B Testi uygulayarak, yönelik farklı yaklaşımları ve aşamalı sunumları gerçekleştirerek, bir kullanıcı alt kümesi üzerinde yapılan değişikliklerdir.

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ı oturum açmak için arama yapmaya zorlamayın. Oturum açma formunun bağlantısını en üste yerleştirin Oturum Aç, Hesap Oluştur gibi iyi anlaşılmış ifadeler kullanarak sayfanın veya Kaydolun.
  • Odağınızı koruyun. Kayıt formları, kullanıcıların dikkatini dağıtarak özellikleri hakkında daha fazla bilgi edinin.
  • Kaydolma sürecindeki karmaşıklığı en aza indirin. Diğer kullanıcı verilerini (ör. adresler veya kredi kartı bilgileri) yalnızca, verilen bilgilerin net bir fayda sağladığı durumlarda verileri.
  • Kullanıcılar kayıt formunuza başlamadan önce, kayıt formunuzun ne kadar değerli olduğunu daha iyi olur. Oturum açmanın avantajı nedir? Kullanıcılara somut bilgiler verin kaydolmayı tamamlamaları için teşvikler.
  • Mümkünse, kullanıcıların kendilerini cep telefonu numarasıyla tanıtmasına izin verin .
  • Kullanıcıların şifrelerini sıfırlamalarını kolaylaştırın ve Şifrenizi mi unuttunuz? şifre nedir? bağlantısı açıktır.
  • Hizmet şartlarınızın ve gizlilik politikası dokümanlarınızın bağlantısı: en baştan itibaren kullanıcıların verilerini nasıl koruduğunu anlatır.
  • Kaydolma işleminize şirketinizin veya kuruluşunuzun logosunu ve adını ekleyin ve ve dilin, yazı tiplerinin ve stillerin geri kalan sitenizi ziyaret edin. Bazı formlar diğerleriyle aynı siteye aitmiş gibi hissetmiyor (özellikle de URL'leri önemli ölçüde farklıysa).

Öğrenmeye devam edin

Fotoğraf: Meghan Schiereck, Unsplash'te).