Dokunmatik cihazlarda hareketler ve UX

1) Neden jestler ve ne zaman uygun oldukları

• Öngörülebilir (platform beklentileri doğrultusunda).
• Algılanabilir (kullanıcı, hareketin kullanılabilir olduğunu tahmin eder).
• Geri bildirim ile desteklenir (görsel/işitsel/dokunsal).
• Hatalı dokunuşlar ve farklı cihaz kapmaları ile güvenilir.

İlkeler: önce açık UI öğeleri - sonra ipucu jestleri - sonra gelişmiş gizli jestler. Kritik eylemler - her zaman açık düğmelerle çoğaltılır.

2) Hareket taksonomisi

Dokunun/Çift dokunun/Uzun basın - seçim/ekle. menüler/gelişmiş eylemler.
Kaydırma (dağ/vert) - gezinme, silme/arşivleme, eylemlerin açıklanması.
Sürükle ve bırak - sıralama, aktarma, hiyerarşi değişikliği.
Çimdik/Spread (zoom) - ölçek (galeriler, haritalar, grafikler).
Döndür - nadir, editörlerde/görünümlerde uygun.
Pull-to-refresh/Release-to-action - güncelleme/ikincil eylem.
Kenar kaydırma - sistem navigasyonu (geri/menü), dikkatli bir şekilde web üzerinde.
Çoklu dokunma - gelişmiş senaryolar için 2-3 parmak hareketi.
Sistem hareketleri - ekran görüntüleri, PiP, sistem "Geri" (Android) - çatışmaları dikkate alır.

3) Ergonomi ve başparmak alanları

Başparmak bölgeleri: erişim bölgesi - ekranın alt yarısı; Anahtar CTA'lar, çip filtreleri ve sekmeler altta.
Hit-target: Minimum 44 × 44 pt/48 × 48 dp. Küçük öğeler için bir hit-slop ekleyin.
Kenar girintileri: yanlış kenar kaydırmayı azaltın; Kritik etkileşimler - kenara yakın değil.
Yönlendirme: portre - varsayılan; Manzara - iki başparmak için optimize edin (özellikle oyunlarda/videolarda).

4) Tespit edilebilirlik ve eğitim

Uygun fiyat: jest ipuçları (yan tarafta yarı görünür kart, sayfa için altta "kalem").
Mikro-onboarding: Bir kerelik ipuçları ("Silmek için kaydır"), müdahaleci değil, "Got it'ile.
Deneme hareketi: Desenin ilk görünümünde demo animasyon.
Tekrarlanabilirlik: Hareketler, benzer içeriğe sahip tüm yerlerde aynı şekilde çalışmalıdır.

5) Geri bildirim: görsel, dokunsal, ses

Görsel: gölge, paralaks, kılavuzlara yapıştırma, çekme-yenileme sırasında ilerleme göstergesi.
Haptikler: sürüklenirken hafif dürtü, daha'ağır "- düşerken/başarı.
Ses (orta): Oyunlarda veya somut olaylarda kısa tıklamalar/tıklamalar (kazanma/hata).
İptal durumları: yıkıcı kaydırma ile görsel "kırmızı bölge", çıkarılmadan önce titreşim ipucu.

6) Jest çatışmaları ve öncelikleri

Tanıma hiyerarşisi: dahili kaydırma> kaydırma kartı> sistem kenar arkası (web'de - tam tersi). Jest-arena/öncelikleri yapılandırın.
Dikey kaydırma ve yatay kaydırma: 10-15 piksel hareketten sonra bir ekseni kilitleyin.
Kenar kaydırma ve kendi hareketleri: Sistemi engellememek için dahili bir girinti veya "kalem" hareketi ekleyin.
Küresel geri hareket (Android/iOS): beklenen navigasyonu bozmayın - "Geri" düğmesiyle önemli eylemleri çoğaltın.

7) Komut dosyası desenleri

7. 1 Listeler ve kartlar

Kaydırma eylemleri: kısa kaydırma - eylemlerin ipucu (simgeler), uzun - anında eylem.
Undo-paradigma: yıkıcı jest gösterisi snackbar "İptal" sonra.
Sürükle-yeniden düzenle: "tutamaç" üzerinde sürükle; Dikey ekseni düzelt.

7. 2 Haritalar, galeriler, grafikler

Ölçeklendirme için pinch-zoom + çift dokunun.
Eylemsizlik ve sınırlar: elastik sınırlar, düzgün eylemsizlik.
"Büyüteç "/grafikteki noktanın ayrıntıları için basılı tutun.

7. 3 Navigasyon ve kalkanlar

Alt sayfa: tutamaçtan çekme hareketi, daraltılmış/kısmi/tam durum; kapatmak için aşağı kaydırın.
Tabs/Chips: ilerleme göstergesi ile sekmeler arasında yatay kaydırma.

7. 4 Oyun ve hızlı senaryolar

Tek elle oynama: Alt kenardaki büyük bahis/aksiyon bölgeleri.
Çift hareketler: "repeat bet" (confirmation haptic) olarak çift dokunun.
Yıkıcı eşik: Parmağınızı 300 ms'de "kilitleyin" veya yürütmek için "kırmızı bölge'den geçin.

8) Kullanılabilirlik (A11y)

