Öyle bir e-ticaret sitesi düşünün ki rastgele sıralanmış ürünler içerisinden arama fonksiyonu olmadan bir ürün bulmaya çalışıyorsunuz, böyle bir sitede 5 saniye kaldıktan sonra çıkıp farklı sitelerden bu ürünü bulmaya çalışacağınızı şimdiden söyleyebilirim. Ana sayfa ve kategori sınıflandırmaları kullanıcıların bir siteye girdiğinde ilk bakışta oluşan algısını belirler, sayfa hakkındaki ilk izlenimler işte bu anda oluşmaya başlar. Ana sayfanız kullanıcıya iletmek istediğiniz mesaj, site içerisindeki hareketlerine dair yönlendirmeler ve sitenin genel sunumu hakkında fikir vererek kullanıcının siteye dair algısını belirler. Buradan hareketle ana sayfa ve ana navigasyonun önemi sitenin misyonunun kavranmasını sağlar diyebiliriz.
Ana sayfaya dair ilk izlenimlerin etkisi e-ticaret siteleri için de geçerlidir. Bir ana sayfadan beklenilen, ister bir online giyim sitesi ister teknolojik ürünlere ait bir e-ticaret sitesi olsun sitenin kullanıcılar için iyi bir zihinsel bir şablon oluşturmasıdır.
Ana sayfa -adı üstünde homepage- bir evin ön kapısı gibidir, eğer misafirlerinizi hoş karşılamaz ya da içeri nasıl gireceğini göstermezseniz, ziyaretçileriniz içeri girmekten vazgeçebilir ya da kısa bir ziyarette evinizin diğer kısımlarında vakit geçirmek istemeyebilir. Bu yüzden sitenize veya markanıza mevcut kullanıcılarınız kadar aşina olmayan ziyaretçileriniz için de ana sayfa, kullanıcıya kendini tanıtmak ve algısını şekillendirmek adına önemli bir konumdadır.
Bir sitenin ana sayfası ile ilk etkileşime geçtiğimizde o ana sayfa kafamızda oluşan “Ne tür bir siteye girdim?, Site beni ihtiyacıma yönlendiriyor mu?, Bu siteden beklentim ne?, Bu sitede beklentimden farklı neler bulabilirim?” sorularına cevap vermeli. Ana sayfanız kullanıcının kafasında oluşan sorulara cevap verebildiği ölçüde başarılı sayılır.
Bir ana sayfanın neler söylemesi gerektiğini incelemek üzere Ürün Doktoru sayfamıza bakalım. Ana sayfamız, Ürün Doktoru’nun genel amacını yani aslında neler yaptığını bizlere söylüyor. Ürün Doktoru logosuyla hangi sitenin ana sayfasında olduğumuzu bize tekrardan hatırlatmakta. Aynı zamanda Ürün Doktoru ana sayfası ile bizlere site için başka nerelere ulaşabileceğimizi, iletişim bilgilerini ve daha fazlasını aktarabiliyor.
Tabii konu, e-ticaret sitelerine geldiğinde farklı açılara da dikkat çekmek gerekiyor. Sahip olunan ürün yelpazesini geniş bir şekilde göstermek, kullanıcılara sitenin amacını ve kapsamını anlatırken bir yandan da onların site içerisinde daha fazla vakit geçirmesini sağlamak gibi. Kullanıcıların site içerisinde yaptıkları hareketlerin analizlerini inceleyerek, kullanıcı deneyimini artıran e-ticaret siteleri tasarlamayı düşünüyorsanız ya da bu konuya ilgiliyseniz online’da gerçekleştirilen CRO ve UX Eğitimimize bir göz atabilirsiniz.
Gelelim e-ticaret sitelerindeki ana sayfada olması gereken önemli noktalara..
Bir e-ticaret sitesine girdiğimizde ana sayfadaki karmaşanın içinde kaybolmamamız en önemli faktörlerden biridir. Buna eski ve karmaşık tasarımıyla yıllardır hayatına nasıl devam ettiğini anlamadığımız “ARNGREN” sitesini örnek vererek açıklayalım.
Arngren sitesi günümüzde hala aktif bir şekilde satış yapmaya devam ediyor. Site içerisinde satılan ürünler rastgele bir şekilde bize sunuluyor, arama butonu ve diğer kategoriler ise bu ürün havuzunun içinde farklı yazı renkleri ile kaybolmuş durumda.
Kullanıcıları aşırı ya da karmaşık içeriklere boğmayın, bırakın seçtiğiniz site tasarımı sizin yerinize konuşsun. Örneğin Airbnb çok sade bir tasarımla bizi yeni bir maceraya atılmaya teşvik ediyor. Yazının başında bahsettiğimiz, ana sayfada görmek istediğimiz sitenin amacını bizlere net bir şekilde verirken, arama butonuyla bizi karşılayarak doğru ve hızlı şekilde yönlendirildiğimiz bir konaklama deneyimi yaşatıyor. Kullanıcınızı karşıladığınız bu alanı olabildiğince düzenli tutmak ve amaca yönelik yönlendirmeler sunarak kalıcı ve sürekli tercih olma noktasında çok önemli. Maalesef çoğu e-ticaret sitesinde Airbnb sitesinin yaşattığı deneyimi yaşamak mümkün olamıyor.
İçinde birçok ürünü ve farklı hizmetleri barındıran Amazon’u kullanışlı ana sayfa olarak örnek verebiliriz. Kullanıcısının daha önceki yaptığı alışveriş ve hareketlerinden yola çıkarak ana sayfasını özelleştiriyor. Her kullanıcının tercihlerine göre ürünler sunan ve bunları belli bir düzene göre sıralayan site içerisinde kaybolmamızı engelliyor.
Çoğumuz, internet üzerinden yapılan alışveriş hareketlerinin kaydedildiğine bir şekilde şahit olmuştur. Örneğin bir ürünün fiyatına baktıktan sonra sosyal medyada dolaşırken o ürünün reklamını görmemek artık bir normale dönüşmeye başladı.
Tanıtım ve reklamların ciddi öneme sahip olduğu e-ticaret sitelerinde önceliğinizi hangi içeriklerden yana kullanacağınızı iyi değerlendirmelisiniz. E-ticaret siteleri yaptığı kişiselleştirme çalışmaları sayesinde yapılan aramalardan ve hareketlerden yola çıkarak kullanıcıların ilgilendiği seçenekleri ön plana çıkarırlar. Aynı zamanda seçilen reklamlar kullanıcılara e-ticaret sitesi ile ilgili mesajlar da içermektedir. Üstteki görselde GittiGidiyor sitesinin, kullanıcısının verilerini kullanıp beklenti ve önerilere iyi bir ux writing dili ile cevap verdiğini görüyoruz.
E-ticaret sitelerinde kullanıcının deneyimini iyileştirecek diğer bir özellik ise kategorileştirmedir. Kategorileştirmeyi iki şekilde tanımlayabiliriz. Bunlardan ilki, ana sayfa ve diğer sayfalarda bize eşlik eden ve ilerleyen kısımlarda daha detaylı anlatacağımız ana yönlendirmeler. Diğeri ise, ana sayfada kullanıcıdan alınan veriler ya da genel kullanıcı bilgisine göre sunulan genel kategorileştirmeler. Bu iki biçim için de önemli olan siteyi ziyaret eden kullanıcıların hareketlerini en iyi şekilde analiz etmektir.
İnternet üzerinden sevdiklerimize hediye yollama imkanı sağlayan ÇiçekSepeti, ana sayfadaki kategorilendirmeyi kullanıcı hareketlerinden yola çıkarak hazırlayan sitelerden. ÇiçekSepeti’nin yönlendirme butonu tercihi yaparken kullanıcılarının hareketlerini takip edip en çok öne çıkan kategorileri seçtiğini görüyoruz. Böylece siteyi ziyaret eden biri, ürünü veya kategoriyi aratmak yerine yönlendirme butonu aracılığıyla istediği alana geçiş sağlayabiliyor.
Popüler bir e-ticaret sitesi olan Etsy ise kullanıcıların hareketlerinden ‘vintage’ seçeneğinin oldukça ilgi çektiğini farketmiş ve bunun üzerine ana sayfadaki yönlendirmelere bir ‘vintage’ butonu eklenmiş.
Trendyol, ana sayfa yönlendirmelerinde diğer e-ticaret sitelerinden farklı olarak anahtar bir kelime yerine kullanıcılarının yaptığı hareketler sonucu özellikle giyim markalarına olan ilgilerini tespit edip bu markalara özgü kategoriler yaratma yoluna gitmiş. Aynı zamanda ana kategorilerini de kullanıcı hareketlerini göz önünde bulundurarak ‘Kadın’, ‘Erkek’, ‘Çocuk’ şeklinde bir sıralamayla devam ettirmiş. Trendyol’un bu kategorileştirme tercihlerinden yola çıkarak şunu söyleyebiliriz; bu e-ticaret sitesi genel olarak kıyafet alışverişi için tercih ediliyor.
Bir e-ticaret sitesinin olmazsa olmazlarından arama butonu ana sayfanın vazgeçilmezidir. Görünür bir yerde olmalı ve her zaman ulaşılabilir tutulmalıdır.
Arama butonunu ana sayfasının kalbine koyan Airbnb sitesinden bahsetmek istiyorum, siteye giren kullanıcının direk arama yaptığını gözlemleyen Airbnb arama butonunu ana sayfasının en görünür yerine koyarak kullanıcı arama sürecini hızlandırıyor.
Aynı zamanda arama butonunun ana sayfa içerisinde dolaşmaya devam ederken de her zaman ulaşılabilecek bir yerde olması kullanıcısına iyi bir deneyim sunuyor.
Bir kitabı açtığınızda sizi karşılayan içindekiler bölümünün görsel sunumu olarak ifade edebileceğimiz ana navigasyon, site içerisinde içeriklerin nasıl gruplandığını anlatan kategori sınıflandırması olarak tanımlanabilir. Bir sitenin ana navigasyonunun tasarımı, o sitenin kullanıcıyla etkileşime girdiği ve kullanıcıların sitede ulaşabileceklerini özetleyen bir yapıdır. Ana navigasyon kategori sınıflandırmasına bağlı olarak görsel bir ifade biçimi sunar. Ürün kategorileri ile ana navigasyon başlıklarının aynı olması kullanıcının siteyi haritalandırmasına yardımcı olur.
Ana başlıkları ürünlerin sınıflandırılmasına uygun olarak seçtiniz, şimdi sırada ne var? Alt kategorilerin belirlenmesi. Ana kategorilerin alt kategorilere ayrılmasının hangi yolla gösterildiği çok önemlidir. Ana kategorilerin alt kategorilere ayrılmasındaki düzen birbiriyle ilişkili ve ilk bakışta anlaşılır olmalı. Örneğin ana kategori elektronik ise alt kategorilerinin tablet, telefon, klavye gibi ayrılması daha uygun olacaktır. Elbette bu durum e-ticaret sitelerine ve kullanıcılarına göre değişkenlik gösterebilir. Hedef kitlenize göre yaptığınız araştırma sonucunda ana navigasyonu farklı şekillerde oluşturabilirsiniz. Örneğin, teknolojik aletler satan bir site iseniz, kategorilerinizi buna göre özelleştirebilirsiniz telefon, bilgisayar, ev elektroniği gibi. Fakat örneğin Amazon gibi daha kapsamlı bir site iseniz, bu kategorileri daha geniş bir kitlelere hitap edebilecek şekilde hazırlamakta fayda var.
Ana navigasyonunuz sürekli görünür de olabilir üzerine gelindiğinde de açılabilir. Bu hiyerarşik düzen görsel olarak yeterince anlaşılır değilse gezinme sırasında kullanıcı yolunu kaybedebilir.
Genellikle ana navigasyon görselleştirmesi üç şekilde yapılır:
• Kenar çubuğu menüleri (sidebar navigation)
• Açılır menüler (dropdown)
• İkisini bir arada kullanan menüler
Ana navigasyon görselleştirmesi arasında en çok tercih edilen yöntemlerden biri imleç ile üzerine gelindiğinde (hover state) görünen açılır menüler (dropdown) oluyor. Bu menüleri mega menüler olarak da tanıyorsunuz. Yöntem ne olursa olsun ana navigasyonun tasarım sürecinde kullanıcıların tercihleri de göz bulundurulmalı. Tasarımcıların ve kullanıcıların ana navigasyondan beklentileri; “Açılır menüler nasıl konumlanmalı?, Üzerine gelindiğinde herhangi bir reaksiyon vermeli mi?, Bu kategoriler ne kadar özelleşmelidir? gibi sorular etrafında şekilleniyor.
Bir diğer menü yapısı ise kenar çubuğu menüleridir (sidebar navigation). N11 sitesinde bu tarz bir yapıyı kullanarak kategorizasyonunu uygulamış. Kenar çubuğu menüleri gözün okuma hareketine daha uygun olsa da kullanılabilir alanı kısıtladığı için dikkatli olmak gerekir. Navigasyon yapısının yatay sunumu diğer içeriğin görünümünü daha çok engelleyebilir.
Elbette iki yapının karması olan menüler de var, örneğin hepsiburada.
Peki bu açılır menülerde en çok dikkat etmemiz gerekenler nelerdi?
Öncelikle bu açılır menülerin kapsayıcılığına dikkat etmek gerekiyor, kullanıcı göz gezdirerek aradığı içeriğe ulaşamıyorsa bu fazla ayrıntıya girdiniz demektir. Ancak çok genel kategoriler varsa da ihtiyacı olan ürünün hangi kategoriye ait olduğu konusunda kararsız kalabilir.
Kullanıcı kararsız kaldığında sayfalar arasında gezinecek, bu da tıklama sayısını yani harcadığı eforu artıracaktır. Kullanıcı araştırmadan da tıklayacağı linki seçebilmelidir. Kullanıcının kafası karışık olduğunda da ana navigasyon öğelerinde onu doğru yönlendirecek seçeneklerin bulunması çok önemli olacaktır. Bunun için de sayfa içerisinde kullanıcıların yaptığı hareketler ve neleri araştırmaya çalıştıkları incelenmelidir.
Açılır menüler her sayfadan ulaşılabilir olmalıdır ki bir linke tıklandığında ana sayfaya dönme zahmetine girmeden başka bir ürün aratılabilsin.
Özellikle e-ticaret sitelerinde çok fazla alt kategori olacağı için kullanıcıya sadece ihtiyacı olan kısmı göstererek onun sahip olacağı bilişsel yükü de azaltmış oluruz. Ancak interaktif yani üzerine gelindiğinde görünen açılır menüler, kullanıcının diğer işlemlerine olumsuz bir etkisi olabileceği için, iyi konumlandırılmamış ise tehlikeli olabilir. Diğer bir yöntem de üzerine gelindiğinde açılan açılır menülerin alt kategorilerine de bu özelliği kazandırarak ilk bakıştaki kategori karmaşasını azaltabiliriz. Bu noktada hepsiburada çok geniş bir ürün yelpazesine sahip olsa da hem estetik hem de mantıksal bir gruplama yapmayı başarmış.
Ana navigasyon kategorileri kısa ve öz olmalı, kullanıcının kafasını karıştırmamalıdır.
Gelin hep beraber Walmart örneğine bakalım, Walmart kategoriler ile servisleri ayırarak farklı türden hizmetlerin aynı grupta olduğu için yaratabileceği kafa karışıklığını önlemeyi başarmış.
Peki ya kullanıcı hangi kategoriye tıklayacağını bilmiyorsa? Eğer kullanıcı seçeceği ürüne karar vermemişse ya da genel kategorinin hepsine bakmak isterse diye “hepsini görüntüle” seçeneğini hiçbir zaman unutmamalıyız. Kullanıcı hem tercihlerinde esnek olmayı hem de sizin ona tercihlerinde yardımcı olmanızı bekler.
Yazımız boyunca sizlere bir sitenin ana sayfasının nasıl olması gerektiğinden, kullanıcının site içindeki hareketlerini belirleyen ana navigasyondan, farklı navigasyon gösterimlerinin neden önemli olduğu ve bir e-ticaret sitesi hazırlarken kullanıcı deneyimlerinden yola çıkarak sitenin nasıl tasarlanması gerektiğini örnekler üzerinden aktarmaya çalıştık. Kullanıcı hareketlerini dikkate alan bir siteye sahip olabilmek için online'da gerçekleşecek olan CRO ve UX eğitimimizi buradan incelemeyi ve eğitimde yerinizi ayırmayı unutmayın!
