Web Sitelerinde Kullanıcı Deneyiminin Dönüşümü

Gal Shir

 

Mantar gibi biribirinin aynı web siteleri yapıladururken markanın ve kullanıcının ihtiyaçları ne kadar göz önünde tutuluyor. Aslında moda trendleri takip edenler gibi, para harcayacaksanız gidip hemen gördüğünüz örnek havalı sitelerden birini yaptırabilirsiniz. Sonucu ise tam olmamış, eskimeden yenilenmek zorunda kalan bir web sitesi olacaktır.

Benim 2010 yılında ilk defa ağzım açık dinlediğim “Hadi canım, yok artık.” nasıl oluyormuş derken araştırmaya başlayıp fikir sahibi olduğum, özellikle son 6 yılın trendi “responsive” methodu bizde özellikle 3 senedir birçoğumuzun evine girdi.

Bu tasarım yaklaşımının tarihine az çok bakacak olursak ilk web sitesinin, 2001 yılında tarayıcının görünen alanına, büyüklüğe göre adapte olan Audi.com web sitesi olduğunu görüyoruz. Tasarımı, farklı ekran boyutlarına göre adapte etmek için her boyuta göre server’dan o sayfayı tekrar yüklüyorlardı. Tasarım konusunda devlerden bir olan Razorfish’in yayına aldığı sitede bilgi mimarisini (information architecture) Jürgen Spangl and Jim Kalbach, tasarımını Ken Olling, ve arayüz yazılımını Jan Hoffmann üstlenerek bu sistemi yaratmışlardı.

Cameron Adams sitenin demosunu 2004 yılında tekrar yayına aldı ve hala online. 2008 yılına kadar esnek, likid, akışkan, elastik gibi bir dolu yeni terim tasarım layout’larını tanımlamak için kullanıldı. Mayıs 2010’da A List Apart’taki makalesinde Ethan Marcotte, ilk defa responsive web tasarımı (RWD) terimini ortaya koyup, akışkan grid yapısında, esnek imajlı, medya query’leri ile tanımladı.

Mashable, 2013 yılını Responsive Web Tasarımı yılı ilan etti. Ve birçok diğer kaynak da responsive tasarımı mobil uygulamalara cost-effective bir alternatif olarak önermeye başladı. 

 

Çünkü neden? Çünkü önemli ve gerekli. Responsive gibi kavramların ve trendlerin bazıları zorunluluktan hayatımıza girse de çoğumuzun kalabalık toplantılarda telaffuz etmekten uzak durduğu skeuomorphism denen, bence bitip gittiği hayırlara vesile olmuş akımın flat tasarıma dönüşmüş olması gereklilik olmasa da beni bir tasarımcı olarak çok mutlu etmiştir. Mobil cihazlar bu sıklıkta kullanılınca tasarımcıların da arayüzleri sadeleştirip basitleştirmesi kaçınılmazdı.

 

Mobil ekranlarda hamburger menü ikonu arkasına onlarca menü başlığı saklayabilmek, gerektiğinde açıp bakmak, tasarımları tüm ekranlar için standardize ederek kullanılabilirliği artırdı. Bu özellik kısa sürede bir kullanıcı alışkanlığına dönüşebildi, aynı zamanda masaüstü ekranlar için de çok sık kullanılmaya başlandı. Aslında bu sık kullanım bir sitede birden fazla menü alanı tasarlamaya, kullanabilmeye doğru evrildi çok da güzel oldu.

 

Aşağıdaki örnekte Squarespace’in mobil, masaüstü ayırt etmeden menüyü minimize ettiğini görüyoruz. Aynı zamanda below the fold’da ayrı bir menü kullanarak bazı başlıkları ön planda tutuyor.

web sitesi

 

Menü ikonuna tıkladığınızda da global menü başlıklarına erişebiliyorsunuz. Bu çekmece görünümlü menü tasarımlarına, alanın el verdiği kadar menü başlığı ekleyebilir hatta scroll da ettirebilirsiniz. 

 

web sitesi

Hamburger menü yönteminin çekiciliği su götürmez, zira sen eğer şu koskoca menüyü küçücük üç çizgi arkasına sığdırabiliyorsan, tabi ki siten hem daha temiz, hem de şık görünecektir.

“Peki bu şıklık ve minimalist

yaklaşım her zaman doğru mu?”

 

Yani bana sorarsanız ben minimal işlere bayılıyorum. 10 sene önce de bayılıyordum ama o zaman kimseyi ikna edemiyordum. Benim için bulunmaz bir fırsat olması çok süper ama şimdi de bakkalın manavın bile -öyle sitelerden yap bana da- demesi biraz ihtiyaçtan değil işte modadan olmaya başlayınca iş değişti tabi.

Aslında minimal bir bakkal olması hiç fena olmazdı, ben giderdim kesin o ayrı. Değişik olmaz mıydı vitrinde tek ürün var, o da satılık değil belki, öyle rengarenk, üst üste değil mallar, bazılarını zorlasan satmıyor falan düzen bozulmasın diye!

Bu hamburger menü Squarespace’te müthiş, bakkallar dışındaki çoğu sitede de müthiş, ama gel gör ki haber siteleri ve e-ticaret sistemlerinde öyle düşünmeden etmeden kullanmamak lazım. Web Design Trends 2015 & 2016’e göre kullanıcıları bu gibi sitelerde navigasyonu açmaya zorlamak şiddetli geçimsizlik sebebi.

 

web sitesi

Görsel

 

Yukarıdaki Time ana sayfasındaki menü, işte o kötü örneklerden değil. Yine tartışılır tabi de, bunu yapacaksan da böyle yap dedirten süper cool örneklerden biri. Sol kolondaki önemli haberlerin akışı, yine bu kolonun üstündeki filtreleme, gözün sürekli takip ettiği bu alanda header’da, logonun altında hızlı ulaşılabilir bir arama ikonu olması işte bu işi mümkün kılar! Bence arada Time sitesine girerek gerçekten haber okuyun ve bunu deneyimleyin.

Dahasını merak eden, hamburger menüler mevzusuna devam etmek isteyenleri, Nielsen Norman Group’un, gizli menünün inceliklerini ve kalınlıklarını aktardığı “Killing Off the Global Navigation: One Trend to Avoid,” başlıklı yazısına alalım.

Bu arada son olarak eğer sitenizde porno vb. içerikler yoksa sitenin ilk bakılan yeri olan navigasyon satırı ayrıca direkt Bounce Rate’inizi etkileyecektir. “Bu ziyaretçiler niye hiçbir şeye tıklamaz oldu, her gelen neden çıkıyor sitemden.” diye düşünüyorsanız yeni yaptırdığınız sitenizi ve özellikle menüsünü bir bilene gösterin veya yeni teknolojilere adapte olamayan bir siteniz varsa vakit geçmeden bir bilene danışıp yola koyulun.

Web Sitesi Bounce Rate oranlarınızın yüksek olması (Siteden çıkma oranının fazlalığı):

Siteyi gerçek dünyada bir dükkan gibi düşünün. Duyan dükkanınıza koşuyor. Akın akın trafik var ama herkes girip şöyle bir bakıp dükkandan çıkıyor, bir kısmı tabi alışveriş yapıyor o kadar berbat değil tabi durum. İşte tam da böyle bir şey sizin bazen bütün menüyü minimize ederek işi zorlaştırmanız olabiliyor. (Yukarıda anlatmaya çalışsam da eksik olmasın, hamburger menüler muhteşem, ben de bayılarak kullanıyorum da kullanmadan bir kere daha kafa yormakta da yarar var)

Belki de çok cool’sunuz hiç bilgi vermeyeceksiniz, her şeyi saklayacaksınız o da sizin tarzınızdır belki onu bilen zaten sevgiyle yaklaşır, bulur aradığını, o da mümkün tabi kimse size karışamaz:) “E yaptık bir site işte, kullanıcılar nereye tıklıyor nereden bileyim! Gelen giden yok!” diyorsanız, o zaman da sizi CrazyEgg ve Usability Tools köşemize alıyoruz.

Leave a Reply

Copyright, Userpusher.