Hepsiburada.com Detaylı Tasarım İncelemesi

E-ticaret, dışarıdan bakanlar tarafından çok kolay bir iş olarak bilinse de yıllardır e-ticaretin içinde olanlar olarak zorluklarını da biliyoruz. Tasarımı, yazılımı, ödeme sistemleri, A/B testleri, dönüşüm optimizasyonu, SEO, SEM derken  kelimelerin sonu gelmiyor. Bu yazımda sadece tasarım kısmını ele alıyorum. Türkiye ‘nin en bilinen ve en eski e-ticaret sitelerinden olan hepsiburada.com da yakın zamanda tasarımını değiştirdi, bu yazımda detaylı şekilde incelemelerini yapacağım.

Hepsiburada.com Anasayfa Tasarımı

Header:

Giriş Yapılmadığında:

Giriş Yapıldığında:

Header kısmı aslında günümüz standartlarında, sol tarafta geniş ve enine bir logo, altında slogan, sağında geniş bir arama kutusu, üstünde çok kullanılan linkler ve en sağda da giriş yap ve sepetim kısımları geliyor. Giriş yapıldığında ise “Giriş Yap” butonu “Hesabım” butonuna dönüşüyor. Bu kısım eskisine göre oldukça daha büyük ve daha şık hale getirilmiş durumda.

Eski Tasarım:

Önceki tasarımla karşılaştırdığımızda bazı küçük değişiklikler görüyoruz:

• Logo küçülmüş ve üstteki güven verme amaçlı “%100 Güvenli Alışveriş” yazısı kaldırılmış: Logonun küçülmesi açıkçası benim hoşuma gitti, diğer yazının kaldırılması da sanıyorum e-ticarete ve hepsiburada.com ‘a olan güvenin artmasıyla ilgili, eminim bir A/B yapmıştır burada hepsiburada.
• Arama kısmında eskiden kategoriye göre arama yapılabiliyordu, şimdi ise ortalama aynı genişlikteki arama kutusunda kategori kısmı bulunmuyor. Bunun yerine siz arama yaptığınızda kategori olarak önerilerde bulunuyor. Böylece oradaki tasarım boşluğuna “Hesabım” kısmı eklenebilmiş.
• Sipariş takibi, kolay iade, listelerim, yardım linklerine bir de “Fırsatlar” linki eklenmiş ve bunlar arama kutusunun hemen üstüne konmuş, bence tıklama oranları kesin artmıştır, kaldı ki burası çok daha tıklanır bir yer.
• Eskiden turuncu olan “Sepetim” kısmı artık gri ve yanında hesabım veya giriş yap ile beraber geliyor. Daha sade ve sakin bir görünüm oluşturduğunu söylemek lazım. Sonuçta turuncu her zaman agresif bir renk olarak bilinir. Aynı zamanda “Sepetim” kısmının altındaki saçma gölge de kaldırılmış, daha minimal bir etki yaratılmış.
• Son olarak da arama kutusunun altındaki günlere göre değişkenlik gösteren sloganı şu anda kullanmıyor hepsiburada, sanıyorum o kısım da kaldırıldı, en azından şimdiye kadar rastlamadım.

Daha iyi ne yapılabilirdi?

Türkiye ‘nin en çok bilinen web sitelerinden de olsa ben header kısmında mutlaka müşteri ilişkileri veya canlı destek gibi bir kısım olması gerektiğini düşünüyorum. İnsanlar her zaman karşılarınca bir şekilde muhattap olabilecekleri canlı birini görmek istiyorlar, hepsiburada’nın ise pek iletişime geçmek istemediğini kısa bir gezinme ile anlayabiliyoruz.

Tasarım ve kullanışını en çok sevdiğim Zappos.com üzerinden buna hızlıca örnek gösterebilirim. Hemen logonun üst tarafında hem telefon hem de canlı destek bulunuyor. Bu hem güvenilirliği artırırken hem de iletişimi çift taraflı hale getiriyor.

Özet: Genel olarak tasarımın biraz daha sadeleştirdiğini görüyoruz, ama bu sadeleşme yapılırken özelliklerden fedakarlık edilmemiş, giriş, sepetim, arama kutusu ve linkler geliştirilmiş şekilde yerinde duruyor: 9/10

