Blog Post

Input Alanı Nedir?

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.

input alanı container
Kapsayıcı kutu (Container)


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.

etiket metni
Etiket metni

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.

placeholder
Yer tutucu (placeholder) metin ( Örnekteki Adam Smith)

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.

simgeli input alanı
Simge (Icon)

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.

yardımcı metinli input alanı
Yardımcı metin (helper text)

Input Alanı Durumları

input alanı durumları
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.

Beğendiyseniz lütfen paylaşın:

Bir Cevap Yazın

%d blogcu bunu beğendi: