Eskiden bu basligi gordugumuzde aninda sinirlerimiz gerilir, tasarimcilari savunmaya gecerdik. Buyuk olasilikla cogunda hakliydik da.

Cunku, bu tur tanimlamalar yapan sirketler cogunlukta bir tasarimciyi alip, kole gibi calistirmayi ve kendi masraflarini kismayi planliyor olurdu. Hatta isin icine cogu zaman programlama bilgisi de dahil edilirdi.

Simdilerde ise sektor daha iyiye gidiyor. En azindan bu tur calisan arayan firmalar azaldi, insanlar uzmanliklari disinda bir seyler yapmamaya basladi.

Ancak...

Son zamanlarda biz, sirket olarak "HTML/CSS ve JS'ye hakim web tasarimci araniyor"a geri donus yaptik. Hayir, masraflari kismaya calismiyoruz. Hayir tum isleri bir kisiye yikip, tek bir insanin hem tasarim, hem de kodlama yapmasini beklemiyoruz. Peki neden boyle bir kistasta tasarimcilar ariyoruz?

Cevabi cok basit. Deneyimlerimiz gosterdi ki eger bir tasarimci kendini sadece tasarim alaninda gelistirmekle kalmamis, HTML/CSS'i kapmis, uzerine biraz da Javascript biliyorsa kesinlikle piyasadaki binlerce insandan cok daha iyi kullanici deneyimleri yaratabiliyor.

Bunu biraz daha ileri gotureyim. Normalde bir tasarim surecinin su sekilde olmasi beklenir:

• Plan, dusunme: Sorunlar neler, nasil cozmeyi planliyorsun, ne tur bir stil kullanacaksin vs.
• IA / Wireframe cikarma: Once bilgiyi tasarla. Boylece bir cok sorunu basta cozeceksin.
• Tasarim deneyimleme: Tasarlamaya basla, onlarca metod dene, en guvendigini sec.
• Tasarim finali: Her seyi toparla, finalize et.

Biz -ve Facebook gibi bazi buyuk firmalar- araya iki adim daha koyuyoruz.

• Plan, dusunme: Sorunlar neler, nasil cozmeyi planliyorsun, ne tur bir stil kullanacaksin vs.
• IA / Wireframe cikarma: Once bilgiyi tasarla. Boylece bir cok sorunu basta cozeceksin.
• Tasarim deneyimleme: Tasarlamaya basla, onlarca metod dene, en guvendigini sec.
• Hizli HTML demolar yap: Boylece etkilesime de karar verebilirsin, tasarimini gercek dunyada gorebilirsin, daha da onemlisi kullanabilirsin. Tum bunlar tasariminin calisip calismadigini gormeni saglar.
• Mutlu musun?: Eger degilsen geri don, hatalarini gider.
• Tasarimlarini bitir.

HTML demolar yapmak bizce artik tasarimin cok onemli bir parcasi. Kisaca acikladigim uzere tasarimlarinizi, gelistiricilere gondermeden once canli hale getirmek hem sizin tasarim hatalarinizi gidermenizi ve/veya dusunmeyi unuttugunuz senaryolari tasarlamanizi saglar. Ayni zamanda gelistirici ekipte bulunan takim arkadaslarinizi da ek yukten kurtarmis olursunuz.

Burada cok onemli bir detaya dikkatinizi cekmek istiyorum. HTML demolar yaparken kullandiginiz kodlar gercek hayatta kullanilmak zorunda degil. Yani tasarimci aslinda gercek siteyi kodlamiyor, sadece bir deneyimi kodluyor. Iste bu kilit nokta basliktaki ilan tanimini digerlerinden ayiran en buyuk ozellik.

Tum bunlari bir kenara koyalim, eger bir tasarimcinin HTML/CSS kodlamaya hakim olmasi cogumuzun kabul edecegi gibi, tasarladigi sitelerde mantikli kullanici deneyimleri tasarlamasinda yardimci olacaktir.

Eger bir yemegin nasil pisirilecegini bilmeden, o yemegi yapmak hakkinda yorum yapiyorsaniz, buyuk ihimalle bos konusuyorsunuzdur. Eger o yemegin hakkinda her konuda bilgi sahibiyseniz, onu daha da guzel yapabilirsiniz.

Sizin calistiginiz ortamda bu isleyis nasil? Siz ne dusunuyorsunuz?

