Etkileşimli Web Tasarım Öğeleri Nelerdir? Kullanıcı Deneyimini Artıran Örnekler

Etkileşimli web tasarım öğeleri, ziyaretçinin sitede yalnızca okumakla kalmayıp bir şey yapmasını sağlayan işlevsel parçalardır. Bu yazıda hesaplayıcıdan konfigüratöre, sekmeden karşılaştırma aracına kadar en sık kullandığım öğeleri, hangi durumda işe yaradıklarını ve hangi durumda siteyi yavaşlatıp kafa karıştırdıklarını anlatıyorum. 2012'den beri sahada gördüğüm tabloya dayanıyorum; vaat değil, karar çerçevesi sunuyorum.

Etkileşimli web tasarım öğeleri nelerdir?

Etkileşimli web tasarım öğeleri, kullanıcının girdi verdiği ve karşılığında kişiye özel bir sonuç aldığı arayüz parçalarıdır. Hesaplayıcılar, ürün konfigüratörleri, sekmeler, akordeonlar, filtreler, karşılaştırma araçları, adım adım formlar ve öneri testleri bu grubun temel örnekleridir. Ortak amaçları karar vermeyi kolaylaştırmaktır.

Burada önemli bir ayrım yapıyorum. Bir düğmenin üzerine gelince renk değiştirmesi ya da kartın hafifçe büyümesi de etkileşimdir; ancak bunlar mikro animasyon kategorisine girer ve bu yazının konusu değildir. Benim ilgilendiğim şey, ziyaretçiye iş gören öğelerdir. Yani ziyaretçi bir değer girer, bir seçenek işaretler ya da bir filtre uygular; site de ona bir cevap verir.

Kısacası, iyi bir etkileşimli öğe ziyaretçinin kafasındaki soruyu sitenin içinde cevaplar. Böylece ziyaretçi telefonu açıp sormak ya da rakip siteye geçmek zorunda kalmaz.

Etkileşimli öğe ile süsleme arasındaki fark nedir?

Farkı tek bir soruyla ayırt edebilirsiniz: bu öğeyi kaldırsam ziyaretçi bir bilgiyi ya da bir işlemi kaybeder mi? Cevap evetse işlevsel bir öğeyle karşı karşıyasınız. Cevap hayırsa büyük ihtimalle süslemedir.

Örneğin bir kredi sayfasındaki taksit hesaplayıcısını kaldırdığınızda ziyaretçi aylık ödemesini öğrenemez. Öte yandan ana sayfadaki kayan slayt gösterisini kaldırdığınızda çoğu zaman hiçbir şey kaybolmaz; hatta ilk ekran hızlanır. Bu yüzden projelerde işe "hangi soruyu cevaplıyoruz?" listesiyle başlarım, "hangi efekti koyalım?" listesiyle değil.

Süslemenin tamamen gereksiz olduğunu söylemiyorum. Marka hissi için ölçülü hareket değerlidir. Ancak bütçe ve geliştirme süresi sınırlıysa önceliği her zaman işlevsel öğeye veririm. Bu yaklaşımın daha geniş çerçevesini dönüşüm odaklı web tasarım yazısında anlattım.

Sitenize hangi öğenin gerektiğini nasıl anlarsınız?

En sağlam kaynak, müşterilerin size zaten sorduğu sorulardır. Satış ekibinin telefonda en sık duyduğu beş soruyu yazın. Ardından her soru için "bunu sitede kendi kendine cevaplayabilir mi?" diye düşünün.

• "Bana kaça mal olur?" sorusu sık geliyorsa bir fiyat ya da maliyet hesaplayıcısı düşünün.
• "Hangi model bana uygun?" sorusu geliyorsa bir öneri testi ya da karşılaştırma aracı işe yarar.
• "Şu ölçüde yapıyor musunuz?" sorusu geliyorsa bir konfigüratör mantıklı olabilir.
• "Ürünleriniz arasında kayboldum" şikâyeti geliyorsa filtre yapısını gözden geçirin.

Ayrıca Search Console'daki sorgulara bakın. "Hesaplama", "karşılaştırma", "fark" ve "hangisi" gibi kelimeler içeren aramalar, etkileşimli bir cevabı bekleyen niyetin işaretidir. Bu verinin nasıl okunacağını Search Console rehberinde ayrıntılı gösterdim.

Son olarak dönüşüm hedefinizi netleştirin. Öğe hangi hedefe hizmet edecek: teklif formu mu, arama mı, sepet mi? Hedef belirsizse öğe de amaçsız kalır. Bu adım için dönüşüm hedefi belirleme yazısı iyi bir başlangıçtır.

Hesaplayıcılar hangi durumlarda işe yarar?

Hesaplayıcılar, fiyatın ya da sonucun kişiye göre değiştiği her işte işe yarar. Kredi, sigorta, enerji tüketimi, kira getirisi, malzeme miktarı ve reklam getirisi en tipik alanlardır. Ziyaretçi birkaç değer girer ve kendi durumuna özel bir rakam görür.

Bu öğenin gücü şuradan gelir: genel bir fiyat listesi herkese hitap eder ama kimseye tam cevap vermez. Hesaplayıcı ise "benim durumumda ne olur?" sorusunu cevaplar. Örneğin kendi sitemdeki ROAS hesaplayıcı ya da KDV hesaplama aracını, ziyaretçi tek bir işini hızla bitirsin diye tasarladım.

Hesaplayıcı tasarlarken şu kurallara uyarım:

1. Alan sayısını en aza indiririm; ilk sonuç için üç ya da dört alan yeterlidir.
2. Varsayılan değerleri makul doldururum, böylece ziyaretçi boş bir formla karşılaşmaz.
3. Sonucu anında gösteririm; "hesapla" düğmesine basmayı zorunlu tutmam.
4. Sonucun altına hesabın varsayımlarını kısa bir notla yazarım.
5. Sonucun hemen yanına bir sonraki adımı koyarım: teklif iste, uzmana sor, ürüne git.

Dikkat etmeniz gereken bir nokta var: sonucu görmek için e-posta istemek çoğu zaman güveni zedeler. Ben sonucu serbest bırakıp ayrıntılı raporu isteğe bağlı olarak e-postayla göndermeyi tercih ederim.

Ürün konfigüratörü kimler için mantıklıdır?

Konfigüratör, ürünün çok sayıda seçenekle birleştirildiği işler için mantıklıdır. Mobilya, kapı ve pencere, endüstriyel ekipman, baskı ürünleri, araç aksesuarı ve yazılım paketleri bu gruba girer. Ziyaretçi ölçü, renk, malzeme ya da modül seçer; site de seçimlerin sonucunu ve çoğu zaman fiyatını gösterir.

Konfigüratörün asıl değeri satış öncesindeki yazışmayı kısaltmasıdır. Sanayi firmalarında sık gördüğüm senaryo şudur: müşteri e-postayla ölçü gönderir, satış ekibi geri döner, eksik bilgi için tekrar yazışılır. İyi bir konfigüratör bu turu tek ekranda tamamlar. Bu yapının sanayi sitelerindeki yerini sanayi ve üretim firmaları için web tasarım yazısında ayrıca ele aldım.

Öte yandan konfigüratör pahalı bir öğedir. Seçenekler arasındaki kurallar (şu kapak şu gövdeyle olmaz gibi) yazılımın içine doğru kodlanmalıdır, aksi hâlde imkânsız bir ürün sipariş eden müşteriyle karşılaşırsınız. Bu nedenle ürün yelpazeniz dar ya da seçenek sayısı azsa basit bir teklif formu çoğu zaman yeterlidir.

Konfigüratörde en çok önemsediğim iki şey var: her adımda seçimin özetini göstermek ve yarım kalan seçimi kaydetmek. Kurumsal alıcılar seçimi çoğu zaman bir iş arkadaşına danışır; bu yüzden paylaşılabilir bir bağlantı büyük kolaylık sağlar.

Sekmeler ne zaman doğru tercih olur?

Sekmeler, aynı düzeyde ve birbirinin alternatifi olan içerik grupları için doğru tercihtir. Örneğin bir ürünün "teknik özellikler", "kullanım alanları" ve "belgeler" bölümleri ya da bir hizmetin farklı paketleri sekmeye uygundur. Ziyaretçi aynı anda yalnızca birine bakmak ister.

Ancak sekmeler, ziyaretçinin birlikte okuması gereken bilgiyi bölerse zarar verir. Kullanıcı sekmeler arasında gidip gelerek karşılaştırma yapmak zorunda kalıyorsa yanlış öğeyi seçmişsinizdir; orada bir karşılaştırma tablosu daha iyi çalışır.

Sekme tasarımında uyduğum pratik kurallar şunlardır:

• Sekme sayısını genellikle altıyla sınırlarım; daha fazlası mobilde taşar.
• Sekme etiketlerini kısa ve tahmin edilebilir yazarım.
• Aktif sekmeyi renk dışında bir işaretle de belirtirim, örneğin alt çizgiyle.
• Mobilde sekmeleri gerekirse akordeona dönüştürürüm.

Sekmeli içeriğin SEO ile ilişkisini ve tasarım çatışmasını UX ve SEO dengesi yazısında tartıştım; burada tekrar etmiyorum. Kısaca söylemek gerekirse içerik HTML içinde sayfayla birlikte geliyorsa arama motoru onu görebilir.

Akordeon kullanırken nelere dikkat etmelisiniz?

Akordeon, başlıkların alt alta dizildiği ve tıklanınca içeriğin açıldığı öğedir. Uzun sayfalarda ziyaretçiye içeriğin haritasını tek bakışta gösterir. Bu yüzden SSS bölümleri, teknik ayrıntılar ve mobildeki uzun açıklamalar için çok kullanışlıdır.

Yine de akordeonun bir bedeli var: içeriği gizlersiniz. Ziyaretçinin mutlaka görmesi gereken bilgiyi, örneğin teslim süresini ya da iade koşulunu, akordeonun içine saklarsanız o bilgiyi kaçırma ihtimali artar. Ben kritik bilgiyi açık metinde tutar, ikincil ayrıntıyı akordeona koyarım.

Teknik tarafta W3C'nin akordeon deseni belgesi iyi bir referanstır. Başlıklar gerçek düğme olmalı, açık ya da kapalı olduğu ekran okuyuculara bildirilmeli ve klavyeyle kullanılabilmelidir. Pratikte en sık karşılaştığım hata, başlığın tıklanabilir bir div olarak kodlanmasıdır; bu durumda klavye kullanıcısı akordeonu hiç açamaz.

Ayrıca tek seferde yalnızca bir panelin açık kalmasını zorunlu tutmam. Ziyaretçi iki cevabı yan yana okumak isteyebilir. Bu küçük tercih, özellikle SSS sayfalarında gereksiz tıklamayı azaltır.

Filtre ve sıralama araçlarını nasıl tasarlamalısınız?

Filtreler, çok sayıda ürün ya da içerik barındıran sitelerde ziyaretçinin listeyi daraltmasını sağlar. E-ticaret kategorileri, emlak ilanları, iş ilanları ve blog arşivleri tipik örneklerdir. İyi filtre ziyaretçiye "aradığım şey burada var mı?" sorusunun cevabını birkaç saniyede verir.

Filtre tasarımında şu noktalara bakarım:

• Filtre seçenekleri ziyaretçinin düşündüğü dilde olmalı; iç stok kodları değil.
• Her seçeneğin yanında kaç sonuç döneceği görünmeli.
• Sıfır sonuç veren kombinasyonlar ya pasif olmalı ya da uyarı vermeli.
• Seçilen filtreler listenin üstünde görünmeli ve tek tıkla kaldırılabilmeli.
• Mobilde filtre paneli tam ekran açılmalı ve "sonuçları göster" düğmesi sabit durmalı.

SEO tarafında ise filtrelerin ürettiği sonsuz URL kombinasyonuna dikkat etmelisiniz. Google, faset navigasyon yönetimi belgesinde bu kombinasyonların tarama kaynağını boşa harcayabileceğini açıkça belirtiyor. Hangi filtrenin dizine açık bir sayfa, hangisinin yalnızca kullanıcı aracı olacağına karar vermek bir mimari konusudur. Bunu büyük sitelerde kategori yapısı yazısında ayrıntılı anlattım.

Karşılaştırma aracı karar süresini nasıl kısaltır?

Karşılaştırma aracı, ziyaretçinin iki ya da daha fazla seçeneği aynı tabloda yan yana görmesini sağlar. Paket fiyatlandırması, teknik ürünler ve yazılım planları bu öğeden en çok fayda gören alanlardır. Ziyaretçinin hafızasına yük bindirmeden farkları gösterir.

Karşılaştırmanın gücü, farkları öne çıkarmasından gelir. Bu nedenle tabloyu hazırlarken iki şeye dikkat ederim: ortak özellikleri gizleme seçeneği sunmak ve farklılaşan satırları vurgulamak. Otuz satırlık tabloda asıl fark çoğu zaman beş satırdadır.

Tablodaki geliştirme yükü değerlendirmesi saha tecrübeme dayanır; projenin altyapısına göre değişir, garanti değildir.

Adım adım formlar ve sihirbazlar nasıl çalışır?

Adım adım form, uzun bir formu küçük ve mantıklı parçalara böler. Her adımda az sayıda soru sorar ve ilerleme çubuğuyla ziyaretçiye ne kadar yol kaldığını gösterir. Özellikle teklif, randevu ve başvuru süreçlerinde tek sayfalık uzun forma göre daha az korkutucu görünür.

Ancak her uzun formu bölmek doğru değildir. Adım sayısı arttıkça ziyaretçinin "daha ne kadar var?" kaygısı da artar. Bu yüzden önce gereksiz alanları silerim, ardından kalan alanları gerçekten bölmem gerekip gerekmediğine bakarım. Çoğu zaman asıl kazanç bölmekten değil, sormaktan vazgeçmekten gelir.

Sihirbazın ilk adımına en kolay ve en ilgi çekici soruyu koyarım. Örneğin "Hangi hizmetle ilgileniyorsunuz?" gibi tek tıkla cevaplanan bir soru ziyaretçiyi sürece sokar. İletişim bilgilerini ise sona bırakırım; ziyaretçi bu noktaya geldiğinde zaten emek harcamış olur.

Form alanlarının seçimi, doğrulama mesajları ve teşekkür sayfası kurgusu ayrı bir konudur. Bunları randevu, teklif ve demo formu tasarımı yazısında tek tek ele aldım.

Test, quiz ve öneri araçları ne işe yarar?

Öneri testi, ne istediğini tam bilmeyen ziyaretçiyi birkaç soruyla doğru ürüne ya da hizmete yönlendirir. Cilt bakımı, spor ekipmanı, yazılım paketi ve eğitim programı seçimi tipik kullanım alanlarıdır. Ziyaretçi soruları cevaplar ve sonunda kişisel bir öneri alır.

Bu öğenin değeri, ürün kataloğunu ziyaretçinin diline çevirmesidir. Ziyaretçi teknik terimleri bilmez ama "cildim kuru" ya da "haftada üç gün koşuyorum" demeyi bilir. Böylece test, bu cümleleri sizin ürün kodlarınıza bağlayan bir çevirmen gibi çalışır.

Öte yandan kötü kurgulanan bir test güveni hızla kaybettirir. Ziyaretçi hangi cevabı verirse versin aynı ürüne yönleniyorsa bunu fark eder. Bu nedenle her sonucun gerçekten farklı bir ihtiyaca karşılık geldiğini kontrol ederim. Ayrıca sonuç ekranında neden bu öneriyi yaptığınızı bir iki cümleyle açıklarım; ziyaretçi mantığı görünce öneriye daha kolay güvenir.

Ayrıca testin cevapları size değerli bir müşteri verisi sunar. Hangi ihtiyacın daha sık seçildiğini görmek, hedef kitle analizi için doğrudan kullanabileceğiniz bir kaynaktır. Tabii bu veriyi toplarken aydınlatma metninizin güncel olduğundan emin olmalısınız.

Harita, zaman çizelgesi ve önce/sonra kaydırıcısı

Bu üç öğe daha özel durumlar için uygundur. Etkileşimli harita, çok şubeli işletmelerde ya da bayi ağı olan üreticilerde "bana en yakın nokta hangisi?" sorusunu cevaplar. Filtreyle birleştiğinde, örneğin yalnızca servis veren bayileri gösterdiğinde, çok güçlü bir araca dönüşür.

Zaman çizelgesini, kurumsal geçmişi ya da bir sürecin adımlarını anlatmak için tercih edebilirsiniz. Ancak burada dikkatli olurum: çoğu "hakkımızda" sayfasındaki çizelge, ziyaretçinin hiçbir sorusuna cevap vermez. Süreç anlatımında ise, örneğin bir üretim ya da uygulama sürecinin adımlarında, gerçekten işe yarar.

