Oturum açma formu ile 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 sitenizde oturum açması gerekiyorsa 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 stresli olan 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 kaçırılmış bir oturum açma fırsatı değil, kaybedilmiş ve memnuniyetsiz bir kullanıcı anlamına gelebilir.

Aşağıda, tüm en iyi uygulamaları gösteren basit bir oturum açma formu örneği verilmiştir:

Yapılacaklar listesi

• Anlamlı HTML öğeleri kullanın: <form>, <input>, <label> ve <button>.
• Her girişi bir <label> ile etiketleyin.
• Yerleşik tarayıcı özelliklerine erişmek için öğe özelliklerini kullanın: type, name, autocomplete, required.
• Giriş name ve id özelliklerine, sayfa yüklemeleri veya web sitesi dağıtımları arasında değişmeyen sabit değerler verin.
• Oturum açma işlemini kendi <form> öğesine yerleştirin.
• Formun başarıyla gönderildiğinden emin olun.
• Kayıt formundaki şifre girişi ve şifre sıfırlama formundaki yeni şifre için autocomplete="new-password" ve id="new-password" kullanın.
• Oturum açma şifresi girişi için autocomplete="current-password" ve id="current-password" kullanın.
• Şifreyi göster işlevi sunun.
• Şifre girişleri için aria-label ve aria-describedby kullanın.
• Girişleri ikiye katlamayın.
• Formları, mobil klavye girişleri veya düğmeleri engellemeyecek şekilde tasarlayın.
• Formların mobil cihazlarda kullanılabilir olduğundan emin olun: Okunabilir metin kullanın ve girişler ile düğmelerin dokunma hedefi olarak çalışacak kadar büyük olduğundan emin olun.
• Kayıt ve oturum açma sayfalarınızda marka bilincini ve stilini koruyun.
• Laboratuvarın yanı sıra sahada da test edin: Kaydolma ve oturum açma akışınıza sayfa analizleri, etkileşim analizleri ve kullanıcı odaklı performans ölçümü ekleyin.
• Farklı tarayıcı ve cihazlarda test edin: Form davranışı platformlar arasında önemli ölçüde farklılık gösterir.

Anlamlı HTML kullanma

İş için oluşturulmuş öğ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çine sarmak ve giriş verilerinin gönderimini tamamen JavaScript ile işlemek isteyebilirsiniz. Genellikle basit bir <form> öğesi kullanmak daha iyidir. Bu sayede siteniz ekran okuyucular ve diğer yardımcı cihazlar tarafından erişilebilir hale gelir, çeşitli yerleşik tarayıcı özellikleri etkinleştirilir, eski tarayıcılar için temel işlevsel oturum açma işlemleri daha kolay hale gelir 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 tıklandığında odak, etiketin girişine taşınır. Etiketin for özelliğini girişin name veya id özelliğiyle kullanarak bir etiketi girişle ilişkilendirin.
• Ekran okuyucular, etiket veya etiketin girişi odaklandığında etiket metnini okur.

Yer tutucuları giriş etiketleri olarak kullanmayın. Kullanıcılar, metin girmeye başladıktan sonra, özellikle de dikkatleri dağılırsa girişin ne için olduğunu unutabilirler ("E-posta adresi mi, telefon numarası mı yoksa hesap kimliği mi giriyordum?"). Yer tutucularla ilgili başka birçok olası sorun vardır: İkna olmadıysanız Yer Tutucu Özelliğini Kullanmayın ve Form Alanlarındaki Yer Tutucular Zararlıdır başlıklı makalelere göz atın.

Etiketlerinizi girişlerinizin üstüne yerleştirmek muhtemelen en iyisidir. Bu sayede mobil ve masaüstü cihazlarda tutarlı bir tasarım elde edilir ve Google AI araştırmasına göre kullanıcılar daha hızlı tarama yapabilir. Etiketler ve girişler tam genişlikte gösterilir. Etiket metnini sığdırmak için etiket ve giriş genişliğini ayarlamanız gerekmez.

Kendiniz görmek için mobil cihazda label-position demosunu 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 stillendirilebilir. Düğme gibi görünen bir <div> veya başka bir öğe kullanmanın bir anlamı yoktur.

Gönder düğmesinin işlevini açıkladığından emin olun. Örneğin, Gönder veya Başlat yerine Hesap oluştur ya da Oturum aç kullanılabilir.

Formun başarıyla gönderilmesini sağlama

Şifre yöneticilerinin bir formun gönderildiğini anlamasına yardımcı olun. Bunu iki şekilde yapabilirsiniz:

• 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ğiyle, oturum açma işleminin başarılı olduğunun yanıtta bildirildiğinden ve formun DOM'dan çıkarılıp kullanıcıya başarılı olduğunun belirtilmesiyle işlendiğinden emin olun.

