E-Ticaret Sitesinde Görsel Dil ve Kullanıcı Deneyimi Nasıl Optimize Edilir?

Bir müşterim geçen yıl bana şunu sordu: "Ürünlerimiz iyi, fiyatımız rakiplerle aynı; neden ziyaretçi sepete gelmeden çıkıyor?" Cevabın büyük kısmı görsel dilde ve e-ticaret kullanıcı deneyimi ayrıntılarındaydı. Bu yazıda ürün fotoğrafı standartlarını, galeri düzenini, kategori sayfasını, ürün kartını ve sepet akışını sahada nasıl ele aldığımı anlatıyorum. Ayrıca Baymard Institute araştırmalarından kaynağıyla birlikte bulguları da paylaşıyorum.

E-ticaret kullanıcı deneyimi nedir ve görsel dil bu deneyimin neresinde durur?

E-ticaret kullanıcı deneyimi, bir ziyaretçinin ürünü bulmasından ödemeyi tamamlamasına kadar sitede yaşadığı tüm etkileşimlerin toplamıdır. Görsel dil ise bu deneyimin taşıyıcısıdır: fotoğraflar, renkler, tipografi ve ürün kartları, müşterinin ürünü elle tutamadığı ortamda karar vermesini sağlayan ana bilgi kaynağıdır.

Fiziksel mağazada müşteri ürünü çevirir, tartar, dokusuna bakar. Online mağazada ise bu işlerin hepsini görsel yapar. Bu nedenle görsel dili "süsleme" olarak değil, ürün bilgisinin bir parçası olarak görüyorum. Güzel ama bilgi vermeyen bir fotoğraf, çirkin ama eksiksiz bir fotoğraftan daha az satar.

Öte yandan görsel dil yalnız fotoğraftan ibaret değildir. Buton renkleri, fiyat yazısının boyutu, stok uyarısının tonu ve ikonlar da aynı dilin kelimeleridir. Hepsi tutarlı konuştuğunda müşteri siteye güvenir; birbirine zıt konuştuğunda ise kararsız kalır.

Görsel dil satışları gerçekten etkiler mi?

Evet, ama etkisi çoğu zaman dolaylıdır. Görsel dil doğrudan "satın al" demez; müşterinin aklındaki soruları cevaplar ve güven üretir. Soruları cevapsız kalan müşteri ise ya rakibe gider ya da kargo iadesiyle geri döner.

Baymard Institute, 50 farklı araştırmanın ortalamasına göre sepet terk oranını %70,22 olarak veriyor. Aynı Baymard sepet terk listesinde kullanıcıların %19'u siteye kredi kartı bilgisi verecek kadar güvenmediği için ödemeyi yarıda bıraktığını söylüyor. Güven hissinin önemli bir kısmı ise görsel tutarlılıktan, profesyonel fotoğraftan ve düzenli bir arayüzden gelir.

Kısacası görsel dil tek başına satış yaratmaz; ancak satışın önündeki engellerin önemli bir kısmını kaldırır. Benim tecrübem de bu yönde: fotoğraf standardı oturmuş mağazalarda müşteri hizmetlerine gelen "bu ürün nasıl bir şey?" soruları belirgin biçimde azalıyor.

Ürün fotoğrafı standartlarını nasıl belirlersiniz?

Standart belirlemeye tek bir fotoğraftan değil, bir çekim kılavuzundan başlarsınız. Kılavuz; arka plan rengini, ışık yönünü, ürünün kadraj içindeki oranını, açı listesini ve dosya ölçülerini tek sayfada tanımlar. Böylece farklı zamanlarda, farklı fotoğrafçılarla çekilen ürünler bile aynı ailenin parçası gibi durur.

Sahada kullandığım temel kılavuz maddeleri şunlar:

• Liste görselinde sabit arka plan: genellikle beyaz veya çok açık nötr ton.
• Ürünün kadrajı doldurma oranı: tüm ürünlerde benzer, örneğin kenarlardan eşit boşluk.
• Açı listesi: önden, yandan, arkadan, detay ve kullanım anı.
• En-boy oranı: kategori genelinde tek oran, örneğin kare ya da 4:5.
• Renk doğruluğu: ekranda görünen rengin gerçek ürüne sadık olması.
• Dosya adı ve alt metin kuralı: ürün adı ve varyantı içeren açıklayıcı metin.