Önce/sonra kaydırıcısı, dönüşümün görsel olduğu işlerde etkilidir. Tadilat, peyzaj, diş estetiği, fotoğraf rötuşu ve temizlik hizmetleri buna örnektir. Ziyaretçi kaydırıcıyı hareket ettirerek farkı kendi gözüyle görür. Yalnız sağlık alanında bu tür görsellerin kullanımı mevzuata tabidir; yayına almadan önce ilgili düzenlemeyi kontrol etmenizi öneririm.

Etkileşimli web tasarım öğeleri SEO'yu nasıl etkiler?

Etkileşimli web tasarım öğeleri SEO'yu iki yönde etkileyebilir. İyi kurulduklarında sayfanın aramadaki niyeti daha iyi karşılamasını sağlar ve ziyaretçinin sayfada iş bitirmesine yardım eder. Kötü kurulduklarında ise içerik arama motoruna görünmez olur ya da sayfa yavaşlar.

En sık gördüğüm sorun şudur: önemli içerik yalnızca bir tıklamadan sonra JavaScript ile sunucudan çekilir. Bu durumda içerik sayfanın ilk HTML'inde yoktur ve taranması garanti değildir. Google'ın gecikmeli yüklenen içerik belgesi da içeriğin kullanıcı etkileşimi beklemeden yüklenmesini öneriyor. Bu yüzden sekme ve akordeon içeriğini sayfayla birlikte gönderir, yalnızca görünürlüğünü değiştiririm.

Hesaplayıcı gibi araçlarda ise aracın etrafına mutlaka açıklayıcı metin yazarım. Yalnızca bir formdan oluşan sayfa, arama motoruna neyle ilgili olduğunu anlatmakta zorlanır. Aracın ne yaptığını, formülün mantığını ve sonucun nasıl yorumlanacağını anlatan birkaç paragraf, hem ziyaretçiye hem arama motoruna yardım eder. Teknik altyapıdaki diğer kontrolleri teknik SEO ipuçları yazısında bulabilirsiniz.

Erişilebilirlik için hangi kurallara uymalısınız?

Etkileşimli öğeler erişilebilirlik hatalarının en yoğun görüldüğü yerlerdir. Statik bir paragrafı bozmak zordur; ama özel kodlanmış bir açılır menü ya da kaydırıcı, klavye ve ekran okuyucu kullanıcılarını kolayca dışarıda bırakır.

Kontrol listem şu maddelerden oluşur:

1. Her etkileşimli öğe yalnızca klavyeyle, Tab ve Enter tuşlarıyla kullanılabilmeli.
2. Odaklanan öğe görünür bir çerçeveyle belli olmalı.
3. Tıklama hedefleri yeterince büyük olmalı; WCAG 2.2, asgari hedef boyutu için 24x24 CSS pikseli ölçüt olarak koyuyor.
4. Durum bilgisi (açık, kapalı, seçili) yalnızca renkle değil, metinle ya da simgeyle de verilmeli.
5. Sonucu değişen alanlar, örneğin hesaplayıcı çıktısı, ekran okuyucuya bildirilmeli.

Sekmeler için de W3C'nin sekme deseni ok tuşlarıyla gezinmeyi tanımlar. Bu belgeleri geliştirici ekibinize referans olarak vermeniz, "bizde çalışıyor" tartışmasını kısa keser.

Erişilebilirlik bir hayır işi değildir. Klavye ile rahat kullanılan bir form, mouse kullanan herkes için de daha düzenli çalışır.

Performans açısından nelere dikkat etmelisiniz?

Her etkileşimli öğe sayfaya JavaScript ekler. JavaScript arttıkça sayfanın tıklamalara verdiği tepki gecikebilir. Google bu gecikmeyi Interaction to Next Paint (INP) metriğiyle ölçer; web.dev INP belgesine göre 200 milisaniye ve altı iyi, 500 milisaniyenin üzeri zayıf kabul ediliyor.

Bu nedenle etkileşimli öğelerde şu alışkanlıkları edinmenizi öneririm:

• Ağır bir kütüphaneyi tek bir kaydırıcı için yüklemeyin; tarayıcının yerel öğeleri çoğu zaman yeterlidir.
• Sayfanın alt kısmındaki araçların kodunu, ziyaretçi o bölüme yaklaşınca yükleyin.
• Hesaplayıcıda her tuş vuruşunda ağır bir işlem çalıştırmayın; kısa bir bekleme süresi ekleyin.
• Tıklamadan sonra ekranda hemen bir tepki gösterin, ağır işi ardından yapın.