Not: Her ne kadar yanlis anlasilacagini bilsem de, bu yazi bir is ilani degildir.

Bu isin icinde olan herkes hemen hemen bir sekilde rastlamistir. Web tasariminda gorsellerin (gorselden kasit sekil, ikon, resim veya fotograf) kullaniminin onemli oldugu dusunulur. Ornegin sadece yazidan olsan bir sayfada mutlaka bir gorsel koymalisinizdir. Aksi halde sayfa cok bos, sig gorunecektir.

Peki gercekte oyle mi? Sayfaniza gorseller koydugunuzda gercekten kullanicilari mutlu ediyor musunuz?

User Interface Engineering'in bu konuda guzel bir makalesi var. Sonuca varmadan once bazi tanimlamalar yapalim. Tasarimda kullanilan gorseller belli gruplara ayriliyor:

Yonlendirici gorseller

Bu tip gorseller, kullaniciya yol gostermek icin kullaniliyor. Ornegin bir menudeki ikonlar veya bir alisveris sitesindeki kategori fotograflari bu kategoriye dahil edebiliriz. Ancak burada alti cizilmesi gereken bir nokta var. O da kastedilen gorsellerin kesinlikle suslemek amaciyla kullanilan degradeli kutular, web 2.0 butonlari vesaire olmadigi.

Icerik gorselleri

Adi uzerinde bu gorseller ise icerigin kendisi ile alakali. Mesela yine bir alisveris sitesinde bulunan urune ait fotograflar, iletisim sayfasindaki kroki gorseli veya sirket calisanlari sayfasindaki insanlarin fotograflari gibi.

Susleyici gorseller

Bu tur konumuzun asil kahramani. Bu gorseller, uzerinde dusunmezseniz size aslinda cok mantikli, faydali gorseller gibi gelebilir. Ornek vermem gerekirse uyelik sayfaniza koyacaginiz el sikisan insanlar (guven mi yaratir?), misyonumuz sayfasinda yer alan artistik fotograf (sizi "cool" mu gosterir?) veya anasayfada yer alan bir unlunun fotografi (kaliteli mi gosterir?)...

UIE'nin arastirmasi gosteriyor ki yonlendirici ve icerik gorselleri kullanici deneyimini olumlu yonde etkiliyor. Cunku bu gorseller icerik ile alakali ve kullanicilarin okumasina gerek kalmadan onlara yol gosteriyor, fikir verdiriyor.

Ote yandan susleyici gorsellerin etkisi tartisilir. Aslinda buyuk oranda olumsuz bir etkisi oldugunu soyleyebilirim. Zira, susleyici gorseller cogunlukla icerikle hic alakali olmuyor, kullaniciya bir sey anlatmiyor, hayatini kolaylastirmiyor. Bu yuzden negatif etkiler yaratabiliyor. Simdi ornekleri birer birer curutelim.

• Uyelik sayfaniza koyacaginiz el sikisan insanlar: Birilerin el sikismasi gercekten sizde guven duygusu yaratiyor mu? Yoksa yuz binlerce sitede gorunen fotograflar gibi, sadece siradan mi geliyor baska sitede gordugunuzde? Televizyon reklamlarini dusunun, bankada danseden ve dansederken el sikisan insanlar sizi gercekten etkiliyor mu?
• Misyonumuz sayfasinda yer alan artistik fotograf: Bu fotograf cok sahane bir acidan, inanilmaz isik dengesiyle cekilmis, sitenizle tamamen uyumlu renklere sahip bir manzara fotografi olabilir. Tek basina olsa, herkes hayran kalacak. Ancak misyon sayfasinda isi ne? Gelen ziyaretci ne dusunecek? Bu sirketin misyonu bana boyle bir manzara saglamak mi?
• Anasayfada yer alan bir unlunun fotografi: Cogumuz unluleri severiz. Ancak cogumuz ayni unluyu sevmeyiz. Seda Sayan'in seveni cok olabilir, ancak bir o kadar insana antipatik de gelebilir. Ustelik Seda Sayan'in firmanizin anasayfasinda ne isi var?

Gorsellerin insanlar uzerinde farkli etkileri var. Dogru kullanilan gorseller, ziyaretciye iyi bir deneyim yasatip, sitenizden mutlu ayrilmasini saglayabilir ancak susleyici gorseller, bir baska deyisle gereksiz gorseller, gereksiz olmaktan baska bir ise yaramazlar.

