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

• Anlamlı HTML öğeleri kullanın: <form>, <input>, <label> ve <button>.
• Her girişi bir <label> ile etiketleyin.
• Yerleşik tarayıcıya erişmek için öğe özelliklerini kullanın özellikler: type, name, autocomplete, required.
• name ve id özellikleri için değişmeyen sabit değerler verin veya web sitesi dağıtımları arasında geçiş yapar.
• Oturum açma işlemini kendi <form> dosyasına ekleyin öğesi.
• Form gönderme işleminin başarılı olduğundan emin olun.
• Şunlar için autocomplete="new-password" ve id="new-password" tuşlarını kullanın: şifre girişini kayıt formuna, yeni şifre için ise şifre sıfırlama formuna yazın.
• autocomplete="current-password" ve id="current-password" öğelerini kullanın giriş şifresi girmeniz gerekir.
• Şifreyi göster işlevini sağlayın.
• aria-label ve aria-describedby özelliklerini kullanın: şifre girişleri.
• Girişleri iki katına çıkarmayın.
• Formları, mobil klavyenin girişleri veya klavyeyi kapatmayacağı şekilde tasarlayın düğmeleriyle kullanılabilir.
• Formların mobil cihazlarda kullanılabildiğinden emin olun: okunabilir metin, ve girişlerin ve düğmelerin dokunma hedefi olarak çalışacak kadar büyük olduğundan emin olun.
• Kaydolma ve oturum açma sayfalarınızda markayı ve stili koruyun.
• Laboratuvarda ve sahada test etme: Sayfa analizleri oluşturma, ve kullanıcı odaklı performans ölçümünü, size özel olarak devam ediyor.
• Tarayıcılar ve cihazlar arasında test edin: Formun davranışı değişiklik gösterir önemli ölçüde artış gösterdi.

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.

Ş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.

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.

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.

Ç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.

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

İ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ü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. 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.

(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!

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.

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.

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.

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.

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.

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:

Ş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 dışı verilerdir.
• 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

• Muhteşem Formlar Oluşturma
• Mobil Form Tasarımı İçin En İyi Uygulamalar
• Daha yetenekli form kontrolleri
• Erişilebilir Formlar Oluşturma
• Kimlik Bilgisi Yönetimi API'sini Kullanarak Oturum Açma Akışını Kolaylaştırma
• WebOTP API ile web'de telefon numaralarını doğrulama

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