Kullanıcı deneyiminizin en baştan sorunsuz olmasını sağlamak için, giriş formlarınızı mümkün olduğunca sezgisel olacak şekilde tasarlamalısınız.
Macbook kullanmaya başladığım ilk zamanlarda, şifremi hızlıca yazıp geçmek istediğim ancak başaramadığım giriş ekranında hata mesajı vermek yerine kafasını sağa sola sallayan kutucuğa verdiğim kahkahalı tepkiyi hiç unutamam. MacOS’un yanılmıyorsam Leopard veya Lion versiyonunda başlayan bu animasyonlu arayüz kullanımı, daha henüz ‘kullanıcı deneyimi’ kavramı pek ortada yokken, on yıllar öncesinden bile bazı şeylerin basit ama yaratıcı olarak kullanılabileceğini gösterir nitelikteydi adeta.
Bu yazının konusu olan giriş form tasarımı da, bir işletim sisteminin veya en azından bir internet sayfasının ne kadar büyük olabileceğini düşündüğümüzde kolay bir iş gibi görünebilir ya da arayüz tasarım aşamasında genelde en sona bırakılacak kadar önemsiz olarak değerlendirilebilir ancak biraz derine daldığımızda birçok karmaşık ayrıntıdan oluştuğunu göreceksiniz.
“Bir giriş formu tasarlamak ne kadar zor olabilir ki?”
Bu düşünce aklınıza girerse, kullanıcılarınıza olumsuz bir izlenim bırakabilecek birçok küçük ayrıntıyı öğrendiğinizde şaşırabilirsiniz. Sonuçta giriş formu en nihayetinde ürününüzün giriş kapısıdır ve pek çoğumuz ilk izlenimlerin önemli olduğunu gayet iyi biliyoruz.
Giriş formu için göründüğü kadar basit ve iyi bir kullanıcı deneyimi tasarlamak, genel kullanıcı deneyimini ayarlamak için çok önemlidir. Bu konuda çeşitli modelleri inceleyelim ve bazılarının neden pek ideal olmadığını ve bunların kullanıcı deneyimini nasıl etkileyeceğine yakından bakalım.
1. Sağlayacağınız faydayı mutlaka ifade edin
Bir web sitesini gezmeden, yani daha herhangi bir site içi bağlantıya tıklayıp aradığı bilgiye ulaşmadan kayıt formunu karşısında bulmak, genelde kullanıcıların görmek isteyebileceği son şeydir. Kullanıcılar elde edecekleri faydayı bulup görene kadar da bir siteye kaydolmak istemezler. Kısa bile olsa, kullanıcıyı doğrudan can sıkıcı bir forma yönlendirip doldurmasını beklemek yerine, en azından bu eyleminin karşılığında ne gibi bir değer elde edeceğini açıkça belirtmek iyi bir yoldur. Mesajınızı net bir hale getirin. Linkedin anasayfası ve kayıt formu buna çok iyi bir örnektir.
Kullanıcıyı tek bir yola zorlamayın. Önce fayda sağlamaya odaklanın ve sonra kayıt isteyin. Kullanıcının en kısa sürede bu faydaları görmesine yardımcı olun. Bir uygulama veya web sitesi deneyimini başlatırken oturum açmasını istemek yerine, kullanıcıyı kayıt olmanın yararları konusunda bilgilendirin. Eğlenecek mi, yoksa içerikte ilham alabileceği şeyler mi var? Bunu yapmanın en iyi yolu, kullanılabilecek özellikleri listeleyerek kullanıcının elde edeceği değer veya değerleri anlamasına yardımcı olmaktır.
Başta mutlaka bir hesap oluşturmak gerekiyorsa, yalnızca isim ve e-posta adresi gibi asgari bilgileri isteyin veya sosyal giriş tasarım kalıplarını kullanın.
Pazarlanacak bir yazılımınız varsa, sunucu tarafında veya veritabanında demo amaçlı anonim hesaplar oluşturmak alternatif bir çözüm şeklidir.
2. Nereden oturum açılacağını açıkça gösterin
Web sitenize gelen bir kullanıcıya Oturum Açma ve Kaydolma eylemleri arasındaki farkı butonlar üzerinden açıkça gösterin. Netflix, buton büyüklükleri, açıkça tanımlanmış alt ve üstbilgiler ile ayrıca faydaları vurgulayarak bunu gayet doğru bir şekilde ele alır. Harekete geçirici mesajların yeterince kontrastlığa sahip olduğundan emin olun. Önemli olan renk değil kontrastlıktır.
Oturum açmak bir web sitesindeki öncelikli ihtiyaçsa eğer, kullanıcıyı oturum açma veya kayıt olma bağlantılarına tıklatmak yerine, Facebook ve Twitter’da olduğu gibi oturum açma bölümünü ilk sıradan vurgulayıp gösterin.
3. Sosyal girişe izin verin
Sosyal giriş, kullanıcıların Facebook veya Twitter gibi mevcut bir sosyal hesapla web sitenize veya uygulamanıza giriş yapmasına olanak tanır. Bu, kullanıcıları başka bir parola hatırlama ihtiyacını ortadan kaldırdığı için öne çıkan bir özelliktir. Sosyal giriş yöntemlerini entegre etmek, kullanıcının mevcut hesaplarıyla kolayca oturum açmasına olanak sağlar.
Sosyal girişlere izin vermek, kayıt olma ve giriş deneyimlerini hızlandırır; çünkü kullanıcılar bir kullanıcı adı seçmeyi, bir e-posta adresi ve şifre girmeyi düşünmek zorunda kalmaz.
Facebook, Twitter ve Google başlıca sosyal giriş sağlayıcılarıdır, ancak hedef kitlenizin halihazırda kullanmış olabileceği diğer hizmetleri de eklemeyi düşünebilirsiniz. Örneğin yazılım geliştiricilere yönelik olarak GitHub kimlik doğrulamasını sunmak mantıklıdır.
Normal giriş ve kayıt işlemlerine ek olarak, kullanıcı hakkında temel bir profil oluşturmak ve belirli alanları önceden doldurmak için sosyal giriş ile sağlanan bilgilerden yararlanabilirsiniz. Bu özellik kullanıcı deneyimini geliştirir ve tüm bilgilerini yeni uygulamaya veya hizmete girmeye zorlayarak kullanıcının daha kolay adapte olmasını sağlar.
4. Kullanıcı adı yerine e-posta veya cep telefonu numarası
Gerçekten gerekli olana kadar kullanıcıdan bir kullanıcı adı oluşturmasını istemeyin. Varsayılan kullanıcı adı olarak e-posta adresini veya cep telefonu numarasını kullanmayı deneyin. Kullanıcılar başka bir isim düşünmek istemezler. E-posta adresini ve telefon numarasını hatırlamak yeni bir kullanıcı adını hatırlamaktan çok daha kolaydır.
5. Oturum aç ve Kaydol seçeneğini birarada bulundurun
Kullanıcıların yanlış yere tıklaması durumunda geri dönebilmelerini sağlamak için, Hesap Oluştur sayfasına Oturum Aç seçeneği, Oturum Aç sayfasına ise Hesap Oluştur bağlantısını mutlaka ekleyin. Eğer tasarımınız imkan sağlıyorsa her iki seçeneği birarada göstermek de ikinci bir yoldur.
6. Birincil alana odaklanın
Formdaki ilk giriş alanına otomatik odaklanın. Bu yalnızca masaüstünde mümkün olan bir yoldur ve giriş alanına tıklamak için zaman ve çaba tasarrufu sağlar. Giriş alanını mutlaka vurgulayın.
7. Geri gelen kullanıcıları hatırlayın
Kullanıcılarınızı hatırlayın ve giriş yapma deneyimini hızlandırmak için kullanıcı adı gibi bilgileri önceden doldurun. Kullanıcıların kişisel cihazlarında daha kolay ve daha hızlı oturum açması için oturumlarını tutmalarını sağlayın.
8. Kullanıcıya parolasını gösterin
Her ne zaman ne olursa olsun, kullanıcıdan e-posta veya kullanıcı adı ve şifresini istediğinizden emin olun. Özellikle mobil cihazlar için, kullanıcıların parolarını doğru girip girmediklerini istedikleri zaman görüp kontrol edebilmeleri adına bir parola göster / gizle işlevi sağlayın. Varsayılan olarak parola bilgilerinin maskelenmiş olduğundan emin olun. Ayrıca kullanıcılardan e-postalarını veya şifrelerini iki kez onaylamalarını istemeyin.
9. Caps Lock açıksa uyarın
Parola yazarken büyük harf kilidinin açık olup olmadığını kullanıcılara mutlaka bildirin.
10. Parola gücünü gösterin
Karmaşık parolaların tahmin edilmesi ve kırılması zordur. Kullanıcının girilen parolanın karmaşıklığını bilmesini ve parolayı istenen karmaşıklık düzeyine göre değiştirmesini sağlamak için parola gücünü gösterebilirsiniz. Kullanıcının ilk seferde doğru parola oluşturabilmesi için parola politikanızı uygun yerde belirtin.
11. Hatayı yerinde vurgulayın
Hata mesajlarını uygun ve açıkça tanımlanmış bir şekilde gösterin. Kullanıcının tahmin yapmasına neden olabilecek genel hata mesajları kullanmayın.
12. Parola kurtarmaya yardımcı olun
Kullanıcılar kullanıcı adlarını ve özellikle parolalarını unutma eğilimindedirler. Kullanıcının hesabını kurtarmasına yardımcı olmak için ‘Bilgilerimi Unuttum’ kısayol bağlantısını görülebilir bir yere yerleştirdiğinizden emin olun. Parolayı sıfırlamasına izin vermeden önce kullanıcı kimliğini e-posta veya cep telefonuna yönlendirilecek tek kullanımlık bir doğrulama kodu ile teyit edin.
13. Captcha kullanmaktan kaçının.
Yapılan araştırmalara göre, giriş formlarında captcha kullanmak aboneliklerde ve olası satışlarda %30'a kadar varan bir düşüşe mal oluyor.
Captcha, spam yönetimi sorununu gidermek adına kullanıcıyı zorlar. Daha iyi bir alternatif, Akismet gibi otomatik bir spam algılama hizmeti kullanmak veya CSS ile gizli alan kullanarak bir ‘honeypot’ oluşturmak olabilir. Captcha mutlaka en son çare olmalı.
14. Renklere güvenmeyin
Renk körlüğü olan insanları unutmayın. Doğrulama hatalarını veya başarı mesajlarını görüntülerken, bir alanı yeşil veya kırmızı yapmakla yetinmeyin. Hangi renk nerede kullanılırsa kullanılsın mesaja uygun ikonları da birlikte göstermeye çalışın.
15. Yer tutucuyu doğru kullanın, alan etiketlerini gösterin
HTML5 ile gelen ve Türkçe’de ‘yer tutucu’ diye adlandırdığımız placeholder, form alanı içerisinde görünen ve alanla ilgili ipucu veren bir metindir.
Yer tutucular, formda herhangi bir belirsizlik varsa, form alanının nasıl doldurulacağı konusunda kullanıcıya rehberlik etmek için kullanılmalıdır. Diğer bir deyişle, çoğu insan adını nasıl yanıtlayacağını bildiğinden, ‘Adı’ gibi alanlar için bir yer tutucunuz olması gerekmez.
Alan etiketi ise, form alanı üzerinde yer alan soru metnidir. Bunlar her zaman mevcut olmalı ve yer tutucularla değiştirilmemelidir. Çünkü kullanıcı bir alana metin girmeye başladığınızda yer tutucu metin kaybolur, bu da bir form doldururken insanları hatırlamaya zorlar.
SONUÇ
Giriş formu tasarımı ile ilgili olarak temel sayılabilecek pek çok hususu belirtmeye çalıştım. Peki siz benzer bir form tasarlarken başka hangi detaylara odaklandınız? Kaçırdığım önemli birşey var mı? Lütfen tavsiyelerde bulunmaktan çekinmeyin. Her zaman olduğu gibi; bilgi paylaşıldığında değerlidir.
“Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.”
— Hz. Mevlana
Okuduğunuz için teşekkürler!