Performansı düzenli ölçmek için Lighthouse ile performans testi adımlarını izleyebilirsiniz. Hızın sıralama ve satışla ilişkisini ise site hızı ve SEO yazısında tartıştım.

Etkileşimi GA4 ile nasıl ölçersiniz?

Bir öğenin işe yarayıp yaramadığını ölçmeden bilemezsiniz. GA4'ün gelişmiş ölçümü sayfa görüntüleme, kaydırma ve dış bağlantı tıklaması gibi temel olayları kendiliğinden toplar; ancak sekme açma, filtre uygulama ya da hesaplayıcı kullanma gibi özel etkileşimleri kendiniz tanımlamanız gerekir.

Benim kurduğum tipik olay seti şöyledir:

• Hesaplayıcı: ilk alan doldurma, sonuç görüntüleme ve sonuç sonrası düğme tıklaması.
• Konfigüratör: adım tamamlama, yapılandırma kaydetme ve teklif isteme.
• Filtre: filtre uygulama ve sıfır sonuç görme.
• Öneri testi: teste başlama, testi bitirme ve önerilen ürüne gitme.

Asıl soru "kaç kişi kullandı?" değil, "kullananlar kullanmayanlardan farklı davrandı mı?" sorusudur. Bu nedenle öğeyi kullanan ve kullanmayan ziyaretçileri iki segment olarak ayırır, dönüşüm oranlarını karşılaştırırım. Bu karşılaştırma nedensellik kanıtlamaz, çünkü aracı kullananlar zaten daha istekli olabilir; yine de yönü gösterir. Kesin sonuç için A/B testi gerekir.

Bir de sıfır sonuç olayına ayrıca dikkat ederim. Filtrede ya da site içi aramada sık sıfır sonuç görüyorsanız, ziyaretçiler sizde olmayan bir şeyi arıyordur. Bu veri, ürün yelpazesi ve içerik planı için çoğu zaman satış raporlarından daha erken sinyal verir.

Hangi etkileşimli web tasarım öğeleri hangi sayfaya uyar?

Sayfa türüne göre bir eşleştirme yapmak, gereksiz öğe eklemenin önüne geçer. Kendi projelerimde kullandığım kaba eşleştirme şöyledir; saha tecrübesine dayalı bir başlangıç noktasıdır, kural değildir.

• Hizmet sayfası: maliyet hesaplayıcısı, paket karşılaştırması ve sayfa sonunda akordeonlu SSS.
• Ürün detay sayfası: sekmeli teknik bilgi, konfigüratör ve varsa önce/sonra görseli.
• Kategori sayfası: filtre, sıralama ve seçili ürünleri karşılaştırma.
• İletişim ve teklif sayfası: adım adım form ve şube haritası.
• Blog ve rehber sayfası: içerikle doğrudan ilgili küçük bir hesaplayıcı ya da kontrol listesi.

Ana sayfayı bilerek listeye koymadım. Ana sayfada ağır etkileşimli web tasarım öğeleri yerine net bir yönlendirme daha iyi çalışır: ziyaretçiyi ihtiyacına uygun sayfaya hızla göndermek. Güçlü bir öğe varsa ana sayfada ona giden bir kapı açarım, öğenin kendisini oraya taşımam.

Bir sayfaya birden fazla ağır öğe koymaktan da kaçınırım. Aynı ekranda hesaplayıcı, konfigüratör ve test yarışırsa ziyaretçi hangisiyle başlayacağını bilemez.

Sık yapılan hatalar

Yıllar içinde en çok tekrarlandığını gördüğüm hataları toparladım. Bunların büyük kısmı, öğenin neden eklendiği sorusu sorulmadan işe girişilmesinden kaynaklanır.

• Rakipte gördüğü için öğe eklemek; oysa rakibin kitlesi ve sorusu farklı olabilir.
• Hesaplayıcı sonucunu e-posta duvarının arkasına saklamak.
• Sekmenin içine sayfanın en önemli bilgisini koymak.
• Filtreleri mobilde test etmemek; masaüstünde kusursuz görünen panel telefonda kapanmaz hâle gelebilir.
• Öğeyi yayına alıp hiç ölçmemek.
• Bakımı düşünmemek; fiyatı değişen ürünün hesaplayıcısı güncellenmezse yanlış rakam gösterir.

