Web Sitesinde Scroll Deneyimi Nasıl Tasarlanır? Kaydırmayı Yönlendiren Tasarım

Bir web sitesinde scroll deneyimi, çoğu zaman tasarım toplantılarında en az konuşulan ama ziyaretçinin en çok hissettiği konudur. 2012'den beri kurumsal siteler ve e-ticaret projeleri üzerinde çalışıyorum. Gördüğüm tablo şu: ekip ilk ekrana haftalarca emek veriyor, ardından gelen on bölümü ise birbirine yapıştırıp bırakıyor. Oysa ziyaretçi sayfayı kaydırarak okur, kaydırarak karar verir. Bu yazıda sayfa ritmini, fold efsanesini, scroll derinliği ölçümünü, sticky öğeleri, sonsuz kaydırmanın artı ve eksilerini ve scroll animasyonlarının performans riskini kendi saha tecrübemle anlatıyorum.

Scroll deneyimi nedir ve neden önemlidir?

Scroll deneyimi, ziyaretçinin sayfayı aşağı kaydırırken yaşadığı akışın tamamıdır: içeriğin sırası, bölümler arası geçişler, sabit öğeler, animasyonlar ve hız hissi. İyi tasarlanmış bir kaydırma, okuru merak ettirerek bir sonraki bölüme taşır ve onu yorulmadan karar anına kadar getirir.

Bu tanımı önemsiyorum, çünkü kaydırma pasif bir hareket değildir. Ziyaretçi her kaydırmada küçük bir karar verir: "Devam etmeye değer mi?" Eğer bir bölüm bu soruya cevap vermezse, sekme kapanır. Dolayısıyla sayfanın her katmanı, bir sonraki katmanı satmakla görevlidir.

Öte yandan scroll deneyimi yalnızca görsel bir konu da değildir. Kaydırma sırasında takılan bir animasyon, yüklenirken zıplayan bir görsel ya da ekranı kaplayan sabit bir menü, en güzel tasarımı bile bozar. Kısacası bu başlık tasarımı, içeriği, ölçümü ve performansı birlikte ilgilendirir. Ben de yazıyı bu dört eksen üzerine kurdum.

"Ekranın üstü" (fold) efsanesi hâlâ geçerli mi?

Kısa cevap: kısmen. Eski kurala göre önemli olan her şeyi ilk ekrana sığdırmanız gerekiyordu. Ancak kullanıcılar bugün kaydırmayı çok doğal biçimde yapıyor, özellikle telefonda. Bu yüzden "her şey yukarıda olmalı" düşüncesi, sıkışık ve nefes almayan ilk ekranlar üretiyor.

Yine de ilk ekranın ağırlığı hâlâ büyüktür. Nielsen Norman Group'un göz izleme çalışmasına göre kullanıcılar sayfa görüntüleme sürelerinin yaklaşık %57'sini ilk ekranda, %74'ünü ise ilk iki ekranda geçiriyor. Aynı ekibin 2010 ölçümünde ilk ekranın payı %80 idi. Kaynağı merak ederseniz NN/g Scrolling and Attention araştırmasına bakabilirsiniz.

Benim bu veriden çıkardığım ders şudur: ilk ekran, sayfanın ne vaat ettiğini net söylemeli ve aşağıda daha fazlası olduğunu hissettirmelidir. Her şeyi sığdırmak zorunda değilsiniz. Fakat ziyaretçinin "doğru yerdeyim" demesini sağlayacak başlık, alt başlık ve ana eylem yukarıda durmalı. Geri kalan her şey, kaydırmayı hak eden bir sırayla aşağıya dizilebilir.

Sayfa ritmi nasıl kurulur?

Sayfa ritmi, yoğun ve hafif bölümlerin dengeli biçimde sıralanmasıdır. Müzikte olduğu gibi web sayfasında da sürekli aynı tempoda çalan bir parça sıkıcı gelir. Üç metin bloğunu art arda dizdiğinizde okur yorulur; üç görsel galeriyi yan yana koyduğunuzda ise mesaj kaybolur.

Ben ritmi kurarken şu sırayı sık kullanıyorum:

