Posted: Mart 29th, 2002 | Author: İsmail KIRTILLI | Filed under: Web Tasarımı | No Comments »
Tasarımcılar sürekli sınırlı bir alanda çalışmak zorundadırlar. Sitelerin çoğunun, önemli ürünlerini yada içeriklerini ana sayfada göstermek istediklerini düşünürsek, sayfalardaki fazla linklerin, kategorilerin kapladığı alanı çeşitli yollarla azaltmaya çalışma gayreti bir anlam ifade edecektir.
Tasarımcılar karmaşayı azaltmak, yerden kazanmak ve kullanıcı deneyimlerini zengileştirmek için “fly out” menüler, “rollover” menüler, ve dropdown gibi etkileşimli tasarım elemanları kullanırlar. Ancak bu tarz tasarım elemanları kullanırken, gerçek amaçtan uzaklaşılması, kullanıcı deneyimlerinin göz ardı edilmesi her zaman için tasarımcılar için bir tehlikedir.
UIE‘de yakın zmanda yayınlananan bir yazıda böylesi bir yanılgıdan bahsedilmiş, ve yoğun olarak kullanılan “fly out”, “rollover” gibi menü elemanlarının aslında kullanıcı beklentilerini karşılamada yetersiz kalmalarının yanında, zaman zaman onları yanlış yönlendirecek etkiye bile sahip olabildiği irdelenmiş.
Yazı, kullanışlılık testlerinin, kullanıcıların bu tasarım elemanlarının kullanılmadığı sitelerde, kullanılan sitelerdekinin aksine amaçlarına daha kolay ve istedikleri şekilde ulaştıklarını ispatladığını söylüyor.
Teorik olarak, interaktiflik sağlayan tasarım elemanları sitenin kullanışlılığını azaltmadan, alandan tasarruf sağlamalıdırlar. Yine aynı teoriye göre kullanıcıların aradıkları bilgiyi bulup bulamadıklarını ölçsek, interaktif tasarım elemanları kullanılmış bir site ile, bu elemanların kullanılmadığı bir site arasında hiçbir fark göremememiz gerekir.
Ancak özellikle içerik odaklı gezinen kullanıcılar izlendiğinde, bulgular bunun tam tersini göstermiş. Bu tarz interaktif tasarım elemanları kullanılmayan siteler kullanıcıların aradılarını daha kolay bulmalarını sağlamanın yanında, onların daha önceden haberdar olmadıkları değerli içeriği keşfetmelerinde de daha iyi bir rol oynamış.
Aranot:
“Fly out” menüler (google q=fly out menu), DHTML ile bir katmana onmouseover-onmouseout efektleri verilerek, bir butona yada linke tıklanıldığında yada üzerine gelindiğinde açılması sağlanan, mouse çekildiği zaman ise kaybolan menü çeşididir. NTVMSNBC‘nin haber menüleri bu tarz menülerdendir.
“Rollover”lar kullanıcı, mouseunu üzerine getirdiğinde sayfadaki başka bir nesnenin değişmesi üzerine dayalı tasarım elemanlarıdır. Ek olarak, “dropdown” menüler (google q=drop down menu) ise üzerine tıklanıldığında, aşağıya doğru açılan form biçimleridir. (bu konularda yardıma ihtiyacınız olduğunda zoque.com‘daki forumlara başvurabilirsiniz!.)
Araştırma sonunda ortaya çıkan en dikkat çekici nokta ise, kullanıcıların daha “mouse”larını haraket ettirmeden, nereye gidecekleri konusunda karar verdikleri bulgusu olmuş. (Resim 1)
Resim 1: Kullanıcıların çoğu nereye gideceklerine karar vermeden önce “mouse”larını kategorilerin üzerine getirmiyor.
Bu davranış sayfanın uzun olduğu ve sayfayı aşağıya doğru kaydırmak gerektiğinde çok daha yaygın. Kullanıcılar mouse’larını kaydırma çubuğunun üzerine getirip ilgilerini çeken bir şey görene dek yada tıklamaya karar verdikleri noktaya gelene dek hiçbir şekilde ekrandaki “onmouseover” efektlerinin üzerinde dolaşmıyorlar.
Maâlesef, “fly out”, “rollover” ve “dropdown” menülerdeki bilgiler kullanıcılara nereye gideceklerine karar vermede yardımcı olamaz, çünkü kullanıcılar karar vereceği sırada ihtiyaç duydukları bilgiler yanlarında değil. Ancak onlar nereye gideceklerine karar verdikten sonra, o tasarım elemanının söyleyecek bir şeyleri olabiliyor. (Resim 2)
Resim 2: Bir “dropwdown” menünün içeriği ancak kullanıcı üzerine tıkadığında görünür olabiliyor. Peki bir kullanıcı “Motorsports/Other” seçeneğine tıklamadan “Olimpiyat Oyunları” ile ilgili bilgilerin o “dropdown” menüde olduğunu nasıl anlayabilir?
Çalışmalar gösteriyor ki, kullanıcılar daha fazla bilgi olduğunu farkettiklerinde, durup ekranı yeniden inceliyorlar. Ortaya çıkan diğer bir gerçek ise, kullanıcıların eylemlerinin böyle beklenmedik şekilde kesintiye uğradığı durumlarda şaşırdıkları ve doğru yere tıklayıp tıklamama konusunda güvensizlik hissettikleri olmuş. Çünkü önceden daha iyi olduğunu düşündükleri bir seçeneği, diğerleri ile yanyana koyduklarında sorgulamaya başlıyorlamış.
Özellikle bazı “dropdown” ve “fly out” uygulamalar seçim yapabilmek için salakça uğraşlar içine girmemize neden oluyor.
Örneğin MSNBC.com‘un (NTVMSNBC de aynı) sitesinin haberler için kullandığı “fly out” menüde bu tarz bir sorun var. Kullanıcılar şaşkına dönebilirler, çünkü bir kategoriyi seçmeden önce içeriği hakkında bilgi sahibi olmıyorlar ve bazıları da doğal hareketler yüzünden “mouse”larını oynattıklarında menünün kaybolmasından şikayet edebiliyorlar. Bu menü ile o kadar fazla emek sarfediyorlar ki, normalde ilgilerini çekebilecek bir haberi bile kaçırabilirler. (Resim 4)
Resim 4: Kullanıcılar “mouse”larını hareket ettirmeden bazı bölümlerin altında başka hangi bölümler olduğunu öğrenemeyecekler.
MSNBC.com kullanıcıların tersine, CNN.com kullanıcıları ilgilerini çeken haberleri okumanın yanında, daha önce farkına varmadıkları haberlerle ilgili bilgi sahibi de olabliyorlar.(Resim 5)
Resim 5: CNN.com süslü tasarım elemanları kullanmamış. Kullanıcılar kategorileri ve kategorilerin içeriğini kolayca görebiliyorlar. Bu durumda istedikleri şeyi bulmaları konusunda daha kendilerinden emin davranacaklardır.
Bir yandan, yeni interaktif tasarım elemanlarını kullanarak kullanıcı deneyimleri zenginleştirmeye çalışırken, diğer yandan kullanıcı amaçlarının başarıya ulaştırılması göz ardı edilmemelidir. Eğer amaç, kullanıcıların içeriğe kolayca ulaşmalarını sağlamaksa, basit kullanışlılık testleri tasarımcılara amaçlarından uzaklaşıp uzaklaşmadıkları konusunda bir fikir verebilir. Eğer sitenizde bu tarz interaktif tasarım elemanları kullanıyorsanız, bunların kullanıcılarınızın ihtiyaçlarını ne derecede karşıladıklarını anlamak için bazı basit testler yapmanız gerekebilir.
Resimlerin tümü makalenin orjinal adresinden alınmıştır.
Posted: Mart 25th, 2002 | Author: İsmail KIRTILLI | Filed under: Web Tasarımı | No Comments »
Bir site yayına girmeden önce, o sitenin ne kadar kullanışlı olduğunun, ne kadar beklentileri ve kullanıcı ihityaçlarını karşıladığjın test edilmesi, sitenin yayına geçtikten sonra başarılı olup olamayacağının tesbiti yapılan işin amacına ulaşıp ulaşmadığının anlaşılması açısından önemlidir.
Lane Anderson’a göre, başarılı bir site inşa etmenin sırrı, varolan sitenizin tekrar elden geçirilmesinde yatıyor. Elinizdeki siteye gerekli özeni göstererek, eksiklikleri iyi analiz edip, gerekli tedbirleri alarak mevcut sitenizi başarılı bir site haline getirebilirmişsiniz.
Yazının genelinde aslında daha çok başarı hikayelerinden bahsedilmiş. Önceleri belli problemlerle uğraşan bazı sitelerin ne tür adımlar atarak bu engelleri aştıkları anlatılmış. Bütün bu çalışmaların ardında yatan mantık, aslında başkalarının yanlışlarından ders almamız, ve bunların ışığında eğer sitemiz başarısızsa sorunu çözme yönünde gerekli adımları biran önce atmamız gerektiği.
Makalede ayrıca başarılı bir site inşa etmek için bazı ipuçlarına da yer verilmiş. Bunlardan birincisi e-ticaret sitelerindeki müşterilere mal satabilmeyi sağlamak için bazı öneriler , diğeri ise, tanıdığımız bildiğimiz, Jacob Nielsen‘in “Homepage Usability: 50 Web Sites Deconstructed” kitabından bahsettiği Tasarım Elemanlarının iyi bir özeti.
Kullanışlıklık gurusu Nielsen‘e göre test, site tasarımının göz ardı edilemez bir parçasıdır. Ancak bütün getirilerine rağmen, Nielsen‘in tahminine göre şirketlerin sadece yüzde 20 gibi bir bölümü Internet projelerini online yapmadan önce test aşamasına tâbî tutuyorlar.
E-ticaret sitelerinde kullanıclara birşeyler satmayı başarabilmek için:
1. Kayıt işlemini isteğe bağlı yapın.
Kullanıcıların, daha alışverişlerini yapmadan kendilerinden kayıt yapmalarını isteyen siteleri terk etme olasılıkları daha yüksekmiş. (sadece alışveriş için değil, gereksiz olduğuna inandığım her türlü kayıt işlemi, beni bir siteden soğutuyor.
2. Ulaştırma masrafları yada benzer ek masraflarla ilgili olarak müşterinizi önceden haberdar edin.
Teste tâbî tutulan kullanıcıların yüzde 80′i daha “Satın Al” butonuna gelmeden önce, ileride kendilerine masraf olarak gösterilcek ek ücretlerden haberdar olmak istiyorlar.
3. Özel fiyatlı ürünleri, indirimleri, kampanyaları vurgulayın.
Bir çok web alışverişçisi genelde indirimler, yada normal mağazalarda alabileceklerinden daha ucuz ürünler için aranırlar. Özel fiyat seçenklerini, fiyat indirimlerini sitenizde ısrarla vurgulayın.
4. Alınanlar listelerini kısa tutun ve tek bir sayfada gösterin.
Teste katılanların yüzde 60′ı aldıkları ürünlerin litesinin tek bir sayfada görünmesini tercih ettiklerini söylemişler. (sanırım daha çok karşılaştırma amaçlı bir içgüdü.)
5. Müşterilerinizin sepetlerine ekledikleri ürünleri kaydedin.
Bu daha çok bir mağazada beğendiğimiz bir şeyi aradan bir zaman geçtikten sonra tekrar alamk için o mağazaya gitmenize benziyor. Internet müşterileri de genelde daha önceden sepete attıkları yada seçtiklerib bir ürünü daha sonra tekrar almak için dönebiliyorlarmış. Bu yüzden müşterilerin seçtikleri ürünü 30 gün yada daha fazla bir süre için saklamalarına izin verin.
Her müşteri yada her site için doğru tek bir tasrım çeşidi bulmak mümkün değil mutlaka, ancak kullanışlılık gurusu Jakob Nielsen sitenizi her hâlükarda daha kullanımı kolay hale getirmenize yardım edecek bazı öneriler (TASARIM ELEMANLARI) sunuyor.
Sayfa uzunluğu.
Sayfanzın uzunluğu en fazla 3 tam ekran boyutunda olsun. Sitedeki önemli özellikler, önemli linkler ve en fazla kullanılan bölümler hep sitenizin üst kısmında bulunsun.
Logo.
Logo ziyaretçilerin ilk baktığı (yada gördüğü) şeydir. Logoyu sayfanızın sol üst köşesine yerleştirmeye çalışın.
Arama.
Arama motorunu sayfanızın üst kısmına koyun; bir arama kutucuğu, arama sayfasına götüren bir linkten çok daha etkili olacaktır.
Yüklenme süresi.
Sayfanın yüklenme süresi en fazla 10 saniye olmalıdır. Sitenizi dial-up bağlantı ile ziyaret eden kulanıcılar için maximum sayfa boyutunu 50 Kb olarak düşünün.
Metin rengi.
Ana metin için daima siyah kullanmaya çalışın. Siyah, profesyonel gözükmesinin yanında, göz için okuması çok daha kolay bir renktir.
Artalan rengi.
Beyaz en güzeli: temiz ve zihni karıştırmayan bir yanı var. Daha önceki Kazanan Siteler yazılarından hatılryacağınız gibi Amazon.com ve Yahoo gibi başarılı siteler hep beyaz artalnı tercih ediyorlar.
Link renkleri.
Genel olarak mavi tavsiye ediliyor. Ziyaret edilen renkler için ise yine vasayılan renk, mor öneriliyor. Eğer bu sitenin genel tasarım bütünlüğünü bozacak gibiyse, ziyaret edilen linkler çok kafa karıştırmayacak başka bir renk te olabilir.
Posted: Mart 17th, 2002 | Author: İsmail KIRTILLI | Filed under: Web Tasarımı | No Comments »
İşe yarar bir tasarım yapmada bütün kullanışlılık teorilerinin ötesinde “user experience”, insan psiklojisi ve genel davranış biçimleri de oldukça önemli. Steve Krug “Dont Make Me Think” adlı kitabının 4.3′üncü bölümünde özellikle bundan bahsetmiş.
Biz siteleri tasarlarken, insanların sayfalara dikkatle bakacağını, itina ile hazırladığımız metinleri dikkatle okuyacağını, herşeyi nasıl yerli yerinde iyice düzenlediğimizi farkedeceklerini ve bir linke tıklamadan önce onlara sunduğumuz seçenekleri iyice tartıp, düşüneceklerini varsayıyoruz.
Ancak gerçek biraz daha farklı. Kullanıcılar genelde sayfalara şöyle bir göz ucuyla bakıyor, metinlerin bazı ksımlarını okuyor, ve aradıkları şeye benzeryen yada ilgilerini çeken bir link gördüklerinde ona tıklıyorlar. Genelde sayfanın büyük bölümüne bakmıyorlar bile.
Krug’a göre, etkili web sayfaları tasarlamak istiyorsak, webin kullanımıyla ile ilgili 3 şeyi bilmemiz gerekiyor:
#1: Kullanıcılar sayfaları okumuyor, göz atıyor.
Webin kullanımıyla ilgili gerçeklerden birisi, okumak için çok az zaman harcadığımızmış. Çünkü, okumak yerine gözümüze takılan yada ilgimizi çeken kelime yada paragrafları okumayı terchi ediyoruz. Haberler, ürün açıklamaları gibi bilgiler içeren dokümanlar genelde daha özenle okunuyor, ancak buna rağmen, eğer doküman birkaç paragraftan uzun ise, bu tarz dokümanların bile çıktısını alıp kağıttan okumayı tercih ediyoruz.
Niye sadece göz atıyoruz?
- Genelde hep telaşla dolaşıyoruz webte. Krug’a göre, web kullanımının çoğu zaman tsarrufu amaçlıymış. Gerekli olduğundan fazlasını okumaya vaktimiz yokmuş.
- Herşeyi okumamız gerekmediğini biliyoruz. Sayfaların çoğunda sadece sayfadaki bir konunun ufak bir parçasına dikkatimizi veriyoruz. Şöyle bir göz gezdirerek ilgimizi çeken noktaları yakalmaya çalışıyoruz.
- Bu konuda oldukça iyiyiz. Gazeteleri, dergileri kitapları yaşamımız boyunca hep böyle okuyoruz ve bunun işe yaradığının farkındayız.
Bir web sayfasında baktığımızda gördüklerimizi daha çok kafamızda olanlarla ilgili oluyor. Bu ise genelde sayfanın bütününde anlatılanın sadece bir parçası oluyor.
özetleyecek olursak;
(a) amacımıza yönelik,
(b) mevcut ilgilerimize dair,
(c) sinir sistemimizi yada dürtülerinizi harekete geçiren kelimelere karşı -örneğin “Free,” “Sale,” ve “Sex.”- daha fazla ilgi gösteriyoruz.
#2-En iyi seçeneği seçmiyoruz, aklımıza yatanı seçiyoruz.
Bizler siteleri tasarlarken, kullanıcıların sayfanın tümünü okyacağını, bütün seçenekleri gözden geçirip en uygun olanını seçeceklerini düşünüyoruz. Gerçekte ise, çoğu zaman en iyi seçeneği seçmiyoruz, bize o an için en makul gelen şeyi seçiyoruz. Aradığımız şeye benzeyen, yada bize onu çağrıştıran bir link gördüğümüzde ona tıklayıveriyoruz.
Peki niye web kullanıcıları en iyi seçeneği aramıyorlar?
- Genelde acelemiz var. Seçenekleri üzerinde düşünmek zor, ve zaman alıyor.
- Yanlış seçimler için çok fazla bir ceza yok. Bir web sitesindeki yanlış seçim için en büyük ceza bir iki fazla tıklama yada “back” butonuna birkaç kez basmak olabilir.
- Seçenekleri değerlendirmek için zaman harcamak her zaman şanısmızı arttırmaz. Özellikle kötü tasarlanmış sitelerde, en iyi seçimi yapmak için gösterilen çaba gerçekte size hiç te yardım etmeyecektir zaten. Bu yüzden, ilk aklınıza geleni seçip, daha sonra “back” butonunu kullanmak daha kolay gelmektedir.
- Tahmin etmek daha eğlenceli.Seçenekler üzerinde kafa yormaktan daha az çaba gerektiyor ve eğer doğru ise daha da hızlı oluyor. Ve bir tür şans işin içine girdiğinden, sonuçta surpriz yada heyecan verici bir şey bulma ihtimâli var.
Tabii ki, bu kullanıcıların karar vermeden önce hiç düşünmedikleri anlamına gelmiyor. Bu genelde kafalarında ne olduğuna, o sırada ne derece baskı altında olduklarına yada site ile ilgili kendilerine ne derece güven duydukları gibi kriterlere göre değişebiliyor.
#3-İşlerin nasıl işlediğini anlamıyoruz, daha çok günü kurtarıyoruz.
Websiteleri yada yazılımlar ile ilgi yapılan kullanışlılık testlerinde ortaya çıkan en büyük gerçeklerden brisi insanların hergün kullandıkları araçları, hiç anlamadan yada nasıl çalıştıları konsunda yanlış düşüncelerle kullandıklarıdır.
Herhangi bir tür teknoloji ile karşılıldığında, çok az kişi izlenmesi gereken notları dikkate alarak işe başlıyor. Onun yerine, deneme-yanılma yöntemiyle işe başlanıp herşeye rağmen aracın çalıştırılması sağlanıyor. Sonuçta da aracın çalışma biçimi konusunda hikayeler uyduruluyor.
…
Posted: Mart 3rd, 2002 | Author: İsmail KIRTILLI | Filed under: Web Tasarımı | No Comments »
Navigasyon bir sitenin en hayatî, onu diğer sitelerden ayırına en önemli parçalarından birisi. Zeldman‘ın çok güzel bir sözü var,
“Her navigasyonun sistemi faklıdır, çünkü her sitenin amacı, hitap ettiği kitle farklıdır.”
Bu anlamda navigasyon bir kullancıın bir sitedeki deneyiminin en önemli parçalarından birisi. Aradığını bulmasında, bulunduğu yeri konumlandırmasında, site ile ilgili genel bir fikir oluşturmasında navigasyonun önemi büyük.
Son günlerde navigasyon üzerine okuduğum çeşitli yazılardan farklı farklı notlar almıştım, onları paylaşayım dedim. Aklıma geldikçe yenilerini eklemeyi ve ileride de bir okuma listesi vermeyi umuyorum.
İdeal bir navigasyon nasıl olmalıdır?
- Navigasyon anlaşılır olmalıdır.
Navigasyon öğelerinin sıraları ve bu öğeler için verilen ipuçları kolay-anlaşılır olmalıdır.
- Navigasyon tutarlı olmalıdır.
Navigasyonda kullanılan renkler, navigasyonun sayfadaki yeri, kullanılan font rengi, boyutu, hepsi belli bir tutarlılık içinde olmalıdır. Sitenin tamamına uyabilecek bütüncül bir navigasyon oluşturulmaya çalışılmalıdır.
- İkonlar tek başlarına kullanılmamalıdır.
İkon kullancaksa ikonlar, sezgisel olarak ta belli anlamlara gelecek şekilde kullanılmalıdır, ve mutlaka yanlarına metin de eklenmelidir. Böylece, metin ve resim birlikte kullnarak soyut-somut dengesi de oluşturulmuş olur.
- Navigasyonun okunur olduğundan emin olunmalıdır
Uygun boyutlarda sans serif font tercih edilirse, bu sorun biraz olsun ortadan kalkacaktır.
- Açık ve anlaşılır başlıklar kullanılmalıdır.
Kurnazca seçilmiş isimler sadece sizin için bir anlma ifade edebilir.
- Temel kullanıcı beklentileri dikkate alınmalıdır.
Daha önce de bahsetmiştim, genelde bir navigasyonyun yeriyle ilgili kullanıcı beklentileri, navigasyonun solda olması grektiği yönünde. Bu yüzden temel navigasyon öğelerini sola yerleştirmek artı bir puan olacaktır.
- Navigasyonun site içindeki yeri konumlandırılmalıdır.
Kullanıcılara nerede oldukları, neler yapabilecekleri, nereye gidebilecekleri ile ilgili ipuçları verilmelidir.
- Farklı özellikteki kullanıcı tipleri dikkate alınmalıdır.
Internet Explorer’ın seçenekleri arasında görmüşsünüzdür, seçeneklerden birisi “don’t show images”.
Sadece metinleri gösteren browser kullananları da düşünerek, sitenin navigasyonunda metinlerin de kullanması unutulmamalıdır. (tabii alt tagları da ihmal etmemek gerekiyor.)
- Navigasyon öğelerinin sayıları dikkatli seçilmelidir.
“User experience” testleri kullanıcıların fazla seçenekle karşı karşıya kaldıklarında rahatsız olduklarını gösteriyor. Bu yüzden navigasyonda 4 ile 7 arası öncelikli seçenekler verilmelidir.
Bunların yanında “geri” butonu ve sayfa başlıkları ile ilgili de birkaç hatırlatma var.
“Geri” butonunu unutun, unutturun.
Navigasyon sistemini oluştururken asla “Geri” butonuna güvenmeyin – sitenizin navigasyonu kullanıcı için yeterli ipuçlarını ve seçenekleri içermeli, böylece kullanıcılar her fırsatta “Geri” butonuna ellerini atmazlar. (zor gibi gözüküyor)
Sayfa başlıkları da oldukça önemli.
Sayfa başlıkları site ismini tekrarlamalı, aynı zamanda o sayfanın içeriğini -en fazla 10 kelime olmak koşuluyla- anlatacak şekilde düşünülmelidir.