Thumb Zone Nedir? Mobil Tasarımda Başparmak Bölgesi Rehberi

Thumb zone nedir?

Thumb zone, telefonu tek elle tutarken başparmağın ekranda rahatça ulaşabildiği alandır. Bu bölge genellikle ekranın alt ve orta kısmına denk gelir. Üst köşelere ve karşı kenara ise başparmak güçlükle uzanır. Mobil tasarımda önemli butonları bu bölgeye yerleştirmek, dokunmayı hızlandırır ve hataları azaltır.

Kavram basit görünür, ancak sahada çoğu ekip mobil sayfayı hâlâ masaüstü alışkanlığıyla kuruyor. Menü ekranın en üstünde duruyor, ana buton ise sayfanın ortasında kayboluyor. Sonuçta kullanıcı telefonu kaydırıyor, elini yeniden konumlandırıyor ve çoğu zaman vazgeçiyor.

Bu yazıda thumb zone kavramını araştırma verileriyle ele alıyoruz. Ardından CTA, menü ve form yerleşimini somut örneklerle anlatıyoruz. Son bölümlerde test ve ölçüm yöntemlerini veriyoruz.

Bu yüzden thumb zone, yalnızca bir çizim değil, günlük bir karar aracıdır. Her yeni sayfa şablonunda aynı soruyu sorarsınız: kullanıcı bu butona tek elle ulaşabilir mi? Cevap hayırsa, yerleşimi değiştirmek genellikle en ucuz iyileştirmedir.

Ayrıca thumb zone, ekran tasarımını estetikten çok davranışa bağlar. Örneğin güzel görünen ama üst köşede duran bir arama ikonu, kullanım verisinde düşük tıklama alabilir. Dolayısıyla karar verirken görüntüye değil, parmağın hareketine bakmak gerekir.

Thumb zone kavramı nereden çıktı?

Başparmak bölgesi fikri, mobil arayüzlerin dokunmatik ekranlara taşındığı dönemde doğdu. Tasarımcılar, parmakla kullanılan cihazlarda fare imlecinin hassasiyetinin olmadığını fark etti. Dolayısıyla ekranın her noktası eşit değerde sayılamazdı.

2010'ların başında Josh Clark gibi isimler, başparmak erişim haritalarını geniş kitlelere tanıttı. Bu haritalar ekranı yeşil, sarı ve kırmızı bölgelere ayırıyordu. Yeşil bölge kolay, kırmızı bölge zor erişimi gösteriyordu.

Ancak haritalar, telefonların o dönemki boyutuna göre çizilmişti. Bugünkü telefonlar daha büyük olduğu için bölgelerin sınırları kaydı. Bu yüzden haritayı birebir kopyalamak yerine, ilkesini anlamak gerekir: sık kullanılan kontrolleri kolay erişilen yere koyun.

Bugün de kavramın temelinde aynı gözlem duruyor. İnsan eli, ekranın her noktasına eşit kolaylıkla uzanamaz. Başparmak eklemi sabit kalırken yalnızca bir yay çizer; bu yay da ekranın alt ve orta bölümünü kapsar.

Ayrıca dokunmatik arayüzde "üzerine gelme" davranışı yoktur. Kullanıcı yalnızca dokunur, hata yaparsa geri gider. Bu nedenle yanlış yerleştirilmiş bir buton, masaüstündekinden çok daha pahalıya mal olur.

Kullanıcılar telefonu gerçekte nasıl tutuyor?

Thumb zone tartışmasının en güvenilir kaynaklarından biri, Steven Hoober'ın gözlem çalışmasıdır. Hoober, sokakta, havalimanında, kafede ve toplu taşımada 1.333 mobil cihaz kullanımını gözlemledi. Bunların 780'inde kullanıcı ekranla etkileşime girdi.

Hoober'ın UXmatters'ta yayımlanan araştırmasına göre dağılım şöyleydi:

• Tek elle kullanım: yüzde 49, çoğunlukla başparmakla.
• Telefonu bir elle taşıyıp diğer elle dokunma (kucaklama): yüzde 36.
• İki elle tutup iki başparmakla kullanma: yüzde 15.