• Vaat: net bir başlık ve tek cümlelik açıklama.
• Kanıt: kısa bir güven şeridi, örneğin referans logoları ya da sayılar.
• Açıklama: hizmetin veya ürünün nasıl çalıştığını anlatan sade bir bölüm.
• Nefes: geniş boşluklu, tek görselli ya da tek alıntılı bir ara bölüm.
• Ayrıntı: özellikler, karşılaştırma tablosu veya süreç adımları.
• İtiraz: sık sorulan sorular.
• Eylem: tekrar eden ama bağlama uyan bir çağrı.

Bu sıra bir şablon değil, yalnızca bir başlangıç noktasıdır. Önemli olan her bölümün farklı bir görsel yoğunlukta olmasıdır. Böylece göz, kaydırırken yeni bir şeye geldiğini hisseder. Ayrıca boşluk (whitespace) ritmin parçasıdır; bölümler arasına cömert boşluk bırakmak, okura "burada yeni bir konu başlıyor" mesajı verir.

Ziyaretçiyi aşağı kaydırmaya ne teşvik eder?

Ziyaretçiyi aşağı kaydırmaya iten ilk şey meraktır. İlk ekranda bir soru sorup cevabını hemen altta vermek, bu merakı doğal biçimde kullanır. Örneğin "Siteniz neden teklif getirmiyor?" başlığı, altında üç nedeni görme isteği yaratır.

İkinci teşvik görsel ipuçlarıdır. Bir sonraki bölümün üst kenarının ilk ekranın altından hafifçe görünmesi, "aşağıda devamı var" mesajını en sade biçimde verir. Kesilmiş bir kart, yarım görünen bir görsel ya da ekranın dibine taşan bir başlık bu işi görür. Buna karşın zıplayan bir ok simgesi tek başına genellikle yetmez; bazı ziyaretçiler onu süs sanıp görmezden gelir.

Üçüncü teşvik ise tutarlılıktır. İlk ekranda verdiğiniz vaat, aşağıdaki bölümlerde karşılık bulmalıdır. Kullanıcı ikinci bölümde alakasız bir kampanya bandı görürse, güveni sarsılır ve kaydırmayı bırakır. Bu nedenle ben sayfa akışını yazarken önce başlıkları arka arkaya okurum. Başlıklar tek başına bir hikâye anlatıyorsa, kaydırma da anlam taşıyordur. Hikâye kavramını sevmeyen ekipler için bile bu test çok işe yarar.

"Sahte son" hatası nasıl önlenir?

Sahte son, sayfanın bittiği izlenimini veren tasarım hatasıdır. Genellikle tam ekran bir görsel, kalın yatay bir çizgi ya da büyük bir boşluk, ilk ekranın altına denk geldiğinde ortaya çıkar. Ziyaretçi aşağıda başka içerik olmadığını düşünür ve sayfayı terk eder.

Bu hatayı fark etmek için basit bir yöntem kullanıyorum: sayfayı farklı ekran yüksekliklerinde açıp ilk ekranın alt kenarına bakıyorum. Eğer alt kenar bir bölümün tam bitişine denk geliyorsa risk vardır. Bunun yerine bir sonraki bölümün başlığı veya kartları yarım görünmelidir.

Özellikle tam ekran kahraman (hero) alanlarında dikkatli olmanızı öneririm. Hero alanını ekran yüksekliğinin tamamına ayarladığınızda, alt kenar her cihazda kusursuz biçimde "bitti" der. Pratikte hero yüksekliğini ekranın yüzde seksen ile doksanı arasında tutmak, altından bir sonraki bölümün kenarını göstermek için yeterli olur. Bu, benim saha tecrübeme dayalı bir başlangıç aralığıdır, garanti değildir; her tasarımda test etmeniz gerekir.

Mobilde scroll deneyimi nasıl farklılaşır?

Mobilde scroll deneyimi hem daha doğal hem daha acımasızdır. Doğaldır, çünkü telefon kullanıcısı başparmağıyla sürekli kaydırır ve bunu bir yük olarak görmez. Acımasızdır, çünkü ekran küçük olduğu için her gereksiz öğe içeriği daha da aşağı iter.

Mobil tasarımda şu noktalara özellikle dikkat ediyorum:

• Sabit başlık alanını ince tutun; ekranın dörtte birini kaplayan bir menü kaydırma alanını daraltır.
• Yatay kaydırılan kartları (carousel) dikkatli kullanın; dikey akış içinde ikinci bir yön yaratırlar.
• Dokunma hedeflerini kaydırma alanından ayırın; kaydırmak isterken yanlışlıkla bir butona basmak sinir bozucudur.
• Uzun tabloları mobilde kartlara dönüştürün ya da yatay kaydırma alanını açıkça işaretleyin.

