Mükemmel Kayıt Formu Nasıl Olmalı?
Form doldurmayı kim sever? Hele bir de kağıda yazarak doldurulacaksa. Dijital dünyada da böyle, ne de olsa orası da günlük hayattaki kavramların uyarlanmış hali. Araştırmalar, bir siteye gelen kullanıcıların iyi bir kısmının form doldurmaktan kaçtığını gösteriyor.
Mobilde durum daha da kötü. Yazması zor klavyeler, sembollerin başka tuşla aktif olması, küçük, zor okunan yazılar derken kullanıcılar mobil uygulamalarda form doldurmaktan imtina ediyorlar. Nielsen Norman Group’un araştırmasına göre mobil uygulamalarda form doldurmak web’e göre 2 kat daha uzun sürüyormuş. Hata payı da çok yüksek. Ben mesela, hep yanlış yazıyorum. Şifreler de hatırlanmıyor. Kullanıcıların çoğu 1Password gibi araçlar da kullanmıyor.
Peki bu zorluğu hafifletmek, tabiri caizse form doldurmayı lezzetli hale getirmek için neler yapabiliriz? Thread’de (@wearethreadco) yaptığımız uygulamalarda form tasarlarken ve kodlarken araştırdığım ve tecrübe ettiğim konuları sizler için derledim. Tasarımcı ve yazılımcılar, bu yazı size hitap ediyor.
Birinci kural: En iyi form, form olmamasıdır.
Belki de uygulamanızda form mutlaka gerekmiyordur. Kullanıcıdan üye olmasını ona değer sağladıktan sonra isteyebilirsiniz. Bunun için birçok uygulama misafir kullanıcı özellikleri geliştiriyor. Kullanıcı bilgisi olmadan uygulamanın asıl fayda sağlayan kısımları açılıyor ve ancak kullanıcı yaptığı işlemleri kaydetmek istediğinde ya da kullanıcı bilgisini almak zaruri hale geldiğinde kayıt olması söyleniyor. E-ticaret sitelerinde bu çok kullanılan bir yöntem. Hesap açmadan sipariş verebiliyorsunuz.
Bu özellik daha çok sunucu (back-end) tarafında geliştiriliyor. Önce isimsiz bir kullanıcı açılıyor, ve kayıt olunduğunda bu kullanıcının kayıt olana kadar yaptıkları tutularak gerçek kullanıcı oluşturuluyor.
2. Kayıt olurken alternatif kayıt yolları sunun
Facebook/Google Login gibi alternatif kayıt yolları sunarak form alanlarını buralardan aldığınız bilgiyle doldurabilirsiniz. Facebook’tan gelen id ve token bilgisi ile kullanıcı oluşturmaya çalışmayın, zira Facebook her zaman kullanıcının email adresini vermiyor (bazıları telefon numarası ile kaydoluyormuş). Alabildiğiniz bilgiyi almaya çalışın, form alanlarını gerektiği şekilde doldurun, kullanıcıya sadece şifre belirlemek kalsın.
Facebook, Google gibi dış platformlardan izin isterken de mutlaka kullanıcıların adına paylaşım yapmayacağınızı ve bilgilerinin başkalarıyla paylaşılmayacağını (paylaşmıyorsunuz değil mi?) izin istediğiniz yerde bildirin.
3. Olabildiğince az bilgi istemeye çalışın
Form ne kadar uzunsa, kullanıcılar o kadar ürküyor ve terk ediyor. Eğer uygulamanız doğum tarihi, yaşadığı şehir, kilo, boy gibi ekstra bilgiler gerektiriyor ise bunları kayıt formunda istemek yerine uygulamaya giriş yapıldığında daha kolay kullanılır bir arayüz ile isteyebilirsiniz. Bunu yapamıyorsanız en azından formu birden fazla aşamaya bölüp, bilgileri parça parça isteyebilirsiniz.
4. İşletim sisteminin sağladığı kolaylıkları kullanın
Android ve iOS işletim sistemlerinin içinde de form doldurmayı kolaylaştıran özellikler var. İkisinde de bir form alanı seçili olduğunda ne tarz bir klavye çıkartılacağını belirtebiliyorsunuz.
// Kodda herhangi bir alanın textInputTrait'indeki keyboardType değerini değiştirerek yapabilirsiniz. Dokümantasyon: https://developer.apple.com/documentation/uikit/uitextinputtraits/1624457-keyboardtypeBir form elemanındayken next butonunu klavye üstünde ya da klavyenin enter tuşunun olduğu yere koyarak bir sonraki form elemanına geçmesini sağlayın.
// iOS'te bu textFieldShouldReturn delegate metodu ile yapılıyor.
// Storyboard/XIB kullanan arkadaşlar için başka bir teknik var. Bu tekniği anlatan bir yazı yazacağım.
iOS 11 ile gelen ve çok faydalı olduğunu düşündüğüm Autofill özelliği de özellikle Safari (iCloud Keychain)’de şifresini saklı tutan kullanıcılar için bir hayli faydalı. Bunu kullanabilmek için form alanının ne tip bir veri aldığını belirtmeniz yeterli. Form açıldığında klavyenin sağ üst tarafında bir anahtar işareti çıkıyor, buna basarak sistemin içeriği doldurması sağlanıyor. Sistemde kayıtlı olan tüm email/kullanıcı adı — şifre kombinasyonlarını kullanarak formu doldurabiliyorsunuz. Kredi kartı, adres, telefon, ad soyad, şirket adı gibi kayıtlı veriler de yazılabiliyor.
// Kod tarafında yine textInputTrait değerinin textContentType parametresi ile oynayarak yapabilirsiniz. İlgili dokümantasyon: https://developer.apple.com/documentation/uikit/uitextcontenttype
Bir başka sistem özelliği de Shared Web Credentials (Paylaşılan Web Kimlikleri). Eğer uygulamanız bir web sitesine ait ise, kullanıcının siteye girişte kaydettiği bilgileri çekerek hiç form göstermeden devam edebiliyorsunuz. Bunun için web uygulamanızda da ek geliştirmeler yapmanız gerekiyor. Pinterest, Yandex Navi gibi uygulamalar bunu çok iyi kullanıyor. Pinterest’in konuyla ilgili yazısı:
5. Şifre alanlarında kafa karışklığına son verin
Birçok sistemde şifre kuralları var. Şifre alanı seçili olduğu anda bu kuralları mutlaka erkenden belirtin. Formu doldurduktan sonra büyük harf, sembol, rakam olmalı gibi uyarılar sinir bozucu olabiliyor. Sırf bu yüzden kayıt olmaktan vazgeçen insanlar var.
Şifre yanlış yazıldığında erkenden bildirmek de faydalı oluyor. Fakat burada karar verilmesi gereken hatayı ne zaman bildireceğiniz. Bir sonraki alana geçince çıkartabilirsiniz, fakat bu sefer kullanıcının geri dönmesi gerekir. Şifre alanına bir karakter eklediği/çıkardığı zaman yapabilirsiniz, bu sefer de daha ilk karakterleri yazarken hata görür. En ideali, kullanıcı tuşlara basmayı bıraktıktan sonra 1.5–1.8 saniye kadar bekleyip doğru mu yanlış mı göstermek.
Şifre alanının maskelenmeden başlaması ya da maskelenerek başlaması konusunda farklı sonuçlara varan araştırmalar var. Biz genelde kayıtta şifre açık başlatıp sağ tarafa gizle butonu koyuyoruz, çünkü ilk defa giriyor ve yaptıği bir hata yanlış şifre belirlemesine sebep olabilir. Giriş yaparken ise tam tersi, gizli başlayıp sonra açık edilebiliyor.
// iOS'te UITextField objesinin çok hoş özellikleri var. leftView ve rightView değerleri ile sol ya da sağ tarafa herhangi bir UIView objesi koyabiliyorsunuz (Buton, ikon, yazı, şifrenin kuvveti görseli, vs.)// Eğer UITextField'tan türeyen bir class oluşturursanız buradaki editingRect(forBounds:), textRect(forBounds:) gibi metodların üzerine yazarak yazılabilecek alanın neresi olması gerektiğini belirleyebilirsiniz. (Pepapp uygulamasında ben yazıların büyüklüğünü hesaplayıp ona göre tüm alanlar aynı hizada olacak şekilde yazı alanına soldan inset veriyorum.)
6. Tekrar alanlarından kurtulun
Hiçbir bilgiyi ikinci bir alanda istemeyin. E-maili yanlış girerse yeni hesap açsın, ya da desteğe mail atsın. Şifreyi yanlış yazarsa da şifre sıfırlama mekanizmanız var. Hiç bir doğrulama yöntemi kaybedeceğiniz aktif kullanıcılardan kıymetli değil.
7. Doğrulama maili zorunlu olmamalı
Doğrulama mailini onaylamadan kullanıcıyı uygulamaya almamak bir çok kullanıcının uygulamayı kapatıp bir daha geri dönmemesine sebep oluyor. Eğer mutlaka doğrulama gerekiyorsa telefon numarasına şifre yollayın (pin kodunu tuşlaması daha kolay). Ayrıca birçok kullanıcı e-postalarına telefonlarından erişmiyor. Garip ama gerçek.
8. Giriş yaparken cihazın donanımını kullanın
iPhone’da Touch ID ve Face ID gibi parmak izi/yüz tanıma sistemleri, bazı Android telefonlarda da bunların muadili ya da benzerleri var. Bir kere kayıt aldığınızda bu özellikleri kullandırarak kullanıcıya hızlı giriş yaptırabilirsiniz.
9. Form alanını ve giriş yap butonunu klavyeye göre ayarlayın
Bu madde yazılımcılar için. Bir form alanı düzenlenebilir hale geldiğinde eğer telefonun ekranı yeterli değilse, ekran, o form alanı klavyeye rağmen rahat gözükecek şekilde kaydırılmalı. Eğer bütün eni kaplayan opak aksiyon butonu varsa, klavyenin yüksekliğinin değişmesi dinlenerek butonun klavyenin üstünde kalması sağlanmalı. Eğer buton ve form alanı ekrana sığmayacak gibiyse ya da buton şeffaf ve/veya küçükse, kaydırılabilir alanın en alt tarafı, klavyenin en tepe noktasına göre ayarlanmalı. Böylece kullanıcı klavyeyi kapatmadan ekranı kaydırarak butona dokunabilmeli. Bazı tasarımcılar da devam butonunu sağ üste, navigasyon çubuğuna koyuyor. Bu da kolay bir kullanım sunuyor.
// iOS'te UIKeyboardWillChangeFrame adında bir notification var. Her klavyenin frame değeri değiştiğinde, klavyenin yükseklik bilgisi ile açılma süresi gönderilerek çağırılıyor. Bunu kullanarak Auto-Layout constraintler üzerinde değişiklik yaparak klavyenin açılma hızı ile senkron bir şekilde butonları ya da hareket edecek elemanların pozisyonlarını değiştirebilirsiniz.// UIKeyboardWillHide notification'ı ile de kapanacağı zamanı bilip ona göre her şeyi eski haline getirebilirsiniz.
Bu maddeleri uygulayarak, ufak düzenlemeler ile uygulamanızı kullanacak olan kullanıcılar için form doldurma eziyetini bir nebze hafifletebilir, kullanıcı kayıplarının önüne geçebilirsiniz.
Okuduğunuz için teşekkürler. Yazıyı alkışlayarak daha fazla kişiye ulaşmasını sağlayabilirsiniz :) 👏🏻👏🏼👏🏽👏🏾👏🏿
Ek: Nejat Seçkin Oral’dan bu yazıya tamamlayıcı olduğunu düşündüğü bir makale tavsiyesi geldi:
Ek 2: Formlarla ilgili eski ama çok faydalı olabilecek bir kitap var, onu da paylaşayım:
Web üzerinden anlatıyor, yine de göz atmakta fayda var.
