Tek el tutuşta asıl eylem başparmağın yayı içine, hesap ve menü ise uzanan alana aittir. Bu rehber, mobil web tasarım yerleşimini üst çubuk tartışmasından ayırır ve sayfa tipine göre nereye ne koyacağınızı somutlar. Ulaşılır alanı, seyrek işi ve alt çubuk çakışmasını birlikte yönetirsiniz.
Telefonda sayfa çoğu zaman masada ve iki elle incelenmez; yürürken, kuyrukta veya koltukta tek elle tutulurken okunur. Bu yüzden mobil web tasarım yerleşimi, üst çubuğun nerede durduğundan bağımsız bir karardır. Asıl iş, başparmağın doğal yayına inmeli; seyrek kullanılan iş ise uzanarak ulaşılan alana kaymalıdır.
Üst kenar görsel olarak önemli görünebilir. Tek el tutuşta o kenar, parmağın gerilerek vardığı yerdir. Aşağıdaki rehber bu gerilimi görevle eşler: sık yapılan iş aşağıda durur, seyrek iş yukarıda ve karşı köşede kalır.
Mobil Web Tasarım Yerleşimi Tek El Tutuşla Kurulur
Masaüstü alışkanlığı, birincil düğmeyi kahraman alanının sağına veya ilk katın üstüne koymaktır. Telefonu alt kenardan kavradığınızda o konum, başparmağın en zor ulaştığı bölgeye düşer. Yerleşimi yalnızca sütun sayısına göre değil tutuşa göre kurmak, düğme renginden önce gelir.
Tek el tutuşta başparmak, ekranın tutulan kenarına yakın alt yarısında bir yay çizer. Yayın içi, tekrarlanan işler içindir: sonraki adım, sepete ekle, gönder, onayla. Yayın dışı üst şerit ve karşı üst köşe, oturumda bir kez bakılan işler içindir: hesap, dil, yardım.
Bu ayrım menüyü yok saymaz; menünün varlığını asıl eylemin yerine koymaz. Kullanıcı ürünü almak, formu bitirmek veya randevuyu onaylamak için geldiyse o iş, kaydırma ve uzanma istemeden parmağın altında durmalıdır.
KepezWeb bir mobil ekranı çizerken önce tutuşu işaretler. Sağ elde tutulan telefonda sağ alt yay asıl işe, sol üst köşe seyrek işe ayrılır. Sol el baskınsa ayna uygulanır. Her iki el için ortak çözüm aranıyorsa asıl eylem alt orta banda toplanır.
Ulaşılır Alan, Uzanan Alan ve Uzak Köşe
Ekranı üç iş bölgesine ayırmak, milimetrik bir harita iddiası değildir. Tutuş değişir, kılıf kalınlaşır, parmak uzunluğu kişiden kişiye farklıdır. Yine de tek elle kullanılan bir telefonda üç kuşak pratikte işe yarar.
| Bölge | Tek el tutuşta durduğu yer | Konulacak iş |
|---|---|---|
| Ulaşılır alan | Tutulan kenara yakın alt yarı ve alt orta bant | Asıl eylem: gönder, sepete ekle, sonraki, onay |
| Uzanan alan | Üst şerit ve tutulan ele yakın üst kenar | Logo, arama, menü, hesap |
| Uzak köşe | Ters elin üst köşesi | Seyrek ikon; asıl dönüşüm koyulmaz |
Ulaşılır kuşak, başparmağın eklemleri zorlanmadan değdiği yerdir. Buraya birkaç eşit düğme yığmak, asıl eylemi yine gizler. Bir birincil düğme, gerekirse bir sönük ikincil yeter.
Uzanan kuşak, parmağın gerilmesi veya elin kaydırılmasıyla varılır. Üst uygulama çubuğu, logo ve ikincil ikonlar buraya sığar. Bu kuşak boş kalsın diye içerik silinmez; yalnızca şimdi yapılacak iş buraya yazılmaz.
Uzak köşe, tutulan elin tersindeki üst köşedir. Ödeme düğmesi veya kritik kapatma buraya konursa kullanıcı ya ikinci ele geçer ya da işlemi bırakır. Kaçış da erişilebilir olmalı; ancak asıl işle yarışmamalıdır.
Asıl iş başparmağın yayına iner; seyrek iş uzanarak varılan kenarda bekler.
Asıl Eylemi Başparmak Bölgesine İndirin
Asıl eylemi indirmek, her şeyi yapışkan çubuğa tıkmak değildir. Önce sayfanın tek cümlelik işini yazın. Ürün sayfasında bu cümle sepete ekle olabilir. Başvuru formunda gönder, teklif sayfasında talebi ilet geçerlidir. Makalede çoğu zaman birincil eylem yoktur; paylaş ikonu asıl iş değildir.
Karar bilgisi okunduktan hemen sonra eylem görünür olmalı, ardından başparmak kuşağında sabitlenebilmelidir. Uzun açıklamanın en altında kalan düğme, kaydırmayı bitiren kişi için uygundur; kararsız ziyaretçi için kaybolur. Karar özeti ile düğmeyi birbirine yakın tutmak, görsel hiyerarşide ölçü ve konumun işe yaradığı yerdir.
İndirmenin üç yolu vardır:
- İçerik akışında, karar paragrafının hemen altında birincil düğme
- Kaydırırken alt kenarda duran tek işli çubuk
- Formda klavye açılınca başparmağın altında kalan gönder
Üçünü birden aynı anda kullanmak iki ayrı satın al üretir ve hangisine basılacağı belirsizleşir. Birincil eylem bir tane olsun. Tekrar gerekiyorsa aynı işin kopyası olsun; rakip bir iş olmasın.
Seyrek İşi Uzanan Alana Koyun
Seyrek iş, kullanıcının oturumda bir kez veya hiç bakmadığı iştir. Hesaba giriş, dil, yasal metin, mağaza bul, yardım. Bunlar yok edilemez; asıl işin yerini işgal etmemelidir.
Üst karşı köşe ve üst çubuğa yaslı ikonlar bu işlere yeter. Beş ikon yan yana dizmek seyrek işi ulaşılmaz değil, okunaksız yapar. İki ikon ve bir menü çoğu kurumsal sitede yeter. Menünün içine asıl dönüşümü gömmeyin.
Paylaş, favori ve karşılaştır gibi ikincil işler kartta şişkin durur. Bunları uzanan alana veya kartın köşesine, asıl seçim alanını bölmeden koyun. Kullanıcı önce ürünü veya yazıyı seçsin; sonra kaydetsin.
Alt Çubuk, Yüzen Düğme ve İçerik İçi Eylem
Alt gezinme çubuğu, uygulama alışkanlığını web’e taşır. Dört veya beş eşit sekme, asıl işi indirdim anlamına gelmez. Sekmelerden biri bu sayfanın işi değilse çubuk, başparmak kuşağını işgal eden bir dekor olur.
Yüzen düğme tek, kısa ve her ekranda aynı işi yapıyorsa işe yarar. Her sayfada farklı iş yazan yüzen düğme alışkanlık kırar. Ayrıca tarayıcı alt çubuğu ve güvenli alan ile çakışır; düğme metni örter.
İçerik içi düğme, okuma bitince doğal durur. Makale, liste ve uzun formda bu yeter; yapışkan çubuk şart değildir. E-ticaret ürün detayında fiyat, varyant ve sepete ekle aynı karar anında durmalıdır. Fiyat üstte, düğme iki ekran aşağıda kalmamalıdır; ürün detayındaki bilgi hiyerarşisi bu yüzden yerleşimden ayrı düşünülmez.
Çakışma olursa öncelik sırası şudur:
- Asıl eylem
- Geri veya kapat
- İkincil gezinme
Tarayıcının kendi alt çubuğu sizin çubuğunuz değildir. Altta iki şerit üst üste binmesin diye boşluk bırakın; içeriği o boşluğun altında unutmayın.
Form, Ürün ve Okuma Ekranında Uygulama
Ana sayfada ilk ekran bir vaat ve tek çıkış taşıyabilir; sonraki bölümler kaydırılır. Bölüm sırasını hedefe göre dizerken mobil tutuşu unutmayın: vaat üstte okunur, çıkış alt banda da kopyalanabilir. Kopya, ikinci bir vaat değil aynı işin ulaşılır hali olmalıdır.
Kurumsal iletişim formunda alanlar yukarıda, gönder başparmak kuşağındadır. Zorunlu alan uyarısı düğmenin yanında durmalı; hata mesajı sayfanın tepesine fırlatılmamalıdır. Klavye açılınca düğme görünür kalmalı veya alan bitince yeniden belirmelidir.
Ürün sayfasında görsel ve başlık üstte, varyant seçimi ortada, fiyat ile asıl düğme birlikte altta veya yapışkan çubukta durur. Favori uzanan köşeye gidebilir. Stok uyarısı düğmenin hemen üstündedir; aksi halde kişi tükendi ürüne basar.
Okuma içeriğinde asıl iş çoğu zaman yoktur. Paylaş ve içindekiler uzanan alana veya metin bitimine konur. Yapışkan hemen ara her yazıda bağırırsa okuma görevi bozulur.
Dokunma düzeni, klavye ve odak düzeninin yerine geçmez. Başparmak için alta indirdiğiniz düğme, odak sırasına da aynı iş sırasında girmelidir. Aksi halde erişilebilir web tasarımında klavye ve odak ters bir yol yürür.
KepezWeb projelerinde bu kontrolleri sayfa tipine göre ayrı ayrı işaretleriz. Aynı şablon, formda ve makalede aynı alt çubuğu dayatmaz.
Uygulamaya geçerken şu sırayı kullanın:
- Sayfanın tek cümlelik işini yazın.
- Tutuşu sağ, sol veya ortak diye işaretleyin.
- Asıl düğmeyi ulaşılır kuşağa alın.
- Seyrek ikonları üst karşı alana sıkıştırın.
- Alt çubuk, yüzen düğme ve içerik düğmesinden yalnızca gerekeni bırakın.
- Klavyeli sırayı dokunma sırasıyla aynı tutun.
- Gerçek telefonda tek elle gezinerek deneyin.
Sıkça Sorulan Sorular
Neden üst menüyü tartışmadan yerleşim konuşulur?
Üst menü markayı ve seyrek gezinmeyi taşır; asıl işi taşımaz. Tek el tutuşta sorun menünün varlığı değil, gönder veya sepete ekle düğmesinin menüyle aynı kuşağa sıkışmasıdır. Önce görevi alta indirin, sonra menüyü sadeleştirin.
Yüzen aksiyon düğmesi her mobil sayfada gerekli mi?
Hayır. Yüzen düğme, her ekranda aynı kısa iş tekrarlanıyorsa işe yarar. Makale, uzun sözleşme veya yalnızca okunan sayfada asıl iş yoksa yüzen düğme dikkat dağıtır ve metni örter.
Sol el ve sağ el için ayrı yerleşim mi gerekir?
Ayrı şablon şart değildir. Asıl eylemi alt ortaya almak her iki tutuşu da idare eder. İkonları yalnızca bir köşeye yığarsanız diğer el dezavantajlı kalır. Ortak çözüm, birincil düğmenin yatay olarak ortalanmasıdır.
Alt çubuk ile sayfa içi düğme birlikte kullanılır mı?
Aynı işi iki kez göstermek kabul edilebilir; iki farklı işi altta yarıştırmak kabul edilmez. Alt çubuk gezinme ise sayfa içi düğme o sayfanın işi olmalıdır. İkisi de satın al yazıyorsa birini kaldırın.
Başparmak alanı erişilebilirliği iptal eder mi?
İptal etmez. Dokunma için alta inen düğme, odak sırasına da aynı yerde girmelidir. Yalnızca parmak yayı düşünülüp klavye atlanırsa yerleşim bir grubu rahatlatır, diğerini kaybeder.
Sonuç ve Sonraki Adım
Mobil ekranda asıl eylemin başparmak bölgesine inmesini, menü ve hesabın uzanan alanda kalmasını birlikte kurgulamak istiyorsanız KepezWeb’den teklif alın. Sayfa tipine göre tutuşu, alt çubuğu ve birincil düğmeyi netleştiririz.