Mobil öncelikli yaklaşımın genel ilkelerini mobil öncelikli tasarım yazımda ayrıntılı anlattım. Sitenizin telefonda nasıl davrandığını kontrol etmek isterseniz mobil uyumluluk testi rehberi de işinize yarar.

Scroll derinliğini nasıl ölçersiniz?

Scroll derinliği, ziyaretçinin sayfanın ne kadarını gördüğünü gösteren ölçüttür. Tasarım kararlarını tahminle değil, bu veriyle vermenizi öneririm. Aksi hâlde "kimse aşağı inmiyor" ya da "herkes sonuna kadar okuyor" gibi varsayımlarla sayfa düzenlersiniz.

Google Analytics 4, gelişmiş ölçüm (enhanced measurement) açık olduğunda otomatik bir scroll etkinliği gönderir. Ancak bu etkinlik yalnızca ziyaretçi sayfanın dikey olarak yaklaşık %90'ına ulaştığında tetiklenir. Ayrıntıları GA4 gelişmiş ölçüm yardım sayfasında bulabilirsiniz. Yani varsayılan veri size "sayfanın sonuna yaklaşanlar" hakkında bilgi verir, ortadaki kopuşları ise göstermez.

Bu yüzden ben çoğu projede ek eşikler tanımlıyorum. Böylece ziyaretçilerin hangi bölümde kaybolduğunu görebiliyorum. Ayrıca ısı haritası araçları, kaydırma dağılımını görsel olarak sunar ve ekip içinde tartışmayı kolaylaştırır. Ölçümün amacı rakam biriktirmek değil, sayfanın hangi bölümünün "duvar" gibi davrandığını bulmaktır.

GA4'te özel kaydırma eşiklerini nasıl kurarsınız?

Özel eşikler için en pratik yol Google Tag Manager'dır. Tag Manager içinde "Kaydırma Derinliği" (Scroll Depth) tetikleyicisi bulunur. Bu tetikleyiciye dikey yüzdeler, örneğin 25, 50, 75 ve 90 değerlerini girersiniz. Ardından bu tetikleyiciye bağlı bir GA4 etkinlik etiketi oluşturursunuz.

Kurulumda benim izlediğim adımlar şunlar:

1. GA4'te gelişmiş ölçümdeki varsayılan kaydırma etkinliğini kapatın ya da farklı bir adla ayırın; aksi hâlde %90 verisi iki kez gelir.
2. Tag Manager'da kaydırma derinliği tetikleyicisini dikey yüzdelerle oluşturun.
3. Etkinliğe yüzde değerini bir parametre olarak ekleyin; yerleşik "Scroll Depth Threshold" değişkenini kullanabilirsiniz.
4. GA4'te bu parametreyi özel boyut olarak kaydedin, yoksa raporlarda göremezsiniz.
5. Önizleme modunda test edin ve gerçek zamanlı raporda etkinliklerin geldiğini doğrulayın.

Bir uyarı ekleyeyim: çok kısa sayfalarda yüzde eşikleri yanıltıcıdır, çünkü sayfa açılır açılmaz %75 bile görünür olabilir. Bu tür sayfalarda yüzde yerine belirli bölümlerin görünür olmasını ölçen "öğe görünürlüğü" tetikleyicisini tercih ederim. Ölçtüğünüz etkinlikleri raporda nasıl okuyacağınızı merak ediyorsanız dijital pazarlama raporu okuma rehberime bakabilirsiniz.

Scroll verisini nasıl yorumlamalısınız?

Scroll verisini tek başına iyi ya da kötü diye okumamalısınız. Örneğin bir iletişim sayfasında ziyaretçilerin çoğunun %25'te kalması sorun değildir; telefon numarası ilk ekrandaysa işini bitirmiş demektir. Buna karşın uzun bir hizmet sayfasında fiyat bölümünü görmeden ayrılanlar çoğunluktaysa, sayfanın ortasında bir kopuş vardır.

