bildirgec.org

Web sitenizin tasarımı hazır, içerik yönetim sistemi muhteşem çalışıyor, içerik siteye eklendi ve müşteriniz son derece memnun. Artık sitenizi yayımlamanın vakti geldi. Yoksa gelmedi mi? Bir web sitesini yayımlarken genellikle onu yayımlamak için duyduğunuz sabırsızlık nedeniyle birkaç önemli noktayı atlarsınız. Bu yüzden sitenizi dünyaya duyurmadan önce yapılması gerekenleri içeren bir kontrol listesi bulundurmanız ve onu her yeni web sitesini yayımlamadan önce kontrol etmeniz, sitenizin geleceği ve kalitesi açısından önemlidir.

Bu makalede, bir websitesi resmiyete kavuşmadan önce kontrol edilmesi gerekenlerin bir listesini bulacaksınız. Makale içerisinde genellikle unutulan küçük ayrıntılar yer alıyor ve bunlar zamanında yapıldığı taktirde hem sizin daha az zamanınızı alacaktır, hem de genel olarak kullanıcı deneyimine olumlu katkıları olacaktır.

1. Favicon

Favicon bir web sitesini sekme ya da pencre üzerinde tanıtmaya yardımcı olur. Faviconlar genellikle bir web sitesinin yer imlerine eklenmesi durumunda da adres ile birlikte istemci üzerine kaydedilir. Ancak bundan emin olmak için aşağıdaki kodu sitenizin head etiketleri arasına yerleştirmeniz gerekir.

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

Eğer iPhone için bir favicon kaydetmek istiyorsanız, o zaman aşağıdaki kodu da eklemelisiniz.

<link rel="apple-touch-icon" type="image/x-icon" href="/favicon.ico" />

Bir süre önce, modern web uygulamalarındaki trendlere yönelik yazı dizisinin ilk bölümü olan 10 Kullanışlı Web Uygulama Arayüzü Tekniği yazısını yayımlamıştım. Diğer şeylerin yanısıra bu yazıda gömülü video blogları, özelleştirilmiş kontrol ve içeriğe göre değişen gezinti elementlerine dair bazı ipuçlarına yer vermiştim. Yazıda ayrıcı basılı düğmelerin durumu, modal pencerelerin çevresinde gölge kullanmak ve giriş sayfası üzerinden kayıt sayfasına bağlantı verilmesi gerekliliğinden de bahsetmiştik.

Bu yazı ise incelemenin ikinci bölümünü oluşturmaktadır: Web Uygulamalarında İyi Kullanıcı Arayüz Tasarımı İçin 12 Kullanışlı Teknik. Yazımızda ayrıca bu tekniklerin doğru bir şekilde kullanılması için uygulamalara nasıl entegre edilmesi gerektiğini de bulacaksınız. Eğer sizin de bu konuda paylaşmak istediğiniz görüşleriniz ve önerileriniz varsa yorumlarınızda belirtmekten çekinmeyin.

1. Önemli Değişiklikleri Belirtin

İyi kullanıcı arayüzü tasarımı için en önemli elementlerden birisi de sistem durumunun görünürlüğüdür. Kullanıcılar sitenin görünmeyen kısmında olan şeylerden ve eylemlerinin oluşturacağı sonuçlardan derhal haberdar olabilmelidirler. Daha sofistike bir sistem görünürlüğünü uygulamalarda kullanabilmek için web siteleri günümüzde, elbette, AJAX kullanmaktadırlar. Bildiğiniz üzere AJAX sayesinde kullanıcılar, web sayfalarının tamamını yeniden yüklemek zorunda kalmadan sadece belirli bölümlerinde değişiklikler yapabilmektedirler. AJAX, web uygulamalarının etkileşimliliğini ve yanıt verme yeteneklerini masaüstü uygulamaları ile neredeyse aynı seviyeye getirebilmektedir.

Yammer, besleme üzerindeki yüm mesajlara bir değil üç adet efekt uygulamaktadır: Yavaşça belirme, aşağı kayma ve öne çıkarma.