Bu oranlar, kullanıcıların yarısına yakınının başparmakla çalıştığını gösteriyor. Öte yandan Hoober önemli bir uyarı da yapıyor: kullanıcılar telefonu tutuş şeklini bazen birkaç saniyede bir değiştiriyor. Dolayısıyla tek bir "doğru" tutuş yoktur. Bu veri 2013 tarihli ve o günün cihazlarına aittir; bu nedenle oranları bugünkü kullanım için kesin değer gibi okumayın.

Bu verinin ilginç yanı, tasarımcıların varsayımıyla uyuşmamasıdır. Birçok ekip, kullanıcıyı telefonu iki elle tutan biri olarak hayal eder. Gerçekte ise kullanıcı çoğu zaman bir elinde başka bir şey taşır; örneğin çanta, kahve veya toplu taşıma barı.

Bu nedenle tek elli kullanım, istisna değil, ana senaryodur. Yani tasarımınızı tek elle test etmeden bitirmeyin. Ayrıca kullanıcı kitlenizin bağlamını düşünün: yolda okunan bir haber sitesi ile masada kullanılan bir B2B paneli aynı kuralla tasarlanmaz.

Başparmak bölgesi ekranda nasıl haritalanır?

Sağ elini kullanan biri telefonu tek elle tutarken ekranı kabaca üç alana ayırabilirsiniz. Haritayı sol el için aynalayarak okuyun. Aşağıdaki tablo, bu üç alanı ve tasarım karşılığını özetliyor.

Bu harita bir başlangıç noktasıdır, kesin bir kural değildir. Telefonun boyutu, kullanıcının el ölçüsü ve kılıf gibi etkenler bölgeleri değiştirir. Üstelik kullanıcı bazen telefonu iki elle tutar. Yine de alt yarının üst yarıdan daha rahat olduğu yönündeki temel fikir geçerliliğini korur.

Harita kullanırken iki ayrıntıya dikkat edin. Birincisi, bölgelerin keskin sınırı yoktur; geçiş yumuşaktır. İkincisi, bölgeler cihaza göre kayar. Bu nedenle kendi analitik verinizde, hangi ekran boyutlarının trafiğinizi taşıdığına bakın.

Örneğin trafiğinizin büyük kısmı büyük ekranlı telefonlardan geliyorsa, "orta" bölge sizin için fiilen "zor" olabilir. Öte yandan küçük ekranlı cihazlarda tüm alan daha erişilebilirdir. Yani tek bir harita yerine, iki üç tipik boyutu birlikte düşünmek daha sağlıklıdır.

Büyük ekranlar thumb zone'u nasıl değiştirdi?

Telefon ekranları büyüdükçe, ekranın üst kısmı tek elle neredeyse hiç ulaşılmaz hale geldi. Eskiden zor sayılan alan bugün çoğu kullanıcı için tamamen erişim dışıdır. Bu nedenle üstte duran menü ikonları ve geri butonları artık gerçek bir sürtünme yaratıyor.

Aynı zamanda ekranın tamamı daha geniş, yani yatay erişim de zorlaşıyor. Karşı kenardaki bir butona dokunmak için kullanıcı ya eli kaydırır ya da ikinci eli kullanır. Böylece küçük bir eylem bile iki adımlı bir harekete dönüşüyor.

Bunun tasarıma yansıması açıktır. Ana eylemi alta ve kullanıcının baskın elinin yakınına yerleştirin. Üst bölgeyi ise bilgi göstermek ve nadir eylemler için ayırın. Bu yaklaşımı mobil öncelikli tasarım mantığıyla birlikte düşünmek işinizi kolaylaştırır.

Burada kritik bir nokta var: ekran büyüdükçe kullanıcı daha çok çift elli kullanıma ya da kucaklamaya geçer. Ancak bu, tek elli tasarımı gereksiz kılmaz. Çünkü kullanıcı yine de en kolay yolu seçer ve çoğu zaman bu yol alt bölgedir.

Bu nedenle üst çubuktaki kritik eylemleri gözden geçirmenizi öneririz. Arama, sepet ve menü gibi öğeler üstte durabilir; ancak aynı eylemlere alttan da ulaşım sağlayabilirsiniz. Örneğin alt çubukta bir arama sekmesi eklemek, sürtünmeyi belirgin biçimde azaltır.

Sol elini kullananlar thumb zone'dan nasıl etkilenir?