Ister web sitelerinin mutfaginda olun, isterseniz siteyi yaptiran siz olun, beyninizin size oynayacagi oyuna denk gelmeyin:

Bu kedi fotografini buraya koyayim, herkes cok begenecek!

2006'da Google VP'si Marissa Mayer katildigi Web 2.0 konferansinda Google'da yaptiklari bir kullanici testinden bahsediyor.

Ekip, oncelikle Google'da arama yapan kullanicilara bir sayfada kac adet arama sonucu gormek istediklerini soruyor. Kullanicilar 10 sonucun az oldugunu, daha fazla istediklerini soyluyorlar.

Marissa da bir A/B testi yaparak bazi Google kullanicilarina 10 yerine 30 adet arama sonucu gosteriyor. Testler sona erdiginde goruluyor ki trafik be gelirlerde %20 oraninda dusus goruluyor.

Peki neden? Kullanicilarin cogu daha fazla sonuc gormek istemedi mi?

Istediler. Ancak, 10 sonuc gosteren sayfa 0.4 saniyede acilirken, 30 sonuc gosteren sayfa 0.9 saniyede aciliyordu. Dusununce inanilmaz kucuk olan bu zaman dilimi %20'lik bir kayiba neden oldu.

Bir diger hikaye ise Amazon'dan. Amazon, yine bir A/B testinde sayfa acilislarini bilerek sadece 100 milisaniye geciktiriyor. Sonuc, gelirlerde onemli olcude dusus.

Sanirim hikayelerin soylemek istedigi oldukca acik.

Bir tasarımcı olarak favori renginiz nedir? Sitelerinizi tasarlarken rengi neye göre seçersiniz? Veya bir ziyaretçi olarak en çok hangi renkler hoşunuza gider?

Tüm bu soruların cevapları elbette kişiden kişiye büyük değişiklik gösterecektir. Orta yolu da bulmaya çalışmayacağım. Ancak yazılacak yazılar listemde bir süredir beklettiğim bir kaynağı paylaşacağım.

A2591.com, Internet'in rengi ne başlığı altında şahane bir rapor çıkarmış. Arkadaşlar, Alexa ve Technorati verilerini baz alarak, dünyaca en popüler sitelerin renklerini analiz etmişler. Çıkan sonuçlar şu an için çevirimiçi elde edilemese de yakın zamanda diğer ürünleriyle beraber satışa sunulacakmış.

Yine de bir genel bakış olarak yukarıdaki grafikten faydalanabilirsiniz. Görüyoruz ki; bloglar genellikle kırmızı ve tonları, tasarım siteleri gri ağırlıklı, oyun siteleri de yeşil ağırlıklıymış. Genel bakışta ise mavi rengin hakim olduğu görülüyor.

Bu yazıda konumuz Google'ın arama motorunu kullanarak sadece kendi sitemizde arama yapan bir arama motoru hazırlamak.

2000'lerin başında Google bu kadar Google olmamışken, şu an ismini hatırlayamadığım bir servis vardı. Hatta bir dönem SiberKültür için de kullanmıştım. Bu servis o zamanlar Google Custom Search'ın yaptığını yapıyordu. Ancak biraz daha farklı. Siz sitenizi veriyordunuz, onların arama motoru gelip düzenli olarak indeksliyor ve arama sonuçlarını sizin hazırladığınız tema üzerinden veriyordu. Yani Google Custom Search'ın (GCS) atalarından biri. Hatırladığım kadarıyla oldukça da işkenceli bir prosesti bu servisi kullanmak.

Şimdilerde GCS var. Sadece iki adımda sitenize özel, hızlı bir arama motoru yaratabiliyorsunuz. Eğer bu servisi ilk çıktığı zamanlarda denemişseniz, siz de iyi sonuç vermediğini düşünebilirsiniz. Ancak yeni Google teknolojileriyle sonuçlar gayet verimli.

Sitenize GCS kurmak ve bunu tamamen kendi sunucunuzda çalışıyor gibi göstermek için yapmanız gerekenler şu şekilde:

