Kullanıcılarınızın en az düzeyde sorunsuz bir şekilde kaydolmasına, giriş yapmasına ve hesap bilgilerini yönetmesine yardımcı olun.
Kullanıcıların sitenize giriş yapması gerekiyorsa kayıt 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ış kayıt formları, yüksek hemen çıkma oranları sağlar. Her hemen çıkma, kayıt işleminin iptal edilmesini değil, kaybedilmiş ve canı sıkılmış bir kullanıcı anlamına da gelebilir. fırsat.
Aşağıda, en iyi uygulamaların tümünü gösteren çok basit bir kayıt formu örneği verilmiştir:
Yapılacaklar listesi
- Yapabiliyorsanız oturum açmaktan kaçının.
- Nasıl hesap oluşturulacağını açıkça belirtin.
- Hesap ayrıntılarına nasıl erişeceğinizi açıkça gösterin.
- Form dağınıklığı ortadan kaldırın.
- Oturum uzunluğunu göz önünde bulundurun.
- Şifre yöneticilerinin güvenli bir şekilde şifre önermesine ve depolamasına yardımcı olun.
- Güvenliği ihlal edilmiş şifrelere izin verme.
- Şifre yapıştırmaya izin verin.
- Şifreleri hiçbir zaman düz metin olarak depolamayın veya iletmeyin.
- Şifre güncellemelerini zorunlu kılma.
- Şifre değiştirmeyi veya sıfırlamayı kolaylaştırın.
- Birleştirilmiş girişi etkinleştir.
- Hesap geçişini kolaylaştırın.
- Çok öğeli kimlik doğrulaması sunabilirsiniz.
- Kullanıcı adlarına dikkat edin.
- Hem sahada hem de laboratuvarda test yapın.
- Çeşitli tarayıcılarda, cihazlarda ve platformlarda test edin.
Yapabiliyorsanız oturum açmaktan kaçının
Bir kayıt formu uygulamadan ve kullanıcılardan sitenizde hesap oluşturmalarını istemeden önce gerçekten ihtiyacınız olup olmadığına karar verin. Mümkün olduğunca, giriş yaptıktan sonra kontrol etme özelliklerinden kaçınmalısınız.
En iyi kayıt formu, kayıt formu değildir!
Bir kullanıcıdan hesap oluşturmasını isteyerek, bu kullanıcıyla neyi başarmaya çalıştığı arasında geçiş yapmış olursunuz. Bir iyilik yapıyorsunuz ve kullanıcıdan kişisel verileriniz konusunda size güvenmesini istiyorsunuz. Her şifre ve öğe depoladığınız verilerin tümü gizlilik ve güvenlikle ilgili "veri borcu" teşkil ederek bu verinin maliyeti ve sitenizi ziyaret edin.
Kullanıcılardan hesap oluşturmalarını istemenizin ana nedeni, gezinme işlemleri arasında bilgi kaydetmek veya oturum açmak yerine istemci tarafı depolama kullanmayı düşünün. Alışveriş için gibi sitelerde, kullanıcıları alışveriş yapmak için hesap oluşturmaya zorlamak, alışveriş yapmanın vazgeçenlerin sayısını gösterir. Giriş yapmadan öde seçeneğini varsayılan olarak ayarlamanız gerekir.
Oturum açma işlemini açıkça belirtin
Sitenizde nasıl hesap oluşturacağınızı (örneğin, Giriş veya Oturum Aç) açıkça belirtin düğmesini tıklayın. Belirsiz bir simge veya muğlak ifadeler kullanmaktan kaçının ("Aramıza katılın!", "Bize katılın") ve gezinme menüsünde girişi gizlemeyin. Kullanılabilirlik uzmanı Steve Krug, Web sitesinin kullanılabilirliğine dair yaklaşımı: Beni düşündürmeyin! Gerekirse web ekibinizdeki diğer kişileri ikna etmek, farklı dönüşümlerin etkisini göstermek için analizleri seçenekleri vardır.
![Android telefonda görüntülenen e-ticaret web sitesinin iki ekran görüntüsü. Soldaki, oturum açma bağlantısı için biraz muğlak bir simge kullanıyor; sağdaki "Oturum aç" yazıyor.](https://web.dev/static/articles/sign-up-form-best-practices/image/two-screenshots-a-mockup-62ee25473e20e.jpg?authuser=9&hl=tr)
![Gmail oturum açma ekran görüntüleri: Tıklandığında, yine Hesap oluştur bağlantısı bulunan bir forma yönlendiren Oturum aç düğmesinin gösterildiği bir sayfa.](https://web.dev/static/articles/sign-up-form-best-practices/image/screenshots-sign-for-gm-52c4c6c94532a.jpg?authuser=9&hl=tr)
. Burada gösterilenden daha büyük pencere boyutlarında Gmail, bir Oturum aç bağlantısı ve bir Oturum aç hesap düğmesini tıklayın.
Google gibi bir kimlik sağlayıcı üzerinden kaydolan ve e-posta ve şifre kullanarak da kaydolmalısınız. Bir kullanıcının e-posta adresine erişebiliyorsanız bunu kolayca yapabilirsiniz kimlik sağlayıcıdan alınan profil verilerinden çıkarım ve bu iki hesabı eşleştirir. Aşağıdaki kodda Google ile Oturum Açma kullanıcısının e-posta verilerine nasıl erişileceğini anlatacağım.
// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log(`Email: ${profile.getEmail()}`);
}
Hesap ayrıntılarına nasıl erişebileceğinizi açıkça belirtin
Kullanıcı oturum açtıktan sonra, hesap ayrıntılarına nasıl erişileceğini açıkça belirtin. Özellikle, her şeyin şifrelerin nasıl değiştirileceğini veya sıfırlanacağını açıkça görebilirsiniz.
Önemsiz formlardan kurtulun
Kaydolma akışında işiniz karmaşıklığı en aza indirmek ve kullanıcının odaklanmasını sağlamaktır. Karmaşadan kurtulun. Şimdi dikkatiniz dağılmanın ve cazibe almanın zamanı değil.
Kayıt sırasında mümkün olduğunca az ödeme yapılmasını isteyin. Ek kullanıcı verilerini (ör. ad ve adres) toplama yalnızca ihtiyaç duyduğunuzda ve kullanıcı bu verileri sağlamanın net bir faydasını gördüğünde. Unutmayın depoladığınız her veri öğesinin maliyet ve yükümlülüğe sahip olduğunu unutmayın.
Sadece kullanıcıların iletişim bilgilerini doğru anladıklarından emin olmak için aynı bilgileri tekrarlamayın. Yavaşlıyor. ve form alanlarının otomatik olarak doldurulması bir anlam ifade etmez. Bunun yerine, kullanıcı iletişim bilgilerini girdikten sonra kodu kullanıcıya gönderebilir ve ardından hesap oluşturma işlemine devam edebilir. yanıt verin. Bu yaygın bir kaydolma kalıbıdır: kullanıcılar buna alışkındır.
Kullanıcılara her oturum açtıklarında bir kod göndererek şifresiz oturum açmayı düşünebilirsiniz yeni bir cihaz veya tarayıcı olabilir. Slack ve Medium gibi siteler bunun bir sürümünü kullanır.
Birleştirilmiş girişte olduğu gibi bu da kullanıcı şifrelerini yönetmek zorunda kalmamanıza ek bir avantaj sağlar.
Oturum süresini dikkate alın
Kullanıcı kimliğine hangi yaklaşımı benimserseniz benimseyin, oturumla ilgili olarak uzunluk: Kullanıcının oturum açmış olarak kaldığı süre ve çıkış yapmanızın olası nedenleri.
Kullanıcılarınızın mobil cihazda mı yoksa masaüstünde mi olduğunu ve paylaştıklarını görebilirsiniz.
Şifre yöneticilerinin, şifreleri güvenli bir şekilde önermesine ve depolamasına yardımcı olun
Üçüncü taraf ve yerleşik tarayıcı şifre yöneticilerinin şifreleri önermesine ve depolamasına yardımcı olabilirsiniz. Böylece, Kullanıcıların şifre seçmesi, hatırlaması veya yazması gerekmez. Şifre yöneticileri, modern tarayıcılardan yararlanarak, hesapları cihazlar arasında, platforma özel uygulamalarda ve web uygulamalarında senkronize edebiliyor. yeni cihazlar için
Bu nedenle kayıt formlarını doğru şekilde kodlamak, özellikle de
Otomatik tamamlama değerleri. Kayıt formlarında yeni şifreler için autocomplete="new-password"
kullanın ve
Mümkün olduğunda otomatik tamamlama değerlerini diğer form alanlarına (ör. autocomplete="email"
) düzeltin
ve autocomplete="tel"
. Ayrıca, farklı name
ve id
kullanarak şifre yöneticilerine yardımcı olabilirsiniz
form
öğesinin kendisi için kayıt ve oturum açma formlarındaki input
, select
değerleri
ve textarea
öğe.
Ayrıca uygun type
özelliğini de kullanmanız gerekir.
mobil cihazlarda doğru klavyeyi sağlamak ve tarayıcı tarafından yerleşik temel doğrulamayı etkinleştirmek için kullanılır.
Ödeme ve adres formu ile ilgili en iyi uygulamalar başlıklı makaleden daha fazla bilgi edinebilirsiniz.
Kullanıcıların güvenli şifreler girdiğinden emin olun
Şifre yöneticilerinin şifreleri önermesini sağlamak en iyi seçenektir ve kullanıcıların tarayıcılar ve üçüncü taraf tarayıcı yöneticileri tarafından önerilen güçlü şifreleri kabul etmesini sağlar.
Ancak, birçok kullanıcı kendi şifresini girmek istediğinden şifre kuralları uygulamanız gerekir. dokunun. ABD Ulusal Standartlar ve Teknoloji Enstitüsü'nün açıklaması güvenli olmayan şifreleri önleme hakkında daha fazla bilgi edinin.
Güvenliği ihlal edilmiş şifrelere izin verme
Şifreleriniz için seçtiğiniz kural ne olursa olsun, Google'ın veya diğer göz önünde bulundurun.
Kullanıcı bir şifre girdikten sonra, bu şifrenin daha önce kullanılmış bir şifre olup olmadığını kontrol etmeniz gerekir. olabilir. Take I Been Pwned sitesi, şifre için bir API sağlar veya bunu kendiniz bir hizmet olarak çalıştırabilirsiniz.
Google'ın Şifre Yöneticisi ayrıca, mevcut şifrelerinizden herhangi birinin güvenliği ihlal edilmiş olabilir.
Bir kullanıcının önerdiği şifreyi reddederseniz tam olarak neden reddedildiğini açıklayın. Sorunları satır içinde gösterin ve nasıl düzeltileceğini açıklayın, kullanıcı bir değer girer girmez (kayıt formunu gönderdikten ve kayıt formunu gönderdikten sonra değil) sunucunuzdan yanıt gelmesini bekleyin.
Şifre yapıştırmayı engelleme
Bazı siteler metnin şifre girişlerine yapıştırılmasına izin vermez.
Şifre yapıştırmaya izin verilmemesi kullanıcıları rahatsız eder, akılda kalıcı şifreler kullanılmasını teşvik eder (ve bu nedenle daha kolay olabilir) ve Birleşik Krallık Ulusal Kuruluşu gibi kuruluşlara göre Siber Güvenlik Merkezi, aslında güvenliği azaltabilir. Kullanıcılar, yalnızca şifrelerini yapıştırmaya çalıştıktan sonra yapıştırma işlevine izin verilmediğini fark eder. şifre yapıştırmaya izin verilmemesi panodaki güvenlik açıklarından kaçınmaz.
Şifreleri hiçbir zaman düz metin olarak depolamayın veya aktarmayın
Şifreleri teşhis edip karma haline getirdiğinizden emin olun ve kendi karma oluşturma algoritmanızı oluşturmaya çalışmayın.
Şifre güncellemelerini zorunlu kılma
Kullanıcıları şifrelerini rastgele güncellemeleri için zorunlu kılmayın.
Şifre güncellemelerini zorunlu tutmak BT departmanları için maliyetli olabilir, kullanıcıları rahatsız edebilir ve daha fazla bilgi edinin. Ayrıca insanların bir araya gelmelerine Güvenli olmayan akılda kalıcı şifreler kullanmak veya şifrelerin fiziksel kaydını tutmak için güvenli olmayabilir.
Şifre güncellemelerini zorunlu tutmak yerine, olağan dışı hesap etkinliklerini izlemeniz ve kullanıcıları uyarmanız gerekir. Mümkünse veri ihlalleri nedeniyle güvenliği ihlal edilen şifreleri de izlemelisiniz.
Ayrıca kullanıcılarınıza hesap giriş geçmişlerine erişim vermeli ve ve giriş işleminin ne zaman yapıldığını gösterir.
![Gmail hesap hareketleri sayfası](https://web.dev/static/articles/sign-up-form-best-practices/image/gmail-account-activity-pa-c70c73f9a3264.jpg?authuser=9&hl=tr)
Şifre değiştirmeyi veya sıfırlamayı kolaylaştırın
Kullanıcılara hesap şifrelerini nereden ve nasıl güncelleyeceklerini açıkça belirtin. Bazı sitelerde şaşırtıcı derecede zordu.
Elbette, unutmaları halinde kullanıcıların şifrelerini sıfırlamalarını da kolaylaştırmalısınız. Open Web Application Security Project, kayıpların nasıl düzeltileceği ve şifreler.
İşletmenizin ve kullanıcılarınızın güvenliğini sağlamak için, kullanıcıların giriş yaparken kullandıkları
şifresini çözerler. Bu işlemi kolaylaştırmak için
Sizin için /.well-known/change-password
URL:
şifre yönetimi sayfanıza yönlendiren bir bağlantı içerir. Bu şekilde, şifre yöneticileri
kullanıcılarınızı doğrudan sitenize ilişkin şifrelerini değiştirebilecekleri sayfaya yönlendirin. Bu özellik
ve diğer tarayıcılar için de kullanıma sunulacak. Kullanıcıların şifreleri değiştirmelerine yardımcı olma
bilinen bir URL ekleyerek şifre değiştirme işlemini kolayca yapabilir
yardımcı olabilir.
Ayrıca, kullanıcıların hesaplarını silmelerini kolaylaştırmanız gerekir.
Üçüncü taraf kimlik sağlayıcılar aracılığıyla giriş imkanı sunun.
Birçok kullanıcı, web sitelerine e-posta adresi ve şifre kayıt formu kullanarak giriş yapmayı tercih eder. Ancak, kullanıcıların üçüncü taraf kimlik sağlayıcısı (diğer adıyla birleşik giriş.
![WordPress giriş sayfası](https://web.dev/static/articles/sign-up-form-best-practices/image/wordpress-login-page-b16b91f2dcb13.jpg?authuser=9&hl=tr)
Bu yaklaşımın birçok avantajı vardır. Birleştirilmiş girişi kullanarak hesap oluşturan kullanıcılar veya şifre istemesine, iletmesine veya saklamasına gerek yoktur.
Ayrıca, birleştirilmiş giriş bilgileri gibi doğrulanmış ek profil bilgilerine de erişebilirsiniz: kullanıcının e-posta adresi olarak kaydetmesi, böylece kullanıcının bu verileri girmesine ve sizin de kendiniz doğrulamalısınız. Ayrıca, birleşik oturum açma, bir kapsamlı erişim yeni bir cihaz.
Google ile Oturum Açma'yı web uygulamanıza entegre etme , kayıt seçeneklerinize nasıl birleşik girişi ekleyeceğiniz açıklanmaktadır. Diğer kimlik platformları mevcuttur.
Hesap geçişini kolaylaştırın
Birçok kullanıcı aynı tarayıcıyı kullanarak cihazları paylaşır ve hesaplar arasında geçiş yapar. Kullanıcıların erişip erişmeyeceği birleştirilmiş oturum açmış olsanız da olmasanız da hesap geçişini basitleştirmeniz gerekir.
![Gmail, hesap değiştirme gösteriliyor](https://web.dev/static/articles/sign-up-form-best-practices/image/gmail-showing-account-sw-452d02090bac6.jpg?authuser=9&hl=tr)
Çok öğeli kimlik doğrulaması sunabilirsiniz.
Çok öğeli kimlik doğrulaması, kullanıcıların kimlik doğrulama işlemini birden fazla yöntemle sağlaması anlamına gelir. Örneğin, kullanıcının şifre belirlemesini zorunlu kılmanın yanı sıra, doğrulama işlemini E-posta veya SMS kısa mesajı ile gönderilen tek kullanımlık şifre kodunu veya uygulama tabanlı tek seferlik bir kodu kullanarak kodu, güvenlik anahtarı veya parmak izi sensörü yoktur. SMS OTP en iyi uygulamaları ve WebAuthn ile Güçlü Kimlik Doğrulamayı Etkinleştirme çok öğeli kimlik doğrulamasının nasıl uygulanacağını açıklama.
Sitenizde kişisel veya hassas kimlik bilgisi sunuluyorsa çok öğeli kimlik doğrulamasını mutlaka sunmalısınız (ya da zorunlu kılmalısınız). hassas bilgiler sağlar.
Kullanıcı adlarına dikkat edin
İhtiyacınız olmadığı sürece (veya ihtiyacınız olmadığı sürece) bir kullanıcı adı için ısrar etmeyin. Kullanıcıların kaydolup oturum açmasına izin ver Yalnızca e-posta adresi (veya telefon numarası) ve şifre ya da birleştirilmiş giriş tercih edebilirler. Kullanıcı adını seçmeye ve hatırlamaya zorlamayın.
Siteniz kullanıcı adları gerektiriyorsa, kullanıcı adlarına makul olmayan kurallar koymayın ve kullanıcıları durdurmayın. kullanıcı adını güncellemesini engeller. Arka ucunuzda her kullanıcı hesabı için benzersiz bir kimlik oluşturmanız gerekir. kullanıcı adı gibi kişisel verilere dayalı bir tanımlayıcı olmamalıdır.
Ayrıca kullanıcı adları için autocomplete="username"
kullandığınızdan emin olun.
Çeşitli cihazlar, platformlar, tarayıcılar ve sürümlerde test edebilirsiniz
Kayıt formlarını, kullanıcılarınız için en yaygın olan platformlarda test edin. Form öğesinin işlevi değişiklik gösterebilir. ve görüntü alanı boyutundaki farklılıklar düzen sorunlarına neden olabilir. Tarayıcı Yığını, Google’ın açık kaynaklı projelere geçiş yapabilirsiniz.
Analizleri ve Gerçek Kullanıcı İzlemeyi uygulayın
Laboratuvar verilerinin yanı sıra alan verileri gerekir kullanıcıların kayıt formlarınızı nasıl deneyimlediğini anlamak için Analytics ve Gerçek Kullanıcı İzleme (RUM) kullanarak, kullanıcılarınızın gerçek deneyimi hakkında bilgi verebilir, örneğin kayıt sayfalarının ne kadar sürede yükleme, kullanıcıların hangi kullanıcı arayüzü bileşenleriyle etkileşim kurduğu (veya etkileşime girmediği) ve kullanıcıların işlemi tamamlamalarının ne kadar sürdüğü kaydolabilirsiniz.
- Sayfa analizi: kayıt akışınızdaki her sayfa için sayfa görüntülemeleri, hemen çıkma oranları ve çıkışlar.
- Etkileşim analizi: hedef dönüşüm hunileri ve etkinlikler kullanıcıların kaydolma akışından nerede ayrıldığını ve kullanıcıların ne kadarının düğmeleri tıkladığını, bağlantıları ve diğer bileşenleri hakkında bilgi edinin.
- Web sitesi performansı: kullanıcı odaklı metrikler kayıt sürecinizin yavaş mı yüklendiğini veya görsel olarak kararsız olup olmadığını belirtir.
Küçük değişiklikler, kayıt formlarının tamamlanma oranlarında büyük fark yaratabilir. Analytics ve RUM değişiklikleri optimize etmenizi, önceliklendirmenizi ve sitenizi yerel testlerle gözlemlendi.
Öğrenmeye devam edin
- Oturum açma formuyla ilgili en iyi uygulamalar
- Ödeme ve adres formu ile ilgili en iyi uygulamalar
- 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 Kayıt Akışını Kolaylaştırma
- WebOTP API ile web'de telefon numaralarını doğrulama
Fotoğraf: @ecowarriorprincess tarafından Unsplash'te).