Ayrıca kılavuzu yazılı tutmanız çok önemli. Yeni bir ürün geldiğinde ekip "geçen sefer nasıl çekmiştik?" diye tahmin yürütmez, belgeye bakar.

Bir ürün sayfasında kaç fotoğraf ve hangi açılar olmalı?

Kesin bir sayı vermek yerine her fotoğrafın bir soruyu cevaplamasını öneriyorum. Müşteri ürünün önünü, arkasını, detayını, boyutunu ve kullanım halini görmek ister. Bu beş soru, çoğu kategoride beş ile sekiz arası görsel ihtiyacı doğurur; bu, saha tecrübesine dayalı bir başlangıç aralığıdır, garanti değildir.

Boyut sorusu en sık atlanan sorudur. Baymard'ın ölçek görseli araştırmasına göre kullanıcıların %42'si ürünün boyutunu fotoğraflardan tahmin etmeye çalışıyor; buna karşın incelenen sitelerin %28'i ürünü tanıdık bir nesneyle ya da bir insanla birlikte gösteren "ölçekli" görsel sunmuyor. Dolayısıyla elde tutulan, masaya konmuş veya bir mankenin üzerindeki bir kare, çoğu zaman beşinci stüdyo açısından daha değerlidir.

Giyim ve aksesuarda manken üzerinde çekim, mobilyada oda içi kurgu, elektronikte port ve düğme detayı öne çıkar. Yani açı listesini kategoriye göre özelleştirirsiniz.

Stüdyo fotoğrafı mı, yaşam tarzı fotoğrafı mı?

İkisine de ihtiyacınız var, ama görevleri farklıdır. Stüdyo fotoğrafı ürünü karşılaştırılabilir kılar; yaşam tarzı fotoğrafı ise ürünün müşterinin hayatında nasıl duracağını gösterir. Birini diğerinin yerine koymak genellikle bilgi kaybına yol açar.

Örneğin bir seramik kupa satıyorsanız, beyaz fonlu ön görsel kartta durur; kahve dolu, masadaki bir kare ise galerinin sonunda duygusal bağı kurar.

Ürün galerisini nasıl tasarlamalısınız?

Galeri, fotoğrafların müşteriye sunulma biçimidir; iyi fotoğraf kötü galeride kaybolur. Temel kuralım şu: müşteri kaç görsel olduğunu ve hangisinde olduğunu her an görebilmeli. Bu nedenle ek görselleri küçük önizlemelerle (thumbnail) gösteriyorum.

Baymard'ın önizleme görselleri araştırması mobil sitelerin %76'sının ek ürün görsellerini önizleme yerine yalnızca nokta göstergeleriyle sunduğunu belirtiyor. Noktalar kaç görsel olduğunu söyler, ama içeriği göstermez; müşteri de aradığı detayı bulmak için tüm galeriyi kaydırmak zorunda kalır.

Galeride dikkat ettiğim diğer ayrıntılar şunlar:

• Yakınlaştırma, masaüstünde tıklama veya fareyle, mobilde iki parmakla sorunsuz çalışmalı.
• Varyant seçildiğinde (renk gibi) galeri o varyantın görsellerine geçmeli.
• Tam ekran görünümde kapatma düğmesi her zaman ekranda kalmalı.
• Video varsa önizlemesinde bir oynat simgesi yer almalı.

Kategori sayfasını görsel olarak nasıl düzenlersiniz?

Kategori sayfası, müşterinin ürünleri yan yana kıyasladığı vitrindir. Burada görsel dilin görevi karşılaştırmayı kolaylaştırmaktır. Aynı oran, aynı arka plan ve aynı kadrajdaki ürünler, gözün farkları hızla yakalamasını sağlar; karışık görseller ise dikkati ürün yerine fotoğraf farklılıklarına çeker.

