Ürün Karşılaştırma Sayfası Nasıl Tasarlanır? Tablo, Mobil ve Karar Rehberi

Ürün karşılaştırma sayfası, kararsız ziyaretçinin en çok ihtiyaç duyduğu anda devreye giren bir ekrandır. Ziyaretçi iki ya da üç model arasında gidip geliyorsa, sekmeler arasında not tutmak zorunda kalıyorsa, satın alma kararı da gecikir. Bu rehberde Talha Aslan ve ekibi olarak ürün karşılaştırma sayfasını adım adım nasıl kurduğumuzu anlatıyoruz: hangi özellikleri tabloya alırız, farkları nasıl vurgularız, mobilde ne yaparız ve ziyaretçiyi karara nasıl taşırız. Örnekler gerçek müşteri vakası değil, örnek senaryodur.

Bu sayfa özellikle teknik ürünlerde, paket ve abonelik seçeneklerinde ve aynı ürünün farklı sürümlerinde değer üretir. Örneğin bir yazılım firmasının üç paketi varsa, ziyaretçi her paketin sayfasını ayrı ayrı açmak yerine tek tabloya bakar. Böylece karar süresi kısalır ve destek ekibine gelen "hangisini almalıyım" sorusu azalır.

Nielsen Norman Group, karşılaştırma tablolarını ele aldığı Comparison Tables for Products, Services, and Features yazısında temel ilkeyi şöyle özetler: işi kullanıcının yerine siz yapın. Yani ziyaretçinin kafasında yapacağı hesabı sayfa onun yerine yapmalıdır. Biz de tasarıma bu ilkeyle başlarız; her sütun, her satır ve her renk bu soruya cevap vermelidir: bu öğe karar vermeyi kolaylaştırıyor mu?

Kısacası ürün karşılaştırma sayfası bir katalog değil, bir karar aracıdır. Kataloğu ürün listesi ve ürün detay sayfası taşır. Karşılaştırma ekranı ise o ikisinin arasında kalan kararsız anı yönetir.

Hangi durumda ürün karşılaştırma sayfası gerekir?

Her mağazanın böyle bir sayfaya ihtiyacı yoktur. Ucuz, basit ve hızlı alınan ürünlerde ziyaretçi uzun bir tablo okumak istemez; tişört ya da kalem için karşılaştırma ekranı çoğu zaman gereksiz kalır. Öte yandan pahalı, teknik ya da birbirine çok benzeyen ürünlerde durum tersine döner.

Biz bir projede ihtiyacı şu sorularla ölçeriz:

• Ürünler aynı ihtiyacı mı karşılıyor, yani ziyaretçi bunlardan yalnız birini mi alacak?
• Ürünler arasında en az üç dört ölçülebilir fark var mı?
• Ziyaretçi satın almadan önce birden fazla ürün sayfası açıyor mu?
• Destek kanallarına "farkı ne" sorusu sık geliyor mu?
• Ürün fiyatı, ziyaretçinin acele etmeyeceği bir düzeyde mi?

Bu sorulardan çoğuna evet diyorsanız karşılaştırma sayfası işinize yarar. Ancak ürünler birbirini tamamlıyorsa, yani ziyaretçi ikisini birlikte alacaksa, ihtiyacınız karşılaştırma değil çapraz satış alanıdır. Bu konuyu e-ticarette çapraz satış yazımızda ayrıca ele aldık. Ayrıca ürünler birbirinden çok farklıysa da tablo anlamını yitirir; bir buzdolabını bir süpürgeyle kıyaslamak ziyaretçiye hiçbir şey anlatmaz.

Statik ve dinamik karşılaştırma arasındaki fark nedir?

İki temel yaklaşım vardır. Statik karşılaştırmada ürünleri siz seçer ve tabloyu önceden hazırlarsınız. Dinamik karşılaştırmada ise ziyaretçi ürün listesinden istediği modelleri işaretler ve tabloyu kendisi oluşturur. Hangisini seçeceğiniz katalog büyüklüğüne ve ürünlerin ne sıklıkla değiştiğine bağlıdır.

Nielsen Norman Group, küçük ve sabit ürün setlerinde statik tabloyu, geniş kataloglarda ise ziyaretçinin seçtiği dinamik tabloyu önerir. Biz de çoğu projede ikisini birlikte kurarız. Örneğin paket sayfasında statik tablo durur, kategori sayfasında ise "karşılaştır" kutusuyla dinamik tablo açılır. Böylece hem arama motoruna kalıcı bir sayfa sunarsınız hem de ziyaretçiye esneklik tanırsınız.

Ürün karşılaştırma sayfasında kaç ürün yan yana durmalı?

Kısa cevap: az. Ürün sayısı arttıkça tablo genişler, ziyaretçi yatay kaydırmaya başlar ve hangi sütunun hangi ürün olduğunu unutur. Nielsen Norman Group, karşılaştırmayı yaklaşık beş ürünle sınırlamayı, dinamik tablolarda ise genelde üç dört ürünü hedeflemeyi önerir. Mobilde bu sayı yaklaşık ikiye iner.

Bizim pratik kuralımız şudur: masaüstünde en fazla dört sütun, mobilde iki sütun. Ziyaretçi beşinci ürünü eklemek isterse ona kibar bir uyarı gösteririz ve listeden bir ürünü çıkarmasını isteriz. Üstelik her sütunun üstüne küçük bir "kaldır" düğmesi koyarız. Çünkü karar süreci daraltma sürecidir; ziyaretçi önce dört ürüne bakar, sonra ikisini eler ve kalan ikisini derinlemesine okur.

Örnek senaryo olarak bir elektrikli süpürge mağazasını düşünün. Ziyaretçi kategori sayfasından altı model işaretlemek isterse, tablo karmaşık hale gelir. Bunun yerine sayfa dört seçimden sonra "karşılaştırmayı aç" düğmesini öne çıkarır. Ziyaretçi tabloda iki modeli kaldırınca ekran sadeleşir ve farklar netleşir.

Dolayısıyla ürün sayısını bir tasarım kısıtı olarak görün. Bu kısıt ziyaretçiyi sınırlamaz, aksine onu karar noktasına daha hızlı taşır.

Hangi özellikler tabloya girmeli?

Tabloya ürün veri tabanındaki her alanı dökmek en sık gördüğümüz hatadır. Ziyaretçi otuz satırlık bir listede kaybolur ve önemli farkı gözden kaçırır. Bu nedenle satırları seçerken ziyaretçinin karar verirken gerçekten baktığı ölçütlerden yola çıkarız.

Bu ölçütleri bulmak için birkaç kaynağa bakarız:

1. Destek kanallarına gelen sorular: insanlar en çok neyi soruyor?
2. Ürün yorumları: alıcılar hangi özelliği övüyor ya da şikâyet ediyor?
3. Site içi arama terimleri: ziyaretçi hangi özelliği arıyor?
4. Satış ekibinin notları: müşteriyi hangi fark ikna ediyor?
5. İade nedenleri: alıcı neyi beklemişti de bulamadı?

Ardından satırları önem sırasına koyarız. En üstte fiyat, temel kullanım amacı ve en belirleyici iki üç teknik özellik durur. Daha sonra ikincil bilgiler gelir: renk seçenekleri, kutu içeriği, garanti, teslimat. En alta ise meraklı ziyaretçi için ayrıntılı teknik veriler kalır ve bunları katlanabilir bir bölüme koyarız.

Örneğin bir kahve makinesi tablosunda "basınç değeri" teknik olarak önemlidir. Ancak çoğu ziyaretçi için "kaç fincan hazırlar" ve "temizliği ne kadar kolay" satırları daha belirleyicidir. Kısacası satır seçimi, ürün ekibinin değil ziyaretçinin diliyle yapılmalıdır.

Veri tutarlılığını nasıl sağlarsınız?

