Site Tasarımında Temel İlkeler

Araştırmalar kullanıcıların beklentilerinin şu yönlerde olduğunu göstermiştir: 

Hız beklentisi 
Birçok kullanıcı istediği sayfaların hızlı yüklenmesini ön şart olarak koşmaktadır. Hız sorunlarının başlıca sebepleri şunlardır: 
Resimlerin yanlış kullanılması 
Tabloların çok seviyeli, iç içe gömülmesi 
Standart dışı yazı tiplerinin resimlerle kullanılmaya çalışılması 
Sayfa içi elemanların sayısının çok olması 
Resim, film, ses vb. elemanların kullanıcının isteği dışında yüklenmeye başlaması 
Özellikle görsel düzenleyicilerin, kötü ve gereksiz HTML kodu üretmeleri 

Fotoğrafların doğru kullanımı 
Ortalama bir Web sayfasının toplam boyunun %90’ından fazlası fotoğraf bilgisinden oluşmaktadır. Bu nedenle, fotoğrafların mutlaka dikkatlice kullanılması gerekmektedir. 
Dosya tipini doğru seçmek önemlidir, çizim, keskin köşeli vb. fotoğraflar için GIF, PNG veya JPG tavsiye edilir. Hatta, Web için özelleşmiş fotoğraf düzenleyicilerini kullanarak fotoğraflarınızı iyileştirebilirsiniz. Fotoğrafların WIDTH ve HEIGHT özelliklerini mutlaka belirtin. Bu tarayıcının sayfayı daha hızlı yerleştirmesini sağlar. Sevdiğiniz yazı tiplerini resim olarak gömmeye çalışmayın, standart fontlara alışın. “Tekrarlayan” büyük fotoğrafların sadece küçük alanları değişiyorsa, fotoğrafları parçalayın ve sadece değişen kısımların yüklenmesini sağlayın. 

Divlerin doğru kullanımı 
Tablolar her ne kadar yerleşimi kolaylaştırsa da, iç içe gömüldüklerinde tarayıcılar zorlanmaktadır. Tabloları çok seviyeli bir biçimde iç içe gömmeyin, aksi takdirde, tarayıcı sayfayı ancak bütün sayfa indikten sonra görüntüleyebilir. Temel olarak 5’ten fazla tabloyu iç içe gömmeyin. Mümkün olduğu kadar az rowspan ve colspan kullanın. Bütün sayfayı bir tek tabloya gömmek yerine tablonuzu sayfa yüklendikçe görüntülenebilecek şekilde küçük yatay parçalara ayırın. Bu, kullanıcıda sayfa hızlı yükleniyor hissini arttıracaktır. 

Yazı tipleri 
İçeriğin erişilebilirliği, içerik kadar önemlidir. Standart yazı tiplerine bağlı kalmaya çalışın. Mümkünse, graceful degradation kullanarak alternatifleri de verin. Örneğin “Arial, Helvetica, sans-serif” örneği, önce Arial’ı (Windows standardı), sonra Helvetica’yı (Mac standardı), en sonda serifsiz (generic; sistemce bir karşılığı bulunan) bir font’u kullanabilmenizi sağlar. Yazı tipleriyle yaptığınız, efektleri mümkünse CSS kullanarak gerçekleştirin.

Sayfa içi elemanlar
Bir sayfa için ne kadar çok farklı dosya yükleniyorsa, sayfa o kadar yavaş yüklenecektir, hepsinin toplamının yüklenmesinden bile yavaş. Bir tarayıcı sayfa içinde karşılaştığı her dosya için Web sunucusuyla tekrar tekrar iletişime geçecektir. Dolayısıyla, sayfaya bağladığınız dosyalar, ne kadar küçük olursa olsun, yüklenme hızı düşecektir. Tarayıcının önbelleğini mümkün olduğu kadar çok kullanmak için, sayfa içi elemanlarınızı (logo, grafik dolaşma çubukları, fotoğraflar vb.) tekrar tekrar kullanmaya özen gösterin. 