Tasarımcılar haritaların çoğunu sağ el için çiziyor. Oysa Hoober'ın verilerinde tek elle kullanımın yüzde 67'si sağ başparmakla, yüzde 33'ü sol başparmakla yapılmış. Yani her üç tek elli kullanıcıdan biri sol elini kullanıyor.

Bu oran, genel nüfustaki sol elini kullanma oranından (yaklaşık yüzde 10) belirgin biçimde yüksek. Hoober bunun, kişinin elinin yanında başka bir işle meşgul olması gibi bağlamsal nedenlerden kaynaklanabileceğini belirtiyor. Yani kullanıcı kendi alışkanlığından bağımsız olarak eli değiştirebilir.

Pratik sonuç şudur: ana butonu tamamen sağa yaslamayın. Geniş, ekranı yatayda dolduran butonlar her iki el için de çalışır. Alt gezinme çubuğunda öğeleri eşit aralıkla dağıtmak da aynı işi görür.

Bir başka pratik yaklaşım, kritik kontrolleri ekranın yatay ortasında toplamaktır. Ortadaki bir buton, hem sol hem sağ başparmak için makul uzaklıktadır. Ayrıca iki yöne kaydırma hareketleri de her iki el için doğal çalışır.

Kullanıcıya seçenek sunmak da bir çözümdür. Bazı uygulamalar, ayarlardan alt çubuğun hizasını değiştirmeye izin verir. Ancak çoğu web sitesi için bu aşırı bir çözümdür; geniş ve ortalanmış öğeler yeterlidir.

Dokunma hedefi ne kadar büyük olmalı?

Konum kadar boyut da önemlidir. Başparmak parmak ucundan geniştir; bu yüzden küçük bir bağlantıya isabet etmek zorlaşır. Resmî ve yarı resmî kaynaklar bu konuda farklı eşikler veriyor.

Bu rakamlar birbirini dışlamaz. WCAG 24 pikseli kabul edilebilir alt sınır sayar. web.dev ise gerçekçi bir kullanım için 48 pikseli önerir. Biz ana CTA ve alt çubuk öğelerinde 48 piksel ve üzerini hedefliyoruz.

Boyut kadar aralık da önemlidir. İki küçük bağlantı yan yana dururken, başparmak yanlış olana dokunabilir. Bu nedenle satır listelerinde dikey aralığı artırmak, tek başına bile hata oranını düşürür.

Ayrıca görünür boyutla dokunma alanı aynı olmak zorunda değil. Küçük bir ikonun etrafına şeffaf bir iç boşluk (padding) ekleyerek dokunma alanını büyütebilirsiniz. Böylece görsel temizliği bozmadan, kullanımı kolaylaştırırsınız. Metin içindeki bağlantılar için WCAG ayrı bir istisna tanır.

CTA butonu ekranda nereye yerleştirilmeli?

Ana CTA'yı, kullanıcının sayfada karar verdiği anda başparmağının yakınında tutmak gerekir. Bu genellikle ekranın alt yarısıdır. Ürün sayfasında "Sepete ekle", hizmet sayfasında "Teklif al" butonunu bu mantıkla yerleştirirsiniz.

Üç yerleşim seçeneği öne çıkıyor:

• Sayfa akışının içinde, içeriğin hemen ardından gelen tam genişlikte buton.
• Ekranın altına sabitlenmiş (sticky) tek bir ana buton.
• İçeriğin sonunda, karar anının hemen ardından tekrarlanan buton.

Hangisinin kazanacağını varsayımla değil testle belirlersiniz. CTA metni ve tasarımı için CTA nedir yazımıza bakabilirsiniz. Orada metin, renk ve kontrast kararlarını ayrıntılı işledik.

Bir ilke olarak, CTA'yı kullanıcının ikna olduğu noktaya yaklaştırın. Uzun bir hizmet sayfasında, fiyat bilgisinden hemen sonra bir buton koymak, sayfanın en üstündeki butondan daha anlamlıdır. Yani CTA'nın yeri, hem ekran bölgesine hem de içerik akışına bağlıdır.

Ayrıca buton metni, başparmakla yapılan eylemi net anlatmalıdır. "Gönder" yerine "Teklif iste" gibi sonuç odaklı bir ifade seçin. Tam genişlikli butonlar da yanlış dokunmayı azaltır; çünkü hedef ne kadar genişse, hata payı o kadar düşer.

Alt gezinme çubuğu mu, hamburger menü mü?