Navigasyon / Menü Kısmı

E-ticaret sitelerinin temel taşlarından olan menüye geliyoruz, bu kısımda büyük bir değişiklik görüyoruz. Sol tarafda olan menü artık üst kısımda ve dikey bir navigasyon yerine yatay bir navigasyon görüyoruz. Menüyü oluşturan kalemlerden herhangi birinin üstüne geldiğiniz zaman alt tarafa doğru açılıyor ve yeni bir menü bizi karşılıyor ve yolumuzu kısa sürede bulmamız sağlanıyor.

Eski Tasarım:

Menüdeki değişiklikler:

• Dikey olan tasarım yatayla değiştirilmiş, ürün sayısı ve kategori sayısı bu kadar fazla olan bir site için olumlu bir değişiklik, kaldı ki dikey menüyü sürekli aşağıya indirmek gerekebilirdi. Bu şekilde daha derli toplu bir düzen sağlanmış, aynı zamanda menünün tüm ürün sayfalarında yine görünür olması da sağlanıyor. Zaten enine menünün en büyük avantajı da bu.
• Fazlaca olan ana menüler, alt menüler haline getirilmiş. Örneğin bilgisayar kategorisi artık elektronik ana kategorisi altında yer alıyor. Biraz kullanıcı alışkanlıklarının tersine bir değişiklik. Bununla beraber aslında “Elektronik” diye ana bir kategori sistem olarak yok, yani buraya tıklayamıyorsunuz sadece menüye eklenmiş.
• Menü içeriğine çok aranan veya çok satılması istenen ve beklenen kelimeler eklenmiş. Örneğin fotoğraf makineleri kategorisinde aksesuarlar kısmının altında olan “Lensler” kategorisini bulmak belki çok mümkün olmayabilirdi, ama menüde bu şekilde bir yazıyla belirtilerek o kategorinin altı çizilmiş durumda. Tabii ne kadar fazla kategoriyi oraya çekebilirsiniz, bu da muamma. Ama tabii en iyileştirilmeye çalışılmış diyebilirim.
• Dikey menünün sağ üstünde yer alan “Markalar, Kampanyalı Ürünler…” gibi bazı linkler menünün değişmesinden dolayı çıkarılmak zorunda kalmış, burada tıklama anlamında azalma beklenebilir. Özellikle “En beğenilen ürünler” tıklama isteği uyandıran ve hemen tüm web sitelerinde bulunması gereken bir özellik.

Daha iyi ne yapılabilirdi?

Ciddi değişiklikler olan bu bölüm kullanıcı alışkanlığı bakımından biraz riskli olsa da tasarım olarak göze daha hoş göründüğünü söylemek lazım. Ama ilk bakışta anasayfada bir menü yokmuş gibi de duruyor. Benim gibi arama kısmını çokça kullananlar için hiç sorun değil ama belki arama kısmına biraz daha dikkat çekilebilir, bu şekilde menüye girmeden kullanıcıların aradıkları ürüne ulaşmaları sağlanabilir.

Özet: Menü dikeyden yataya alınarak sadeleşme sağlanmış, beyaz olan menü turuncu hale getirilmiş, görünürlüğün artırılması sağlanmış, kullanıcı alışlanlığı bakımından riskli olsa da tasarım olarak hoş: 8/10

Banner Kısmı

Menü ile aynı anda değerlendirmek istesem de sonradan farklı bir yere almak istedim. Bannerlar e-ticaret sitelerinin vazgeçilmezi, hem bu alanlar reklam alanı olarak kullanılıyor, hem de ziyaretçilerin en çok tıkladıkları ve gezdikleri alanlar. Hemen tüm heatmap’lerde (Ziyaretçi gezinme verilerinden elde edilen gezinme bulguları) bu kısım en çok tıklanan alan olarak görünüyor. Aynı zamanda sitenin tasarımını ve marka dilini de bu alan belirliyor, sıcak bir dil mi kullanılacak, daha sade mi yoksa yenilikçi bir tasarım mı sitede yer alacak, ne tür renkler kullanılacak, hepsi sitenin ziyaretçiyle iletişimiyle ilgili. Doğal olarak en önemli yerlerden biri.

Banner kısmındaki değişiklikler:

• Banner alanı daha geniş bir dikdörtgene dönüşmüş durumda.  Bu alan anlamında avantaj sağlıyor, hem de aynı zamanda bannerın altındaki ürünlerin daha üst çıkmasına yol açıyor.
• Bannerlardaki renkler ve tasarımlar birbirleriyle uyumlu, eskisine göre kırmızı renk daha çok kullanmış, bu müşteride fiyat algısı yaratmaya yönelik bir değişiklik, eski tasarımda daha çok ürünle ilgili bilgi verilirken yenisinde pek ürünle ilgili bilgi yok, adı ve fiyatı geçiyor.
• Bannerların altındaki diğer bannerların gösterimi değiştirilmemiş, hepsinin küçük görselleri var ve tıklandığında banner alanına o banner geliyor.
• “Günün Teklifi” artık yerini “Günün Fırsatı” na bırakmış, yazı biraz daha küçültülüp, geri sayım eklenmiş. Aynı zamanda kırmızı renk yine burada da göze çarpıyor.

Daha iyi ne yapılabilirdi?

Banner kısmında sağ ve soldaki bannera gitmeye yönelik ufak oklar hepsiburada ‘da yok, ben bunların tıklanma anlamında kolaylık oluşturduğunu düşünüyorum, banner alanını az da olsa ufaltsa da koyulması avantaj hale gelebilir.

Özet: Banner alanı eskiye göre kesinlikle daha iyi, alan daha iyi kullanılmış durumda, bahsettiğim kırmızı renk bana çok hoş gelmese de satışı artırma anlamında avantaj sağlamış olabilir, farkındalığı artırıyor olabilir: 9/10

Anasayfada Ürün Listelenmesi

Banner kısmının altına iniyoruz şimdi, ürün listelenme kısmına, bu kısımda dikkatimi çeken ilk şey “Baktığınız Ürünlerden Esinlendik” kısmı. Bu genellikle “En Son İncelediğiniz Ürünler” veya “Sizin için Önerdiklerimiz” şeklinde karşımıza çıkıyor. Ben ilk defa bu şekilde bir tanım gördüm, avantaj mı dezavantaj mı yine bunu A/B yaparak karşılaştırmak gerek. Bu kısım akıllı olarak gezdiğimiz ürün veya kategorilerden popüler ürünleri karşımıza getiriyor. Sepet dönüşüm anlamında her zaman başarı sağlayan bu sistem, kişiselleştirmeyi sağlayarak hem kullanıcı bakışı anlamında olumlu özellik sergiliyor hem de kişinin kendini özel hissetmesini sağlıyor.

Ürün Listeleme Kısmındaki Değişiklikler:

• Eski tasarımda da bu tip bir akıllı ürün önericinin var olduğunu hatırlıyorum ama tasarım olarak görselini bulamadım, ama temel olarak kullanılan ve başarılı olan bir sistem, ürün görsellerinin biraz büyüdüğünü söylemek gerekiyor.
• Yeni tasarımda ürün listeleme kutuları birbirlerinden pek ayrılmıyor, eskisin de ise aralarında ince bir gri çizgi vardı. Bu çizginin kaybolması güzel ama ürünün üstüne geldiğimiz zaman belki bir hover efekt olabilirdi. Ürünün üstüne geldiğimi anlamak istiyorum kullanıcı olarak.
• Tablerin daha gri ve daha geniş olduğunu da görüyoruz, bu hem daha ferah bir görünüm kazandırmış hem de eski tasarımda “Sınırlı Stok – Özel Fiyat” kısmının sağındaki boşluk alınmış, daha dengeli bir görünüm söz konusu.
• Linkler de değişmiş, sıralamaları da… Çok satanlar yerini öne çıkanlara bırakmış, biraz reklam kokuyor buralar :)
• Kutuların yerleri de daha düzenli, eski tasarımda “Bugün Teslimat” yazan sağ taraf biraz üstte kalıyordu, şimdi her şey daha dengeli ve düzgün.

