Mobil Cihazlarda Kullanıcı Girdisini Kolaylaştırmak
Mobil bir formu dolduran kullanıcı, masaüstündekiyle aynı koşullarda değil. Ekran küçük, klavye ekranın alt yarısını kapatıyor, parmak da fareden çok daha kaba bir işaretleyici. Bu yüzden mobilde form tasarımı alan eklemekle değil, alan çıkarmakla başlar; kalan alanların çoğunu da kullanıcı yerine tarayıcı doldurabilir.
Önce alanları sayın
Bir formu iyileştirmenin en ucuz yolu, alanları tek tek gözden geçirip "bu bilgi olmasa ne olur" diye sormak. Cevap "hiçbir şey" ya da "sonra da sorabiliriz" ise o alan formda durmamalı. Kayıt sırasında doğum tarihi, şirket adı, ikinci telefon gibi bilgileri toplamak alışkanlıktan gelir, ihtiyaçtan değil.
Bazı alanlar da tek bir girdiden türetilebilir. Türkiye'de posta kodu il ve ilçeyi belirler; kullanıcıdan beş hane alıp iki seçim kutusunu kendiniz doldurabilirsiniz. Sokak ve numara yine elle girilir, ama üç alan yerine bir alan kalmış olur.
Doğru klavyeyi açmak
Mobil tarayıcı, hangi klavyeyi açacağına alanın türüne bakarak karar verir. Burada sık yapılan hata telefon numarasına type="number" vermek: sayısal klavye gelir, ama alan sayı olarak yorumlandığı için baştaki sıfır kaybolur ve masaüstünde alanın yanına artırma azaltma okları düşer. Telefon için doğrusu type="tel", e-posta için type="email", serbest sayısal girdiler için ise inputmode="numeric".
Küçük ama sık rastlanan bir ayrıntı: iOS Safari, yazı boyutu 16 pikselin altında olan bir alana odaklanıldığında sayfayı otomatik yakınlaştırır. Formunuzda alan yazıları 14 piksel ise kullanıcı her dokunuşta sayfanın zıpladığını görür. Alan yazısını 16 piksele çıkarmak bu davranışı kapatır.
Doldurmayı tarayıcıya bırakın
Kullanıcının adı, adresi ve kart bilgisi zaten cihazında kayıtlı. Tarayıcının bunları önerebilmesi için alanların autocomplete etiketlerini doğru vermek gerekiyor: name, email, tel, street-address, postal-code, cc-number. SMS ile gelen doğrulama kodu alanına autocomplete="one-time-code" yazdığınızda iOS gelen mesajdaki kodu klavyenin üstünde önerir, kullanıcı koda bakmak için uygulamadan çıkmaz.
Tersi de doğru: alanlara refleksle autocomplete="off" eklemek çoğu tarayıcıda zaten yok sayılıyor, sayıldığı yerde de kullanıcıya zarar veriyor. Bunu güvenlik önlemi diye kullanmayın.
Cihaz özellikleri, ama hangi cihaz
Kamera, konum ve biyometrik doğrulama bazı adımları tamamen metin girişinden kurtarır. Kart numarasını kamerayla okutmak, adresi haritadan seçtirmek, girişi parmak iziyle yapmak bunların en yaygın örnekleri.
Bu tavsiyenin yanına sık sık "tuşlu telefon kullananları da unutmayın" cümlesi ekleniyor ve iki tavsiye aynı anda geçerli olamıyor. Kamera ve konum kullanan bir akış, akıllı olmayan bir telefonda zaten çalışmaz. Kime yazdığınıza karar vermek için tahmin yerine kendi ölçümünüze bakın: analitikteki cihaz ve tarayıcı dağılımı, bu soruyu bir toplantıdan çok daha hızlı kapatır.
CAPTCHA yerine ne koymalı
Dokunmatik ekranda bulmaca çözdürmek, formu terk etmenin en hızlı yollarından biri. Bir kayıt formunda gizli tuzak alan (honeypot) artı gönderim süresi eşiğini, mobilde görsel CAPTCHA'dan daha güvenilir buluyorum: kullanıcı tarafında hiçbir maliyeti yok, basit bot trafiğinin büyük kısmını daha ilk adımda eliyor ve yanlış pozitifi neredeyse sıfır. CAPTCHA ise gerçek kullanıcıyı da eledi mi, bunu genelde hiç göremezsiniz.
Bu ikisi elbette hedefli bir saldırıyı durdurmaz. Ama çoğu sitenin sorunu hedefli saldırı değil, formu tarayıp geçen otomatik trafik.
Hata mesajını göreceği yere koyun
Mobilde klavye ekranın altını kapattığı için, formun en altında beliren hata özeti çoğu zaman görünmez. Doğrulamayı alan bazında ve alanın hemen altında yapın. Kullanıcı alandan çıktığı anda uyarı çıksın, gönder düğmesine bastıktan sonra değil.
Otomatik düzeltme ve tahmin de her alana yakışmıyor. Ad soyad, kullanıcı adı, adres tarifi gibi serbest metinlerde tarayıcı düzeltmesi çoğu kez yanlış tahmin eder; bu alanlarda autocapitalize ve otomatik düzeltmeyi kapatmak formu hızlandırır.