Hamburger menü genellikle sol veya sağ üst köşede durur ve thumb zone'un en zor noktasına denk gelir. Alt gezinme çubuğu ise kolay bölgede yaşar. Bu fark, sık kullanılan sayfalara erişimde belirgin sürtünme farkı yaratır.

Ancak alt çubuk her site için doğru değildir. Birkaç ana hedefi olan uygulama benzeri ürünlerde, örneğin sipariş, hesap ve sepet gibi, çok iyi çalışır. Onlarca sayfası olan kurumsal sitede ise menü yapısı daha karmaşıktır.

Bu durumda iki katmanlı bir çözüm uygulayabilirsiniz. En çok kullanılan üç veya dört hedefi alta alın. Geri kalanı menüde bırakın. Menü kurgusu için web sitesi menü yapısı rehberimiz yol gösterir.

Karar verirken kullanıcının amacına bakın. Kullanıcı sık sık sayfalar arasında geçiyorsa, alt çubuk çok işe yarar. Çünkü her geçişte menüyü açıp kapatma adımı ortadan kalkar. Tersine, kullanıcı yalnızca bir sayfaya gelip eylem yapıp çıkıyorsa, menü zaten ikinci planda kalır.

Alt çubukta etiketlerin ikonun yanında görünmesi de önemlidir. Yalnızca ikon kullanmak, anlam belirsizliği yaratır. Ayrıca aktif sekmeyi renkle ve ek bir işaretle göstermek, kullanıcının konumunu hızla anlamasını sağlar.

Sticky CTA ve alt çubuk her sayfada çalışır mı?

Hayır. Sabit bir alt buton, ekranın değerli bir bölümünü sürekli kaplar. Küçük telefonlarda içeriğin yarısını örtebilir. Dolayısıyla sabit öğenin yüksekliğini sınırlı tutmanız gerekir.

Dikkat etmeniz gereken riskler şunlardır:

• Klavye açıldığında sabit buton, form alanını kapatabilir.
• Çerez bildirimi ve sabit buton üst üste binebilir.
• Sabit öğenin geç yüklenmesi, sayfada kayma yaratıp CLS değerini bozabilir.
• Telefonun alt kenarındaki sistem çubuğu, butonu kısmen örtebilir.

Bu riskleri gerçek cihazlarda denemeden yayına almayın. Bir sabit buton, yanlış uygulandığında dönüşümü artırmak yerine okumayı zorlaştırır.

Dengeyi kurmanın bir yolu, sabit çubuğu yalnızca gerektiğinde göstermektir. Örneğin kullanıcı belirli bir noktayı geçince butonu gösterebilirsiniz. Ya da yukarı kaydırırken gizleyip, aşağı kaydırırken geri getirebilirsiniz.

Her durumda sabit öğenin yüksekliğini kısa tutun ve içeriğin son satırının altında yeterli boşluk bırakın. Ayrıca sabit çubuğu eklemeden önce ve sonra mobil performans ile dönüşüm verisini karşılaştırın. Böylece iyileştirme mi yoksa zarar mı verdiğinizi görürsünüz.

Formlarda ve ödeme akışında thumb zone nasıl kullanılır?

Form, mobilde dönüşümün en hassas noktasıdır. Çünkü kullanıcı hem yazıyor hem de başparmağıyla gezinmeye çalışıyor. Klavye açıldığında ekranın büyük bölümü zaten kapanıyor.

Birkaç pratik ilke işinize yarar:

• Gönder butonunu klavyenin hemen üstünde, görünür bir yerde tutun.
• Alanları tek sütunda dizin; yan yana iki alan başparmak için hata kaynağıdır.
• Alanların yüksekliğini en az 48 piksel yapın.
• Doğru klavye türünü açın: telefon için sayısal, e-posta için @ işaretli klavye.

Randevu, teklif ve demo formlarında bu ilkeleri birlikte uygulayabilirsiniz. Ayrıntı için form tasarımı yazımıza göz atın.

Ödeme akışında da aynı mantık geçerlidir. Adımlar arasında ilerleten buton her zaman aynı yerde, kolay bölgede durmalıdır. Kullanıcı her adımda butonu aramak zorunda kalmamalıdır. Ayrıca geri dönüş eylemi, ilerleme butonundan görsel olarak daha zayıf olmalıdır.