Bu dinamik oluşumun anlamı, bir düğmeye tıkladığınızda sayfa yeniden yüklenmemesi ancak sayfada bir şeyin olmasıdır. Pek çok web sitesi halen AJAX’ı etkin bir şekilde kullanmamaktadır, bu sayede bazı kullanıcılar halen bir düğmeye tıkladıktan sonra bir şeyin olup olmayacağını ya da düğmelerin doğru şekilde tıklanıp tıklanmadığını bilememektedirler. Bu sorunun önüne geçebilmek için kullanıcı etkileşimlerinin her birine görsel geribildirim uygulamalısınız.

Web erişilebilirliği web sitelerini ziyaretçilerin engelli olup olmadıklarına bakılmaksızın herkes için erişilebilir kılmak anlamına gelmektedir. Bir web sitesini erişilebilir kılmak için uygulanabilecek yöntemlerin pek çoğu kolaydır ve çok zamanınızı almaz ancak buna rağmen günümüzde halen pek çok web sitesi ya az bir miktarda erişilebilirdir ya da hiç erişilebilir değildir. Kamuya açık ve ticari yapıların engelli kişiler tarafından kullanılabilir olacak şekilde tasarlanmasını zorunlu kılan bazı kanunlar bulunmaktadır ancak Birleşik Devletler’de kurumsal web sitelerinin erişilebilir olmasını zorunlu kılan bir yasa henüz bulunmamaktadır (Birleşik Krallık’ta buna yönelik bir yasa 2004 yılında parlamentodan geçmişti). Birleşik Devletler hükümetine ait ya da hükümet tarafından desteklenen siteler Engelli Amerikanlar Yasası’nın 508. Bölümü‘ne tabidir ancak bu kanuna uymadığı için kapatılan ya da herhangi bir ceza alan hiçbir web sitesi olduğunu daha önce duymadım.

Web sitelerinin erişilebilir olmamasına yönelik özel bir çaba harcandığını sanmıyorum. Bence buradaki problem, insanların “erişilebilirlik” teriminin anlamından ve bunun engelli insanlar için ne derece önemli olduğundan bihaber olmalarında ve bir web sitesini nasıl daha erişilebilir kılacaklarından haberdar olmamalarında yatmaktadır. Ayrıca web tasarımına yönelik eskiden kullanılan yaklaşımlar (örneğin Fireworks tarafından etkinleştirilen kes ve döşe metodu) özellikle erişilebilirlik alanında çok büyük zaafların verilmesine yol açmıştır. Bu tip yaklaşımlar daha çok web sitelerinin tüm tarayıcılarda aynı şekilde görünmesine odaklandıkları için, engelli insanları gözardı etmişler ve bu sebeple de onlar için bilgiyi “erişilemez” kılmışlardır. Web site erişilebilirliği sitenizin hedef kitlenizdeki herkes için aynı görünmesi demek değildir. Erişilebilirliğin anlamı, bilginin herkes tarafından ulaşılabilir olması demekter. Görme engelli birisi için sitenizin tüm tarayıcılarda aynı görünmesi bir şey ifade etmez.

Beyaz Boşluk (White Space) Nedir?

Basitçe anlatmam gerekirse beyaz boşluk bir tasarımın farklı elementleri arasındaki boşluktur – metinler, resimler, paragraflar, başlıklar, altlıklar, bağlantılar vb. Bu boşluk bir sayfa üzerindeki farklı elementler arasındaki boşluktur, harfler arasındaki boşluk, bir paragrafın satırları arasındaki boşluktur.

Beyaz boşluk bir web sitesinin kolayca taranabilmesini sağlar. Ziyaretçinin sitenizi ziyaret ettiğinde gördüğü metin miktarını azaltır ve bu vesileyle okumayı daha da kolaylaştırır. Sayfanıza kutular ve çizgiler gibi yeni elementler eklemenize gerek kalmadan tasarım elementlerinin görsel olarak ayrımını kolaylaştırır. Bu boşluklar doğru kullanıldığında sayfanızın temiz ve profesyonel görünmesini sağladığı gibi, sitenizin karmaşık görünmemesini, taze görünümünü korumasını sağlar.