Izgara düzeninde satır başına ürün sayısını ürün tipine göre seçersiniz. Detay isteyen ürünlerde (mobilya, ayakkabı) daha büyük kartlar, hızlı taranan ürünlerde (sarf malzemesi) daha sık bir ızgara iyi çalışır. Ayrıca filtre ve sıralama alanını ürünlerin üstünde, kolay erişilen bir yerde tutarsınız.

Kategori hiyerarşisinin kendisi ise ayrı bir konu. Menü ve kategori ağacını büyük sitelerde kategori yapısı yazısında ayrıntılı anlattım; burada yalnız sayfanın görsel sunumuna odaklanıyorum.

İyi bir ürün kartında hangi bilgiler yer almalı?

Ürün kartı, kategori sayfasındaki tek bir ürünün özetidir ve müşteri tıklayıp tıklamayacağına bu küçük alanda karar verir. Bu yüzden kart, en kritik bilgileri tek bakışta vermeli; gerisini ürün sayfasına bırakmalı.

1. Standarda uygun ana görsel.
2. Açık ve tam ürün adı.
3. Fiyat; indirim varsa eski ve yeni fiyat birlikte.
4. Varyant göstergesi, örneğin renk kutucukları.
5. Değerlendirme puanı ve yorum sayısı, varsa.
6. Kritik durum bilgisi: stok azaldı, ücretsiz kargo gibi.

Öte yandan karta her şeyi doldurmak da hatadır. Beş rozet, üç etiket ve iki buton taşıyan bir kart, ızgarada gürültü yaratır. Benim kuralım şu: kart üzerindeki her öğe, müşterinin tıklama kararına katkı sağlamıyorsa çıkar.

Bazı mağazalarda kartın üzerine gelince ikinci görseli göstermek iyi sonuç verir. Ancak bu davranış mobilde yoktur; dolayısıyla asıl bilgiyi hiçbir zaman yalnızca üzerine gelme durumuna saklamazsınız.

Renk, tipografi ve ikonlar görsel dili nasıl tamamlar?

Fotoğraflar ürünü anlatır; renk, tipografi ve ikonlar ise mağazanın sesini oluşturur. Bu sesin görevi, ürünlerin önüne geçmeden onlara çerçeve olmaktır. Bu nedenle arayüz renklerini ürün fotoğraflarından daha sakin tutmanızı öneririm.

Renkte en önemli kural, eylem rengini tek ve tutarlı kullanmaktır. "Sepete ekle" butonu hangi renkse, o renk başka dekoratif bir amaca hizmet etmemeli. Böylece müşteri ne yapması gerektiğini renk üzerinden de okur. Buton metinleri ve yerleşimi için CTA butonu örnekleri yazısına göz atabilirsiniz.

Tipografide fiyat, ürün adı ve açıklama arasında net bir hiyerarşi kurarsınız. İkonlarda ise tek bir çizim ailesi seçersiniz; farklı kütüphanelerden gelen ikonlar, dikkatli bakan müşteriye özensizlik hissi verir. Marka renk ve fontlarınızı henüz netleştirmediyseniz marka kimliği çalışmasıyla başlamak daha sağlıklı olur.

Görseller sayfa hızını ve arama görünürlüğünü nasıl etkiler?

Ürün görselleri genellikle bir e-ticaret sayfasının en ağır dosyalarıdır. Ürün sayfasında en büyük öğe çoğu zaman galerinin ilk fotoğrafıdır ve bu da Largest Contentful Paint (LCP) ölçümünü doğrudan belirler. web.dev LCP rehberi iyi bir deneyim için LCP'nin 2,5 saniye veya altında kalmasını öneriyor.

Pratikte yaptığım işler şunlar:

• Görselleri WebP veya AVIF gibi modern formatlarda sunmak.
• Farklı ekranlar için farklı boyutlarda dosya üretmek (srcset).
• Galerinin ilk görselini geç yüklemeye (lazy loading) almamak, alttakileri almak.
• Genişlik ve yükseklik değerlerini tanımlayarak sayfa kaymasını önlemek.

Arama tarafında ise Google'ın Google Görseller en iyi uygulamaları açıklayıcı dosya adı ve alt metin kullanmanızı, görseli ilgili metnin yakınına koymanızı öneriyor. Görsel boyutlarını hızlıca küçültmek için resim küçültme aracını kullanabilirsiniz. Hız konusunu daha geniş biçimde site hızı ve SEO yazısında ele aldım.

