Kurumsal web sitelerinin çoğu masaüstünde tasarlanır ve onaylanır. Mobil görünüm ise tarayıcı penceresini daraltarak ya da geliştirici araçlarındaki telefon simülasyonuyla kontrol edilir. Bu yöntemle bir şey gözden kaçar: mobil kullanıcılar fareyle değil, parmakla tıklar. Ekranda düzgün görünen bir buton, gerçek bir başparmakla tıklanmaya çalışıldığında çok küçük ya da komşu butona çok yakın olabilir.
Bu yazı, mobil buton boyutunu gerçek parmak kullanımıyla nasıl test edeceğinizi anlatıyor.
Sorun nasıl ortaya çıkar?
Mobilde buton sorunları genellikle şu şekillerde görülür:
- Kullanıcı "Ara" yerine "E-posta gönder" butonuna basar.
- Menüde bir bağlantıya basmak isterken yanındakine basar.
- Formda onay kutusunu işaretlemekte zorlanır.
- Küçük bir kapatma (X) butonunu defalarca denemek zorunda kalır.
- "Gönder" butonuna basmak için ekranı yakınlaştırır.
Bu sorunlar analiz verilerinde yüksek terk oranı, düşük form tamamlama ya da kısa oturum süresi olarak görünebilir, ama nedeni doğrudan anlaşılmaz.
Dokunma hedefi nedir?
Dokunma hedefi, bir butonun dokunmaya tepki veren alanıdır. Bu alan, butonun görünen boyutundan daha büyük olabilir. Örneğin küçük bir ikonun etrafına görünmez bir dolgu eklenerek dokunma alanı büyütülebilir.
Erişilebilirlik yönergeleri ve platform tasarım rehberleri, dokunma hedefleri için minimum boyut önerileri sunar. Web içerik erişilebilirlik yönergelerinin (WCAG) güncel sürümü ve iOS ile Android tasarım rehberleri bu konuda referans alınabilir. Kesin değerler için bu kaynakların güncel hallerine bakın; genel ilke, hedefin rahatça bir parmak ucuyla basılabilecek büyüklükte ve komşu hedeflerden yeterince ayrık olmasıdır.
Aralık da boyut kadar önemli
Yeterince büyük iki buton, aralarında boşluk yoksa yine de yanlış tıklamaya yol açar. Özellikle şu alanlara dikkat edin:
- Alt alta sıralanmış menü bağlantıları
- Yan yana duran "İptal" ve "Onayla" butonları
- Footer'daki sosyal medya ikonları
- Tablo içindeki eylem butonları
- Formdaki radyo butonları ve onay kutuları
Tehlikeli ya da geri alınamayan eylemleri (silme, iptal) sık kullanılan eylemlerin hemen yanına koymamak da iyi bir uygulamadır.
Başparmak bölgesi
Telefonların çoğu tek elle, başparmakla kullanılır. Ekranın bazı bölgelerine başparmakla ulaşmak kolaydır, bazılarına zordur. Genel olarak ekranın alt ve orta kısmı kolay, üst köşeler zordur. Bu durum telefon boyutuna ve kullanıcının hangi eli kullandığına göre değişir.
Bu yüzden:
- En önemli eylemleri (ara, teklif al, gönder) ulaşılabilir bölgelere yerleştirin.
- Sabit alt çubuk kullanıyorsanız, içindeki butonların yeterince büyük ve ayrık olduğundan emin olun.
- Sadece üst köşede duran bir menü butonu, bazı kullanıcılar için zor olabilir.
Gerçek cihaz testi
Simülasyon yerine gerçek cihazlarla test yapın. Basit bir test şöyle yapılabilir:
1. Farklı cihazlar
En az iki farklı telefon boyutu kullanın: küçük ekranlı ve büyük ekranlı. Mümkünse hem iOS hem Android.
2. Farklı kişiler
Tasarım ekibi dışından kişilerle test yapın. Farklı el boyutları ve farklı teknoloji alışkanlıkları olan kişiler seçin.
3. Görev bazlı test
Kişilere şu görevleri verin ve izleyin:
- Ana sayfadan iletişim sayfasına git.
- Telefonla ara butonuna bas.
- İletişim formunu doldur ve gönder.
- Menüyü aç ve bir hizmet sayfasına git.
- Açılan bir pencereyi kapat.
4. Tek elle kullanım
Görevleri tek elle, başparmakla yapmalarını isteyin. Yürürken ya da ayakta dururken denemek de gerçekçi bir senaryodur.
5. Gözlem
Şunları not edin:
- Yanlış tıklama oldu mu?
- Kişi ekranı yakınlaştırmak zorunda kaldı mı?
- Bir butona basmak için birden fazla deneme yaptı mı?
- Kişi elini ya da telefonu tutuşunu değiştirmek zorunda kaldı mı?
Test sonuç tablosu
| Görev | Cihaz | Yanlış tıklama | Yakınlaştırma | Deneme sayısı | Not |
|---|---|---|---|---|---|
Sık yapılan düzeltmeler
- Küçük ikonlara görünmez dolgu ekleyerek dokunma alanını büyütmek
- Menü bağlantıları arasındaki dikey boşluğu artırmak
- Yan yana butonları mobilde alt alta almak
- Metin bağlantıları yerine buton kullanmak (özellikle önemli eylemler için)
- Onay kutularının etiketlerini de tıklanabilir yapmak
- Kapatma butonunu büyütmek ya da daha erişilebilir bir yere taşımak
Kısa kontrol listesi
- Dokunma hedefi boyutları için güncel erişilebilirlik ve platform rehberlerine bakın.
- Butonlar arasında yeterli aralık bırakın.
- Önemli eylemleri başparmak bölgesine yerleştirin.
- Gerçek cihazlarda, farklı kişilerle, tek elle test yapın.
- Yanlış tıklama, yakınlaştırma ve tekrar denemeleri not edin.
- Düzeltmelerden sonra testi tekrarlayın.
Mobil kullanıcı, sitenizi parmağıyla kullanır. Butonları o parmağa göre tasarladığınızda, form gönderimleri ve telefon aramaları da daha az engelle karşılaşır.