Son madde özellikle önemlidir. Ancak çoğu zaman gözden kaçar, çünkü proje teslim edildikten sonra kimse aracın içindeki sabit değerleri hatırlamaz. Bu yüzden hesaplayıcı ve konfigüratörlerde fiyat ve oranları kodun içine gömmek yerine yönetim panelinden düzenlenebilir tutarım. Genel UX hatalarının daha geniş listesini arayüz tasarımındaki UX hataları yazısında bulabilirsiniz.

Mobilde etkileşimli öğeleri nasıl kurgulamalısınız?

Ziyaretçilerinizin önemli bir kısmı büyük ihtimalle telefondan geliyor. Bu nedenle etkileşimli öğeyi önce küçük ekranda düşünmek gerekir. Masaüstünde yan yana duran beş sütunlu karşılaştırma tablosu, telefonda zor okunan bir yatay kaydırmaya dönüşebilir. Ziyaretçi sütun başlıklarını kaybeder ve hangi rakamın hangi pakete ait olduğunu karıştırır.

Mobil için uyguladığım yaklaşım şudur: karşılaştırmada aynı anda iki seçeneği gösterir, diğerlerini seçilebilir yaparım. Filtreleri alt kısımdan açılan bir panele taşırım. Hesaplayıcıda sayısal alanlar için sayısal klavyenin açılmasını sağlarım; bu küçük ayar yazım hatasını belirgin şekilde azaltır.

Ayrıca parmakla kullanılan kaydırıcılarda hassas değer seçmek zordur. Böyle durumlarda kaydırıcının yanına mutlaka elle yazılabilen bir alan eklerim. Mobil tasarım yaklaşımının genel ilkelerini mobil öncelikli tasarım yazısında anlattım.

Nereden başlamalısınız? Adım adım plan

Bütçeniz ne olursa olsun, işe tek bir öğeyle başlamanızı öneririm. Aşağıdaki sıra, benim yeni bir projede izlediğim yoldur.

1. Satış ekibinden en sık gelen beş soruyu toplayın.
2. Bu sorulardan hangisinin sitede kendi kendine cevaplanabileceğini seçin.
3. Soruya en uygun öğeyi yukarıdaki tabloyla eşleştirin.
4. Önce basit bir sürüm yayına alın; örneğin üç alanlı bir hesaplayıcı.
5. GA4'te olayları tanımlayın ve en az birkaç hafta veri toplayın.
6. Kullananlarla kullanmayanların davranışını karşılaştırın.
7. İşe yarıyorsa geliştirin, yaramıyorsa kaldırmaktan çekinmeyin.

Son madde çoğu işletmeye zor gelir, çünkü öğeye emek ve bütçe harcanmıştır. Ancak kullanılmayan bir öğe sayfayı yavaşlatmaya ve dikkati dağıtmaya devam eder. Etkileşimli web tasarım öğeleri ancak ölçülen sonuçla birlikte değer taşır.

Bu öğeleri kim geliştirmeli: hazır eklenti mi, özel kod mu?

Basit sekme, akordeon ve filtre yapıları için çoğu içerik yönetim sisteminin hazır bileşenleri yeterlidir. Bu bileşenleri erişilebilirlik ve hız açısından kendiniz de test edin. Klavyeyle açılıp kapanıyor mu, mobilde taşıyor mu, sayfaya ne kadar kod ekliyor? Bu üç soruya olumlu cevap alıyorsanız özel geliştirmeye para harcamanıza gerek yoktur.

Öte yandan hesaplayıcı ve konfigüratör gibi iş mantığı içeren öğelerde hazır eklenti çoğu zaman yetersiz kalır. Formülünüz, fiyat kurallarınız ve ürün kısıtlarınız size özeldir. Bu durumda özel geliştirme daha sağlıklı sonuç verir, ancak bakım sorumluluğunu da beraberinde getirir.

Karar verirken şu soruyu sorarım: bu öğe iki yıl sonra da güncel kalacak mı ve onu kim güncelleyecek? Cevap belirsizse daha basit bir çözümle başlarım. Kendi projelerimde bu öğeleri web tasarım sürecinin içinde, ölçüm planıyla birlikte ele alıyorum. Hangi öğenin sitenize değer katacağından emin değilseniz iletişim sayfasından bana yazabilirsiniz.