Konu Anlatımı
Web Tasarımı
Web tasarımı, sayfanın ziyaretçi için tasarlanmasıyla başlar. Sayfanın amacı, ziyaretçinin ulaşacağı bilgi ya da eylem yazıyla belirlenmelidir. Kurumun kendini anlatma isteği ile ziyaretçinin aradığı bilgi aynı şey değildir. Tasarım kararları, ikinci bakış açısına göre verildiğinde sayfa işlevsel hâle gelir.
Sayfa yapısı ve üstbilgi
Her sayfada bir üstbilgi bulunur. Üstbilgi; sitenin adını, ana gezinme bağlantılarını ve varsa ana eylemi barındırır. Bu bölüm, kullanıcının her sayfada nerede olduğunu bilmesini ve ana bölümlere tek tıkla ulaşmasını sağlar. Üstbilginin yüksekliği sabit tutulur, böylece sayfa kaydırıldığında bile gezinme erişilebilir kalır.
Ana gezinme, sitenin ana bölümlerini en fazla birkaç başlıkla gösterir. Her sayfanın bölüm başlığı, içeriğin neyle ilgili olduğunu tek başına anlatmalıdır. Yanlış başlık, ziyaretçiyi beklediği sayfadan uzaklaştırır ve yeniden arama yapmasına yol açar.
Duyarlı yerleşim ve okuma sırası
Yerleşim, ekran genişliğine göre yeniden düzenlenebilmelidir. Sabit genişlikte tasarlanan bir sayfa, dar ekranda yatay kaydırma çıkarır; bu durum okuma konforunu düşürür ve ziyaretçinin sayfayı terk etme riskini artırır. Duyarlı yerleşimde genişlikler oranlarla verilir ve belirli kırılma noktalarında yerleşim yeniden düzenlenir.
İçerik, okuma sırasına göre yerleştirilir. Göz soldan sağa ve yukarıdan aşağıya doğru ilerler; bu yüzden en önemli bilgi sayfanın üst bölümüne konur. Başlıklar, alt başlıklar ve paragraflar hiyerarşik bir düzenle sunulmalıdır; bu hiyerarşi hem görsel düzeni hem erişilebilirliği güçlendirir.
Bağlantı metni ve formlar
Bağlantı metni, nereye gidildiğini açık biçimde söylemelidir. Anlaşılmayan bağlantı metinleri, kullanıcının tıklamadan önce hedefi bilememesine yol açar. Bağlantı metinleri ayrıca site içinde arama yapan ziyaretçiler için de bilgi taşır; bu nedenle konuyu yansıtacak biçimde yazılmalıdır.
Form tasarımında yalnızca gerekli alanlar istenir. Uzun formlar doldurma süresini uzatır ve terk oranını artırır. Girilen değerler, alan bazında ve hemen doğrulanmalıdır. Doğrulama mesajları ne olursa olsun kullanıcıya yol göstermelidir. Formun altında verilerin nasıl kullanılacağı konusunda kısa bir bilgilendirme yer alır.
Hız, ölçüm ve erişilebilirlik
Sayfanın yükleme süresi, ziyaretçinin siteyi kullanmaya başlamasını doğrudan etkiler. Görseller ekranda görüneceği boyuttan büyük hazırlanmamalı ve gereksiz dosyalar kaldırılmalıdır. Yazı tipleri, betik dosyaları ve görseller, ilk ekran için gereken en hafif hâliyle sunulmalıdır. Hız optimizasyonu, estetik kararların aksine değil, onlara rağmen yapılır.
Erişilebilirlik web tasarımında zorunlu bir ölçüttür. Görsellere alternatif metin eklenir, bağlantı metinleri anlaşılır olur, başlıklar mantıklı bir hiyerarşiyle dizilir ve renk tek başına anlam taşımaz. Yayınlanan site düzenli aralıklarla gözden geçirilir, eskimiş bilgiler güncellenir ve değişiklikler kayıt altına alınır. Ziyaretçi davranışı ölçülerek hangi bölümlerin işe yaradığı veriyle ortaya çıkarılır ve tasarım kararları tahmine bırakılmaz.
Ne Öğreneceğiz
Web sayfasının amacını netleştirme, duyarlı yerleşim, içerik hiyerarşisi, yükleme süresi ve erişilebilirliğin birlikte planlanması. Bu konuda ögrenme çıktıları:
- Web sayfasının amacını ve kullanıcı yolunu netleştirebilir.
- Duyarlı yerleşimin gerekçesini ve kırılma noktalarını açıklar.
- Okuma sırasına uygun içerik yerleşimi kurabilir.
- Görsel ve dosya boyutlarını yükleme süresine etkisiyle birlikte değerlendirir.
- Erişilebilirlik ve ölçüm adımlarını uygulama planına dâhil eder.
Ön Bilgi
Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:
- Web sayfası, ziyaretçinin ihtiyacına göre kurgulanır.
- Üstbilgi, sitenin adını, gezinme bağlantılarını ve ana eylemi barındırır.
- Yerleşim, ekran genişliğine göre yeniden düzenlenmelidir.
- Okuma sırası, önem sırasına göre kurulur.
- Bağlantı metni, nereye gidildiğini açık biçimde söyler.
- Görseller, ekranda görüneceği boyuttan büyük hazırlanmaz.
- Görsellere alternatif metin eklenerek erişilebilirlik sağlanır.
Basit Örnek ve Günlük Yaşam
Günlük yaşamda ve mesleki bağlamda bir uygulama:
Soru: Sayfa 1200 piksel sabit genişlikte tasarlanmıştır. Dar ekranda ne görülür?
- Dar ekran genişliği sabit tasarım genişliğinden küçüktür.
- Sayfa yatay kaydırma çıkarır ve kullanıcı sağa kaydırmak zorunda kalır.
- Duyarlı yerleşim ile genişlik yüzde değerlerine bağlandığında sayfa ekrana uyar.
Sonuç/cevap: Sabit genişlik dar ekranda yatay kaydırma çıkarır; duyarlı yerleşim kullanılmalıdır.
İleri Örnek
Daha ileri bir uygulama:
Soru: Bir iletişim formu otuz alan içermektedir. Nereye öncelik verilmelidir?
- Uzun form, doldurma süresini uzatır ve terk oranını artırır.
- Gerekli alanlar belirlenir, isteğe bağlı alanlar ayrılır.
- Alan sayısı azaltıldığında dönüşüm oranı iyileşir.
Sonuç/cevap: Form yalnızca gerekli alanlarla sınırlanmalı, isteğe bağlı alanlar çıkarılmalıdır.
Adım Adım Çözülmüş Örnek
Örnek 1: Sabit Genişlik Denetimi konusunun adımları:
- Dar ekran genişliği sabit tasarım genişliğinden küçüktür.
- Sayfa yatay kaydırma çıkarır ve kullanıcı sağa kaydırmak zorunda kalır.
- Duyarlı yerleşim ile genişlik yüzde değerlerine bağlandığında sayfa ekrana uyar.
Karşılaştırma Tablosu
| Kavram | Açıklama |
|---|
| Web sayfası, ziyaretçinin ihtiyacına gör | Web sayfası, ziyaretçinin ihtiyacına göre kurgulanır. |
| Üstbilgi, sitenin adını, gezinme bağlant | Üstbilgi, sitenin adını, gezinme bağlantılarını ve ana eylemi barındırır. |
| Yerleşim, ekran genişliğine göre yeniden | Yerleşim, ekran genişliğine göre yeniden düzenlenmelidir. |
| Okuma sırası, önem sırasına göre kurulur | Okuma sırası, önem sırasına göre kurulur. |
| Bağlantı metni, nereye gidildiğini açık | Bağlantı metni, nereye gidildiğini açık biçimde söyler. |
| Görseller, ekranda görüneceği boyuttan b | Görseller, ekranda görüneceği boyuttan büyük hazırlanmaz. |
| Görsellere alternatif metin eklenerek er | Görsellere alternatif metin eklenerek erişilebilirlik sağlanır. |
Sık Yapılan Hatalar
Sayfayı sabit genişlikte tasarlamak: Sabit genişlik, dar ekranda yatay kaydırma çıkarır ve okuma konforunu düşürür.
Önemli bilgiyi sayfanın altına koymak: Göz yukarıdan aşağıya okuduğu için alt bölümdeki bilgi geç fark edilir.
Anlaşılmaz bağlantı metni kullanmak: Tıklamadan önce nereye gidildiği bilinmediğinde kullanıcı yanlış sayfaya yönelir.
Görselleri yüksek çözünürlükte hazırlamak: Ekran ihtiyacının çok üzerindeki çözünürlük, dosyayı büyütür ve yükleme süresini uzatır.
Alternatif metni atlamak: Açıklama içermeyen görseller, ekran okuyucu kullanıcıları için bilgi taşımaz.
Özet
Web tasarımı, sayfanın kurum değil ziyaretçi için tasarlanmasıyla başlar. Sayfanın amacı, ziyaretçinin ulaşacağı bilgi ya da eylem yazıyla belirlenmelidir. Üstbilgi, sitenin adını, ana gezinme bağlantılarını ve ana eylemi barındırır. Yerleşim ekran genişliğine göre yeniden düzenlenmeli; sabit genişlik dar ekranda yatay kaydırma çıkarır. Okuma sırası, önem sırasına göre kurulur ve en önemli bilgi üst bölgeye konur. Görseller ekranda görüneceği boyuttan büyük hazırlanmamalı, yükleme süresi bu yolla kısaltılmalıdır. Formlarda yalnız gerekli alanlar istenir. Görsellere alternatif metin eklenir ve site düzenli aralıklarla gözden geçirilerek güncellenir.
Kendini Dene
Soru: Bir kurum sitesinin bilgi mimarisini çıkarınız ve ana gezinme önerisini gerekçesiyle sununuz.
Örnek cevap: Puanlama anahtarı: Site bölümlerinin listelenmesi 3 puan; hiyerarşinin gerekçeli kurulması 3 puan; üstbilgi önerisinin açıklanması 2 puan; düzen ve dil 2 puan. Toplam 10 puan.