Çoklu ortam terörizmi 
Kullanıcıları uyarmadan, büyük fotoğraflar, fon müzikleri, filmler vb. elemanlar yükletmeye çalışmayın. Maalesef, birçok Web sitesi, kullanıcıyı hiç uyarmadan, fon müzikleri gibi kullanıcının siteyi dolaşmasını kolaylaştırmaktan çok zorlaştıran, sayfanın yüklenmesini yavaşlatan, hatta bazen en kötüsü, tarayıcısını çökerten eklentiler kullanmaktadır. Böyle bir kullanıcının sitenize, ihtiyacı olsa bile, tekrar gelme olasılığı çok düşüktür. Kullanıcıyı, büyük boyutlu resimler (bir fotoğraf galerisi), filmler (bir konferansın çekimleri) ya da ses dosyalarının (bir röportaj) bulunduğu sayfalara girmeden önce mutlaka uyarın. Kullanıcıların daha da memnun kalacakları bir özellik, onlara farklı hızlar için farklı çözünürlük ya da kalitede sürümlerin sunulmasıdır. Dolayısıyla, kullanıcı bant genişliğine uygun olan sayfayı seçebilecek ve daha az vakit kaybedecektir. 

Standart dışı ve gereksiz HTML 
Yüzeyde tasarımcının işini kolaylaştıran görsel Web sayfası düzenleyicileri, altta standart dışı ve kötü HTML kodu üretmektedir. Sayfalarınızda aynı CSS ve JavaScript tanımlamalarını kullanıyorsanız, bunları harici dosyalarda tutup, sayfalardan bağ vererek yükletin. Ortalama tanımlamalarınızın 500 karakter olduğunu varsayarsak, yükleme işlemi 33600 modemi olan bir kullanıcının 1 saniyeden fazlasını alır. Genel olarak, bir efekt ne kadar süslü görünüyorsa, onun için üretilen kod da o kadar şişkin olacaktır. Bu tip sıradışı efektleri kolayca oluşturabilen düzenleyiciler, sayfaları kendilerine has HTML, JavaScript, Java vb. kodlarıyla doldurmakta ve uyumluluğu düşürmektedirler. En sık karşılaşılan durumlardan biri, görsel düzenleyicilerin gereksiz HTML etiketleri üretmeleridir. Örneğin BR için bile FONT etiketi açıp hemen arkasından kapatmaları gibi.

Sadelik 
Günlerce, haftalarca uğraştıktan sonra sade ve basit bir site hazırladıysanız, işinizi doğru yapmışsınızdır. Kullanıcılara alışık olduklarını verin. Mesaja yoğunlaşın, ilgiyi gereksiz elemanlarla dağıtmayın “Less is more”: uzun sayfalarınızı bölün ve basitleştirin. Sayfalarınız birbirleriyle tutarlı görünmesine dikkat etmeniz gereken en önemli husustur.

Kullanıcı alışkanlıkları 
Kullanıcıların çoğu, yeni özellikleri öğrenmek için vakit harcamak yerine, basitçe onları yok sayarlar. Büyük sitelerin ve diğer ortamların kullandıkları ortak yönlere bakın. 
Unutmayın ki, akademik ya da kâr amacı gütmeyen siteleri kullanan kişiler, ticari siteleri de ziyaret etmektedir ve edindikleri alışkanlıkları sitenize de taşırlar. Sitenizde alışılmadık renkler kullanmak kullanıcıyı zorlayacaktır.

İlgiyi dağıtmayın 
He şeyin vurgulandığı bir yerde hiçbir şey vurgulanamaz. Öncelikle, animated gif, reklam benzeri resimler afişler (banner), kayan yazılardan ve BLINK’den kesinlikle uzak durun. Otomatik olarak yeni tarayıcı pencereleri açmaktan kaçının. Birçok kullanıcı, içindekine bile bakmadan bu pencereleri kapatma alışkanlığını çoktan edinmiştir. Sayfadan çıkıldığı anda yeni bir sayfa açmaktansa kesinlikle uzak durun.

“Less is more”: Daha az, daha çoktur.
İngilizce’de dendiği gibi “Less is More” yani “Daha az, daha çoktur”. Mesajınızı az ve öz şekilde sunmaya özen gösterin. Bilgiye rahat ulaşabilen kullanıcı, sitenizi daha çok ziyaret edecektir. Vermek istediğiniz mesajı sayfaların üstlerine yerleştirin. Uzun tabloları, raporları ya da arşivleri, parçalara bölün ve kullanıcıya listeyi sunun. Böylece, kullanıcı, sadece görmek istediği bölümü yükleyebilecektir. Ancak, her zaman listeye bir referans verin, kullanıcıların sitenize nereden gireceği hiç belli olmaz. Birçok insanın Web üzerinde, gerçek hayattan daha da az okuduğu düşünülürse, bilgiyi parçalamak gerekir. Eğer kullanıcının ilgisini çekebilmişseniz, zaten diğer sayfalarınızı da ziyaret edecektir. Ayrıca Web kullanıcılarının bir sayfada kalma süreleri en çok 1 dakikayı aşmamaktadır. Dolayısıyla, bilgiyi bu sürede erişilebilir hale getirmeniz gerekir. 