Daha iyi ne yapılabilirdi?

Call to Action (CTA) dediğimiz harekete geçirme olarak Türkçeye geçirdiğimiz butonlar yok? “Satın Al, İncele” gibi butonlar yani. Bu ciddi bir eksik, eski tasarımda “Fırsatı Kaçırma” gibi bazı CTA ‘ler var olsa da yenisinde hemen hemen hiç CTA yok. Tamam tasarım olarak kötü gösteriyor olabilir ama en azından ürünün üstüne gelince bir CTA oluşsa çok daha iyi ve verimli olur düşüncesindeyim.

Özet: Ürün listeleme kısmı sadeleştirilmiş, kutulamalar (boxing) daha düzgün, dengeli, her şey yerli yerinde gibi görünüyor. Ürün görselleri daha büyük ve sanki daha kaliteli. Daha fazla olan turuncu renk biraz gri ağırlıklı bir görünüme bürünmüş, tasarım anlamında her şey olumlu olsa da convertion anlamında CTA’lerden kaynaklanan ciddi bir eksi var: 7/10

Footer

Footer günümüzde genellikle SEO amaçlı kullanılıyor. Hepsiburada ‘da da buna yönelik bazı linklemeler görüyoruz. Biraz daha büyüyen ve sadeleşen footer da genel tasarımdaki değişiklikten nasibini alanlardan.

Footer Kısmındaki Değişiklikler:

• Genel tasarımda olduğu gibi siyah olan renkler griye çekilmiş, sert görünüm biraz yumuşatılmış.
• Dağınık görünüm biraz daha kutu kutu bir tasarıma dönüşmüş.
• Mobil uygulamaların stili iyice griye kaymış, önemi azaltılmış gibi duruyor.
• Logo kaldırılmış, belirgin olan ödeme sistemleri daha küçük ve kısa durumda.
• Sosyal medya kısmı ikon eklenerek sade ve daha hoş bir görünüme kavuşmuş.
• En alt kısımda DOL logosu ve enteresan şekilde Nesine.com linki bulunuyor. Çok eski bir SEO yöntemi ama tasarım olarak pek yakıştıramadım doğrusu. Evmanya ve Altıncı cadde linkleri ise kaldırılmış.

Özet: Ben yeni footer kısmını beğendim, sadelik ve özelliklerin yerli yerinde olması güzel.Güven sağlayan Norton logosu ve tüm ödeme sistemlerini listeleyen kredi kartlarının logoları da yerli yerinde. Arkaplandaki gri tonlaması da biraz daha açık bir griye kaydırılmış: 9/10

Hepsiburada.com Ürün Sayfası Tasarımı

Bir e-ticaret sitesinde ürün sayfasında bulunması gereken özellikleri sayalım önce:

1. Ürün ismi
2. Ürün fotoğrafları (varsa video)
3. Sepete Ekle butonu
4. Stok durumu
5. Fiyat
6. Ödeme yöntemleri
7. Kargo ücreti bilgisi
8. Teslimat süresi bilgisi
9. Ürün açıklaması
10. Yorumlar
11. Güvenlikle ilgili ibareler
12. Çapraz satış ürünleri

Hepsiburadanın ürün sayfasını açtığımda kaşıma çıkan görüntü bu, her şey yerli yerinde, göze estetik gelen dengeli bir tasarım göze çarpıyor. Ben 27″ monitörde açsam da diğer cihazlarda da açsam da düzgün bir tasarım var, responsive dizayn kullanılmış. Yalnız sanıyorum tam olarak bir responsivelik söz konusu değil, bazı sayfa düzeylerinde daha dengesiz tasarımlarla karşılaştım. Testi Responsive Web Design Tester for Google Chrome ile yapıyorum bu arada.

Ürün fotoğrafları: Sol tarafta ürün fotoğraflarının günümüz normlarına uygun şekilde büyüyen bir görselle ortada olduğunu görüyoruz, altta hemen diğer fotoğraflarının küçük halleri de var. Küçük resimlere tıklandığında slider şeklinde bir animasyonla fotoğraflar arasında geçiş yaşanıyor. Son zamanlarda tıklama sonrası fotoğraflar yeni pencere içerisinde gösteriliyor çoğu sitede, bu bana sanki kullanıcı açısından daha kolay geliyor ama bu da bir tercih.

