Başparmak bölgesi (thumb zone): mobilde butonları nereye koymalı?

Kısaca

Başparmak bölgesi, İngilizce adıyla thumb zone, mobil tek elle kullanımı anlatan bir haritadır. Ekranı üç parçaya böler: kolay ulaşılan alan, uzanmak gereken alan ve tutuşu değiştirmeden ulaşılamayan alan. Tasarımcılar bu haritayı mobil buton yerleşimine karar verirken kullanır.

Harita işe yarar ama bir kural değildir. İnsanlar telefonu sık sık farklı tutar ve ekranın ortasına daha isabetli dokunur. Aşağıdaki buton yerleşimi kurallarım bu iki gözleme dayanıyor.

Hoober'ın gözlemleri: telefonu nasıl tutuyoruz?

Bu konuda başvurduğum veri Steven Hoober'dan gelir. Hoober, UXmatters'taki 2013 yazısında sokakta, havalimanında, durakta, kafede ve toplu taşımada insanları izledi. 8 Ocak 2013'te biten iki ayda 1.333 gözlem topladı. Bunların 780'inde kişi ekrana dokunuyordu.

Ekrana dokunanlar arasındaki dağılım şöyle:

Hoober, sağ ve sol el oranlarını nasıl yorumlayacağından kendisinin de emin olmadığını yazar. Ayrıca yaş, cihaz ve yapılan iş gibi bilgileri kaydetmedi, tabletler de örnekte neredeyse yoktu. Bu yüzden tabloyu "herkes böyle tutar" diye değil, "tutuşlar karışık" diye okuyorum.

Bence yazının en önemli bulgusu tutuşla ilgili. Hoober'a göre kullanıcılar telefonu tutma biçimlerini çok sık, bazen birkaç saniyede bir değiştiriyor. Telefonu tek elle tutanların birçoğu aynı anda çanta taşıyor ya da toplu taşımada dengede durmaya çalışıyordu.

Hoober 2017'deki yazısında daha yeni rakamlar verir. Bu yazıya göre kullanıcıların %75'i ekrana yalnızca tek başparmakla dokunuyor. Telefonu tek elle tutanlar ise %50'nin altında.

Başparmak bölgesi haritasının sınırları

2013 yazısındaki çizimler yeşil, sarı ve kırmızıyla işaretliydi. Yeşil kolay erişimi, sarı uzanmayı, kırmızı tutuş değişikliğini gösteriyordu. Hoober o gün bile bu alanların yaklaşık olduğunu, kişiye, tutuşa ve telefonun boyuna göre değiştiğini yazdı.

Sonra daha ileri gitti. Aynı yazının altına 2017'de bıraktığı bir yorumda, okurlardan bu çizimleri yok saymalarını istedi. Yazıya eklenen editör notu da Hoober'ın yeni araştırmayla önerilerini güncellediğini söylüyor.

Hoober 2017 yazısında başparmak taraması çizimini "iyi bilinen ama yanlış" diye anar. Tasarımcıların hâlâ her dokunuşun ekranın altında olması gerektiğine inandığını söyler. Oysa kullanıcı parmaklarını oynatıp başparmağının ulaştığı alanı değiştirebilir.

Hoober'ın yerine koyduğu bulgu şu: insanlar ekranın ortasına bakmayı ve dokunmayı tercih ediyor. Ortada isabet de yüksek, bu yüzden hedef 7 mm'ye kadar küçülebilir. Köşede ise yaklaşık 12 mm gerekir. Ölçülerin ayrıntısını dokunma alanı sayfasında anlattım.

Hoober'ın örneği Geri butonu. Sahada insanların bu butonu sürekli kullandığını görür. Sağ üst köşede dursa bile genelde ekranın en çok kullanılan butonudur. Uzak köşe, kullanılmayan köşe demek değil.

Canlı örnek: tutuş değişince harita nasıl değişir?

Aşağıda kurgusal bir sepet ekranı var. Tutuşu değiştirin, sonra birincil butonu üste ve alta taşıyın. Sonuç metni, butonun hangi bölgeye düştüğünü söyler.

Sağ elden sol ele geçince harita aynalanır. Alttaki geniş buton sağ elde de sol elde de büyük ölçüde kolay bölgede kalır, yalnız uçları değişir. İki elle tutuşta üstteki buton da rahatlar. Bu yüzden tek bir haritaya göre tasarlamıyorum.

Alt navigasyon

Bence başparmak bölgesinin en görünür uygulaması alt navigasyon. Apple, iPhone'da sekme çubuğunun ekranın altında, içeriğin üstünde yüzdüğünü yazar. Android'in Compose belgesi gezinme çubuğunu eşit önemde üç ila beş hedef için önerir. Belgedeki örnek çubuk ekranın altında durur.