Beyaz boşluk ne yazık ki güçlü bir web tasarımında en az dikkate alınan elementlerden birisidir. Beyaz boşlukların parlak ve ışıldayan bir tasarımının olmamasının, onun web sitesi için önemli olmadığı anlamına gelmez.

Bu konudaki araştırmamıza başlamadan önce gelin tasarımlarında beyaz boşlukları verimli bir şekilde kullanan bazı web sitelerine bir göz atalım.

• 1. Made By Sofa

Made By Sofa web sitesi, sitenin üst kısmında büyük boyutlu bir imaj ve imajın alt kısmında ana içerik ve navigasyon öğeleri kullanılarak güçlü bir tasarım oluşturmuş. Sofa başlıklar, paragraflar ve slogan elementlerini birbirinden ayırmak için beyaz boşlukları kullanmış. Aşağıdaki yakınlaştırılmış resme bir bakın:

TÜBİTAK-MAM tarafından hazırlanan “Kamu Kurumları İnternet Sitesi Kılavuzu”, Başbakanlığın 2007/4 sayılı genelgesi ile yayımlanmış ve söz konusu kılavuzda ise kamu kurum ve kuruluşları internet sitelerinde uyulması gereken usul ve esaslar belirtilmişti.

Balıkesir Üniversitesi, Fen Bilimleri Enstitüsü, Bilgisayar ve Öğretim Teknolojileri Eğitimi Anabilim Dalı’nda Yüksek Lisans yapan Erkan Duran tarafından konuyla ilgili bir araç geliştirildi.

Bu araç ile kamu kurum ve kuruluşları internet siteleri, kılavuz kapsamındaki birçok kriter bakımından değerlendirilebiliyor.

Teknosanın Notebook menüsündeki kafa karışıklığı ve alternatif bir kategori görünümü anlatılmış.. (tarafımdan:) )

burada gördüğüm linklerde web tasarımcıları için css (dersleri) temaları, web 2.0 hakkında , ajax, erişilebilirlik ve standartlar üzerine bilgiler, makaleler, örnekler bulunuyor.

Altı Üstü Tasarım‘dan tanıdığımız Mehmet Doğan‘ın burada tanıtımı yapılan kitabı Teknoloji Kimin Umurunda e-kitap olarak sunuldu. Kitabı daha önce okumamış olanlar veya tekrar okumak isteyenler buradan veya buradan pdf formatında (864 KB) bilgisayarlarına indirebilirler.

RobotReplay sayesinde sitenizi ziyaret eden kullanıcıların mouse hareketlerini, tıklamalarını ve klavyede bastığı her harfi izleyebiliyorsunuz. Burada da bununla ilgili bir tanıtım videosu bulunuyor.

Bu sistem sayesinde;
1. Ziyaretçilerinizin daha çok hangi bölümlerde vakit geçirdiklerini hangi bölümlere daha çok ilgi gösterdiğini öğrenebilirsiniz
2. Tam tersine hangi bölümlerin ilgi çekmediğini görebilirsiniz
3. Ve en önemlisi sitenizin kullanılabilirliğini ve erişilebilirliğini önemli ölçüde geliştirebilirsiniz

Daha önce, altıüstü tasarımda da görme engellilerin
erişim sorunlarıyla ilgili bir yazı yayınlanmıştı.

Görme engelliler için yapabileceklerimizden biri de
mp3 biçimli sesli kitaplar oluşturup yayınlamak.

Çizgi‘de dolaşırken
içimizi ısıtanlar bölümüne rastladım ki gerçekten taktire değer.
Gönüllülerin seslendirip kaydettiği mp3 dosyalarını
indirip dinleyebiliyorsunuz.