Karşılaştırma tablosu, verisi kadar güvenilirdir. Bir üründe "ağırlık" satırı kilogram, ötekinde gram cinsinden yazıyorsa ziyaretçi yanlış sonuca varır. Bir üründe değer boşsa, ziyaretçi o özelliğin olmadığını mı yoksa bilginin eksik olduğunu mu anlamalı? Nielsen Norman Group da eksik ya da uyumsuz verinin tabloyu çok daha az yararlı hale getirdiğini vurgular.

Biz bu sorunu tasarımdan önce, veri aşamasında çözeriz:

• Her özellik için tek bir birim belirleriz ve tüm ürünlerde onu kullanırız.
• Evet ya da hayır cevaplı özellikleri aynı biçimde yazarız; bir yerde "var", başka yerde "mevcut" demeyiz.
• Boş hücreye anlam veririz: "yok" ile "bilgi yok" ayrı ifadelerdir.
• Ürün kartı ile tabloyu aynı veri kaynağından besleriz, böylece iki yerde farklı bilgi oluşmaz.
• Yeni ürün eklerken zorunlu alan listesi kullanırız.

Üstelik bu disiplin yalnız karşılaştırma sayfasına fayda sağlamaz. Aynı yapılandırılmış veri, filtrelerin, ürün kartlarının ve yapılandırılmış veri işaretlemesinin de temelini oluşturur. Yani veri temizliği bir kez yapılan ve birçok ekranı besleyen bir yatırımdır. Bu nedenle projeye başlarken ürün özellik tablosunu tasarım dosyasıyla birlikte ele alırız.

Satır ve sütun düzenini nasıl kurmalısınız?

En rahat düzen, ürünleri sütunlara ve özellikleri satırlara yerleştirmektir. Ziyaretçi gözünü bir satır boyunca soldan sağa gezdirir ve aynı özelliği tüm ürünlerde karşılaştırır. Nielsen Norman Group da etiketlerin solda ve üstte durmasını, metnin kısa ve hizalı olmasını önerir.

Biz düzeni şu ayrıntılarla güçlendiririz. İlk olarak her sütunun üstünde ürün görseli, adı, fiyatı ve satın alma düğmesi yer alır. Ardından satır etiketleri sol sütunda sabit durur ve kısa kalır. Satırlar arasında belirgin ama sakin ayırıcı çizgiler ya da hafif zemin farkı kullanırız. Böylece tik ve çarpı işaretleri doğru satırla eşleşir.

Hücre içeriğinde de kısa ifadeler tercih ederiz. "Bu ürün tam iki yıl boyunca üretici garantisi altındadır" yerine "2 yıl" yazmak hem okumayı hızlandırır hem de karşılaştırmayı kolaylaştırır. Sayısal değerleri aynı hizada tutmak da gözün farkı yakalamasına yardım eder.

Öte yandan ilgili satırları gruplarız. "Boyut ve ağırlık", "Performans", "Garanti ve teslimat" gibi ara başlıklar uzun bir tabloyu parçalara ayırır. Ziyaretçi ilgilendiği grubu açar, diğerlerini kapalı bırakır. Bu yapı özellikle teknik ürünlerde tablonun bir duvar gibi görünmesini engeller.

Farkları vurgulama özelliği nasıl çalışır?

Uzun bir tabloda satırların çoğu tüm ürünlerde aynıdır. Örneğin dört telefonun hepsinde aynı şarj girişi varsa, bu satır karar için bir şey söylemez. Ziyaretçinin asıl görmesi gereken, ürünleri birbirinden ayıran satırlardır. Bu nedenle kullanıcıya görünümü kontrol etme imkânı veririz.

Nielsen Norman Group üç yaygın çözümden söz eder: katlanabilir satırlar, tüm ürünlerde aynı olan satırları gizleme ve farkları vurgulayan bir anahtar. Biz genelde tablonun üstüne "yalnız farkları göster" anahtarını koyarız. Ziyaretçi bunu açınca aynı değerli satırlar kaybolur ve tablo yarı yarıya kısalır.

Vurgulamada renk tek başına yeterli değildir. Renk körlüğü olan bir ziyaretçi yalnız renkle ayrılan farkı göremez. Bu yüzden rengin yanında kalın yazı, küçük bir simge ya da metin etiketi kullanırız. Ayrıca kontrastın okunur kalmasına dikkat ederiz; açık sarı zemin üstünde gri yazı hem şık durmaz hem de okunmaz.

Bir de "en iyi değer" vurgusu vardır. Örneğin pil ömrü satırında en uzun süreyi kalın gösterebilirsiniz. Ancak bunu dikkatli kullanın. Her satırda bir kazanan işaretlerseniz tablo bir reklam panosuna döner ve ziyaretçi tarafsızlığınızdan şüphe eder.

Sabit başlık neden gereklidir?

Ziyaretçi tabloyu aşağı kaydırdıkça sütun başlıkları ekrandan çıkar. Yirminci satıra geldiğinde hangi sütunun hangi ürün olduğunu hatırlamak zorunda kalır. Bu da gereksiz bir zihinsel yüktür. Nielsen Norman Group bu yüzden sütun başlıklarının kaydırma sırasında sabit kalmasını önerir.

Biz sabit başlıkta ürünün tam kartını değil, sadeleşmiş bir sürümünü gösteririz: küçük görsel, kısa ad ve fiyat. Satın alma düğmesini de bu şeritte tutarız; böylece ziyaretçi karar verdiği anda yukarı kaydırmak zorunda kalmaz. Şerit ince olmalıdır, aksi halde ekranın büyük bölümünü kaplar ve tabloyu okumayı zorlaştırır.

Aynı mantığı yatay eksende de uygularız. Tablo yatay kaydırma gerektiriyorsa, sol sütundaki satır etiketleri yerinde sabit kalır. Böylece ziyaretçi sağa kaydırdığında hangi özelliğe baktığını kaybetmez.

Teknik tarafta sabit başlık çoğu zaman modern CSS ile kolayca çalışır. Ancak dikkat etmeniz gereken nokta, sabit şeridin içerik kaymasına yol açmamasıdır. Şerit belirdiğinde sayfa aşağı yukarı zıplıyorsa, ziyaretçi okuduğu satırı kaybeder. Bu nedenle şeridin yerini baştan ayırırız ve geçişi yumuşak tutarız.

Mobilde ürün karşılaştırma sayfası nasıl tasarlanır?

Mobil ekran, karşılaştırma tasarımının en zor sınavıdır. Dört sütunlu bir tablo telefonda ya küçülüp gözü yorar ya da yatay kaydırmaya mahkûm olur. Nielsen Norman Group, mümkünse küçük ekranda da karşılaştırmayı desteklemeyi ve bunu genelde iki ürünle yapmayı önerir.

Biz mobilde şu yaklaşımları kullanırız:

• İki sütun sınırı: ziyaretçi üçüncü ürünü seçerse, hangi ikisini yan yana göreceğini seçmesine izin veririz.
• Ürün seçici şerit: üstte ürün adları kaydırılabilir bir şerit halinde durur, ziyaretçi dokunarak sütunu değiştirir.
• Sabit satır etiketi yerine hücre içi etiket: her hücrenin üstünde küçük harfle özellik adı yazar.
• Katlanabilir gruplar: uzun tabloyu "Performans", "Boyut" gibi açılır bölümlere ayırırız.
• Başparmak bölgesinde satın alma düğmesi: alt kısımda sabit bir düğme şeridi.

Sekme ya da liste görünümü de bir seçenektir; ancak Nielsen Norman Group bu biçimlerin artı ve eksileri tartmayı zorlaştırdığını da not eder. Bu yüzden önce iki sütunlu gerçek bir tabloyu deneriz. Mobil öncelikli düşünme hakkında daha fazlasını mobil öncelikli tasarım yazımızda, düğme yerleşimini ise başparmak bölgesi rehberimizde anlattık.

Mobil karşılaştırmayı nasıl test edersiniz?

