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.

Eğer bu makaleyi okumak istiyorsanız, buraya tıklayın

Aslında bu durum çok önemli bir kullanılabilirlik problemidir. Hiçbir anlam ifade etmeyen bağlantılar (link). Web sitenizde bağlantıları nasıl kullanıyorsunuz?

Ben, web sitelerindeki yazıların mümkün olduğu kadar kitaba benzemesi gerektiği fikrini sonuna kadar destekleyenlerdenim. “Buraya tıklayın” ya da “Yazının devamı” gibi bağlantılar, okunulabilirliği engellerler. Eğer bağlantılarınız yeteri kadar açıklayıcı ise, kullanıcıların ona tıklamaları gerektiği konusunda bilgilendirilmesi gerekmez.

Uzun bir yazı yazıp ardından “daha fazlası için buraya tıklayın” cümlesini yazının sonuna eklemek kolaydır. Her ne kadar bundan büyük bir suçluluk duysam da bu adım genellikle gereksizdir. Halihazırda uzun bir yazınız olduğuna göre bağlantı için ayrı bir cümle yazmaktansa neden o metni kullanmayasınız?

3 Sık Kullanılan Yaklaşım

Aşağıdaki üç farklı cümle kullanımını ve (etkin olmayan) bağlantıları inceleyin.

1. Otomobil fuarında, yeni bir arabanın duyurusu yapıldı. Daha fazlası için buraya tıklayın.
2. Otomobil fuarında, yeni bir arabanın duyurusu yapıldı (www.kaynakurlburaya).
3. Otomobil fuarında, yeni bir arabanın duyurusu yapıldı.

Yukarıdaki cümlelerden hangisini bir kitapta görme olasılığınız yüksektir? Birinci ve ikinci öğeler çevrimiçi yazılarda sık kullanılan yöntemlerdir ve kolay anlaşılırlar, ancak diğer başka hiçbir yerde bu tip bağlantılar karşınıza çıkmaz.

Bu yazıda web tasarımındaki başlıkların (site başlıkları ve içerik başlıkları) verimliliğini arttırmak için uygulanabilecek bazı kolay ve hızlı tekniklerden bahsedeceğim. Verimli başlıklar kullanıcılar ile daha hızlı iletişim kurdukları gibi onların fazla düşünmesine gerek kalmadan sitenizin içeriği hakkında bilgi sahibi olmalarını sağlar. Bu kurallar uygulamanız gereken kuralların tamamını içermemesine rağmen tasarım aşamasında göz önünde bulundurmanız gerektiren kurallardır.

1. Başlıklarınızın İçerikten Gözle Görülür Bir Biçimde Ayrı Olmasına Özen Gösterin
Başlıklarınız içeriğinizden farklı ve ayrı bir şekilde görünmelidir. Tıpkı site içi bağlantılarınızın rengini değiştirip altını çizili görüntülediğiniz gibi, başlıklarınızın görünümü de sitenin geri kalanına kıyasla daha özgün olmalıdır. Renkler, yazıtipi boyutu ve farklı yazıtipleri kullanarak başlıklarınıza kontrast uygulayın. Altı çizili elementlerin bağlantılarla sınırlı kalması sitenin genel uyumluluğu açısından önemli olduğunu unutmayın.

2. Daha Sıcak Renkler Kullanın

Sıcak renkler, soğuk renklere oranla daha dikkat çekicidirler. Sıcak renkler aktiftir, dikkat çekerler ve sayfanın geri kalanından daha ön planda görünürler. Soğuk renkler ise sayfayla bütünleşir. Mümkün olduğu kadar sıcak renkler kullanarak okurlarınızın dikkatini daha çabuk çekereken onları içeriğin kendisine odaklanmalarına yardımcı olmaya çalışın.

Facebook Connect * çılgınlığı İnternet’i yıktı geçti. Sadece tek bir düğmeyi kullanarak sitenize kullanıcıları üye edebilmek varken neden sitenize özgü bir kayıt formu oluşturasınız? İşte Facebook Connect’in gücü de burada yatıyor. Bu servis sayesinde çeşitli web siteleri, yazılımlar ve hatta mobil cihazlar bile Facebook ile bütünleşerek iki yönlü olarak bilgi paylaşımında bulunabilirler.

Geçtiğimiz birkaç ay özellikle yazılım geliştiricileri için oldukça yoğun bir aydı zira geliştiricilerin pek çoğu, Facebook Connect servisini web sitelerine entegre etmeye çalıştılar. Ancak bunlarda bazıları diğerlerinden birkaç adım öne çıktı. İşte biz de bu yazımızda Facebook Connect servisini sistemlerine başarılı bir şekilde entegre eden sitelerin bir listesini oluşturmaya çalıştık.

1. Joost

Facebook Connect’i Nasıl Kullanıyor?: Joost bu servisi ilk kullananlardan biriydi ve bildirimleri, güncellemeleri, yorumları ve en sevilenler listelerini Facebook’a aktarmayı başardılar. Elbette Joost’a doğrudan Facebook hesabınızı kullanarak giriş yapabileceğinizi de söylemeden geçmeyelim.

Neden Başarılı?: Joost gerçekten Facebook ile etkileşimin nasıl verimli olabileceğine dair en güzel örnek, sorunsuz girişler, Facebook üzerinden web sitenizi güncelleyebilme ve arkadaşlarınızın göreceği haber besleme öğeleri bunlardan sadece birkaçı.