Ürün ismi: Sağ tarafta gri ile ayrılan blokta ürün ismi en üstte ve dikkat çekecek kadar büyük ve kalın olarak konumlandırılmış. Aynı zamanda <h1> olduğuna da dikkat ettim, SEO anlamında inceleme yapmıyor olsam da tasarımın pazarlamayla bütünleşik olması hb için tabii normal. Avenir fontunu da oldum olası çok sevmişimdir, çok başarılı buldum font seçimini.

Ürün Fiyatı: Ürün fiyatı, indirim ve üstü çizili fiyatın hemen altında yine büyük şekilde. Sayfaya ilk defa giren birinin ilk dikkatini çeken şeylerden biri, doğrusu da bu. Sadece o kırmızı bölge bence biraz fazla kırmızı, bence o kadar dikkat çekmemeli, zaten HB genel olarak turuncu agresif rengini kullandığı için kırmızılar biraz eğreti duruyor diye düşünüyorum.

Ürün Yorumları: Yine gri blokta yıldızlama, yorumları oku ve yorum yaz linkleri bulunuyor. “Yorumları Oku” tıklanınca ürün altındaki “Yorumlar” sekmesi açık hale getirilip sayfa aşağıya kaydırılıyor. “Yorum Yap” ise kullanıcı girişi ile ilgili, giriş yapmadan yorum yapmak mümkün değil, bu da bir seçim tabii. Bu kısım da net ve olması gerektiği gibi.

Sepete Ekle: Turuncu, büyük ve ikonlu :) Önünde adet seçimi yapma kutusu var, sanki turuncu butonun sağ tarafı biraz boş kalmış gibi, ama göze kötü gelmiyor. Hemen altında kullanıcıda “aciliyet” yaratacak “şu kadar süre içerisinde sipariş verirseniz şu zaman kargoda” ibaresi var ki çok işe yaradığını düşünüyorum.

Favori Listesi ve Fiyat Alarmı: HB’nin bunlardan çok verim alıp almadığını çok merak ediyorum çünkü sayfada en az önem verdikleri yerler burası. İkonları çok silik ve yazılar da çok belirgin olmayınca göz bu butonları yok sayıyor. Her ikisini kullanmak için de üye girişi yapmak gerekiyor.

Sipariş ile ilgili ikonlar: Bu alanda hediye çekleri, teslimat süresi, kredi kartı kampanya bilgileri bulunuyor. Bu kısım da alışverişe ikna anlamında önemli bir yer.

Marketplace: HB’nin bu sene sunduğu yeni özellik, isterseniz Amazon’da olduğu gibi HB’den değil aynı ürünü sunan farklı firmalardan satın alma yapabiliyorsunuz. Çok duyurulan bir özellik değil ama denemeye değer.

Sıklıkla Birlikte Alınanlar: “Frequently Bought Together” ın tam olarak Türkçeye çevrilmiş hali. Bazı kategorilerde avantaj olduğu gibi bazı kategorilerde dezavantaj olduğunu düşünüyorum. Örneğin fotoğraf kategorisinde zaten karar vermek zor, tam Canon 700D almaya karar vermişken alttan Nikon D5200 çıkmasını şahsen istemem, çok fazla seçenek arasında karar verme zorluğu oluşabilir. Ama başka kategorilerde işe yaradığı bir gerçek.

Ürün Açıklaması: Burası HB’nin en zayıf yerlerinden biri, ürün içerikleri dolu ama özgün değil, ürün tedarikçisinin verdiği açıklamalar ile yetiniyorlar. HB için daha fazlası gerekli diye düşünüyorum. Yine de görsellerin kaliteleri ve içerik kullanıcı için yeterli olacaktır.

Kampanyalar: Birlikte alındığında kampanya oluşturan ürünler bu kısımda listeleniyor. Faydalı bir alan ancak kullanımı geliştirilebilir, sepete ekle tıklandıktan sonra bu ürünler önerilebilir. Benim denememde bana farklı ürünler önerildi.

