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 bağlantısı zayıf 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 hemen çıkma, yalnızca oturum açma fırsatının kaçırılması değil, kaybedilmiş ve can sıkıcı bir kullanıcı 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şe (name) ve id özelliğine, sayfa yüklemeleri veya web sitesi dağıtımları arasında değişmeyen sabit değerler verin.
• Oturum açmayı kendi <form> öğesine ekleyin.
• Formun başarıyla gönderilmesini sağlayın.
• Kaydolma formunda şifre girişi için autocomplete="new-password"id="new-password" kullanın.
• Oturum açma şifresi girişi için autocomplete="current-password" ve id="current-password" uygulamalarını kullanın.
• Şifreyi göster işlevini sağlayın.
• Şifre girişleri için aria-label ve aria-describedby kullanın.
• Girişleri iki katına çıkarmayın.
• Biçimleri, 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 hedefi olarak çalışacak kadar büyük olduğundan emin olun.
• Kayıt ve oturum açma sayfalarınızda markayı ve stili koruyun.
• Sahada ve laboratuvarda test edin: Kayıt ve oturum açma akışınıza sayfa analizleri, etkileşim analizi ve kullanıcı odaklı performans ölçümü ekleyin.
• Tarayıcılar ve cihazlar arasında test yapın: Form davranışı, platformlar arasında önemli ölçüde değişir.

Anlamlı HTML kullanın

İş için oluşturulan öğeleri kullanın: <form>, <label> ve <button>. Bunlar, yerleşik tarayıcı işlevselliğini etkinleştirir, erişilebilirliği artırır ve işaretlemenize anlam katar.

<form> hareketini kullanın

Girişleri bir <div> içine sarmalamak ve giriş verisi gönderimini yalnızca JavaScript ile işlemek cazip gelebilir. Düz eski bir <form> öğesi kullanmak genellikle daha iyidir. Bu işlem, sitenizin ekran okuyucular ve diğer yardımcı cihazlar için 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 oluşturmayı 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" …>

İki neden:

• Bir etikete dokunulduğunda veya tıklandığında odak noktası girişe taşınır. Etiketin for özelliğini, girişin name veya id özelliğiyle kullanarak bir etiketi bir girişle ilişkilendirin.
• Etikete veya etiketin girişine odaklanıldığında ekran okuyucular etiket metnine sesli arama yapar.

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, telefon numarası veya hesap kimliği mi giriyordum?" gibi girişlerin ne olduğunu unutabilirler.) Yer tutucularla ilgili başka birçok olası sorun vardır: Emin değilseniz Yer Tutucu Özelliğini Kullanmama ve Form Alanlarındaki Yer Tutucular Zararlıdır konularına bakın.

Etiketlerinizi girişlerinizin üstüne yerleştirmek muhtemelen en iyisidir. Bu, mobil ve masaüstü genelinde tutarlı bir tasarım sağlar ve Google Yapay Zeka araştırması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, etiket metnine sığması için etiket ve giriş genişliğini ayarlamanız gerekmez.

Kendiniz görmek için bir mobil cihazda label-position Arızasını 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 söylediğinden emin olun. Örneğin, Hesap oluştur veya Oturum aç, Gönder veya Başlat'ı değil.

Başarılı form gönderme

Ş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 gezinme emülasyonu yapın ve şifre formunu kaldırın.

XMLHttpRequest veya fetch isteği ile oturum açma başarılı olduğunun yanıtta belirtildiğinden, formu DOM'dan çıkarıp kullanıcıya işlem başarılı olduğunu bildirerek 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 çok kez tıklar. Bu da etkileşimleri yavaşlatır ve sunucunun yükünü artırır.

Bununla birlikte, kullanıcı girişi beklenmeden form göndermeyi 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 bölümü gözden kaçırabilir ve sonra (devre dışı olan) Oturum aç düğmesine tekrar tekrar dokunmayı deneyebilir ve düğmenin çalışmadığını düşünebilirler. En azından, form gönderimini devre dışı bırakmanız gerekiyorsa kullanıcıya devre dışı bırakılan düğmeyi tıkladığında neler eksik olduğunu açıklayın.

Girişleri ikiye katlamayın

Bazı siteler, kullanıcıların e-posta veya şifreyi iki kez girmesini zorunlu kılar. Bu durum 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 sormak, tarayıcıların e-posta adreslerini otomatik olarak doldurduğu veya güçlü şifreler önerdiği durumlarda da mantıklı 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ılar, giriş öğesi özelliklerini kullanan birçok faydalı yerleşik özelliğe sahiptir.

Şifreleri gizli tutun ancak isterlerse kullanıcıların onları görmesini sağlayın

Şifre girişlerinde, şifre metnini gizlemek ve tarayıcının, girişin şifreler için olduğunu anlamasına yardımcı olmak için type="password" bulunmalıdır. (Tarayıcıların, giriş rollerini anlamak ve şifrelerin kaydedilmesinin sunulup sunulmayacağına karar vermek için çeşitli teknikler kullandığını unutmayın.)

