Sonuçları Gerçekten Değiştiren Website Tasarım İlkeleri
Website tasarımı tavsiyelerinin çoğu ilke kılığına girmiş tercihtir. Daha küçük bir grup karar ise ziyaretçilerin davranışını güvenilir biçimde değiştirir ve bunlar çoğunlukla gösterişsizdir: önce ne göründüğü, metnin okunup okunmadığı ve birinin geldiği şeyle arasında kaç adım olduğu.
Bu rehber arkasında kanıt olanları ele alıyor ve gerçekten zevk meselesi olanları da açıkça adlandırıyor.
Her ekranda tek bir net hiyerarşi#
Her ekran tek bir şeyi açıkça en önemli kılmalı. Üç öğe aynı ağırlıkla dikkat için yarıştığında ziyaretçiler bu belirsizliği ayrılarak çözer.
Hiyerarşi boyut, kalınlık, renk, boşluk ve konumdan kurulur — kabaca bu güç sırasıyla. En az kullanılan araç boşluktur: etrafında yer olan bir öğe bağırmadan önemli okunur.
- Ekran başına tek bir birincil eylem, diğer her şeyden farklı biçimlendirilmiş.
- İkincil eylemler görünür ama görsel olarak daha sakin — dolgu yerine çerçeve.
- İçeriği anlatan başlıklar, hiçbir şey anlatmayan zekice başlıklar değil.
- Bilinçli kullanılan boşluk: kalabalık bir sayfanın hiyerarşisi yoktur, yalnız yoğunluğu vardır.
Süslemeden önce okunabilirlik#
Okunması zor metin, yazı ne kadar iyi olursa olsun size okuyucu kaybettirir. Bunlar görüş değil ölçülebilir eşiklerdir.
| Özellik | Pratik hedef | Neden |
|---|---|---|
| Gövde yazı boyutu | Mobilde 16–18px | 16px altında iOS form odağında yakınlaştırıyor, küçük metin okuyucu kaybettiriyor |
| Satır uzunluğu | 55–75 karakter | Uzun satırlarda göz dönüşte yerini kaybediyor |
| Satır yüksekliği | Gövde metninde 1,5–1,7 | Sıkışık satır aralığı okuma hızını ölçülebilir biçimde düşürüyor |
| Metin kontrastı | En az 4,5:1, 7:1 daha iyi | WCAG AA; gri üstüne gri telefonda güneşte okunmuyor |
| Denetim kontrastı | Arka plana karşı 3:1 | Kullanıcı bir alanın nerede bittiğini görebilmeli |
| Paragraf uzunluğu | Üç dört satır | Uzun bloklar mobilde atlanıyor |
Kontrastı gradyanlar ve görseller dahil gerçek arka plana karşı ölçün. Beyaz üstünde geçen bir değer, üzerine konduğu hero görselinde kalabilir.
Formları simetri için değil tamamlanma için tasarlayın#
Website hedeflerinin çoğu formlarda tamamlanır ve tasarım dikkatinin çoğu oraya harcanmaz. Eklediğiniz her alan size tamamlanma kaybettirir; ihtiyacınız olmayan her alanı kaldırmak bedava kazançtır.
- Cevap verebilmek için gereken en azı isteyin. Gerisini yanıtta sorabilirsiniz.
- Tek sütun. İki sütunlu formlarda alanlar atlanıyor ve mobilde daha kötü çalışıyor.
- Etiketler alanların üstünde ve her zaman görünür — yalnız yer tutucuya dayanan etiket yazmaya başlar başlamaz kayboluyor.
- Doğru input türleri ve autocomplete nitelikleri, böylece telefon doğru klavyeyi açar ve doldurmayı önerir.
- Her tuş vuruşunda değil alandan çıkışta doğrulayın ve hatayı alanın yanına koyun.
- Hata durumunda formu asla temizlemeyin. Yazılan cevapları kaybetmek en yaygın vazgeçme sebebidir.
- Gönderimden sonra ne olacağını ve ne kadar süreceğini söyleyin.
Neyi zevk, neyi değil#
Farkı net koymak inceleme toplantılarında çok zaman kazandırır. Sol sütun tartışılır; sağ sütun tartışılmaz.
| Zevk | Zevk değil |
|---|---|
| Renk paleti | Gerçek arka plana karşı kontrast oranları |
| Yazı tipi seçimi | Gövde yazı boyutu ve satır uzunluğu |
| İllüstrasyon stili | Görsellerin anlamlı alt metni olup olmadığı |
| Hero görseli olsun ya da olmasın | Birincil eylemin kaydırmadan görünüp görünmediği |
| Yuvarlak ya da köşeli kenarlar | Klavye kullanıcısı için odak durumlarının görünürlüğü |
| Animasyon stili | Animasyonun prefers-reduced-motion’a saygı gösterip göstermediği |
| Yerleşim yoğunluğu | Dokunma hedeflerinin en az 44px olup olmadığı |
Sık sorulan sorular
"Katlamanın üstü" hâlâ önemli mi?
Her önemli şeyin oraya sığması gereken bir kural olarak değil — insanlar kaydırıyor ve yirmi yıldır kaydırıyorlar. Önemli olan, sayfanın üstünün birkaç saniye içinde "bu nedir ve bana uygun mu" sorusunu cevaplaması. Cevaplıyorsa ziyaretçiler ayrıntı için kaydırır. Cevaplamıyorsa aşağıdaki hiçbir şey okunmaz.
Bir website kaç yazı tipi kullanmalı?
Genelde bir ya da iki aile, ek ailelerin yapacağı işi kalınlıklar üstlenerek. Pratik sebep zevk değil performans: her ek aile ve kalınlık, metin doğru görünmeden önce indirilecek başka bir dosya. Üç kalınlığı olan tek bir iyi seçilmiş aile neredeyse her siteyi karşılar.
Koyu tema yapmaya değer mi?
Baştan tasarım token’larıyla yapabiliyorsanız değer, çünkü o zaman maliyeti çok düşük. Bitmiş bir siteye sonradan eklemek her rengi, her görseli ve her gölgeyi denetlemek demek ki bu gerçek bir projedir. Destekliyorsanız varsayılan olarak sistem tercihine saygı gösterin ve kullanıcının değiştirmesine izin verin.
Tasarım rakiplere benzemeli mi?
Alışkanlıklar benzemeli — gezinme üstte, sepet sağ üstte, logo ana sayfaya bağlı — çünkü bunları bozmak karşılığında hiçbir şey vermeden anlaşılırlık kaybettirir. Alışkanlıkların üstündeki her şey farklılaştığınız yerdir. Hata, bir rakibin düzenini olduğu gibi kopyalamaktır; bu genelde onların içeriğine uyan, sizinkine uymayan kararları da ithal eder.
website tasarım ilkeleriweb tasarım en iyi uygulamalarux ilkeleriform tasarımıokunabilirlikgörsel hiyerarşi