Tasarım dosyasında güzel görünen bir mobil tablo, gerçek telefonda bambaşka davranabilir. Uzun ürün adları iki satıra taşar, fiyat etiketi düğmeyi iter, sabit şerit klavye açıldığında ekranı kapatır. Bu yüzden mobil testi tasarım bittikten sonra değil, ilk taslaktan itibaren yaparız.

Test sırasında özellikle şu durumlara bakarız. İlk olarak en uzun ürün adını ve en uzun değeri tabloya koyarız; tasarım en kötü veriyle de dayanmalıdır. Ardından küçük ekranlı bir telefonda ve yatay konumda kontrol ederiz. Daha sonra yazı boyutunu tarayıcı ayarlarından büyütür, tablonun hâlâ okunup okunmadığına bakarız. Son olarak tek elle kullanımı deneriz: ziyaretçi ürün değiştirme ve satın alma düğmelerine başparmağıyla rahat ulaşabiliyor mu?

Sayfanın genel mobil uyumunu hızlıca görmek için mobil uyumluluk testi aracımızı kullanabilirsiniz. Ancak hiçbir araç gerçek kullanıcıyı izlemenin yerini tutmaz. Birkaç kişiye "bu iki modelden hangisi size uygun?" diye sorun ve telefonda nasıl karar verdiklerini izleyin. Nerede durakladıklarını, neyi aradıklarını ve neyi bulamadıklarını not edin. Bu notlar sonraki tasarım turunun yol haritası olur.

Filtre ve karşılaştırma seçimi birlikte nasıl çalışır?

Ziyaretçi çoğu zaman karşılaştırma sayfasına doğrudan gelmez; önce kategori sayfasında filtre kullanır, listeyi daraltır, sonra birkaç ürünü işaretler. Yani filtre ile karşılaştırma aynı karar yolculuğunun iki adımıdır. Filtre "hangi ürünler bana uygun" sorusunu, karşılaştırma ise "bunlardan hangisi en uygun" sorusunu cevaplar.

Bu iki adımı birbirine bağlamak için birkaç ayrıntı önemlidir. Ürün kartlarında belirgin bir "karşılaştır" onay kutusu yer alır. Ziyaretçi ürün işaretledikçe ekranın altında küçük bir karşılaştırma çubuğu belirir ve seçilen ürünleri gösterir. Çubuk, ziyaretçi sayfa değiştirse ya da filtreyi güncellese bile seçimi korur.

Ayrıca filtrede kullandığınız özellik adlarıyla tablodaki satır adlarını aynı tutun. Ziyaretçi filtrede "sessiz çalışma" seçtiyse, tabloda bu özelliği "ses seviyesi" diye değil aynı ifadeyle görmelidir. Örnek senaryo: bir ziyaretçi klima kategorisinde enerji sınıfına göre filtreler, üç model işaretler ve karşılaştırmayı açar. Tablonun en üst satırlarında enerji sınıfını görmesi, filtrede verdiği kararla tablonun uyumlu olduğunu hissettirir.

Filtre tasarımının satışa etkisini ürün filtreleme yazımızda ayrıntılı ele aldık; burada tekrar etmiyoruz.

Teknik terimleri nasıl açıklamalısınız?

Karşılaştırma tablosunda en çok kafa karıştıran şey teknik terimlerdir. "IP54", "inverter motor" ya da "çift bant" ifadeleri bazı ziyaretçiler için çok şey anlatır, bazıları için ise hiçbir şey. Nielsen Norman Group teknik terimleri bağlam içinde açıklamayı, tanıdık karşılaştırmalara çevirmeyi ya da kısa açıklama kutuları ve bağlantılar eklemeyi önerir.

Biz üç katmanlı bir yaklaşım kullanırız. Birinci katmanda hücre değeri kısa kalır: "IP54". İkinci katmanda satır etiketinin yanında küçük bir bilgi simgesi yer alır ve ziyaretçi dokununca terimin ne anlama geldiği açılır. Üçüncü katmanda ise gerekiyorsa daha uzun bir rehbere bağlantı veririz.