Kullanıcıların girdikleri metni kontrol edebilmeleri için bir Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir. Ayrıca bir Şifremi unuttum bağlantısı eklemeyi unutmayın. Şifre görüntülemeyi etkinleştirme bölümüne bakın.

Mobil kullanıcılara doğru klavyeyi verin

Mobil kullanıcılara uygun bir klavye sağlamak ve tarayıcı tarafından sağlanan 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 gerekiyorsa, <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. Girişmodu Hakkında Bilmek İstenen Her Şey daha ayrıntılı bilgi içerir.

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

Maalesef dikkatli değilseniz mobil klavyeler formunuzun üzerini kapatabilir veya daha da kötüsü, Oturum aç düğmesini kısmen engelleyebilir. Kullanıcılar ne olduğunu anlamadan pes edebilir.

Mümkünse yalnızca e-posta/telefon ve şifre girişlerini ve oturum açma sayfanızın üst kısmında Oturum aç düğmesini görüntüleyerek bunu önleyin. Diğer içerikleri aşağıya koyun.

Çeşitli cihazlarda test edin

Hedef kitleniz için bir dizi cihazda test yapmanız ve buna göre ayarlama yapmanız gerekir. Tarayıcı Yığını, çeşitli gerçek cihaz ve tarayıcılarda açık kaynak projeler için ücretsiz test olanağı sağlar.

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

Bazı siteler (Amazon ve eBay dahil) iki sayfada e-posta/telefon ve şifre isteyerek sorundan kaçınır. Bu yaklaşım aynı zamanda deneyimi de basitleştirir: Kullanıcıya tek seferde bir görev verilir.

İdeal olarak, bunun tek bir <form> ile uygulanması gerekir. Başlangıçta yalnızca e-posta girişini görüntülemek için JavaScript'i kullanın, ardından bunu gizleyin ve şifre girişini gösterin. E-posta ve şifresini girmeleri 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 tekrar girmesini önlemeye yardımcı olun

Kullanıcıların e-posta ve şifre değerlerini girmeyi hatırlamak zorunda kalmaması için tarayıcıların verileri doğru şekilde depolamasına ve girişleri otomatik olarak doldurmasına yardımcı olabilirsiniz. Bu, özellikle mobil cihazlarda önemlidir ve yüksek vazgeçme oranları alan e-posta girişleri için de ö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 için girişlerin rolünü anlamasına yardımcı olur. Modern tarayıcılar, verilerin otomatik doldurma için depolanmasına izin vermek için 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> 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.

type="email" kullanmanız gerekse ve id="email" ve name="email" kullanmak istiyor olsanız bile 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 bir şifre için autocomplete="new-password" ve id="new-password" e-posta adreslerini kullanın

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

Mevcut bir şifre için autocomplete="current-password" ve id="current-password" kullan

• Oturum açma formunda şifre girişi için autocomplete="current-password" ve id="current-password" özelliklerini veya kullanıcının eski şifresinin şifre değiştirme biçiminde girilmesini sağlayın. Bu işlem, tarayıcıya, site için sakladığı mevcut şifreyi kullanmasını istediğinizi bildirir.

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öneticileri için destek

Farklı tarayıcılar e-posta otomatik doldurma ve şifre önerisi özelliklerini biraz daha farklı şekilde kullanır, ancak etkileri aynıdır. Örneğin masaüstünde 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ündeki Chrome, e-posta önerilerini görüntüler, şifre yöneticisini gösterir ve şifreyi otomatik olarak doldurur.

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

Otomatik Doldurma: Web geliştiricilerinin bilmesi gereken ancak bilmedikleri name ve autocomplete kullanımıyla ilgili çok fazla bilgi içerir. HTML spesifikasyonunda 59 olası değerin tamamı listelenmektedir.

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

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

Safari'nin masaüstünde bunu nasıl yaptığını burada görebilirsiniz.

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

Yerleşik tarayıcı şifresi oluşturucular, kullanıcıların ve geliştiricilerin "güçlü şifrenin" ne olduğunu çalıştırmalarına gerek olmadığı anlamına gelir. Tarayıcılar şifreleri güvenli bir şekilde saklayıp gerektiğinde otomatik olarak doldurabildiğinden, kullanıcıların şifreleri hatırlamalarına veya girmelerine 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 yeniden kullanma olasılıklarının daha düşük olacağı anlamına da gelir.

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

required özelliğini hem e-posta hem de şifre alanlarına ekleyin. Modern tarayıcılar, eksik verileri otomatik olarak istemde tutup odağı ayarlar. JavaScript gerekmez!

Parmaklar ve başparmaklar için tasarım yapın

Giriş öğeleri ve düğmelerle ilgili hemen hemen her şeyin varsayılan tarayıcı boyutu, özellikle mobil cihazlarda çok küçük. Bu, çok bariz görünebilir ancak 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şlerin ve düğmelerin varsayılan boyutu ve dolgusu masaüstünde çok küçük, mobil cihazlarda ise daha da kötüdür.

Android erişilebilirlik kılavuzuna göre dokunmatik ekranlı nesneler için önerilen hedef boyut 7-10 mm'dir. Apple arayüz kuralları 48x48 piksel, W3C ise en az 44x44 CSS pikseli önerir. Bu temelde, giriş öğeleri ve düğmeleri için mobil cihazlarda en az 15 piksel, masaüstünde ise yaklaşık 10 piksel dolgu ekleyin. Bunu gerçek bir mobil cihaz ve gerçek bir parmakla deneyin. Giriş ve düğmelerinizin her birine rahatça dokunabiliyor olmanız 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 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 telefonla etkileşimde bulunmak için başparmağını kullanır. Baş parmaklar işaret parmağından daha büyük ve kontrol daha azdır. Tüm bunlar da yeterli boyutta dokunma hedefleri için daha fazla nedendir.

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.

Farklı platformlardaki tarayıcılar, yazı tiplerini farklı şekilde boyutlandırır. 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 piksellik boyutları göstermektedir. Bu boyutun eşleşmesi, mobil cihazlarda metin için ideal bir minimum boyuttur.

Bu nedenle, mobil cihazlarda daha büyük bir piksel boyutu kullanmanız gerekir: Masaüstü için Chrome'daki 16px metni oldukça okunabilir olsa da iyi görüşlü olsa bile Android için Chrome'da 16px metnini 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 uygulamadır, ancak bunu görme bozuklukları olan arkadaşlarınızla veya iş arkadaşlarınızla test etmelisiniz.

Belge, okunabilir yazı tipi boyutları kullanmıyor Lighthouse denetimi, çok küçük olan metinleri algılama sürecini otomatikleştirmenize yardımcı olabilir.

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

Girişlerin dokunma hedefleri kadar iyi çalışması için yeterli kenar boşluğu ekleyin. Başka bir deyişle, yaklaşık bir parmak genişliğinde bir kenar boşluğu elde etmeyi hedefleyin.

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

Girişlere ilişkin 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.

Geçersiz giriş değerleri konusunda uyarıda bulunmak için yerleşik tarayıcı özelliklerini kullanın

Tarayıcılar, type özelliğine sahip girişler için temel form doğrulaması yapacak 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.

Geçersiz verileri vurgulamak için :invalid CSS seçiciyi kullanabilirsiniz. İçeriksiz girişleri seçmekten kaçınmak için :not(:placeholder-shown) özelliğini 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 eklemeniz gerekir. Kullanıcılar girdikleri metni göremediklerinde kullanışlılık bozulur. Şu anda bunu yapmanın yerleşik bir yolu olmasa da uygulama planları vardır. Bunun yerine JavaScript kullanmanız gerekir.

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österecek 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ılacak 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:

Şifre girişlerini erişilebilir hale getirin

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ı 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örüntüleneceğine dair uyarıda bulunmak için 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>

Aşağıdaki arızada her iki ARIA özelliğini çalışırken görebilirsiniz:

Erişilebilir Formlar Oluşturma sayfasında, formları erişilebilir hale getirmeye yardımcı olacak daha fazla ipucu bulabilirsiniz.

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

HTML formu öğ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 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 üzere 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

"Neleri ölçemeyeceğiniz, iyileştiremeyeceğiniz" 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.

İndirimli kullanılabilirlik testi, değişiklikleri denerken yararlı olabilir ancak kullanıcılarınızın kayıt ve oturum açma formlarınızla ilgili deneyimini 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ızı nerede terk ediyor?) 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 herhangi bir nedenle yavaş mı ve yavaşlıyorsa 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 amacıyla 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 canı sıkmayın! Sayfanın üst kısmına Oturum Aç, Hesap Oluştur veya Kaydol gibi iyi anlaşılmış ifadeler kullanarak oturum açma formuna bir bağlantı yerleştirin.
• Odağınızı koruyun. Teklifler ve diğer site özellikleriyle kullanıcıların dikkatini dağıtacak yer kayıt formları değildir.
• Kayıt 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 bariz 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ı nedir? Kullanıcılara kayıt işlemini tamamlamaları için somut teşvikler sunun.
• Bazı kullanıcılar e-posta kullanmayabileceğinden, mümkünse kullanıcıların kendilerini e-posta adresi yerine cep telefonu numarasıyla tanımlamalarına izin verin.
• Kullanıcıların şifrelerini kolayca sıfırlamasını sağlayın ve Şifrenizi mi unuttunuz? bağlantısını bariz bir şekilde gösterin.
• Hizmet şartları ve gizlilik politikası belgelerinize bağlantı 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. Ayrıca dil, yazı tipi ve stillerin 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 hissetmezler.

Öğrenmeye devam edin

• Etkileyici Formlar Oluşturma
• Mobil Form Tasarımı için En İyi Uygulamalar
• Daha özellikli 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, Meghan Schiereck'in Unsplash'ta çektiği fotoğraftır.