Apple bir sınır da çizer: sekme çubuğu gezinme içindir, eylem için değildir. Ekrandaki öğeler üzerinde iş yapan kontroller araç çubuğuna gider. Apple ayrıca sekme çubuğunun bölümler arasında gezinirken görünür kalmasını ister, yoksa insanlar uygulamanın neresinde olduklarını unutabilir.

Hoober'a göre içerik alanının üst ya da alt kenarındaki sekmeler görünümler arasında geçişi sağlar. İkincil eylemler de bu kenarlara gider, ana içerik ortada durur. Platformların ayrıntılı farkını iOS ve Android farkları rehberinde topladım.

Yüzen eylem butonu (FAB)

Android belgelerine göre yüzen eylem butonu, uygulamadaki birincil eylemi yapmayı sağlayan, vurgusu yüksek bir butondur. Kullanıcının en sık yapacağı tek ve odaklı eylemi öne çıkarır, genelde de ekranın sağ altına sabitlenir. Belgedeki örnekler yeni not oluşturmak, sohbete kişi eklemek ve haritayı konuma ortalamak.

Benim temsili haritamda en alt köşeler sağ elle de sol elle de zor bölgede. Sol elle tutan biri için sağ alt köşe başparmağın öbür tarafında kalır. Bu yüzden FAB'ın altına ya da yanına başka bir buton koymam, onu kenardan biraz içeride tutarım.

Bir de örtme sorunu var. FAB içeriğin üstünde yüzdüğü için listenin son satırını ya da son kartın butonunu kapatabilir. Ben listenin altına FAB yüksekliği kadar boşluk bırakırım. Böylece kullanıcı en alta kaydırdığında son öğe butonun altında kalmaz.

Ekranın üstündeki uzak eylemler

Üst köşeler en uzak alandır, ama boş kalmaları gerekmez. Hoober üçüncül işlevleri, kullanıcıların çoğu zaman bir köşeden açtığı menülere koymayı önerir. Arama ve yeni içerik oluşturmak gibi eylemler içinse eylem butonlarını önerir.

Bir tuzak var. 2013 yazısına göre bazı tasarımcılar tek el tablolarına bakıp az önemli ya da tehlikeli işlevleri sol üst köşeye koyuyor. Hoober bunu önermez. Üstte buton gören kullanıcı her şeye ulaşmak için beşik tutuşa geçebilir ya da telefonu zaten hep öyle tutabilir. Uzak köşe bir güvenlik önlemi değildir.

Öbür uçta da bir hata var. Sık kullanılan bir eylemi sırf erişilsin diye alta taşımak, ekranın mantığını bozabilir. Arama kutusu üstteyse kullanıcı onu orada arar. Böyle bir durumda eylemi taşımak yerine dokunma alanını büyütmeyi seçerim.

Ben hesabı silmek gibi geri alınamayan bir eylemi köşeye saklamam, onay adımı ya da geri alma ile korurum. Köşedeki ikonlara da ortadakilerden geniş bir alan veririm. Hoober 2013'teki başka bir yazısında ekran kenarlarında isabetin düşük olduğunu yazar. Fitts yasası uzak ve küçük hedefin neden yavaş seçildiğini anlatır.

Benim notum

Mobil audit'lerde en sık gördüğüm sorun, birincil butonun kaydırılan içeriğin en sonunda kalması. Kullanıcı formu doldurur, sonra butonu bulmak için aşağı iner. Alt banda sabitlenmiş tek bir buton bunu çözer.

İkinci sık sorun, alt çubuğa eylem ile gezinmenin karışık konması. Sepete ekle, paylaş ve ana sayfa aynı sırada durunca kullanıcı hangisinin sayfa değiştirdiğini kestiremez.

Başparmak haritasını yasa gibi değil, kontrol listesi gibi kullanıyorum. Önce sık kullanılan eylemin ortaya ya da alta yakın olup olmadığına bakarım. Sonra akışı gerçek bir telefonda sağ elle, sol elle ve iki elle denerim. Mobil uygulama tasarımı rehberinde bu denemeyi sürecin içine nasıl koyduğumu anlattım.

Kendi uygulamanızda bu yerleşimi kontrol ettirmek isterseniz UX Audit bir akışı uçtan uca inceler.

Kontrol listesi

1. Ekranın birincil eylemi orta ya da alt bantta mı?
2. Uzun formda birincil buton görünür kalıyor mu, yoksa içeriğin sonunda mı?
3. Alt çubukta yalnız gezinme hedefleri mi var, eylem karışmış mı?
4. Ekranda tek bir FAB mı var, altında başka buton duruyor mu?
5. Köşedeki ikonların dokunma alanı ortadakilerden geniş mi?
6. Geri alınamayan eylem onay ya da geri alma ile korunuyor mu?
7. Akış sağ elle, sol elle ve iki elle gerçek telefonda denendi mi?