Login Ekranı Tasarımı: 10 Örnek ve Ardındaki Kararlar

Giriş ekranı, çoğu üründe en sık görülen ve en az tasarım emeği alan sayfadır. İki alan, bir buton, bitti sanılır. Oysa oraya konan her ek seçenek arkada bir hesap modeli, bir oturum politikası ve bir kurtarma akışı doğurur. Aşağıdaki on örnek aynı üç kararın farklı cevaplarıdır.

Örneklerin ayrıldığı yer

Görsel dilleri birbirine hiç benzemiyor, aldıkları kararlar benziyor. Hepsi şunu çözüyor: kullanıcı kimliğini neyle ispatlayacak, kaç yoldan girebilecek, giremezse ne olacak.

Örnek	Ayırt edici karar	İşe yaradığı yer
Spotify	Koyu tema, yüksek kontrast, Google/Apple/Facebook ile giriş, beni hatırla	Cihazın kullanıcıya ait olduğu varsayılabildiğinde
IKEA	SMS ile tek kullanımlık kod, şifre yok	Yılda birkaç kez giren, şifresini kesin unutmuş kullanıcı
Snapptrip	Touch ID ile biyometrik açma	Mobilde haftalık ya da daha sık giriş
National Geographic	Tek alan, önce e-posta; güçlü görsel	Aynı formdan hem kayıt hem giriş akacaksa
Coffee House	Yalnızca zorunlu alanlar, sade arka plan	Ürün kendini giriş ekranından önce anlatmışsa
Headspace	Geniş boşluk, açık renkler	Markanın vaadi sakinlikse
Ghostlamp	Kısa karşılama metni, net sosyal giriş	Yeni kullanıcı oranı yüksek ürünlerde
OptinMonster	Giriş alanının yanında yeni özellik duyurusu	Duyuru giriş alanını aşağı itmiyorsa
PixelPro Digital	Misafir olarak devam et	Değer girişten önce gösterilebiliyorsa
Fintech uygulaması	Finans için alışılmadık sıcak renkler	Kategori kodunu kırmak bilinçli bir konumlandırmaysa

Sosyal giriş bedava kolaylık değil

Her yeni sağlayıcı, geri dönen kullanıcıya cevaplayamayacağı bir soru bırakır: hangisiyle girmiştim. Yanlış hatırlarsa yeni bir hesap açılır ve verisi ikiye bölünür. Doğrulanmış e-posta üzerinden birleştirme yapmıyorsanız aynı kişi sisteminizde iki kayıt olarak durur, üstelik bunu destek ekibiniz fark eder, siz değil.

Apple ile giriş bu eşleştirmeyi tamamen kırabiliyor: kullanıcı e-postasını gizlemeyi seçtiğinde size gelen adres, hesabı zaten Google ile açtığı adres değil, ona özel üretilmiş bir yönlendirme adresidir. Yani e-posta anahtarınız artık aynı kişide iki farklı değer taşır.

Üçten fazla sağlayıcı koymanın karşılığı yok. İki tanesi (platformun kendi hesabı ve bir tane yaygın olan) çoğu ürün için yeterli. Bunun yerine son kullanılan yöntemi saklayın ve bir sonraki ziyarette o düğmeyi işaretleyin; birkaç satırlık iş, mükerrer hesapların çoğunu keser.

İkinci faktör: hangisi ne zaman

SMS ile gelen tek kullanımlık kodu, uygulama tabanlı TOTP'den belirgin şekilde zayıf bulurum. SIM taşıma saldırısı SMS'i doğrudan kırar, TOTP'de aynı saldırının karşılığı yoktur. Buna rağmen IKEA'nın tercihi savunulabilir: orada SMS ikinci faktör değil, şifrenin yerine geçen tek faktör ve karşılaştırıldığı şey TOTP değil, kullanıcının bir yere yazdığı zayıf şifredir.

Biyometrik giriş ise çoğu yazıda yanlış konumlandırılıyor. Touch ID veya Face ID sunucuya kimlik göndermez; cihazda saklanan bir oturum anahtarının kilidini açar. Yani güvenliği belirleyen şey parmak izi değil, o anahtarın süresi ve iptal edilebilirliğidir. Cihaz kaybında oturumu uzaktan sonlandıramıyorsanız biyometri size bir şey kazandırmaz.

Hata mesajı hesabı ele verir

"Böyle bir kullanıcı yok" ile "Şifre hatalı" arasındaki ayrım, saldırgana hangi e-postaların kayıtlı olduğunu tek tek sorma imkanı verir. Bu yüzden giriş ekranında mesaj belirsizleştirilir.

Ama çoğu üründe bu tedbir kendi kendini iptal eder: giriş ekranı sessiz kalırken kayıt formu "bu e-posta zaten kullanılıyor" der, şifre sıfırlama ekranı da kayıtlı olmayan adres için farklı davranır. Üç ekranın üçünde birden aynı kararı vermediyseniz sadece giriş ekranını belirsizleştirmek işe yaramaz, yalnızca gerçek kullanıcıyı yavaşlatır. Karar ürün seviyesinde alınır: ya üçü de sessiz kalır ya da bu bilginin sizin için kabul edilebilir olduğunu açıkça kabul edersiniz.

Beni hatırla ne yapıyor

Kutucuk şifreyi hatırlamaz, oturumun ömrünü uzatır. Arkasında uzun süreli bir yenileme jetonu ve kalıcı bir çerez vardır. Kişisel cihaz varsayımıyla çalışan ürünlerde varsayılan olarak işaretli gelmesi doğru; ortak terminalden girilme ihtimali olan ürünlerde işaretsiz gelmeli ve çıkış yapıldığında jeton sunucu tarafında da geçersizleşmeli. Yalnızca çerezi silmek çıkış değildir.

Ölçülebilir küçük şeyler

• E-posta alanına inputmode="email" vermek, mobilde klavyeyi doğru açar ve yazım hatasını azaltır.
• autocomplete="username" ve autocomplete="current-password" olmadan şifre yöneticileri alanları bulamaz, kullanıcı elle yazar, hata oranı yükselir.
• Şifreyi göster düğmesi, caps lock uyarısından daha fazla iş görür ve hepsi tek bir kontrolle çözülür.
• Önce e-posta sonra şifre soran iki adımlı akış, kurumsal hesabı olan kullanıcıyı doğru kimlik sağlayıcısına yönlendirmenin tek temiz yoludur. Tek adımlı formda bu dallanma yapılamaz.