Placeholder ve Label: Placeholder Metni Neden Label Değildir ve Kullanılacak Alan Spesifikasyonu
Alanın içindeki gri metin, biri yazmaya başladığı anda kaybolur. Placeholder neden label'ın yerini tutamaz, ipuçları nereye gider, geçerli olan kenarlık rengi ve geliştiricine vereceğin tam alan spesifikasyonu.
Placeholder bir label değildir. Biri yazmaya başladığı anda kaybolur ve alanın ne için olduğuna dair tek ipucu da onunla gider. Her alanın üstüne gerçek bir label koy, ipuçlarını onun altına yaz, çevresine görünür bir kenarlık çiz ve placeholder'ı yalnızca örnek için kullan. İşte nedeni ve tam spesifikasyon.
Placeholder label olduğunda ne ters gider
Yazmadan önce: temiz görünüyor
✕ Yazdıktan sonra: bu alan ne içindi?
Soldaki alan derli toplu görünüyor, tasarımcıların onu sevmesinin sebebi de bu. Sağdaki alan, aynı alanın iki saniye sonrası. "E-posta" kelimesi gitti, kişinin bakacağı bir label yok ve uzun bir formda hangi cevabın hangi alana ait olduğunu söyleyemez.
Bu bir zevk meselesi değil, hafıza meselesi. Nielsen Norman Group'un form alanlarındaki placeholder'lar üzerine araştırması, kaybolan metnin kısa süreli belleği zorladığını ve göndermeden önce cevapları kontrol etmeyi zorlaştırdığını buldu. Form tasarımı en iyi uygulamaları rehberimiz formun tamamını ele alıyor; bu yazı ise sorunların çoğuna yol açan o tek karara derinlemesine giriyor.
İkinci bir sorun daha var. Placeholder metni varsayılan olarak gridir ve bu gri genellikle fazla soluktur. Yaygın #8E8E93 placeholder grisinin beyaz üzerindeki kontrastı yaklaşık 3.3'e 1'dir; WCAG'nin metin için istediği 4.5'e 1'in altında. Yani verdiğin tek ipucu bir de okunması zor.
Çözüm 1: Alanın üstünde gerçek bir label
E-posta
✓ Üstte label: yazdıktan sonra da duruyor
İş e-postası
✓ Placeholder yalnızca örnek olarak
Label alanın dışında durur, bu yüzden yazmak ona asla dokunmaz. Alanın üstüne, sola hizalı, 15 px semibold olarak koy. Üstte olması yanda olmasından iyidir, çünkü telefon dahil her genişlikte çalışır ve göz formda tek düz bir çizgi boyunca aşağı iner.
Yer kazanmak için label'ı gizleme. Bir tasarımda label'lara yer yoksa yanlış olan kural değil, tasarımdır. Odakta köşeye küçülen floating label'lar bir uzlaşmadır: label'ı korurlar ama küçüktürler, dikkatli zamanlama isterler ve erişilebilir şekilde yapmaları, üstteki düz bir label'dan daha zordur.
Ekran okuyucuların seslendirdiği de gerçek bir label'dır. HTML'de onu alana bağla ki label'a dokunmak input'a odaklansın:
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
placeholder="name@company.com" />
Çözüm 2: İpuçları alanın altına
Şifre
En az 8 karakter.
✓ Alanın altındaki ipucu: yazarken yerinde kalır
✕ Placeholder olarak ipucu: ilk tuşta gider
Bir alanın söyleyebileceği en faydalı şey, örneğin bir format ya da kural, insanların yazarken ihtiyaç duyduğu şeydir. O yüzden ilk tuş vuruşunda kaybolan placeholder'da yaşayamaz. Onu alanın altına, 13 px ve daha sakin bir griyle yaz; böylece her zaman görünür kalır.
Hatalar da aynı yuvayı kullanır. Bir şey ters gittiğinde ipucu satırı hata mesajına dönüşebilir ve düzen sabit kalır. Hata mesajı rengi yazımız bu mesajın nasıl görünmesi gerektiğini anlatıyor.
Çözüm 3: İnsanların görebildiği bir kenarlık
E-posta
✕ #E5E5E5 kenarlık: bir hayalet
E-posta
✓ #79747E kenarlık: bulması kolay
Alan bir kontroldür ve bir kontrolün bulunabilir olması gerekir. Soldaki hayalet gri kenarlık, hafif göründüğü için tasarım dosyalarının gözdesidir. Gerçek bir ekranda neredeyse kaybolur ve insanlar nereye dokunacaklarını bilemez.
WCAG 1.4.11, bir kullanıcı arayüzü bileşenini tanımlamak için gereken görsel bilginin yanındaki renge karşı en az 3'e 1 olmasını ister. Beyaz üzerinde #E5E5E5 yaklaşık 1.3'e 1'dir ve kalır. Material 3'ün outline rengi olan #79747E yaklaşık 4.6'ya 1'dir ve rahatça geçer. Düşük yoğunluklu ekranlarda da dayansın diye 1.5 px kullan.
Ayırıcılarla farkı not et. #E5E5EA gibi açık bir gri liste satırları arasında gayet iyidir, çünkü bir ayırıcının yalnızca fark edilmesi gerekir. Bir alan kenarlığının ise görülmesi gerekir. Ayırıcı ve yüzey griltonlarını açık mod arka plan rengi yazısında ele aldık.
Çözüm 4: Doğru klavyeyi iste
Ne için olduğunu bilen bir alan, hem iPhone'da hem Android'de işe yarayan klavyeyi açabilir. @ tuşu hazır açılan bir e-posta alanı, önlediği her yazım hatasında bir dokunuş kazandırır. HTML'de bu tek bir attribute:
| Alan | Input tipi | Telefon ne açar |
|---|---|---|
| E-posta | type="email" | @ ve . içeren klavye |
| Telefon | type="tel" | Sayı tuş takımı |
| Web sitesi | type="url" | / ve .com içeren klavye |
| Kart veya kod | inputmode="numeric" | Sayı tuş takımı, spinner yok |
| Arama | type="search" | Klavyede arama tuşu |
Bunu email ve name gibi autocomplete değerleriyle eşleştir ki telefon alanı kendisi doldurabilsin.
Alan spesifikasyonu
| Parça | Değer |
|---|---|
| Label | Alanın üstünde, 15 px, semibold |
| Alan | 48 px yükseklik, 12 px radius |
| Kenarlık | #79747E renginde 1.5 px |
| Metin | 16 px, asla daha küçük değil |
| İpucu | Alanın altında, 13 px |
| Placeholder | Bir örnek ya da hiçbir şey |
İPhone'da 16 px metin önemlidir: Safari, daha küçük metinli bir alana dokunulduğunda sayfayı yakınlaştırır ve bu bir hata gibi hissettirir.
.field label { font: 600 15px/1.3 system-ui; display: block; margin-bottom: 6px; }
.field input {
height: 48px;
padding: 0 14px;
font-size: 16px;
border: 1.5px solid #79747E;
border-radius: 12px;
}
.field input::placeholder { color: #8E8E93; }
.field .hint { font-size: 13px; margin-top: 6px; }
48 px yükseklik rahat bir dokunma hedefi sağlar; 12 px radius ise kural değil, bir tercihtir: sistemine uydur ve her alanda aynı tut.
SSS
Label yerine placeholder kullanmalı mıyım?
Hayır. Placeholder biri yazdığında kaybolur ve alan adını yitirir. Alanın üstüne görünür bir label koy, placeholder'ı örnek format için kullan ya da boş bırak.
Placeholder metni erişilebilir mi?
Varsayılan olarak nadiren. Placeholder metni genellikle düşük kontrastlı açık bir gridir, girişte kaybolur ve bazı yardımcı araçlar onu label olarak görmez. Input'a bağlı gerçek bir label erişilebilir seçimdir.
Label nereye konmalı: alanın üstüne mi içine mi?
Üstüne, sola hizalı. Her ekran genişliğinde çalışır, yazarken görünür kalır ve göz formda tek düz bir çizgiyi izler.
Placeholder'a ne yazmalıyım?
name@company.com gibi bir format örneği ya da hiçbir şey. İnsanların yazarken ihtiyaç duyduğu talimatı asla oraya koyma. O, alanın altındaki ipucuna gider.
Input kenarlığı hangi renkte olmalı?
WCAG 1.4.11'in istediği gibi, sayfaya karşı en az 3'e 1'e ulaşacak kadar koyu. Material 3'ün outline rengi #79747E beyaz üzerinde yaklaşık 4.6'ya 1'dir. Soluk bir #E5E5E5 yaklaşık 1.3'e 1'dir ve kalır.
Floating label'lar placeholder sorununu çözer mi?
Kısmen. Label'ı metnin üstüne küçülterek görünür tutarlar, ama küçük boyut, animasyon ve erişilebilirlik işi, alanın üstündeki düz label'ı daha güvenli varsayılan yapar.
Kaynaklar
- Nielsen Norman Group, Placeholders in Form Fields Are Harmful (Katie Sherwin, 2014): placeholder metni yazarken kaybolur, kısa süreli belleği zorlar ve cevapları kontrol etmeyi zorlaştırır.
- WCAG 2.1, 1.4.11 Non-text Contrast (kullanıcı arayüzü bileşenleri için 3'e 1) ve 1.4.3 Contrast (Minimum).
- Beyaz üzerindeki oranlar, WCAG göreli luminans formülüyle hesaplandı: #E5E5E5 1.26'ya 1, #79747E 4.55'e 1, placeholder grisi #8E8E93 3.26'ya 1. #79747E, Material 3'ün Outline rengidir (NeutralVariant50), androidx Compose ColorLightTokens'tan okundu.
- MDN, the input element, type attribute:
type="email"telefonlarda e-posta klavyesini getirir. - Spesifikasyon tablosundaki alan boyutları (15 px label, 48 px yükseklik, 12 px radius, 13 px ipucu) bir platform değeri değil, kendi önerimizdir.
- İlk olarak UX Brainy üzerinde carousel olarak yayımlandı.
Want every form in your product to feel this easy to fill in? Our team designs and builds product UI with the field details decided once.
Get Started