Otomatik doldurma, tek dokunuşla ödeme ve doğru hata mesajları da başparmak yükünü azaltır. Örneğin hata mesajı, hatalı alanın hemen altında ve kısa bir cümleyle çıkmalıdır. Böylece kullanıcı ekranı kaydırıp hatayı aramaz.

Thumb zone uygularken hangi hatalar yapılıyor?

Sahada en sık gördüğümüz hatalar bellidir. Bunların çoğu iyi niyetle yapılan tasarım kararlarından doğuyor. Aşağıdaki liste, ekibimizin denetimlerde en çok işaretlediği noktaları özetliyor.

• Ana CTA'yı yalnızca sayfanın en üstüne koymak.
• Kapat veya geri butonunu sol üst köşeye yerleştirmek.
• Birbirine çok yakın iki butonun yanlış dokunmaya yol açması.
• Silme gibi geri alınamaz eylemi, kolay bölgeye ve onay vermeden koymak.
• Sabit çubuğu içerik üstüne bindirip metni okunamaz bırakmak.

Son iki madde önemlidir. Kolay erişim, kazara dokunmayı da kolaylaştırır. Dolayısıyla yıkıcı eylemlerde onay adımı eklemeniz gerekir. Bu konuda arayüz hataları yazımız ek örnekler veriyor.

Bir başka yaygın hata, tek bir cihazda test etmektir. Tasarımcı kendi telefonunda rahat bulduğu yerleşimi doğru sayar. Oysa kullanıcıların elleri, telefonları ve kılıfları farklıdır. Bu nedenle en az iki ekran boyutunda deneyin.

Ayrıca yanlış çıkarım yapmak da sık görülür: "Her şeyi alta koyalım." Bu yaklaşım alt alanı kalabalıklaştırır ve yine hata üretir. Önceliklendirme şarttır; yani yalnızca gerçekten sık kullanılan birkaç öğe alt bölgeye yerleşir.

Thumb zone erişilebilirlikle nasıl uyumlu çalışır?

Thumb zone yalnızca ergonomi değildir; erişilebilirliğin bir parçasıdır. Motor beceri sınırlılığı olan kullanıcılar için büyük ve iyi aralıklı hedefler hayati önem taşır. WCAG 2.2'nin hedef boyutu kriteri tam olarak bu ihtiyaca cevap verir.

Aynı zamanda tek elle kullanım, geçici bir engel durumudur. Kucağında çocuk taşıyan, elinde market poşeti olan veya sağ kolu alçıda olan biri de tek elle çalışır. Yani iyi bir thumb zone tasarımı, herkesin işini kolaylaştırır.

Erişilebilirlik tarafını daha geniş görmek için WCAG standartları yazımızı inceleyebilirsiniz. Renk karşıtlığını denetlemek için renk kontrast aracımız da kullanışlıdır.

Burada bir not düşmek gerekir: başparmak ergonomisi, ekran okuyucu kullanan kişilerin ihtiyacını tek başına çözmez. Odak sırası, etiketler ve kontrast gibi konuları ayrıca ele almanız gerekir. Yani thumb zone, erişilebilirliğin yalnızca bir katmanıdır.

Yine de hedef boyutu ve aralığı konusunda atacağınız adımlar, motor beceri açısından doğrudan fayda sağlar. Üstelik bu faydayı herkes hisseder. Bu nedenle erişilebilirlik ve dönüşüm hedefleri, bu konuda aynı yönü gösterir.

Üst alanı tamamen boşaltmak doğru mu?

Hayır. Zor bölge, işe yaramaz bölge anlamına gelmez. Üst alan, kazara dokunmanın zararlı olduğu öğeler için aslında uygun bir yerdir. Hesap ayarları, çıkış yapma veya bildirim temizleme gibi eylemler buraya yakışır.

Ayrıca logo, sayfa başlığı ve durum bilgisi gibi dokunulmayan öğeler üstte rahatça durur. Kullanıcı bunlara dokunmaz, yalnızca göz atar. Böylece değerli alt alan, gerçekten kullanılan öğelere kalır.

Özetle kural şudur: sık ve güvenli eylemler alta, nadir veya riskli eylemler üste. Bu ayrımı net yaparsanız, kullanıcı neyin nerede durduğunu hızla kavrar.