Mobilde e-ticaret kullanıcı deneyimi neden ayrı bir planlama ister?

Mobil ekran, masaüstünün küçük bir kopyası değildir; farklı bir kullanım bağlamıdır. Müşteri tek eliyle, çoğu zaman dikkati başka yerdeyken alışveriş yapar. Bu nedenle mobilde e-ticaret kullanıcı deneyimi, parmakla dokunma alanları, dikey kaydırma ve kısa dikkat süresi üzerine oturur.

Görsel dil açısından mobilde öne çıkan kararlar şunlar: galeri ekran genişliğini tam kullanmalı, önizlemeler parmakla rahatça seçilebilmeli, "sepete ekle" butonu kaydırırken erişilebilir kalmalı. Ayrıca ürün kartında metin boyutu okunabilir olmalı; masaüstünde zarif görünen ince bir font, telefonda çoğu zaman okunmaz hale gelir.

Tasarım sürecinde mobili başa almak bu sorunların çoğunu baştan önler. Yaklaşımın mantığını mobil öncelikli tasarım yazısında anlattım. Kendi sayfalarınızı telefonda denemek için de mobil uyumluluk testi rehberini takip edebilirsiniz.

Sepet sayfasında hangi UX kararları terk oranını düşürür?

Sepet, müşterinin "bu ürünü gerçekten alacak mıyım?" diye son kez düşündüğü yerdir. Burada görsel dilin görevi netlik ve güvendir. Sepetteki her ürün küçük bir görsel, varyant bilgisi, adet ve fiyatla birlikte yer almalı; müşteri neyi aldığından bir an bile şüphe etmemeli.

Baymard verilerinde ödeme adımında terkin en büyük nedeni %40 ile kargo, vergi ve ücret gibi ekstra maliyetlerin yüksek bulunması. Dolayısıyla toplam tutarı, kargo ücretini ve teslim süresini sepette açıkça göstermek, sürprizi ödeme ekranına bırakmaktan çok daha iyidir. Üstelik aynı araştırmada müşterilerin %18'i hesap oluşturmaya zorlandığı için vazgeçtiğini söylüyor.

• Toplam tutarı ve kargo ücretini sepette erken gösterin.
• Misafir olarak satın alma seçeneğini öne çıkarın.
• Adet değiştirme ve ürün silme işlemlerini kolaylaştırın.
• Güvenli ödeme ve iade bilgisini buton yakınına koyun.
• İndirim kodu alanını dikkat dağıtmayacak şekilde konumlandırın.

Bir de sepette ilgili ürün önerisi konusu var. Ölçülü kullanıldığında sepet tutarını artırabilir; ancak ekranı dolduran bir öneri şeridi, müşteriyi ödeme adımından uzaklaştırır. Bu yüzden öneriyi küçük ve sepetin altında tutarsınız.

Ödeme formu ne kadar uzun olmalı?

Olabildiğince kısa. Baymard'ın ölçümüne göre ideal bir ödeme akışı yaklaşık 12 ile 14 form öğesiyle, yani 7 ile 8 form alanıyla tamamlanabiliyor. Buna karşın ABD'deki ortalama ödeme akışı varsayılan olarak 23,48 form öğesi gösteriyor. Aradaki fark, müşterinin karşısına çıkan gereksiz yük demektir.

Formu kısaltmak için her alana şu soruyu sorarım: bu bilgi olmadan sipariş teslim edilebilir mi? Fatura adresi çoğu siparişte teslimat adresiyle aynıdır; bu yüzden varsayılan olarak "aynı" seçili gelir. Şirket adı gibi isteğe bağlı alanlar ise gizli bir bağlantının arkasına geçer.

Görsel açıdan da form sade kalmalı: tek sütun, alanın üstünde duran etiketler ve anında gösterilen hata mesajları. Formlarda yaptığım genel tasarım tercihlerini form tasarımı yazısında daha ayrıntılı bulabilirsiniz.

Güven sinyallerini görsel olarak nasıl sunarsınız?