Açıklamayı ziyaretçinin hayatına çevirmek de etkilidir. Örneğin "IP54" yerine yalnız teknik tanım vermek yerine "yağmurda balkonda kullanılabilir, suya batırmayın" gibi bir ifade ekleyebilirsiniz. Ancak bu tür çevirileri üreticinin resmi bilgisine dayandırın; abartılı bir yorum, iade ve şikâyet olarak geri döner.

Açıklama kutularının mobilde de çalışması gerekir. Fareyle üzerine gelince açılan bir kutu, dokunmatik ekranda hiç açılmayabilir. Bu yüzden açıklamaları dokunmayla açılan ve kolayca kapanan bir yapıda kurarız.

Erişilebilir tablo için hangi işaretleme gerekir?

Ekran okuyucu kullanan bir ziyaretçi, tabloyu görsel olarak taramaz; hücreden hücreye ilerler ve her hücrede hangi başlığa bağlı olduğunu duymak ister. W3C'nin Tables Tutorial rehberi, başlık hücrelerinin th, veri hücrelerinin td ile işaretlenmesini ve yalnız görsel ipucunun tabloyu erişilebilir yapmadığını belirtir.

Ürün karşılaştırma tablosu tipik olarak iki başlıklı bir tablodur: üstte ürün adları, solda özellik adları. W3C bu durumda her başlığın yönünü scope niteliğiyle belirtmeyi önerir: sütun başlığı için col, satır başlığı için row. Ayrıca tablonun konusunu adlandıran bir başlık (caption) çoğu durumda yararlıdır.

Erişilebilirlik kontrol listemizde şunlar yer alır:

• Ürün adları ve özellik adları başlık hücresi olarak işaretli mi?
• Tik ve çarpı simgelerinin metin karşılığı var mı?
• Farklar yalnız renkle değil, metin ya da biçimle de belirtiliyor mu?
• "Yalnız farkları göster" anahtarı klavyeyle kullanılabiliyor mu?
• Görsel düzen için tablo değil, CSS mi tercih ettiniz?

W3C, tabloların sayfa düzeni için kullanılmaması gerektiğini de vurgular. Karşılaştırma ekranında gerçek bir veri tablosu kurduğunuz için bu kurala zaten uyarsınız; yeter ki tabloyu süslemek için iç içe tablo eklemeyin.

Ziyaretçiyi satın alma kararına nasıl yönlendirirsiniz?

Karşılaştırma sayfasının sonu bilgi değil, karardır. Ziyaretçi farkları gördü, kendine uygun ürünü seçti; şimdi o ürünü almak için en kısa yolu görmelidir. Bu yüzden her sütunda net bir satın alma ya da sepete ekleme düğmesi yer alır ve sabit başlıkta da tekrar eder.

Kararı kolaylaştırmak için birkaç yöntem kullanırız. İlk olarak "kimin için uygun" satırı ekleriz: "küçük daireler için", "sık seyahat edenler için" gibi kısa ifadeler, ziyaretçinin kendini bir sütunda bulmasını sağlar. Ardından stok ve teslimat bilgisini tabloya taşırız; ziyaretçi en uygun ürünü seçip stokta olmadığını son adımda öğrenirse hayal kırıklığı yaşar. Son olarak tek bir ürünü "çok tercih edilen" diye işaretleyecekseniz, bunu gerçek satış verisine dayandırın ve neden öne çıktığını açıklayın.

Düğme metni de önemlidir. "Detay" yerine "Bu modeli seç" ya da "Sepete ekle" demek eylemi netleştirir. Düğme tasarımını CTA rehberimizde örneklerle anlattık.

Bu karar yolunu, tablo, filtre ve ürün sayfasıyla birlikte sitenizde biz kurarız. Web tasarım hizmetimiz kapsamında karşılaştırma ekranını ürün verinize göre planlarız; projenize göre teklif almak için iletişim formunu kullanabilirsiniz.

Ürün karşılaştırma sayfası SEO açısından nasıl ele alınmalı?