1. google.com/coop/cse/ adresine giderek Create a Custom Search Engine tuşuna basın.
2. 1. adımda arama motorunun adını, tanımını, dilini ve arama yapılmasını istediğiniz web adreslerini girin.
3. 2. adımda test görünümünü elde edeceksiniz.
4. Bu adımlardan sonra dilerseniz size verilen kodu arama fonksiyonunuzun olacağı yere koyarak direkt çalışmasını sağlayabilirsiniz.
5. Eğer kendi sayfa görünümünüzde verilmesini istiyorsanız My Search Engines altındaki ayarlara göz atmanız gerekecek. Control Panel'e tıklayarak ayarlarınıza geçin.
6. Basics altında temel ayarlarınızı bulacaksınız. Eğer kişisel veya gelir elde etmeyen bir kullanımınız varsa arama sonuçlarından reklamları kaldırabilirsiniz. Eğer Google Adsense kullanıyorsanız kendi reklamlarınızı da yerleştirip, gelir elde edebilirsiniz.
7. Look and Feel sayfasında arama kutunuzun nasıl görüneceğini seçebilirsiniz. Sayfanın altlarına doğru ise arama sonuçlarındaki renkleri sitenizin renklerine göre değiştirebilirsiniz.
8. Code kısmı önemli bir sayfa. Eğer başta dediğim gibi GCS arama sonuçlarının siteniz altında görünmesini istiyorsanız 2 seçeneğiniz var. Birincisi sunucunuzda bir sayfa yaratabileceğiniz iframe seçeneği, diğeri ise yeni bir seçenek olan overlay seçeneği. Benim tavsiyem, iframe olacaktır. Zira overlay seçeneği JavaScript ve AJAX kullandığı için pek de kullanışlı değil. iframe'i seçtikten sonra adres kısmına arama sonuçlarının yayınlanacağı sayfayı yazmanız gerekiyor. http://siberkultur.com/arama.php gibi. Bunu yazdıktan sonra aşağıdaki 2 kod bloğu değişecek. İlk kutudaki kodu, arama kutunuzun olmasını istediğiniz yere yerleştirmelisiniz. 2. kodu ise arama sonuçlarının çıkacağı arama.php dosyasına yerleştirmelisiniz. Arama.php dosyası sizin sitenizin tasarımında olabilir. Kodu içerik alanına yerleştirebilirsiniz.
9. Eğer arama sonuçlarındaki reklamlardan gelir elde etmek istiyorsanız, Make Money'e tıklayarak Google Adsense hesabınız ile bağlamalısınız. Google Adsense hesabınıza girip, erişime izin vermeniz gerekecek.

SiberKültür için hazırladığım örneği buradan görebilirsiniz. Ben görünümü ile uğraşmadım ancak bir örnek teşkil edebilir.

Yedincisenol, aslında temel olarak bir grafik üretme aracı olan Open Flash Chart'ın nasıl kullanılacağını anlatmamı istemiş. Ancak ben Open Flash Chart'ın yanında JavaScript alternatiflerine de değineceğim.

Open Flash Chart (OFC)

OFC, LPGL lisansı ile gelen açık kaynaklı bir uygulama. OFC ile çizgi, bar, pasta, alan, radar ve benzeri birçok türde grafikler oluşturabiliyorsunuz. Bunun için flash kullanmanıza da gerek yok.

Tek yapmanız gereken OFC ile gelen JavaScript dosyasının yanında SWF dosyasını sunucunuza yüklemek, JavaScript kodu ile bu dosyaları, grafiği koyacağınız alanda çağırmak (JS dosyasını sayfanın headerında çağırmanız daha doğru olacaktır) ve bu JS kodlarında grafiğin boyutlarını ve veriyi nereden çekeceğini belirtmeniz.

Yerleşim kodlarından sonra en önemli alan OFC'ye gelecek verinin hazırlanması. Hazır grafik üretgeçlerinin en güzel yanı, gelen verinin dinamik olması. Yani siz grafikleri Excel'de hazırlayıp resim olarak da koyabilirsiniz ancak veriler değiştiği zaman güncellemek çok zor olacaktır.

OFC veri formatı olarak JSON kullanıyor. Bu da veri tarafında büyük esneklik sağlıyor. OFC sitesinde PHP, Ruby, .Net, Perl, Java ve Python gibi değişik platformlarda kullanıma dair örnekleri sunmuş. Ayrıca JS ile de kullanabiliyorsunuz. Bunun örnek kodları OFC'nin tutorials sayfasında paylaşılmış.