Kullanıcı Oturum aç düğmesine dokunduktan veya tıkladıktan sonra düğmeyi devre dışı bırakabilirsiniz. Hızlı ve duyarlı sitelerde bile birçok kullanıcı 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şini bekleyen form gönderimini devre dışı bırakmayın. Örneğin, kullanıcılar müşteri PIN'lerini girmeden Oturum aç düğmesini devre dışı bırakmayın. Kullanıcılar formda bir şeyi kaçırabilir, ardından (devre dışı bırakılmış) Oturum aç düğmesine tekrar tekrar dokunmayı deneyebilir ve düğmenin çalışmadığını düşünebilir. En azından, form gönderimini devre dışı bırakmanız gerekiyorsa devre dışı bırakılan düğmeyi tıkladığında kullanıcıya neyin eksik olduğunu açıklayın.

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

Bazı siteler, kullanıcıları e-posta adreslerini veya şifrelerini iki kez girmeye zorlar. Bu, birkaç kullanıcı için hataları azaltabilir ancak tüm kullanıcılar için ekstra iş yükü oluşturur ve 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 mantıklı değildir. Kullanıcıların e-posta adreslerini onaylamalarını sağlamak (bunu zaten yapmanız gerekir) ve gerektiğinde şifrelerini sıfırlamalarını kolaylaştırmak daha iyidir.

Öğe özelliklerinden en iyi şekilde yararlanma

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

Şifreleri gizli tutma ancak kullanıcıların istedikleri zaman şifreleri görmelerine izin verme

Şifre girişlerinde, şifre metnini gizlemek ve tarayıcının girişin şifreler için olduğunu anlamasına yardımcı olmak amacıyla type="password" bulunmalıdır. (Tarayıcıların, giriş rollerini anlamak ve şifreleri kaydetmeyi teklif edip etmeyeceğine karar vermek için çeşitli teknikler kullandığını unutmayın.)

Kullanıcıların girdikleri metni kontrol edebilmeleri için Şifreyi göster açma/kapatma düğmesi eklemeniz gerekir. Şifremi unuttum bağlantısı eklemeyi de unutmayın. Şifre görüntülemeyi etkinleştirme başlıklı makaleyi inceleyin.

Mobil kullanıcılara doğru klavyeyi sunun

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"> 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. Everything You Ever Wanted to Know About inputmode (inputmode Hakkında Bilmek İstediğiniz Her Şey) başlıklı makalede daha fazla bilgi bulabilirsiniz.

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

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

Mümkünse oturum açma sayfanızın üst kısmında yalnızca e-posta (veya telefon) ve şifre girişlerini ve Oturum aç düğmesini göstererek bu durumdan kaçının. Diğer içerikleri altına yerleştirin.

Çeşitli cihazlarda test etme

Hedef kitleniz için çeşitli cihazlarda test yapmanız ve buna göre ayarlama yapmanız gerekir. BrowserStack, çeşitli gerçek cihazlarda ve tarayıcılarda açık kaynak projeler için ücretsiz test imkanı sunar.

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

Bazı siteler (Amazon ve eBay dahil), e-posta (veya telefon) ve şifreyi iki sayfada sorarak bu sorunu önler. Bu yaklaşım, deneyimi de basitleştirir: Kullanıcıya her seferinde yalnızca bir görev verilir.

İ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 bunu gizleyip şifre girişini göstermek için JavaScript kullanın. Kullanıcıyı e-posta adresini ve şifresini girme arasında yeni bir sayfaya gitmeye zorlamanız gerekiyorsa ikinci sayfadaki formda, şifre yöneticilerinin doğru değeri saklamasına yardımcı olmak için e-posta değerini içeren gizli bir giriş öğesi bulunmalıdır. Chromium'un Anladığı Şifre Formu Stilleri başlıklı makalede bir kod örneği verilmiştir.

Kullanıcıların verileri yeniden girmesini önleme

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ın e-posta ve şifre değerlerini girmeyi hatırlaması gerekmez. Bu, özellikle mobil cihazlarda önemlidir ve yüksek vazgeçme oranlarına sahip 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 girişlerin rolünü anlamasına yardımcı olur. Böylece tarayıcılar, daha sonra otomatik doldurma için kullanılabilecek verileri depolayabilir. Modern tarayıcılar, verilerin otomatik doldurma için saklanmasına izin vermek amacıyla girişlerin sabit bir name veya id değerine sahip olmasını (her sayfa yüklemede veya site dağıtımında rastgele oluşturulmamış) ve submit düğmesi olan 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 doldurmasına yardımcı olur.