Yorumlar: E-ticaret sitelerini kalbi olan kısım, HB bu kısmı çok güzelleştirdi. Girer girmez büyük bir puanlama, ürünün 5 üzerinden kaç aldığına göre “Mükemmel, Çok İyi, İyi, Fena Değil, Çok Kötü” olarak değerlendirilmesi söz konusu. “Yorum Yap” butonu da büyük ve dikkat çekici, yorum yapmaya teşvik ediyor.

Taksit: Türkiye’de olmazsa olmaz olan bir diğer bölüm, tüm bankalar için ödeme seçenekleri, ayrıca alt kısımda da kampanyalar yazıyor. Hepsi tamam da ben baktığımda Axess ‘in olduğu bar farklı renkteydi, o biraz sırıtıyor.

İade Koşulları: Yıl olmuş 2015 ama hala ülkemizde e-ticarete bakış ve güven çok alt seviyelerde. Bu tip iade koşullarını açıkça yazmaktan hala korkuluyor ama HB burada açıkça yazarak bu korkunun önüne geçmeyi amaçlamış. Evet çok ön planda değil ama zaten olması gereken bu.

Diğer Satın Alma Seçenekleri: Üstteki marketplace uygulamasının tabdeki görünüşü aslında, biraz daha farklı bir tasarımda vererek anlatılıyor ve aralarında hız ve fiyata göre filtreleme yapabiliyoruz.

Bu Ürüne Bakanlar, Bunlara da Baktılar: Yine satın alma davranışları düşünülerek oluşturulmuş bir diğer alan, alt kısımda olduğu için pek görünmüyor ve tıklanmıyordur tahminimce. Slider şeklinde oluşturulmuş, en az 5 ürün listeleniyor. Bu arada bu başlıkta virgüle gerek yok bence :)

En Çok Satılan %Kategori İsmi% Listesi: İçinde olduğunuz kategoriye göre o kategorinin en çok satanlarını listeliyor. Bu kısma manuel dokunuşlar var mı bilemiyorum ama genellikle insanlar “Bestseller” almaya daha çok eğilim gösterir, bu kutucuğu da beğendim, yeri tartışılabilir belki…

Ürün Sayfasında Daha İyi Ne Olabilirdi?

• Ürünün öne çıkan özellikleri madde madde anlatılabilirdi, ürün açıklamalarına hiç girmeden ürünün bilgilerini vermek gibi, örneğin bu monitör için şu gibi:
  – Full HD Çözünürlük
  – 10000:1 Kontrast Oranı
  – 5ms Tepki Süresi
  – Led Panel
• Ürüne ait demo video veya 360 derece fotoğraf gibi daha fazla detay öğrenebileceğimiz bir anlatım olsa hiç soru işareti kalmaz.
• Sürpriz bir kargo fiyatıyla karşılaşabiliriz, ürün sayfasında kargo ve teslimat ile ilgili de fiyat bilgisi olmalı, sepette bunu gören kullanıcı çıkış yapabilir.
• Canlı destek eklenebilir, binlerce üründe bunu yapmak zor olsa da HB yapmalı, çok etkili bir özellik bu, özellikle bizim gibi “Bir insanla muhattap olma” isteği üst düzeyde olan bir millet için.

Özet

Hepsiburada.com yeni tasarımıyla bence oldukça iyi bir iş yapmış, hem günümüz şartlarına daha uygun bir görünüme sahip hem de seçtiği fontlar ve font büyüklükleriyle nereye ne kadar önem vermek istediğini gösteriyor. Anasayfadaki ve ürün sayfasında geliştirebileceğini düşündüğüm şeyleri de nokta nokta ekledim, tabii benimki sadece kişisel bir bakış ama büyük bütün markaların her türlü geri bildirimi değerlendirdiğini biliyorum. Bu değerlendirmeyi aslında “Sepet Sayfası”, “Statik Sayfalar” gibi çok daha detaylandırabilirdim ama kimsenin okumayacağı çok uzun bir yazı olmasını istemiyorum :) Benim HB’ye burada notum yüksek: 9/10