Ben veriyi yorumlarken üç soru sorarım. Birincisi, kaydırma dağılımında ani bir düşüş var mı? Ani düşüş, genellikle ilgisiz bir bölüme veya sahte sona işaret eder. İkincisi, derin kaydıranlar daha çok mu dönüşüyor? Eğer öyleyse önemli argümanları biraz yukarı taşımak işe yarayabilir. Üçüncüsü, mobil ve masaüstü arasında büyük fark var mı?

Ayrıca scroll derinliğini hemen çıkma oranıyla birlikte değerlendirmek gerekir. Sayfadan çabuk ayrılan ziyaretçileri azaltma yollarını hemen çıkma oranı yazımda ayrıca anlattım. Kısacası kaydırma verisi bir teşhis aracıdır; tedaviyi içeriğin kendisinde ararsınız.

Sticky header ve sabit öğeler ne zaman işe yarar?

Sticky (yapışkan) öğeler, kaydırma sırasında ekranda sabit kalan menü, buton veya bilgi şeritleridir. Doğru kullanıldığında gezinmeyi kolaylaştırır, yanlış kullanıldığında ise içerik alanını boğar.

Sabit başlık alanının işe yaradığı durumlar genellikle şunlardır: kullanıcının sık sık menüye döndüğü e-ticaret siteleri, çok bölümlü hizmet sayfaları ve arama kutusunun önemli olduğu kataloglar. Öte yandan tek amaçlı açılış sayfalarında sabit menü çoğu zaman gereksizdir; dikkat dağıtır.

Sticky öğeleri kurarken benim uyduğum kurallar şunlar:

• Sabit başlığı kaydırma sırasında küçültün; ilk ekrandaki geniş hâlini aynen taşımayın.
• Aşağı kaydırırken gizlenip yukarı kaydırırken beliren başlıklar, mobilde alan kazandırır.
• Aynı anda en fazla bir sabit üst öğe ve bir sabit alt öğe kullanın; çerez bandı, sohbet balonu ve kampanya şeridi birleşince ekran kilitlenir.
• CSS'teki position: sticky özelliğini tercih edin; kaydırma olayını JavaScript ile sürekli dinleyen çözümler performansı düşürebilir.

Sabit CTA çubuğu dönüşümü artırır mı?

Sabit bir çağrı çubuğu (sticky CTA), özellikle mobilde işe yarayabilir. Ziyaretçi sayfanın neresinde olursa olsun "Teklif Al" veya "Ara" butonuna tek dokunuşla ulaşır. Ancak bu otomatik bir kazanç değildir; bazı sayfalarda baskıcı ve reklamımsı bir his yaratır.

Benim önerim, sabit çubuğu ilk ekranda göstermemek ve ziyaretçi ana CTA'yı geçtikten sonra görünür yapmaktır. Böylece ilk ekranda iki aynı buton yan yana durmaz. Ayrıca çubuğu kapatılabilir yapmak, kullanıcıya kontrol hissi verir.

Sabit CTA'yı mutlaka test etmenizi öneririm. Aynı sayfanın çubuklu ve çubuksuz sürümünü belirli bir süre karşılaştırıp form gönderimlerini ölçebilirsiniz. Buton metni ve konumu üzerine daha fazla örnek için CTA butonu örnekleri yazıma göz atabilirsiniz. Dönüşüm odaklı bir sayfa akışının genel mantığını da dönüşüm odaklı web tasarım yazısında anlattım.

Sonsuz kaydırma mı sayfalama mı?

Sonsuz kaydırma (infinite scroll), kullanıcı sayfanın sonuna yaklaştıkça yeni içeriğin otomatik yüklenmesidir. Sosyal medya akışlarında çok iyi çalışır, çünkü orada amaç keşif ve oyalanmadır. Ancak amaç belirli bir ürünü bulmak ya da karşılaştırmak olduğunda tablo değişir.

Üç yaklaşımı yan yana koyduğumda şöyle bir karşılaştırma çıkıyor:

Kurumsal ve e-ticaret projelerinde ben çoğunlukla "Daha fazla yükle" butonunu tercih ediyorum. Kullanıcıya kontrol verir, footer'a ulaşmayı engellemez ve her yüklemeyi bilinçli bir tercih hâline getirir.

Sonsuz kaydırma SEO'yu nasıl etkiler?