Sizin de bildiğiniz üzere optimizasyon; Google, Yahoo! ve Live gibi popüler web siteleri için bile çok önemlidir. Bu makalede sadece basit araçlar kullanılarak bu çok ziyaret edilen web sitelerinin yanıt sürelerini nasıl daha çok kısaltabileceğimize ve daha az veri trafiğine yol açabileceklerini analiz etmeye çalışacağız. Bu basit adımlar herkes tarafından satın alınabilecek ücretli ve ücretsiz bazı araçlar kullanılarak yapılabilir. Bu testimizde inceleyeceğimiz web siteleri: Google, Yahoo!, MSN, Live, Wikipedia, Amazon, Facebook ve MySpace.

Testimizi Smushit uygulamasını kullanarak test edeceğiz ve bu sitelerin ana sayfalarından neler kazanabileceğimize bakacağız. Bu araç sitenizde kullandığınız ve dosya boyutu açısından optimize edilebilecek ancak kalitesinden ödün vermeyecek görselleri bulabilmenizi sağlıyor. Bunun yanısıra Yahoo!’nun performans ekibinin yaptığı bir analize göre Yahoo!’da ziyaret edilen sayfaların %20’si boş cache kullanılarak yapılıyor. Sayfa gösterim sayısından daha az olan ziyaret sayıları haricinde biz bu testimizde %5 kullanacağız ve ardından görsellerini optimize ederek ne kadar veri kazanabileceğimize bakacağız.

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:

Gün geçtikçe daha çok web uygulaması Web’e geçiş yapıyor. Platform sorunları ve kurulum gereksinimleri olmadan, bir hizmet olarak yazılım (software as a service) modeli oldukça çekici görünüyor. Web uygulama arabirimi tasarımı, özünde, web tasarımı iken, aslında daha çok üzerine tasarlandığı uygulamanın özelliklerine odaklanır. Masaüstü yazılımları ile yarışabilmek için web uygulamaları basit, yenilikçi ve karşılık veren kullanıcı arabirimleri sunabilmeli ve bunlar da, onları kullanan kullanıcıların ulaşmak istediklerine en kısa yoldan ve onları yormadan ulaşabilmelerine aracılık edebilmelidirler.

Geçmişte web uygulamalarını olması gerektiği kadar dikkate almıyorduk ancak şimdi, web uygulamalarını daha güzel ve daha kullanıcı dostu kılacak bazı tasarım çözümleri ve kullanışlı tekniklere bakmanın zamanı geldi. Bu makale, modern web uygulamalarında kullanışlı tasarım çözümleri ve tasarım öğelerine yönelik yaptığımız derinlemesine araştırmanın ilk bölümünü oluşturmaktadır. Yazının devamında, pek çok başarılı web uygulamasında kullanılan 10 kullanışlı arabirim tasarlama tekniklerini ve en iyi deneyim örneklerini bulacaksınız.

Lütfen yazıyı okuduktan sonra siz de kendinize özgü fikirlerinizi, yaklaşımlarınızı ve kodlama çözümlerinizi bizlerle paylaşmaktan çekinmeyin. Yazının ikinci bölümü de pek yakında yayınlanacaktır.

1. İsteğe Bağlı Arayüz Elementleri
Sadelik, kullanıcı arabirim tasarımında önemlidir. Ekranda ne kadar fazla kontrol elementi gösterirseniz, kullanıcılarınız onları anlamak için o kadar fazla zaman geçireceklerdir. Daha fazla seçenek olduğunda, kullanıcıların kullanabileceği seçenekler onlara daha belirgin gelecek ve onları taramaları daha kolay olacaktır. Bir arayüzü sadeleştirmek burada yazıldığı kadar kolay bir iş değildir, özellikle uygulamanızın özelliklerinden kısmak istemiyorsanız.

Ürününüzün ya da web sitenizin kullanılırlığını arttırmak yapılabilecek en iyi şeylerden birisi de kullanıcılardan geri bildirimler almaktır. Bu yazıda kullanıcılarınızın web sitenizde ne aradıklarını kaçırmadığınızdan emin olmanız için neler yapmanız gerektiğini anlatmaya çalışacağım. Bazen kullanıcılar, sitenize yorum bırakırlar ya da iletişim formları ile sizinle iletişim kurarlar, ancak kullanıcılarınızdan özellikle size geri bildirimde bulunmalarını isterseniz, o zaman daha doyurucu yanıtlar alacaksınızdır.

Körlüğünüzü giderin
Eğer bir web siteniz var ise ya da başka siteler için tasarımlar yapıyorsanız, o zaman tasarım körlüğü konseptinden haberdarsınızdır. Eğer bir tasarıma çok uzun bir süre bakar ve üzerinde çalışırsaız, bir süre sonra o tasarıma karşı tepkisiz hale gelirsiniz. Sitenizin farklı alanlarındaki kusurları gidermek için üçüncü bir göze ihtiyacınız olacaktır, o zaman neden aslında sitenizi kullanan kullanıcılardan yardım istemeyin?

Kendiniz yapın
Kullanıcılarınızdan geri bildirim almak için üçüncü parti bir servisi kullanmadan yapılabilecekleriniz vardır.

Video Klip Ekleyin
Eğer bir web kameranız varsa, kısa bir klip ekleyerek ziyaretçilerinize bir iki soru sorun. Videoyu kaydettiğiniz zaman onu yan çubuğunuza ya da sitenizin en çok ziyaret edilen sayfalarından birine yerleştirin, örneğin sitenizin ana sayfası gibi.Videonuz;

• Ziyaretçilerinize sitenizi ziyaret ettikleri için teşekkür edebilir,
• Onların geri bildirimlerine ihtiyacınız olduğunu belirtebilir ve buna yönelik bir iki soru içerebilir,
• Siteniz üzerinden kullanıcıların nasıl geri bildirim gönderebileceklerini açıklayabilir, ve buna ait bağlantıyı gönderim sayfasının altına yerleştirebilirsiniz.