Input alanları, kullanıcılara standartlaştırılmamış yanıtlar girme araçları sağlayan temel bir kullanıcı arayüzü tasarım öğesidir.
Girdi Alanı İçeriği
Kapsayıcı Kutu (Container):
Kapsayıcı kutular (container), belirli bir cihaz veya görünüm alanında içeriğinizi içeren, dolduran ve hizalayan input alanının ve kullanıcı arayüzü tasarımının temel yapı taşlarından biridir.
Etiket Metni (Label Text):
Etiket metni, bir input alanı için hangi bilgilerin istendiği konusunda kullanıcıları bilgilendirmek için kullanılır. Her input alanının bir etiketi olmalıdır.
Etkili form etiketleme, kullanıcıların bir input alanına hangi bilgileri gireceklerini anlamalarına yardımcı olur. Etiket yerine placeholder kullanmak bazen yerden tasarruf sağlayan bir yöntem olarak kullanılır. Ancak, bağlamı gizlediği ve erişilebilirlik sorunları sunduğu için bu önerilmez.
Placeholder
Placeholder (yer tutucu metin), ne girileceğine dair ipuçları veya örnekler sağlar. Placeholder kullanıcı girişe veri girmeye başladıktan sonra kaybolur ve önemli bilgiler içermemelidir.
Simge (Icon)
Başa konulan simge, bazı durumlarda isteğe bağlı bir öğe olsa da, input alanında ilgili bir simge ekleyerek daha iyi bir kullanıcı deneyimi oluşturmak mümkündür. Doğru seçilmiş simge, kullanıcıların alanın anlamını bir bakışta anlamalarına yardımcı olur.
Yardımcı Metin (Helper Text)
Yardımcı metin, kullanıcının bir alanı doldurmasına yardımcı olan ilgili bilgilerdir. Şifre belirleme işlemindeki kuralları belirtebilir. Kimi zaman hata mesajı yerini alabilir. Bağlamı net bir şekilde tanımlamak için cümleler halinde olabilir ve dolayısıyla birden fazla satır içerebilir.
Input Alanı Durumları
Varsayılan Input Alanı
Varsayılan veya etkin durum, bir giriş alanını tıklamadığınız ve işlemin hazır ve beklemede olduğu durumdur.
Hover Input Alanı
Butonlarda olduğu gibi input alanları da kullanıcılara bunların etkileşimli veya tıklanabilir olduklarını belirtmelidir. Çoğu alan, fareyle üzerine gelindiğinde renk değiştirir veya çizgi kalınlığını artırır.
Odaklanılmış Input Alanı
Odak durumu, form alanını tıkladığınızda olur ve yazmaya başlayabilmeniz için seçildiğini gösterir. Kullanıcıların yazmaya başlayabileceklerini ve bilgilerin başka bir kutuda değil o kutuda görüneceğini bilmeleri için bu durumu belirtmemiz gerekir.
Engelli Input Alanı
Bir input alanı, kullanıcının orada olduğunu bilmesi gerektiğinde devre dışı bırakılabilir, ancak kullanıcı iş veya sistem gereksinimleri nedeniyle onunla etkileşim kuramaz.