Google, sayfalama ve kademeli yükleme konusunda açık yönergeler yayımlıyor. Temel ilke şudur: arama motorunun içeriğe ulaşabilmesi için her içerik parçasının kendine ait, doğrudan açılabilen bir URL'si olmalıdır. Google tarayıcısı, sayfayı sizin kullanıcınız gibi aşağı kaydırıp yeni içerik tetiklemez.

Google Search Central'ın sayfalama rehberi birkaç somut öneri sunuyor. Örneğin her sayfaya benzersiz bir URL vermenizi, sayfalar arasında normal <a href> bağlantıları kullanmanızı ve sayfalı dizinin ilk sayfasını her sayfanın kanonik adresi yapmamanızı öneriyor. Ayrıca ürün listelemelerinde parça URL'lerinin (#) tek başına yeterli olmadığını belirtiyor.

Uygulamada ben sonsuz kaydırmayı ya da "Daha fazla yükle" butonunu, arka planda ?page=2 gibi gerçek sayfa adresleriyle eşleştiriyorum. Kullanıcı kaydırdıkça adres çubuğu güncellenir; arama motoru ise aynı içeriğe normal bağlantılarla ulaşır. Böylece hem kullanıcı hem tarayıcı kazanır. Büyük kataloglarda kategori mimarisi de bu işin parçasıdır; ayrıntıları büyük sitelerde kategori yapısı yazımda bulabilirsiniz.

Scroll animasyonları performansı nasıl etkiler?

Scroll animasyonları, doğru yapıldığında sayfaya hareket ve akıcılık katar. Ancak en sık gördüğüm performans sorunlarının önemli bir kısmı yine bu animasyonlardan çıkıyor. Özellikle her kaydırma olayında JavaScript çalıştıran eski tip "parallax" kütüphaneleri, zayıf telefonlarda sayfayı takılır hâle getirir.

Google'ın Core Web Vitals ölçütlerinden ikisi burada doğrudan devreye girer. Birincisi CLS, yani görsel kararlılıktır. web.dev'in CLS rehberine göre iyi bir deneyim için bu değerin 0,1 veya altında olması gerekir. Rehber ayrıca top, left, width, height gibi yerleşimi değiştiren özellikleri animasyonla oynatmak yerine transform ve opacity kullanmayı önerir. İkincisi INP, yani etkileşime yanıt süresidir; ana iş parçacığını meşgul eden kaydırma kodları bu süreyi uzatabilir.

Pratik önerilerim şunlar: animasyonları yalnızca transform ve opacity ile yapın, kaydırma dinleyicilerini "passive" olarak işaretleyin, öğenin görünür olup olmadığını kaydırma olayıyla değil Intersection Observer ile kontrol edin. Sitenizin performansını ölçmek için Lighthouse testi rehberimi kullanabilirsiniz. Hızın SEO'ya etkisini de site hızı yazımda anlattım.

Scroll hijacking neden kaçınılması gereken bir yöntem?

Scroll hijacking, yani kaydırmayı ele geçirme, tarayıcının doğal kaydırma davranışını değiştiren tekniktir. Örneğin fare tekerleğini bir kez çevirdiğinizde sayfanın bir sonraki tam ekran bölüme "atlaması" ya da kaydırma hızının yapay biçimde yavaşlatılması bu gruba girer.

İlk bakışta etkileyici görünür, bu yüzden tanıtım sitelerinde sıkça tercih edilir. Fakat kullanıcı kontrolü kaybettiğini hisseder. Dokunmatik yüzeylerde, farklı fare ayarlarında ve klavyeyle gezinen kullanıcılarda davranış tutarsızlaşır. Üstelik sayfanın bir yerine hızlıca dönmek isteyen kişi, her bölümü tek tek geçmek zorunda kalır.

Benim kuralım basit: kaydırma hızına ve yönüne dokunmayın. Hareket eklemek istiyorsanız, içeriğin görünür olduğunda belirmesi gibi hafif efektler seçin. Tam ekran bölümler istiyorsanız CSS'teki scroll-snap özelliğini ölçülü ve "proximity" modunda kullanmak, kaydırmayı ele geçirmeden benzer bir düzen sağlar. Arayüzde satışı düşüren diğer hatalara UX hataları yazımda değindim.

Hareket hassasiyeti olan kullanıcıları nasıl korursunuz?

Bazı kullanıcılar ekrandaki yoğun hareketten rahatsız olur; baş dönmesi veya mide bulantısı yaşayabilir. İşletim sistemleri bu kişiler için "hareketi azalt" ayarı sunar. Tarayıcılar da bu tercihi prefers-reduced-motion adlı medya sorgusuyla sitenize iletir.

MDN'deki prefers-reduced-motion açıklamasına göre bu sorgu, kullanıcının sistem ayarında gereksiz hareketi azaltmak istediğini belirttiğini tespit eder. Dolayısıyla siz de bu durumda parallax, büyük kaydırma animasyonları ve otomatik oynayan hareketli arka planları kapatabilir ya da yumuşatabilirsiniz.

Bunu ek bir özellik olarak değil, standart bir adım olarak görüyorum. Ayrıca şu kontrolleri de ekliyorum:

• Sayfa klavyeyle (Tab ve boşluk tuşu) sorunsuz kaydırılabiliyor mu?
• Sabit başlık, odaklanan bağlantıyı kapatıyor mu? Kapatıyorsa scroll-padding-top ile boşluk bırakın.
• Otomatik kayan içerikler için durdurma butonu var mı?

Erişilebilirlik, çoğu zaman genel kullanım kolaylığını da artırır. Bu yüzden bu adımları atlamamanızı öneririm.

Uzun sayfalarda gezinmeyi nasıl kolaylaştırırsınız?

Uzun sayfa kötü değildir; kötü olan, içinde kaybolunan sayfadır. Hizmet sayfaları, rehber yazılar ve ürün karşılaştırmaları doğal olarak uzar. Bu durumda ziyaretçiye harita vermeniz gerekir.

İlk araç içindekiler listesidir. Sayfanın başında ya da masaüstünde yan tarafta sabit duran bir içindekiler kutusu, okurun istediği bölüme atlamasını sağlar. Ayrıca her başlığa bağlantı (anchor) verdiğinizde, satış ekibiniz de müşteriye doğrudan ilgili bölümün adresini gönderebilir.

İkinci araç ilerleme göstergesidir. Özellikle uzun yazılarda ekranın üstünde ince bir ilerleme çubuğu, okura "ne kadar kaldı" bilgisini verir. Üçüncü araç ise "yukarı dön" butonudur; mobilde uzun sayfalarda gerçekten kullanılır. Bununla birlikte, bu butonu ilk ekranda göstermenin anlamı yoktur; ziyaretçi birkaç ekran indikten sonra belirmelidir.

Son olarak, bölüm başlıklarının kendisi de bir gezinme aracıdır. Kaydırarak göz gezdiren okur, yalnızca başlıklara ve kalın ifadelere bakar. Başlıklar içeriği özetlemiyorsa, okur aradığını bulamadan sayfayı terk eder. Metnin ne kadar rahat okunduğunu görmek için okunabilirlik analizi aracını kullanabilirsiniz.

Scroll deneyimini test ederken hangi kontrol listesini kullanmalısınız?

Yayına almadan önce scroll deneyimini sistemli biçimde test etmenizi öneririm. Ben her projede aşağıdaki listeyi çalıştırıyorum:

1. İlk ekranın alt kenarı, farklı yüksekliklerde bir sonraki bölümü ima ediyor mu?
2. Bölüm başlıkları art arda okunduğunda anlamlı bir akış oluşturuyor mu?
3. Görseller ve reklam alanları için yer ayrılmış mı, yoksa yüklenince içerik zıplıyor mu?
4. Aynı anda ekranda kaç sabit öğe var? Mobilde içerik alanı yeterli mi?
5. Animasyonlar yalnızca transform ve opacity ile mi çalışıyor?
6. Hareketi azalt ayarı açıkken sayfa sakinleşiyor mu?
7. Sonsuz kaydırma veya yükleme butonu gerçek URL'lerle eşleşiyor mu?
8. Scroll derinliği etkinlikleri GA4'e doğru geliyor mu?
9. Geri tuşuna basınca kullanıcı listede kaldığı yere dönüyor mu?

Bu listeyi düşük seviye bir Android telefonda da çalıştırın. Güçlü bir bilgisayarda akıcı görünen bir sayfa, orta segment telefonda takılabilir. Test sırasında gördüğünüz sorunları not edip önceliklendirmek, işi yönetilebilir kılar.

Bölümlerin sırasına nasıl karar verirsiniz?

Bölüm sırası, kaydırmanın omurgasıdır. Aynı içerikleri farklı sırada dizdiğinizde sayfa bambaşka bir izlenim bırakır. Bu yüzden ben sıralamaya karar verirken ziyaretçinin kafasındaki soruların sırasını esas alıyorum.

Örneğin bir hizmet sayfasına gelen kişi önce "Bu benim sorunumu çözer mi?" diye sorar. Ardından "Nasıl çalışıyor?", sonra "Kime güvenerek yapıyorum?" ve en sonunda "Ne kadar tutar, nasıl başlarım?" sorularına geçer. Sayfanın bölümleri bu soruları aynı sırayla cevaplarsa, kaydırma okura mantıklı gelir.

Sıralamayı doğrulamak için iki kaynak kullanıyorum. Birincisi satış ekibinin telefonda en çok duyduğu sorulardır; bunlar gerçek itirazları gösterir. İkincisi ise hedef kitle çalışmasıdır. Ziyaretçi profilini nasıl çıkardığımı hedef kitle analizi yazımda paylaştım.

Son bir not: sıralamayı sabit bir karar olarak görmeyin. Scroll verisi bir bölümün sürekli atlandığını gösteriyorsa, o bölümü aşağı taşıyabilir ya da kısaltabilirsiniz. Böylece sayfa, gerçek kullanıcı davranışıyla birlikte olgunlaşır. Açıkçası en iyi sonuçları, yayından sonra iki üç tur düzenleme yaptığım sayfalarda aldım. İlk sürümü mükemmel yapmaya çalışmak yerine, ölçüp iyileştirmeye açık bir sayfa kurmak çok daha verimli oluyor. Bu yaklaşım hem tasarım ekibinin hem de işletme sahibinin zamanını ve bütçesini korur. Üstelik ekibe öğrenme fırsatı verir.

Scroll deneyimi SEO ve dönüşümle nasıl ilişkilidir?

Scroll deneyimi, doğrudan bir sıralama faktörü değildir. Google, sitenizin ne kadar kaydırıldığını sıralama sinyali olarak kullandığını açıklamış değil. Ancak kaydırma deneyimini bozan unsurlar, ölçülebilir sinyallere dönüşebilir: CLS ve INP gibi Core Web Vitals değerleri, mobil kullanılabilirlik ve taranabilir içerik.

Öte yandan dönüşüm tarafında ilişki çok daha belirgindir. Ziyaretçi, ikna edici bölümlere ulaşamazsa dönüşmez. Fiyat, referans ve iletişim bölümleri kaydırmanın sonunda kalıyorsa ve ziyaretçilerin çoğu oraya varmıyorsa, sorun tasarımdadır. Bu yüzden ben scroll verisini form gönderimleriyle yan yana okurum.

SEO ile kullanıcı deneyiminin nerede buluştuğunu SEO ve UX uyumu yazımda daha geniş ele aldım. Kısacası iyi bir kaydırma akışı, arama motorundan gelen ziyaretçinin boşa gitmemesini sağlar.

Kaydırmayı yönlendiren tasarıma nereden başlamalısınız?

Scroll deneyimi üzerine çalışmaya başlamak için büyük bir yeniden tasarım gerekmez. Ben genellikle en çok trafik alan üç sayfayla başlıyorum. Önce mevcut kaydırma dağılımını ölçüyorum, ardından kopuşun yaşandığı bölümü buluyorum. Sonra o bölümü sadeleştiriyor, yerini değiştiriyor ya da tamamen çıkarıyorum.

İkinci adım performanstır. Ağır animasyonları ve gereksiz sabit öğeleri temizlemek, çoğu zaman tasarımın kendisinden daha hızlı sonuç verir. Üçüncü adım ise test ve tekrar ölçümdür. Yaptığınız değişikliğin etkisini birkaç hafta boyunca izlemeden yeni bir değişikliğe geçmeyin; aksi hâlde neyin işe yaradığını bilemezsiniz.

Sitenizin kaydırma akışını, ölçümünü ve performansını birlikte ele alan bir yapıya ihtiyacınız varsa, web tasarım hizmetim kapsamında bu çalışmayı baştan sona yürütüyorum. Ayrıca mevcut sitenizde nereden başlamanız gerektiğini konuşmak isterseniz iletişim sayfasından bana ulaşabilirsiniz.