Tutarlı görünüm 
Tutarsız bir görünüm, kullanıcıyı sizin amatör, sunduğunuz bilgininde yararsız olduğunu düşündürecektir. Birçok Web sayfası düzenleyicide bulunan şablonlama özelliklerinden faydalanın. Site tasarımında yukarıdan aşağı bir yol da izlediğiniz takdirde mutlaka tutarlı bir siteniz olacaktır. Kullandığınız renkleri, başlık ve paragraf yazılarının büyüklüklerini, resimlerin uyumunu, vb. bütün site tarafından paylaşılan elemanları site genelinde ortak yapmaya çalışın. CSS, JavaScript, vb. tanımlamalarını da site genelinde ortak tutun. Bir kurumun farklı birimleri kendi sitelerini kendileri hazırlıyor olabilir, ancak kurumun Webmaster’ının görevi, ortak bir şema oluşturmak ve bunları sayfa hazırlayıcılara benimsetmektir. 

Hedef kitlesi 
Tasarım ve içerik organizasyonu en baştan yapılmalıdır. Hedef kitlenizdeki kullanıcıların profilini, beklentilerini, bağlantı hızlarını vb. mümkünse uzaktan gözlemleyerek, gerekirse de anketlerle, öğrenmeden yeni bir tasarıma başlamayın. Gözlem metodu, kullanıcıların verdikleri cevaplarda daha dürüst olmalarını sağlar. Ender olarak, grafik, ses sanatçıları ya da çoklu ortam sunucusu vb. hazırlamanız durumunda, kullanıcılardan beklentileriniz (bant genişliği, kurulu eklentiler) yüksek olabilir. Bu durumda bile, gerekenden fazla bant genişliği ve sayfa elemanı kullanmayın. Sitenizde neler bulunduğunu ve bunun kullanıcıya ne yararlar getireceğini belirtin

Okunurluk 
Birçok kullanıcı sayfayı önce tarar, sonra okur. Sayfalarınızı taramaya uygun hazırlayın. Başlıkları ve yazıyı düzenli tutmaya çalışın. Bir satırda 70-100 karakterden fazla kullanmamaya çalışın. Kitaplar ve gazeteler bu fikri yüzyıllardır kullanmaktadır. Sayfanın genişliğine göre uzadıkça uzayan satırlar, okunurluğu çok düşürecektir. Bunun için tabloları kullanabilirsiniz. Yazı ve fon için zıt renkler kullanın. En çok tercih edilen ikili genel olarak beyaz üzerine siyahtır. Renklerin RGB kodlarına bakarak zıtlıklarını ayarlayabilirsiniz.

Tipografi 
Doğru yazı tiplerinin seçimi, içeriğin sunumunu kolaylaştıracaktır. Başlık ve paragraflar için değişimli yazı tipleri kullanın, örneğin başlıklar için sans-serif bir yazı tipi (Arial,Helvetica vb.), paragraflar için de serif (uçlar çıkıntılı) bir yazı tipi (Times New Roman, Times vb.) iyi olabilir, ya da tam tersi. Genel olarak, “HEPSİ BÜYÜK” ve “Sadece İlk Harfleri Büyük” başlıklar, cümleler kullanmaktan kaçının. Bu gözün gereksiz yere hareketine yol açacağı için gözü yoracaktır. Karakter setini belirtirken bazı düzenleyicilerin (Frontpage vb.) kullandığı Windows-1254 karakter seti yerine, ISO-8859-9 kullanın.





Burcu Aramacı tarafından yayımlandı

14 Mayıs, İstanbul doğumluyum. Anadolu Üniversitesi Yönetim Bilişim Sistemleri mezunu, alaylı tasarımcıyım. Uzun yıllardır da tasarım alanında ilerlemekteyim. Bu blogda kişisel yazılarıma, okuduğum kitaplara, gezdiğim yerlere, izlediğim filmlere, mesleki tecrübelerime ve ilgi alanıma giren diğer kategorilerdeki yazılara rastlayacaksınız. Kendi bildiklerimi, bulduklarımı, doğruları, yanlışları, iyiyi, kötüyü başkaları ile paylaşmak için bu blogu açtım ve yazıyorum. Okuyanlara veya okuyacak olanlara, şimdiden teşekkür ederim... Öptüm❤️

Yorum bırakın