Mobilde Input Alanı Tasarımı: Klavye, Etiket ve Otomatik Doldurma

Mobilde form alanı tasarımı büyük ölçüde doğru HTML yazmakla biter. Etiketin yeri, açılan klavyenin tipi ve tarayıcının kayıtlı bilgiyi doldurup dolduramaması; üçü de görsel tercih değil, işaretlemede birkaç özniteliğin karşılığı. Aşağıdakiler doğrudan uygulanabilir kararlar, sırasıyla en çok işe yarayandan başlıyor.

Klavye tipini alan tipine göre seçin

Yanlış klavye, kullanıcıyı her karakterde tuş takımı değiştirmeye zorlar. Doğrusu tek öznitelikle çözülür:

Alan	Kullanılacak
E-posta	type="email"
Telefon	type="tel"
Kart numarası, posta kodu, doğrulama kodu	inputmode="numeric"
Ondalıklı miktar	inputmode="decimal"
Arama alanı	type="search" + enterkeyhint="search"

Sayısal alanlarda type="number" ile inputmode="numeric" arasında seçim yapmanız gerekirse ikincisini çok daha güvenilir buluyorum. type="number" girilen değeri sayı olarak yorumlar: baştaki sıfırları atar, boşluk ve tireyi kabul etmez, masaüstünde artırma okları çıkarır ve tekerlek hareketiyle değer değiştirebilir. Kart numarası ya da posta kodu sayı değil, rakamlardan oluşan bir metindir. inputmode ise yalnızca klavyeyi değiştirir, değere dokunmaz.

enterkeyhint de ucuz bir kazanç: klavyenin köşesindeki tuşun "Git", "Ara", "Gönder" ya da "İleri" yazmasını sağlar, kullanıcı formun bittiğini tuşa bakarak anlar.

Etiketi kutunun içine koymayın

Placeholder metni odaklanınca ya da yazmaya başlayınca kaybolur. Kullanıcı formun ortasında "bu alan neydi" diye geri dönmek zorunda kalır ve doğrulama hatası aldığında hangi alanın ne istediğini göremez. Etiket kutunun üstünde, kalıcı ve <label for> ile bağlı olsun. Ekran okuyucu için de gereken bağ budur.

Placeholder'ı silmeniz gerekmez, format örneği için kalabilir: etikette "Telefon", placeholder'da "05xx xxx xx xx". Zorunluluk bilgisini yıldız işaretine bırakmak yerine az sayıda isteğe bağlı alanı "(isteğe bağlı)" diye yazmak daha okunur, çünkü çoğu formda alanların neredeyse tamamı zorunludur.

Otomatik doldurmayı bozmayın

Kullanıcının adresini tekrar yazmasının en yaygın nedeni tarayıcının doldurmayı becerememesi değil, formun buna izin vermemesi. İki şey gerekir: alanın anlamlı bir name değeri ve doğru autocomplete göstergesi. Sık kullanılanlar given-name, family-name, email, tel, street-address, postal-code, cc-number, new-password, current-password.

SMS ile gelen doğrulama kodu alanında autocomplete="one-time-code" kullanın; iOS klavyenin üstünde kodu önerir, kullanıcının mesaja gidip kodu ezberlemesi gerekmez.

autocomplete="off" yazmak güvenlik önlemi değil. Tarayıcıların çoğu bunu parola alanlarında zaten yok sayıyor, işe yaradığı yerlerde de parola yöneticisini devre dışı bırakarak kullanıcıyı daha zayıf ve elle yazılmış parolalara itiyor. Aynı şekilde yapıştırmayı engellemeyin.

Klavye açılınca alan gözden kaybolmasın

Sanal klavye açıldığında görünür alan yarıya iner. Sayfanın alt kısmındaki input, kullanıcı yazarken klavyenin altında kalabilir. Formu test ederken masaüstü tarayıcıyı daraltmak yeterli değil, gerçek cihazda klavye açıkken denemeniz gerekir.

iOS'ta ayrıca şu var: odaklanılan alanın yazı boyutu 16px'in altındaysa Safari sayfayı otomatik yakınlaştırır, kullanıcı da formun geri kalanını görebilmek için sayfayı elle küçültmeye çalışır. Çözüm input'lara 16px taban vermek. viewport etiketine maximum-scale=1 eklemek de yakınlaştırmayı durdurur ama bunu yapmayın, görme güçlüğü olan kullanıcının sayfayı büyütme hakkını da elinden alırsınız.

Girdi biçimini kullanıcıya dayatmayın

Telefon numarasını boşluklu, tireli veya bitişik yazan kullanıcıyı reddetmek yerine, gelen değerden rakam olmayanları temizleyip kaydedin. Aynısı kart numarası, IBAN ve posta kodu için geçerli. Biçimlendirme sunucunun işi, kullanıcının değil.

Hata mesajı alanın hemen altında, kırmızıya ek olarak metinle dursun ve ne yapılacağını yazsın. "Geçersiz giriş" bir şey söylemez; "Telefon numarası 10 haneli olmalı" söyler. Doğrulamayı kullanıcı alandan çıkınca çalıştırın, her tuş vuruşunda değil, yoksa kullanıcı daha yazmayı bitirmeden hata görür.

Yayına almadan önce

• Her alanı tek tek gerekçelendirin; gerekçesi olmayanı silin.
• Her alanın label, inputmode veya type, ve autocomplete değeri var mı?
• Formu gerçek bir telefonda, kayıtlı adres bilgisiyle baştan sona doldurun.
• Bir alanı kasten hatalı doldurup mesajın okunabilirliğini kontrol edin.
• Şehir gibi türetilebilir alanları posta kodundan doldurun; kullanıcıya sormayın.