OFC'nin güzelliği, grafiklerin daha interaktif olabilmesi. Bundan kastım, grafik üzerindeki öğerelere gelince verilerin birimleri de çıkıyor. Google Analytics kullanıcısı iseniz, bu tür grafiklere alışkınsınız diyebilirim.

Diğer alternatifler

Bunun en büyük alternatifi, performans ve optimizasyon açısından Google Chart API (GCApi) diyebilirim.

GCApi, ekstradan bir dosya kullanmıyor. Bununla ürettiğiniz her grafik, bir imaj dosyası olarak anlık üretiliyor. Yani tek yapmanız gereken

http://chart.apis.google.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World

gibi bir kodu img ile çağırmak. API sizin için grafiği imaj dosyası olarak üretiyor.

GCApi de oldukça farklı grafik çeşidine sahip. Aynı zamanda renklerini de yine siz belirleyebiliyorsunuz. Eğer veriyi dinamik olarak vermiyor veya örnek yaratmakta zorlanıyorsanız GCApi'nin arayüzü sayılabilecek çevirimiçi servisler bulunuyor 1 - 2.

Bu iki uygulamanın dışında JS Charts, jQchart (jquery eklentisi) ve birçok kurumsal ürün de mevcut. Ancak en popülerleri bu ikisi.

Hepimiz IE6'ya karşı verilen savaştan ve bunun nedenlerinden haberdarız eminim ki. Bunları tekrar tekrar hatırlayıp günümüzü karartmamıza gerek yok (1 - 2 - 3).

Ancak güzel bir haber, Norveç toplu bir harekete geçiş ile IE6'ya savaş açmış durumda. Ülkenin en büyük alışveriş siteleri, en büyük gazetelerinin web siteleri ve daha birçok web sitesi IE6 ile giriş yapan kullanıcılarına çok eski bir tarayıcı kullandıklarını, bunu değiştirmeleri gerektiğini hatırlatıyor.

Facebook da bu akıma katılanlar arasında. Yapılan şey, IE6 kullanıcılarını tamamen dışlamak yerine, onlara özel bir mesaj göstererek yapabileceklerini göstermek.

Çok mutluyum ki, SiberKültür de birkaç aydır böyle bir uygulama içerisinde. SiberKültür'e IE6 ile girmek isterseniz aşağıdaki mesaj ile karşılaşıyorsunuz:

Sevgili ziyaretçi,

Kullandığın tarayıcı (Internet Explorer 6) 2001 yılında üretilmiş, artık geliştirilmesi durdurulmuş bir tarayıcı.

Bu demek oluyor ki; SiberKültür.com dahil, birçok web sitesini gezerken tarih öncesi bir araçla geziyorsun. Bu Mercedes varken, Şahin'e binmek gibi bir şey.

Hemen, şimdi hem kendini, hem de sen tarih öncesi tarayıcınla web sitelerini düzgün gezebil diye saatlerini harcayan geliştiricilerini bu eziyetten kurtarmak için tarayıcını yenileyebilirsin. Eğer yenileme işlemini gerçekleştiremiyorsan, büyük ihtimalle bir sistem yöneticisine sahipsindir. Gidip onun başının etini yiyebilirsin. Bu senin hakkın. İşte sana bazı yeni nesil web tarayıcılar: Apple Safari, Mozilla Firefox, Opera, Internet Explorer 8 ve Google Chrome.

Her zaman söylediğim gibi, IE6'yı sevmeyip sadece söylenmek yeterli değil. IE6 kullanıcılarının erişimini tamamen yasaklamak da çözüm değil. Onları bilgilendirmek, aksiyona geçirmek asıl önemli olan.

Siz de yukarıdaki gibi bir mesajla kullanıcılarınızı bilinçlendirebilirsiniz. Üstelik bu mesaj sadece IE6 kullanıcılarına görünecek, diğer kullanıcılarınız farkında dahi olmayacaklar. Bunun için SiberKültür'de hazırladığım mesajı kullanabilir, kendiniz yenisini yazabilirsiniz:

<!--[if IE 6]>
<div style="text-align: left; padding: 10px; background: #bb0000; color: #fff;">
Sevgili ziyaretçi,
Kullandığın tarayıcı (Internet Explorer 6) 2001 yılında üretilmiş, artık geliştirilmesi durdurulmuş bir tarayıcı.
Bu demek oluyor ki; SiberKültür.com dahil, birçok web sitesini gezerken tarih öncesi bir araçla geziyorsun. Bu Mercedes varken, Şahin'e binmek gibi bir şey.
Hemen, şimdi hem kendini, hem de sen tarih öncesi tarayıcınla web sitelerini düzgün gezebil diye saatlerini harcayan geliştiricilerini bu eziyetten kurtarmak için tarayıcını yenileyebilirsin. Eğer yenileme işlemini gerçekleştiremiyorsan, büyük ihtimalle bir sistem yöneticisine sahipsindir. Gidip onun başının etini yiyebilirsin. Bu senin hakkın. İşte sana bazı yeni nesil web tarayıcılar: <a href="http://www.apple.com/safari/" style="color: #fff;">Apple Safari</a>, <a style="color: #fff;" href="http://www.mozilla-europe.org/tr/">Mozilla Firefox</a>, <a style="color: #fff;" href="http://www.opera.com/">Opera</a> , <a href="http://www.microsoft.com/windows/Internet-explorer/beta/default.aspx" style="color: #fff;">Internet Explorer 8</a> ve <a href="http://www.google.com/chrome" style="color: #fff;">Google Chrome</a>.
</div>
<![endif]-->

Bu kodlar, kırmızı bir arkaplan içerisinde beyaz yazılarla mesajı yazdıracaktır.

Norveç'in hareketine göz atmak ve destek olmak için Facebook gruplarına üye olabilirsiniz.

Bildiğiniz üzere görme engellilerin Internet deneyimini yaşamak için ekran okuyucu programlar yardımıyla web sayfalarında geziyorlar. Ekran okuyucu programlar, web sayfası üzerindeki her metini sesli olarak okuyor, kişiye bölümler arasında geçiş, arama, tıklama gibi her türlü aksiyonu gerçekleştirmesinde yardımcı oluyor.

WebAIM, Survey of Preferences of Screen Readers Users adı altında 1.121 ekran okuyucu program kullanıcısı ile gerçekleştiği anket ile bazı ilgi çekici sonuçları paylaşıyor bizlerle. Tüm sonuçları grafikleriyle buradan inceleyebilirsiniz. Aşağıda benim gözüme çarpan bazı noktaları bulabilirsiniz:

• JAWS en çok tercih edilen ekran okuyucu uygulama (Windows)
• IE en çok tercih edilen tarayıcı, ardından Firefox geliyor. Bazı kullanıcılar her ikisini de kullanıyor.
• Headings h1, h2, h3, h4, h5, h6 büyük oranda ilk okunuyor.
• Arama fonksiyonu çok sık kullanılıyor, genellikle "search" diye aratılıp sayfada bulunuyor ve sayfadaki ilk textbox olarak düşünülüyor.
• Web 2.0 ın büyük oranda kullanışsız olduğu düşünülüyor.
• İmajların alt tagleri genellikle "xxx'nin fotoğrafı" formatında yazılıyor.
• Flash içerik inanılmaz kullanışsız.
• Frame'lerde flash kadar zorluk çekilmiyor.
• PDF kullanımı kullanıcı deneyimine göre çok kolay veya çok zor algılanıyor

İki metin alanı, iki buton, bir bağlantı: Eposta adresi, şifre, giriş yap, kayıt ol ve şifremi unuttum.

Bir e-ticaret sitesi. Ziyaretçiler geliyorlar, alışverişlerini yapıyorlar ve gidiyorlar. Bahsi geçen form ise tam ödeme adımından önce geliyor. Bu form, eğer siteye üye iseniz, ödeme bilgilerinizi tekrar girmemeniz için giriş yapabilmenizi sağlıyor veya bilgilerinizi hesabınıza kaydetmenizi.

Buraya kadar her şey normal görünüyor değil mi? Ancak sitenin satışları pek de iyi değil. Hatta düşüş bile gösteriyor. Bunu düzeltmek için firma Jared M. Spool ve ekibini tutuyor.

Jared ve ekibi incelemelere başlıyorlar. Form gayet normal, tasarımı gayet kullanışlı. Ancak bir sorun olmalı ki satışlar kötü gidiyor. Jared, bunun üzerine site üzerinden alışveriş yapan bir grup kullanıcıyla testlerine başlıyor. Kullanıcıların yapması gereken tek şey, siteyi kullanarak alışveriş yapmak.