Güven sinyali, müşteriye "bu mağaza gerçek ve sorunsuz" mesajını veren her öğedir: gerçek müşteri yorumları, iletişim bilgileri, iade koşulları, güvenli ödeme ifadesi. Bunların sayısından çok, doğru yerde ve dürüst biçimde durması önemlidir.

Örneğin iade koşulunu yalnız footer'daki bir sayfaya gömmek yerine ürün sayfasında fiyatın yakınına kısa bir satırla koyarsınız. Müşteri yorumlarında ise kullanıcıların yüklediği fotoğraflar, stüdyo fotoğrafının cevaplayamadığı "gerçekte nasıl görünüyor?" sorusunu cevaplar.

Ancak burada net bir uyarım var: uydurma yorum, sahte sayaç veya gerçek olmayan "son 3 ürün" uyarısı kullanmayın. Kısa vadede tıklama getirebilir, ama müşteri fark ettiği anda tüm görsel dilinize olan güveni kaybeder. Üstelik bu tür uygulamalar tüketici mevzuatı açısından da risk taşır.

Tedarikçi fotoğrafları kullanmak yeterli mi?

Başlangıç için işinizi görebilir, ama uzun vadede sizi rakiplerinizden ayırmaz. Aynı ürünü satan onlarca mağaza aynı tedarikçi fotoğrafını kullandığında, müşterinin gözünde fark yalnız fiyata iner. Üstelik tedarikçi görselleri çoğu zaman farklı arka plan, oran ve ışıkla gelir; bu da kategori sayfanızda dağınık bir görüntü yaratır.

Benim önerim şu: en çok satan ve en yüksek kâr bırakan ürünlerden başlayarak kendi çekimlerinizi yapın. Kalan ürünlerde ise tedarikçi görsellerini en azından aynı arka plana ve orana getirin. Ayrıca kendi çektiğiniz ölçekli ve kullanım görselleriyle galeriyi tamamlarsınız.

Bir başka konu da görsel kullanım hakkıdır. Tedarikçinin fotoğrafı kullanmanıza izin verdiğinden emin olun; izinsiz görsel, ileride hem hukuki hem de itibar sorununa dönüşebilir.

Kampanya bannerları görsel dili nasıl etkiler?

Kampanya dönemleri, görsel dilin en sık bozulduğu dönemlerdir. Her indirim için farklı renk, farklı font ve farklı stilde bir banner hazırlandığında, mağaza birkaç ay içinde birbirinden kopuk parçalara dönüşür. Müşteri ise bu dağınıklığı özensizlik olarak okur.

Bu nedenle kampanya görselleri için de küçük bir şablon seti hazırlarsınız: sabit bir yerleşim, marka renklerinden seçilmiş bir vurgu tonu ve tek bir başlık fontu. Böylece her kampanya taze görünür, ama mağazanın kimliği değişmez. Ayrıca bannerın ürünleri ekranın altına itmediğinden emin olun; özellikle mobilde dev bir banner, müşterinin asıl aradığı ürünlere ulaşmasını geciktirir.

Arayüzde sık gördüğüm görsel dil hataları nelerdir?

Denetimlerde en sık karşılaştığım hatalar birbirine çok benziyor. Çoğu, kötü niyetten değil, standart eksikliğinden doğuyor. Tedarikçiden gelen fotoğraflar, farklı dönemlerin kareleri ve her kampanyada değişen banner dili bir araya gelince mağaza dağınık görünüyor.

• Farklı arka plan ve oranlarda ürün görselleri.
• Varyant seçildiğinde değişmeyen galeri.
• Boyutu anlaşılmayan, ölçek referansı olmayan ürünler.
• Sıkıştırmasız, sayfayı yavaşlatan dev dosyalar.
• Birden fazla vurgu rengi ve birbiriyle yarışan butonlar.
• Ürünü sahnede kaybeden aşırı süslü yaşam tarzı fotoğrafları.

Satışı düşüren arayüz hatalarının daha geniş bir listesini UX hataları ve satış yazısında topladım. Bu yazıda ise yalnızca görsel dile ve e-ticaret akışına özgü olanlara odaklanıyorum.

E-ticaret kullanıcı deneyimi iyileştirmesine nereden başlamalısınız?