E-posta girişleri için autocomplete="username" kullanın. username, modern tarayıcılardaki şifre yöneticileri tarafından tanınır. type="email" kullanmanız gerekse de id="email" ve 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" kullanın

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

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

• Oturum açma formunda şifre girişi veya şifre değiştirme formunda kullanıcının eski şifresinin girişi için autocomplete="current-password" ve id="current-password" kullanın. Bu, 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çma 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 işler 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 varsa biyometrik kimlik doğrulama (parmak izi veya yüz tanıma) kullanılır.

Masaüstünde Chrome, e-posta önerilerini ve şifre yöneticisini gösterip şifreyi otomatik olarak dolduruyor.

Tarayıcı şifre ve otomatik doldurma sistemleri basit değildir. Değerleri tahmin etme, depolama ve görüntüleme algoritmaları standartlaştırılmamıştır ve platformdan platforma farklılık gösterir. Örneğin, Hidde de Vries'in belirttiği gibi: "Firefox'un şifre yöneticisi, sezgisel yöntemlerini bir reçete sistemiyle tamamlar."

Otomatik doldurma: Web geliştiricilerin bilmesi gereken ancak bilmediği şeyler başlıklı makalede, name ve autocomplete kullanımı hakkında daha fazla bilgi bulabilirsiniz. HTML spesifikasyonu, olası 59 değerin tümünü listeler.

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 ve güçlü bir şifre önerileceğine karar vermek için sezgisel yöntemler kullanır.

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

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

Yerleşik tarayıcı şifre oluşturucuları sayesinde kullanıcıların ve geliştiricilerin "güçlü şifre"nin ne olduğunu bulması gerekmez. Tarayıcılar şifreleri güvenli bir şekilde saklayıp gerektiğinde otomatik olarak doldurabildiğinden, 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ır ve başka bir yerde güvenliği ihlal edilebilecek bir şifreyi yeniden kullanma olasılıklarını azaltır.

Kullanıcıların girişleri yanlışlıkla kaçırmasını önlemeye yardımcı olma

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

Parmaklara uygun 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 çok açık bir şey 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ü.

Android erişilebilirlik kılavuzuna göre dokunmatik ekran nesneleri için önerilen hedef boyutu 7-10 mm'dir. Apple arayüz yönergeleri 48x48 piksel, W3C ise en az 44x44 CSS pikseli önerir. Bu nedenle, mobil cihazlar için giriş öğelerine ve düğmelere yaklaşık 15 piksel, masaüstü için ise yaklaşık 10 piksel dolgu ekleyin. Bunu gerçek bir mobil cihaz ve gerçek bir parmakla deneyin. Girişlerinize ve düğmelerinize rahatça dokunabilmeniz gerekir.

Dokunma hedefleri uygun şekilde boyutlandırılmamış Lighthouse denetimi, çok küçük giriş öğelerini tespit etme sürecini otomatikleştirmenize yardımcı olabilir.

Başparmakla kullanıma uygun tasarım

Dokunma hedefi araması yaparsanız işaret parmağı resimleri görürsünüz. Ancak gerçek dünyada birçok kişi telefonlarla etkileşim kurmak için başparmaklarını kullanır. Başparmaklar işaret parmaklarından daha büyüktür ve kontrol daha az hassastır. Bu nedenle, dokunma hedeflerinin yeterli boyutta olması çok önemlidir.

Metni yeterince büyük yapın

Boyut ve dolguda olduğu gibi, giriş öğeleri ve düğmeler için 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 sonuç veren belirli bir yazı tipi boyutu belirtmek zordur. Popüler web siteleriyle ilgili hızlı bir araştırma, masaüstünde 13-16 piksel boyutlarının kullanıldığını gösteriyor. Mobil cihazlardaki metinler için de bu fiziksel boyutu eşleştirmek iyi bir minimum değerdir.

Bu nedenle, mobil cihazlarda daha büyük bir piksel boyutu kullanmanız gerekir: Masaüstü için Chrome'da 16px oldukça okunaklıdır ancak iyi gören bir kullanıcı bile Android için Chrome'da 16px metni okumakta zorlanır. Medya sorgularını kullanarak farklı görüntü alanı boyutları için farklı yazı tipi piksel boyutları ayarlayabilirsiniz. 20px, mobil cihazlar için uygun bir boyuttur ancak bunu az gören arkadaşlarınız veya iş arkadaşlarınızla test etmeniz gerekir.

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

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

Girişlerin dokunma hedefi olarak iyi çalışması için yeterli kenar boşluğu ekleyin. Başka bir deyişle, yaklaşık bir parmak genişliğinde boşluk bırakın.

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

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