Statik bir ürün karşılaştırma sayfası, "A mı B mi" türü aramalarda değerli bir giriş kapısı olabilir. Kalıcı bir adresi, açıklayıcı bir başlığı ve tablonun üstünde kısa bir özet metni varsa, arama motoru sayfanın neyi karşılaştırdığını anlar. Bu nedenle paket karşılaştırması ya da seri karşılaştırması gibi sabit sayfaları dizine açık tutarız.

Dinamik karşılaştırma ise farklıdır. Ziyaretçinin seçtiği her ürün kombinasyonu ayrı bir adres üretirse, sitenizde binlerce benzer sayfa oluşabilir. Bu sayfalar çoğu zaman arama sonuçlarında değer taşımaz ve tarama bütçesini gereksiz yere tüketir. Bu yüzden dinamik karşılaştırma adreslerini genelde dizin dışı tutarız.

Yapılandırılmış veri tarafında da dikkatli olun. Google Search Central'ın Intro to Product Structured Data on Google sayfası, ürün işaretlemesini tek tek ürün sayfaları üzerinden anlatır ve satın alınabilen ürünler için satıcı listeleme işaretlemesini, satın alınamayan sayfalar için ürün snippet'ini tanımlar. Karşılaştırma sayfasında her ürünü ayrı ayrı işaretlemek yerine, asıl ürün işaretlemesini ürün detay sayfalarında tutmak daha güvenli bir yoldur.

Ürün sayfasının kendisini güçlendirmek için e-ticaret ürün sayfası yazımıza bakabilirsiniz.

Örnek senaryo: üç kahve makinesi nasıl karşılaştırılır?

Bu bölüm gerçek bir müşteri vakası değil, süreci somutlaştırmak için kurduğumuz bir örnek senaryodur. Bir mağaza üç kahve makinesi satıyor: giriş modeli, orta model ve üst model. Destek kanalına en sık gelen soru "aralarındaki fark ne?" oluyor.

İlk adımda destek sorularını ve yorumları inceleriz. Ziyaretçilerin en çok fincan kapasitesi, süt köpürtme, temizlik kolaylığı ve fiyat üzerinde durduğunu görürüz. Ardından tabloyu bu dört satırla açarız ve teknik verileri alttaki katlanabilir bölüme taşırız.

İkinci adımda "kimin için uygun" satırını ekleriz: "tek kişilik kullanım", "sütlü kahve sevenler", "kalabalık ofisler". Daha sonra "yalnız farkları göster" anahtarını koyarız; üç makinede de aynı olan su haznesi malzemesi gibi satırlar kaybolur.

Mobilde ise ziyaretçi iki modeli yan yana görür, üçüncüyü üstteki şeritten seçer. Alt kısımda sabit bir "sepete ekle" şeridi durur. Son adımda her modelin stok durumunu ve tahmini teslimat bilgisini tabloya ekleriz.

Bu senaryoda başarıyı nasıl ölçeceğimizi de baştan tanımlarız: karşılaştırma sayfasından sepete geçiş oranı ve destek kanalına gelen "fark ne" sorularının seyri. Böylece tasarımın işe yarayıp yaramadığını tahminle değil veriyle değerlendirirsiniz.

Ürün karşılaştırma sayfasını yayına almadan önce neleri kontrol etmelisiniz?

Yayından önce aşağıdaki kontrol listesini adım adım geçeriz. Liste uzun görünebilir; ancak her madde, gerçek ziyaretçinin takılabileceği bir noktayı temsil eder.