Her şeyi aynı anda değiştirmeye çalışmak yerine, en çok trafik ve ciro taşıyan sayfalardan başlarsınız. Çoğu mağazada bunlar en çok satan birkaç ürün sayfası, ana kategori sayfaları ve sepettir. Buralardaki bir iyileştirme, onlarca az ziyaret edilen sayfadaki düzeltmeden daha fazla etki yaratır.

1. Analitikten en çok ziyaret ve gelir alan sayfaları çıkarın.
2. Bu sayfalarda fotoğraf standardını ve galeriyi denetleyin.
3. Sepet ve ödeme adımlarını kendiniz mobilde deneyin.
4. Bulduğunuz sorunları etki ve efor açısından sıralayın.
5. Değişiklikleri tek tek yayına alın ve etkisini izleyin.

Böylece hangi değişikliğin işe yaradığını görebilirsiniz. Dönüşüm hedefini ve ölçümünü önceden netleştirmek de önemli; bunu dönüşüm hedefi belirleme yazısında anlattım.

Görsel dil değişikliğinin etkisini nasıl ölçersiniz?

Etkiyi ölçmek için değişiklikten önce bir başlangıç değeri almanız gerekir. Ürün sayfası için sepete ekleme oranı, kategori sayfası için ürün tıklama oranı, sepet için ödeme adımına geçiş oranı iyi başlangıç metrikleridir. Değişiklikten sonra aynı metrikleri benzer bir dönemle kıyaslarsınız.

Bununla birlikte mevsimsellik ve kampanyalar sonucu bozabilir. Bu nedenle mümkünse A/B testi kurarsınız; trafik düşükse en azından değişikliği kampanyasız bir döneme denk getirirsiniz. Nitel tarafta ise müşteri hizmetlerine gelen ürün sorularını ve iade nedenlerini izlersiniz; "beklediğimden küçük" türü iadelerin azalması, ölçek görselinin işe yaradığını gösterir.

Tasarımı dönüşüm hedefiyle birlikte ele alan yaklaşımı dönüşüm odaklı web tasarım yazısında ayrıca bulabilirsiniz. Performans tarafında düzenli ölçüm için Lighthouse testi iyi bir alışkanlıktır.

Bu işi ekip içinde mi yapmalı, dışarıdan destek mi almalı?

Cevap, ürün sayınıza ve ekibinizin becerisine bağlıdır. Az sayıda ürünü olan bir mağaza, iyi bir çekim kılavuzu ve basit bir stüdyo kurulumuyla fotoğrafları kendi içinde üretebilir. Yüzlerce ürünü ve sık yenilenen koleksiyonu olan mağazalarda ise süreçleşmiş bir çekim ve düzenleme akışı gerekir.

Benim önerim şu: standardı ve kılavuzu dışarıdan destekle bir kez doğru kurun, uygulamayı ise mümkün olduğunca ekibinize bırakın. Böylece her yeni ürün için dışarıya bağımlı kalmazsınız. Arayüz tarafında galeri, ürün kartı ve sepet tasarımı ise teknik uygulama gerektirdiği için genellikle bir tasarım ve geliştirme projesinin parçası olur.

Bu alanda destek arıyorsanız e-ticaret danışmanlığı ve web tasarım hizmetlerimde kapsamı ayrıntılı anlattım. Kısacası önce standardı, sonra arayüzü, en son da ölçümü oturtun.

Varyant seçimini görsel olarak nasıl göstermelisiniz?

Renk, beden veya malzeme seçenekleri olan ürünlerde varyant seçimi, görsel dilin en çok sınandığı yerdir. Müşteri kırmızıyı seçtiğinde kırmızı ürünü görmek ister; seçimin ardından hâlâ mavi ürünün fotoğrafı duruyorsa kafası karışır ve yanlış ürünü sipariş etme riski doğar.

Bu nedenle renk seçeneklerini düz renk kutucukları yerine mümkünse küçük ürün görselleriyle sunarım. Örneğin "lacivert" ile "gece mavisi" arasındaki farkı yazıyla anlatmak zordur; küçük bir fotoğraf ise farkı hemen gösterir. Ayrıca stokta olmayan varyantı tamamen gizlemek yerine soluk bir görünümle işaretlemek, müşteriye seçeneğin var olduğunu ama şu an tükendiğini söyler.