Bir örnek düşünün: bir bankacılık uygulamasında "çıkış yap" butonu alt çubukta olsaydı, kullanıcılar kazara oturumu kapatırdı. Üst köşede durması, bu yüzden bilinçli ve doğru bir tasarım kararıdır. Yani zor bölge, koruyucu bir işlev görebilir.

Aynı şekilde, bilgi amaçlı içerikler de üstte kalabilir. Fiyat, stok durumu veya sipariş durumu gibi bilgiler, dokunma gerektirmediği için erişim sorunu yaratmaz. Böylece alt bölgeyi yalnızca eylemlere ayırırsınız.

Thumb zone tasarımını nasıl test edersiniz?

En güvenilir test, gerçek cihazda ve gerçek elle yaptığınız testtir. Tasarım aracındaki ekran görüntüsü, başparmağın hissini vermez. Bu nedenle prototipi telefona yükleyip kullanıcılara tek elle görev verin.

Basit bir test akışı kurabilirsiniz:

• Üç ila beş kullanıcıya aynı görevi tek elle yaptırın.
• Hangi dokunmada tereddüt ettiklerini ve eli nerede kaydırdıklarını not edin.
• Farklı ekran boyutlarında, en az bir küçük ve bir büyük telefonda deneyin.
• Sol elini kullanan en az bir katılımcı ekleyin.

Teknik tarafta ise mobil uyumluluk testi aracımız temel kontrolleri yapar. Test yöntemini daha geniş görmek için mobil uyumluluk testi rehberine bakın.

Test sırasında kullanıcıya yön vermeyin. "Butona dokunun" demek yerine, bir hedef verin: "Bu ürünü sepete ekleyin." Böylece kullanıcı gerçek davranışını gösterir. Ayrıca oturumu kaydederek, parmağın nereye gittiğini sonradan izleyebilirsiniz.

Analitik tarafında ısı haritası ve tıklama haritası da destek sağlar. Örneğin üst köşedeki bir menüye çok az dokunma geldiğini görürseniz, bu bir erişim sorunu işareti olabilir. Ancak ısı haritası tek başına neden söylemez; bu yüzden kullanıcı gözlemiyle birlikte okuyun.

Thumb zone değişikliğinin etkisini nasıl ölçersiniz?

Değişikliği tahminle değil, ölçümle savunursunuz. Önce mevcut durumu kaydedin: mobil dönüşüm oranı, CTA tıklama oranı ve form tamamlama oranı. Sonra tek bir değişiklik yapıp A/B testi çalıştırın.

Örnek hesap: mobilde 10.000 oturumunuz ve yüzde 1,5 dönüşüm oranınız olsun. Bu, 150 dönüşüm eder. Alt sabit CTA ile oran yüzde 1,8'e çıkarsa dönüşüm 180 olur. Bu rakamlar varsayımsaldır; kendi verinizle test etmeniz gerekir.

Test için A/B test hesaplama aracından yararlanabilirsiniz. Sonuç anlamlı değilse, örneklem büyüklüğünü artırın. Küçük farkları gürültüden ayırmak için yeterli veri toplamadan karar vermeyin.

Thumb zone e-ticarette hangi sayfalarda en çok fark yaratır?

E-ticarette üç sayfa öne çıkar: ürün sayfası, sepet ve ödeme. Ürün sayfasında "Sepete ekle" butonu, kullanıcı fotoğrafı ve açıklamayı incelerken başparmağın yakınında kalmalıdır. Bu nedenle birçok mağaza, bu butonu ekranın altına sabitler.

Sepette ise miktar değiştirme ve silme kontrolleri dikkat ister. Küçük bir "eksi" ve "artı" ikonu, yanlış dokunmaya açıktır. Dolayısıyla bu kontrolleri geniş ve aralıklı yapın. Ödemede ise ilerleme butonunu sabit tutmak, kullanıcıyı akışta tutar.

Ürün listelerinde filtre butonu da önemlidir. Filtre, alt bölgede sabit bir düğmeyle açılırsa kullanıcı kolay ulaşır. Konuyla ilgili ürün sayfası hızının satışa etkisini da ayrıca değerlendirmenizi öneririz.

Kartlar ve yatay kaydırma thumb zone'da nasıl davranır?

Yatay kaydırma, başparmak için doğal bir harekettir. Başparmak ekranın ortasında sağa sola rahatça hareket eder. Bu yüzden ürün karuselleri ve hikaye çubukları genellikle iyi çalışır.