Teoride düşünülen, bu formun devamlı müşterilerin daha hızlı alışveriş yapmasını sağladığı yönünde. İlk defa gelen müşteriler ise, tekrar gelecekleri için bu formu doldurmaktan çekinmeyecekler.

Testler başlasın

Kullanıcı deneyimi testleri başlıyor. İlk defa alışveriş yapan kullanıcıların devamlı mutsuz olduğu gözlemleniyor. Bazıları ilk defa alışveriş yapıp yapmadığını hatırlayamıyor, olmayan kombinasyonlarla siteye girmeye çalışıyorlar. Bazıları ise buraya alışveriş yapmaya geldim, biriyle ilişkiye başlamaya değil bile diyor. Hemen hemen hepsi ise kayıt olmamak için direniyor.

Direnme nedeni açık. Bana spam mi yapacaklar, benim bilgilerimle ne yapacaklar gibi sorular. Ancak kayıt formunda isim, fatura/gönderim adresi ve ödeme bilgilerinden başka bir şey yok.

Bu ilk alışverişi olmayan, yani devamlı alışveriş yapan kullanıcıların çok az bir kısmı ancak giriş bilgilerini hatırlayabiliyor. Bilgilerini hatırlayamayan kullanıcılar, farklı kombinasyonlarla giriş yapmayı deniyorlar. Sonradan veritabanında yapılan incelemelerde sitenin tüm kullanıcılarının %45'inin birden fazla hesaba sahip olduğu görülüyor. Bazılarının en az 10 hesabı var. Günlük 160.000 kadar kullanıcı ise şifresini hatırlayamadığı için talep gönderiyor. Bu rakamın %75'i asla alışverişlerini tamamlamıyor.

Sonuç, aslında alışverişi kolaylaştırmak için yapılan bu form aslında satışları düşüren en büyük etken.

$300.000.000'lık çözüm

Çözüm ise basit oluyor. Kayıt ol butonunu, Devam et olarak değiştiren tasarımcılar altına bir de not düşüyorlar:

Alışveriş yapmak için kayıt olmanıza gerek yok. Devam et'e basarak ödeme adımına geçebilirsiniz. Gelecek alışverişlerinizi daha hızlı gerçekleştirmek için dilerseniz ödeme adımında kayıt olabilirsiniz.

Sonuç: satışlar %45 artıyor. İlk ay 15 milyon dolar, senelik 300 milyon dolarlık ek gelir.

Kaynak: http://www.uie.com/articles/three_hund_million_button

Eğer bir servis, kullanıldıktan 3 dakika sonra kendini bloglara yazdırabiliyorsa gerçekten iyidir. Userfly da aynen bu etkiyi yarattı bende.

Kullanıcı deneyimi malumunuz özellikle bütçe ayırılan, gözlemlenmeye çalışılan, öneminin yeni yeni farkına varılan bir alan. Temel olarak maksat, web sitesini kullanan insanların davranışlarını takip ederek, daha kullanışlı ve sonuca götüren arayüzler, özellikler hazırlamak.

Userfly tam olarak bu işe yarıyor. Servis çok yeni, ücretsiz ve ücretli iki üyelik bulunuyor. Ancak ücretli üyeliğin ücreti bile henüz belli değil. Yaptığı iş ise çok basit, akıllıca. Tek bir JavaScript dosyasını sitenize yerleştiriyorsunuz, gerisini o hallediyor. Kodu yerleştirdikten sonra sitenize gelen ziyaretçilerin tüm davranışları, nerelere tıkladığı, sayfada fare ile nerelerde gezdiği gibi verileri toparlıyor.

Siz ise, size verilen yönetici panelinden tüm bu kullanıcıların davranışlarını web sayfanız üzerinden takip edebiliyorsunuz. Örneğin ben bir süre SiberKültür'e gelenleri bu şekilde takip edeceğim, davranışları çözmeye çalışacağım.

Sistem tabi ki de her şeye çözüm değil. Halen büyük bir eksik göz hareketlerinin takibi. Userfly bunu gerçekleştiremiyor lakin şu an bize sağladıkları bile gerçekten güzel. İleride tüm bu verilerin ortak raporlarının sunulması gibi özellikler kazanırsa büyük isim yapacağından hiç şüphem yok.