Tüm hareketler düğmeler veya menü öğeleri ile çoğaltılır.
VoiceOver/TalkBack: doğru açıklamalar ve odak sırası.
Motor erişilebilirliği: uzun basmaya alternatifler ("⋮" simgesi), artırılmış dokunmatik bölgeler.
Kontrast ve ölçek: Hareketler, harekete geçmenin tek yolu olmamalıdır.

9) Performans ve güvenilirlik

INP (Interaction to Next Paint) ≤ Anahtar hareketleri için 200ms.
Dokunma gecikmesi: ilk yanıttan önce <50-100ms hedef (görsel yakalama/aydınlatma).
60 FPS: sürükleme/kaydırma için düzgünlük; Ağır gölgeleri kapatın ve hareket ederken bulanıklaşın.
Vuruş testi: çakışmalardan kaçının (z-indeks/taşma) - tuzaklar "yumuşak'dır.
Kavrama testleri: sağlak/solak, başparmak/küçük parmak, ayakta/taşımada.

10) Web vs Native

Web/PWA: kaydırma için pasif dinleyiciler ('pasif: true'), eksenleri kilitlemek için 'dokunma eylemi', gereksiz yere sistem hareketlerini engellemekten kaçının.
IOS/Android native: sistem tanıyıcıları (UIGestureRecognizer/Android GestureDetector), standart haptikler, tahmini "Geri" (Android 14 +) kullanın.
Webview: köprüler ve güvenli bölgeler, kalkanların tahmini kapanışı - web içinde, sistemi kırmadan "Geri".

11) Çoklu dokunma ve gelişmiş hareketler

İki parmak: zoom kilitliyken kaydırma; Kartlarda - add. katmanı için "iki parmak aşağı'bir hareket.
Üç parmak: yalnızca güç kullanıcıları için; Her zaman bir alternatif sunar.
Kombinasyonlar: Aralık seçimi/grup hareketi için uzun basın + sürükleyin.

12) Doğrulama, telemetri, metrikler

События: 'gesture _ start', 'gesture _ commit', 'gesture _ cancel', 'latency _ ms', 'distance _ px', 'overscroll', 'misfire' (ложный жест), 'undo _ used'.
KPI: Başarı Oranı, Hatalı Atış Oranı, Geri Alma Oranı, INP, Harekete Geçme Süresi, Hareket çakışması için bırakma.

13) Yerelleşme ve kültürel farklılıklar

RTL dilleri: Yatay hareketleri ve simgeleri yansıtın.
Sembolizm: "Sola kaydır = kaldır" evrensel değildir - onboarding'de onaylayın.
Dokunsal desenler: sistem profillerini kullanın, bunlar zaten kullanıcıya aşinadır.

14) Güvenlik ve hatalar

Yıkıcı hareketler - sadece geri alma/onaylama ile.
Kenar kaydırmaları yanlışlıkla kritik süreçleri (ödeme/CCM) kapatmamalıdır.
Titreme koruması: Harekete başlamadan önce hareket eşiği (5-10 px).
Engelleme durumlarında hareketleri devre dışı bırakma (ödeme yükleyici, onay modal).

15) Dokunmatik Masa/Tablet Desenleri

İki elli senaryolar: kontrol bölgelerinin ayrılması.
Çok kullanıcılı mod: hareketler çakışmaz, dokunma süresi önceliği.
Büyük isabet hedefleri: 56-64 dp; Sürükleme işlemleri için görsel kılavuzlar.

16) Antipatterns

Yalnızca hareketle yapılan gizli kritik eylemler (düğme yok).
Sistemle çakışan hareketler (kenar arkası, bildirim gölgesi).
Görsel "karıştırma've ses/vibe olmadan uzun basın.
Eksenel kilit olmadan dikey kaydırma içinde yatay kaydırma.
Sürüklerken "Ağır" gölgeler/bulanıklaştırma - gecikme ve FPS düşüşü.
Uygulamanın farklı bölümlerinde tutarsız hareketler.

17) Uygulama kontrol listesi (adım adım)

1. Hareket haritası: nerede ve ne - A11y için alternatiflerle.
2. Tanıma öncelikleri: eksenel kilit, kenar güvenli bölgeler, jest-arena.
3. Geribildirim: görsel tuzak, dokunsal profiller, animasyonlar ≤ 200 ms.
4. Performans: FPS INP/60, sürükle/kaydırma profili.
5. Onboarding: kapatma yeteneğine sahip istemler ve deneme hareketleri.
6. Telemetri: başarı/yanlış ateşleme/geri alma, ısı haritası dokunuşları.
7. Test matrisi: cihazlar, yoğunluklar, solak/sağlak, kötü ağ durumları.
8. Dokümantasyon: tasarım sistemindeki hareket kılavuzu, örnekler ve anti-durumlar.

18) Alt satır

Yetkin bir jest hızlı, anlaşılır ve güvenilirdir. Sistem beklentilerini kırmadan ve herkes için erişilebilirlik sağlayarak hedefe giden yolu azaltır. Tasarım sisteminin bir parçası olarak jestleri tasarlayın: tekdüze desenler, açık öncelikler, zengin geri bildirim ve sıkı performans kontrolü - daha sonra UX'e dokunun, herhangi bir cihazda ve herhangi bir senaryoda eşit derecede hoş olacaktır.