Ancak kaydırılabilir alan, kullanıcıya belli olmalıdır. Sonraki kartın bir kısmını ekranın kenarında göstermek, kaydırma ipucu verir. Ayrıca kaydırma sırasında dikey sayfa kaydırmasıyla çakışma yaşanmamalıdır.

Karuselin içindeki küçük butonlara dikkat edin. Kart başına bir ana eylem koymak, hem hedefleri büyütür hem de yanlış dokunmayı azaltır. Örneğin kartın tamamını tıklanabilir yapmak, çoğu zaman en güvenli çözümdür.

Thumb zone mobil SEO ile ilişkili mi?

Doğrudan bir sıralama faktörü olarak ilişkili değildir; ancak dolaylı bağlantılar vardır. Google, indeksleme için sayfanın mobil sürümünü esas alır. Dolayısıyla mobil deneyiminizin kalitesi, sitenizin genel başarısını etkiler.

Ayrıca kullanıcı sürtünmesi, sayfada kalma süresini ve dönüşümü etkiler. Kötü yerleşim, kullanıcıyı sayfadan çıkarır. Bu da trafiğin değerini düşürür. Yani SEO ile elde ettiğiniz ziyaretçiyi, mobil tasarımla kaybedebilirsiniz.

Etkileşim hızı da önemlidir. Dokunmaya geç yanıt veren bir sayfa, iyi yerleştirilmiş butonun avantajını siler. Bu konuyu Core Web Vitals yazımızda ayrıntılı ele aldık. UX ve SEO dengesi yazımız da bu bağlantıyı tamamlar.

Thumb zone tablet ve katlanabilir cihazlarda aynı mı çalışır?

Hayır, çalışmaz. Tabletlerde kullanıcı genellikle cihazı iki elle tutar ve başparmaklar ekranın iki alt köşesine yakın durur. Bu durumda başparmak, ekranın alt yan kenarlarına yakın bölgeleri kullanır.

Katlanabilir telefonlar ise iki farklı ekran davranışı sunar. Kapalıyken dar bir telefon gibi, açıkken küçük bir tablet gibi çalışır. Bu nedenle esnek bir yerleşim kurmanız gerekir.

Bu cihazların payı sitenizde küçükse, öncelikli hedefiniz yine standart telefon olsun. Ancak analitik verinizde farklı boyutların payı belirginse, bu cihazlarda da ayrıca test yapın. Karar için kendi verinizi esas alın.

Thumb zone için pratik kontrol listesi nedir?

Aşağıdaki liste, bir mobil sayfayı yayına almadan önce ekibimizin geçtiği hızlı denetimi özetler. Her maddeyi gerçek telefonda işaretleyin.

• Ana CTA, ekranın alt yarısında ve başparmakla ulaşılabilir mi?
• Tüm dokunma hedefleri en az 48 piksel mi ve aralarında boşluk var mı?
• Menü, sık kullanılan hedefleri kolay bölgede sunuyor mu?
• Sabit öğeler içeriği ve klavyeyi kapatıyor mu?
• Yıkıcı eylemler onay istiyor mu?
• Sol elini kullanan biri için de rahat mı?
• Form alanları tek sütunda ve doğru klavyeyle mi açılıyor?

Bu listeyi her yeni sayfa şablonunda tekrar edin. Küçük bir alışkanlık, zamanla ciddi bir dönüşüm farkı yaratır.

Thumb zone çalışmasına nereden başlamalısınız?

Önce en çok trafik alan üç mobil sayfanızı seçin. Her sayfada ana CTA'nın nerede durduğuna bakın. Ardından tek elle, gerçek telefonla bu sayfaları gezin. Yaşadığınız sürtünmeyi not edin.

Sonraki adım, bulguları öncelik sırasına koymaktır. Genellikle en hızlı kazanç, CTA'yı ve gezinmeyi kolay bölgeye almaktan gelir. Büyük bir yeniden tasarım gerekmeden, bu değişikliklerin çoğunu birkaç günde yaparsınız.

Mobil arayüzünüzü baştan ele almak isterseniz, ekibimizle web tasarım hizmetimiz kapsamında konuşabilirsiniz. Talha Aslan ve ekibi olarak mobil davranışı, tasarım ve dönüşüm verisiyle birlikte değerlendiriyoruz.