Beden seçiminde ise görsel destek, beden tablosunun yanında bir ölçü çizimi olabilir. Müşteri "göğüs genişliği" ifadesini okuduğunda nereden ölçeceğini çizimde görür. Böylece yanlış beden kaynaklı iadeleri azaltma şansınız artar.

Ürün açıklaması ve görseller nasıl birlikte çalışır?

Görsel ile metin aynı hikâyeyi anlatmalıdır. Açıklamada "mat yüzey" yazıyor ama fotoğrafta ürün parlıyorsa, müşteri hangisine inanacağını bilemez. Dolayısıyla metni yazarken galeriyi, galeriyi hazırlarken de metni göz önünde tutarsınız.

Sahada uyguladığım basit bir yöntem var: açıklamadaki her önemli iddiayı bir görselle eşleştiririm. "Su geçirmez fermuar" diyorsanız fermuarın yakın çekimini, "kolay temizlenir" diyorsanız kullanım sonrası bir kareyi galeriye eklersiniz. Üstelik bu eşleştirme, ekip içinde hangi karenin eksik olduğunu da hemen ortaya çıkarır.

Teknik özellikleri ise uzun paragraflar yerine kısa bir tabloda toplarım. Müşteri tabloda aradığı değeri bulur, fotoğrafta da o değerin karşılığını görür. Metin tarafını arama motorları için de güçlendirmek isterseniz SEO uyumlu içerik yazısı iyi bir başlangıç noktası olur.

Erişilebilirlik görsel dilin neresinde durur?

Erişilebilirlik, görsel dilin herkes için çalışmasını sağlar. Görme güçlüğü olan bir müşteri ekran okuyucu kullanır; renk körlüğü olan bir müşteri ise yalnız renkle verilen bilgiyi kaçırabilir. Bu yüzden görsel kararları yalnız estetik değil, erişim açısından da test edersiniz.

Pratikte önemsediğim maddeler şunlar: her ürün görselinde anlamlı bir alt metin, metin ile arka plan arasında yeterli kontrast, yalnız renge dayanmayan durum göstergeleri (örneğin stok uyarısında ikon ve metin birlikte) ve klavyeyle kullanılabilen bir galeri. Ayrıca buton ve dokunma alanlarını parmakla rahatça seçilecek büyüklükte tutarsınız.

Bu maddeler yalnız engelli kullanıcılara değil, güneş altında telefonuna bakan ya da acele eden herkese fayda sağlar. Kısacası erişilebilir bir görsel dil, daha geniş bir müşteri kitlesine daha az sürtünmeyle satış yapar.

Son söz: görsel dil bir kez yapılıp biten bir iş mi?

Hayır. Görsel dil, ürün yelpazeniz, müşteri kitleniz ve cihaz alışkanlıkları değiştikçe güncellenen canlı bir sistemdir. Ancak sağlam bir temel kurduğunuzda güncelleme küçük adımlarla ilerler; her sezon baştan başlamazsınız.

Özetle e-ticaret kullanıcı deneyimi iyileştirmesi, müşterinin aklındaki soruları görsel olarak cevaplamakla başlar: ürün neye benziyor, ne kadar büyük, günlük hayatta ne işe yarıyor, toplamda ne kadar tutacak ve bu mağazaya güvenebilir miyim? Bu sorulara net cevap veren bir mağaza, rakiplerinden daha az iade ve daha fazla tekrar satın alma görür.

Son olarak şunu hatırlatmak isterim: en iyi görsel dil, müşterinizin gözünden kurulan dildir. Kendi mağazanızda bir müşteri gibi alışveriş yapın, telefonunuzdan bir ürünü sepete ekleyip ödeme adımına kadar ilerleyin. Takıldığınız her an, müşterinizin de takıldığı bir andır; bu küçük deneyi her çeyrekte tekrarlamanızı öneririm.

Yazıdaki bulguların çoğu Baymard ve Google'ın açık kaynaklarına dayanıyor; kendi mağazanızda ise her değişikliği ölçerek ilerlemenizi öneririm.