Dolgunun yanı sıra kenarlık da ekleyin: Beyaz arka planda #ccc veya daha koyu bir renk kullanmak iyi bir genel kuraldır.

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

Tarayıcılar, type özelliğine sahip girişler için temel form doğrulama işlemi gerçekleştiren yerleşik özelliklere sahiptir. Tarayıcılar, geçersiz bir değer içeren form gönderdiğinizde uyarı verir ve sorunlu girişe odaklanır.

Geçersiz verileri vurgulamak için :invalid CSS seçicisini kullanabilirsiniz. İçerik barındırmayan girişlerin seçilmesini önlemek için :not(:placeholder-shown) 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ğinde JavaScript kullanın

Şifre görünümünü açma/kapatma

Kullanıcıların girdikleri metni kontrol edebilmeleri 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 uygulamaya yönelik 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ılmıştı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ğlayan CSS şöyledir:

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ç şu şekilde olur:

Şifre girişlerini erişilebilir hale getirme

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ı okur.

<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ğini bildiren 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>

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

Erişilebilir Formlar Oluşturma başlıklı makalede, formları erişilebilir hale getirmeye yardımcı olacak daha fazla ipucu bulabilirsiniz.

Gerçek zamanlı olarak ve gönderimden ö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ü bir doğrulama yapmak için JavaScript'i de kullanmanız gerekir.

Oturum açma formu codelab'inin 5. adımında, odağı ayarlamak ve istemleri görüntülemek için yerleşik tarayıcı kullanıcı arayüzünü kullanarak özel doğrulama eklemek üzere Constraint Validation API (yaygın olarak desteklenir) kullanılır.

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

Analizler ve RUM

"Ölçemediğiniz şeyi iyileştiremezsiniz" sözü özellikle kayıt ve oturum açma formları için geçerlidir. Hedefler belirlemeniz, başarıyı ölçmeniz, sitenizi iyileştirmeniz ve bu süreci tekrarlamanız gerekir.

İndirimli kullanılabilirlik testi, değişiklikleri denemek için yararlı olabilir ancak kullanıcılarınızın kaydolma ve oturum açma formlarınızı nasıl deneyimlediğini gerçekten anlamak için gerçek dünya verilerine ihtiyacınız vardır:

• Sayfa analizleri: Kaydolma ve oturum açma sayfalarının görüntüleme sayısı, 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 herhangi bir nedenle yavaş mı? Öyleyse nedeni nedir?).

Ayrıca, farklı kaydolma ve oturum açma yaklaşımlarını denemek için A/B testi yapmayı ve değişiklikleri tüm kullanıcılara sunmadan önce bir kullanıcı alt kümesinde doğrulamak için aşamalı sunumlar yapmayı düşünebilirsiniz.

Genel yönergeler

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

• Kullanıcıların oturum açma düğmesini aramasına gerek kalmasın. Sayfanın üst kısmına, Oturum Aç, Hesap Oluştur veya Kaydol gibi kolayca anlaşılabilen ifadeler kullanarak oturum açma formunun bağlantısını ekleyin.
• Odaklanın. Kayıt formları, teklifler ve diğer site özellikleriyle kullanıcıların dikkatini dağıtmak için uygun bir yer değildir.
• Kayıt sürecini basitleştirin. Diğer kullanıcı verilerini (ör. adresler veya kredi kartı bilgileri) yalnızca kullanıcılar bu verileri sağlamanın net bir avantajını gördüğünde toplayın.
• Kullanıcılar kayıt formunuzu doldurmaya başlamadan önce değer teklifinin ne olduğunu açıkça belirtin. Oturum açmak onlara ne gibi avantajlar sağlayacak? 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ıların e-posta adresi yerine cep telefonu numarasıyla kimliklerini doğrulamalarına izin verin.
• Kullanıcıların şifrelerini sıfırlamasını kolaylaştırın ve Şifrenizi mi unuttunuz? bağlantısını belirgin hale getirin.
• Hizmet şartları ve gizlilik politikası belgelerinize bağlantı verin: Kullanıcıların verilerini nasıl koruduğunuzu en baştan açıkça belirtin.
• Kayıt ve oturum açma sayfalarınıza şirketinizin veya kuruluşunuzun logosunu ve adını ekleyin. 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 ait değilmiş gibi görünür.

Öğrenmeye devam edin

• Create Amazing Forms (Harika Formlar Oluşturma)
• Mobil Form Tasarımı İçin En İyi Uygulamalar
• Daha yetenekli form kontrolleri
• Erişilebilir Formlar Oluşturma
• Credential Management API'yi Kullanarak Oturum Açma Akışını Kolaylaştırma
• WebOTP API ile web'de telefon numaralarını doğrulama