← Tüm blog yazıları
Tasarım

Form alanının adı yazmaya başlayınca kaybolmasın

Yaklaşık 1 dk okuma
Etiketi giriş alanının üzerinde kalıcı duran e-posta formu.
Görsel: Bu blog için AI ile üretilmiş kavramsal kapak; gerçek ürün ekran görüntüsü veya kaynak kurumun görseli değildir.

Bir forma yazmaya başladıktan sonra hangi bilginin istendiğini unuttuğun oldu mu? Yalnızca alanın içindeki soluk örneğe dayanan tasarımlar, kullanıcı giriş yaptığında bağlamı kaybedebilir. Kalıcı bir etiket, formu hem anlamayı hem geri dönüp kontrol etmeyi kolaylaştırır.

Form alanının adını yalnızca placeholder’a bırakmayı doğru bulmuyorum. Benim için kullanıcı yazmaya başladıktan sonra da hangi bilgiyi girdiğini kolayca görebilmeli. Temiz görünen boş bir ekran, doldurulurken anlaşılmaz oluyorsa tasarım tamamlanmış sayılmaz. Etiketlerin gerçek kullanım sırasında görünür kalmasını tercih ederim.

Temel fikir

W3C, form kontrollerini açıklayıcı etiketlerle ilişkilendirmeyi önerir. Görünen metin ile kontrol arasındaki bağın kodda da kurulması gerekir. Placeholder bir örnek veya ipucu olabilir; kontrolün adını tek başına taşıması iyi bir varsayım değildir.

Bir örnek üzerinden

Bir iletişim formunda alan adı E-posta adresin olsun. Altına Yanıtı bu adrese göndereceğiz yazabilirsin. Örnek adres, istenen biçimi gösterebilir ama etiketin yerini almaz. Zorunlu alanları yalnızca renk veya açıklamasız yıldızla anlatmak yerine durumlarını anlaşılır belirt.

Nereden başlamalı?

Formu doldur, sonra birkaç dakika sonra geri dön. Hangi bilginin nereye yazıldığını hâlâ ayırt edebiliyor musun? Açıklık için fazladan alan eklemek değil, mevcut alanın ne istediğini görünür tutmak gerekir.

Benim yaklaşımım

Uzun bir iletişim formunda alanların adının kaybolması, özellikle geri dönüp düzeltme yaparken kafa karıştırabilir. Önce etiketi, sonra varsa kısa açıklamayı düzenlerdim. Alanı estetik nedenle çok daraltmak yerine gerekli bilgiyi rahat okuyacak yer bırakırım. Tasarımın boş hâli kadar dolu hâline de bakmak gerekir.

Kaynaklar

W3C WAI — Labeling Controls

Aklına takılan bir şey mi var?

Yazıyla ilgili sorunu veya proje fikrini paylaş.

WhatsApp’tan yaz