1. Tablodaki her ürünün tüm satırları dolu ve aynı birimle yazılmış mı?
2. Boş hücrelerde "yok" ile "bilgi yok" ayrımı net mi?
3. Masaüstünde en fazla dört, mobilde iki sütun görünüyor mu?
4. Sütun başlıkları ve satır etiketleri kaydırmada sabit kalıyor mu?
5. "Yalnız farkları göster" anahtarı çalışıyor ve klavyeyle kullanılabiliyor mu?
6. Teknik terimlerin açıklaması dokunmatik ekranda açılıyor mu?
7. Her sütunda satın alma düğmesi ve stok bilgisi var mı?
8. Başlık hücreleri doğru işaretlenmiş ve scope tanımlı mı?
9. Farklar renk dışında metin ya da simgeyle de belirtiliyor mu?
10. Dinamik karşılaştırma adresleri dizin dışı, statik sayfalar dizine açık mı?
11. Sayfa yavaş bağlantıda da makul sürede açılıyor mu?
12. Karşılaştırmadan sepete geçiş için ölçüm etiketi kurulu mu?

Bu listeyi her ürün eklendiğinde yeniden geçmeniz gerekmez; ancak yeni bir ürün kategorisi açtığınızda tekrar kontrol etmek iyi bir alışkanlıktır.

Ürün karşılaştırma sayfasında en sık yapılan hatalar nelerdir?

Sahada en çok karşılaştığımız hatalar birbirine benzer. Birincisi, veri tabanındaki tüm alanları tabloya dökmek. Bu durumda ziyaretçi otuz satır arasında kaybolur. İkincisi, her ürünü kazanan gibi göstermek; tablo tarafsızlığını yitirince ziyaretçi güvenmez.

Üçüncü hata, mobili masaüstünün küçültülmüş hali sanmaktır. Dört sütunlu tabloyu telefona sığdırmaya çalışmak, minik yazı ve yanlış dokunuşlar demektir. Dördüncüsü, karşılaştırma seçimini unutmak: ziyaretçi sayfa değiştirdiğinde seçtiği ürünler kayboluyorsa, işe baştan başlamak zorunda kalır.

Beşinci hata ise ölçmemektir. Karşılaştırma ekranını kurup hiç izlemezseniz, ziyaretçinin nerede bıraktığını bilemezsiniz. Hangi satırların açıldığını, hangi ürünlerin en sık birlikte karşılaştırıldığını ve kaç ziyaretçinin sepete geçtiğini takip edin. Bu sorunları sistematik olarak bulmak için UX denetimi yöntemini kullanabilirsiniz.

Son olarak sayfayı bir kez kurup bırakmak da yaygın bir hatadır. Ürünler değişir, fiyatlar oynar, yeni modeller gelir. Tablo eski kaldığında ziyaretçiye yanlış bilgi verir. Bu yüzden karşılaştırma verisini ürün yönetim sürecine bağlarız; ürün güncellendiğinde tablo da kendiliğinden güncellenir.

Ürün karşılaştırma sayfasını sitenize biz nasıl kurarız?

Talha Aslan ve ekibi olarak karşılaştırma ekranını tek başına bir bileşen olarak değil, satın alma yolculuğunun bir parçası olarak ele alırız. Süreç genelde şu sırayla ilerler: önce ürün verinizi ve destek sorularınızı inceleriz, ardından satır listesini ve öncelik sırasını belirleriz. Daha sonra masaüstü ve mobil taslakları hazırlar, gerçek verinizle test ederiz.

Kurulum aşamasında filtre, ürün kartı ve karşılaştırma tablosunun aynı veri kaynağından beslenmesini sağlarız. Böylece bir ürünü güncellediğinizde tüm ekranlar aynı bilgiyi gösterir. Ayrıca erişilebilir tablo işaretlemesini, sabit başlıkları ve "yalnız farkları göster" anahtarını baştan kurarız.

Yayından sonra ölçüm etiketleriyle karşılaştırmadan sepete geçişi izleriz ve ilk haftalarda gördüğümüz takılma noktalarına göre küçük düzeltmeler yaparız. Burada sonuç garantisi vermeyiz; karşılaştırma ekranı kararı kolaylaştırır, ancak satışı fiyat, stok ve ürünün kendisi de etkiler.

Mağazanız için bir karşılaştırma ekranı planlıyorsanız web tasarım sayfamızdan projenizi anlatın; kapsamı ve süreyi netleştirip size özel teklif hazırlayalım.