Duýgur enjamlarda yşaratlar we UX
1) yşaratlar näme üçin we haçan ýerlikli?
Yşaratlar ulanyjynyň hereket ýoluny gysgaldýar: üç tapyň ýerine bir swipp. Olar tizligi we saklamagy ýokarlandyrýarlar, eger:- Öňünden aýdyp bolýar (platforma garaşyşlaryna laýyk gelýär).
- Tapylýar (ulanyjy jestiň elýeterlidigini çaklaýar).
- Seslenme bilen berkidilen (wizual/ses/taktil).
- Nädogry degenlerinde we enjamyň dürli tutuşlarynda ygtybarly.
Ýörelgeler: ilki bilen aç-açan UI elementleri → soň yşaratlar → soň ösen gizlin yşaratlar. Möhüm hereketler - hemişe aç-açan düwmeler bilen köpeltmek.
2) Yşaratlaryň taksonomiýasy
Tap/Double-tap/Long-press - saýlaw/goşmaça. menýu/giňeldilen hereketler.
Swipe - nawigasiýa, aýyrmak/arhiwlemek, hereketleriň aýan edilmegi.
Drag-and-drop - iýerarhiýany sortlamak, geçirmek, üýtgetmek.
Pinch/Spread (zoom) - masştab (galereýalar, kartalar, grafikler).
Rotate - seýrek, redaktorlarda/tomaşalarda ýerlikli.
Pull-to-refresh/Release-to-action - täzelenme/ikinji hereket.
Edge-swipe - ulgam nawigasiýasy (yza/menýu), webwýuda seresaplylyk bilen.
Multi-touch - ösen ssenariler üçin 2-3 barmakly yşaratlar.
System gestures - ekran suratlary, PiP, "Yza" (Android) ulgamy - gapma-garşylyklary göz öňünde tutuň.
3) Ergonomika we baş barmak zolaklary
Thumb-zones: ýetilýän zona - ekranyň aşaky ýarysy; Esasy CTA, çip süzgüçleri we bellikleri - aşakda.
Hit-target: azyndan 44 × 44 pt/48 × 48 dp. Kiçijik elementler üçin hit-slop (görünmeýän dokma zolagy) goşuň.
Gyralardan sapmalar: ýalan edge-swipe; kritiki interaksiýalar - gyrasyna ýakyn däl.
Ugrukdyryş: portret - standart; landşaft - iki sany uly barmak üçin optimizirlemek (esasanam oýunlarda/wideolarda).
4) Tapylmak we okatmak
Affordance: yşarat yşaratlary (gapdalynda ýarym görünýän kartoçka, aşagyndaky "ruçka" sheet üçin).
Mikro-ýygnamak: bir gezek ulanylýan maslahatlar ("Aýyrmak üçin süpüriň"), obsesif däl, "Düşündim".
Synag hereketi: pattern ilkinji gezek peýda bolanda görkeziş animasiýasy.
Gaýtalanma: yşaratlar meňzeş mazmunly ähli ýerlerde birmeňzeş işlemelidir.
5) Seslenme: wizual, taktil, ses
Wizual: kölege, paralaks, ugrukdyryjylara ýapyşmak, pull-to-refresh wagtynda ösüş görkezijisi.
Taktil (haptics): drag tutanyňyzda ýeňil itergi, drop/üstünlik bilen has "agyr".
Ses (ortaça): oýunlarda gysga basmak/basmak ýa-da görnükli wakalar (ýeňiş/ýalňyşlyk).
Ýatyryş ýagdaýlary: destructive-swipe-de wizual "gyzyl zona", aýyrmazdan ozal wibro-yşarat.
6) Yşarat gapma-garşylyklary we ileri tutulýan ugurlar
Tanamak iýerarhiýasy: içerki skroll> swipp kartoçka> ulgam edge-back (webde - tersine). Gesture-arena/ileri tutulýan ugurlary düzüň.
Dik skroll vs gorizontal swipe: 10-15 px hereketinden soň bir oky petikläň.
Edge-swipe vs öz yşaratlary: ulgam yşaratlaryna päsgel bermezlik üçin içerki girişi ýa-da "ruçka" yşaratyny goşuň.
Global back-gesture (Android/iOS): garaşylýan nawigasiýany bozmaň - möhüm hereketleri "Yza" düwmesi bilen köpeldiň.
7) Ssenariýalar boýunça patternler
7. 1 Sanawlar we kartoçkalar
Swipe-actions: gysga swipp - hereketler (nyşanlar), uzyn - derrew hereket.
Undo paradigmasy: destructive hereketinden soň snackbary "Yzyna al" görkeziň.
Drag-reorder: "ruçka" çyzmak; dik oky düzüň.
7. 2 Kartlar, galereýalar, grafikler
Ölçemek üçin Pinch-zoom + goşa synp.
Inertia & bounds: elastik serhetler, ýumşak inersiýa.
Tap-hold "lupa "/grafikadaky nokat jikme-jiklikleri üçin.
7. 3 Nawigasiýa we tikişler
Bottom-sheet: ruçkadan "çekiň" hereketi, collapsed/partial/full; ýapmak üçin swipe-down.
Tabs/Chips: Progress indikatorly tablaryň arasynda gorizontal aýlaw.
7. 4 Oýun we "çalt" ssenariýalar
One-hand play: aşaky gyrada jedelleriň/hereketleriň uly zolaklary.
Goşa yşaratlar: goşa tap "stawkany gaýtalamak" (haptic tassyklamasy).
Destructive bosagasy: barmagyňyzy 300 ms "düzediň" ýa-da ýerine ýetirmek üçin "gyzyl zolakdan" geçiň.
8) Elýeterlilik (A11y)
Yşaratlaryň hemmesi düwmeler ýa-da menýu nokatlary bilen köpeldilýär.
VoiceOver/TalkBack: dogry düşündirişler we fokus tertibi.
Motor accessibility: alternatiwalar long-press ("⋮" nyşany), ulaldylan degiş zolaklary.
Kontrast we masştab: yşaratlar herekete geçmegiň ýeke-täk usuly bolmaly däldir.
9) Çykyş we ygtybarlylyk
INP (Interaction to Next Paint) ≤ esasy hereketler üçin 200 ms.
Touch latency: maksat <50-100 ms birinji seslenmä çenli (wizual tutmak/yşyklandyrmak).
60 FPS: drag/scroll üçin tekizlik; hereket edeniňizde agyr kölegeleri we blur öçüriň.
Hit-testing: örtüklerden gaça duruň (z-index/overflow) - duzaklar "ýalpyldawuk".
Tutma synaglary: sag/çep, baş/kiçi barmak, durmak/ulagda.
10) Web vs Native
Web/PWA: pasif diňleýjiler ('passive: true') skroll üçin, 'touch-action' oklary petiklemek üçin, ulgam yşaratlaryndan hiç hili zerurlyk bolmazdan saklanyň.
iOS/Android nativa: ulgam tanadyjylaryny (UIGestureRecognizer/Android GestureDetector), adaty haptics, öňünden aýdylýan "Yza" (Android 14 +) ulanyň.
Webwiew: köprüler we howpsuz ýerler, çitleriň öňünden ýapylmagy - "Yza" ulgamyny bozmazdan webiň içinde.
11) Multi-taç we ösen yşaratlar
Iki barmak: zoom petiklenende panorama; kartalarda - goşmaça gatlak üçin "iki barmak aşak" yşaraty.
Üç barmak: diňe power-users üçin; elmydama alternatiwa beriň.
Kombinasiýalar: aralygy/toparlaýyn hereketi saýlamak üçin long-press + drag.
12) Walidasiýa, telemetriýa, metrika
События: `gesture_start`, `gesture_commit`, `gesture_cancel`, `latency_ms`, `distance_px`, `overscroll`, `misfire` (ложный жест), `undo_used`.
KPI: Yşarat gapma-garşylygy ýüze çykan ýagdaýynda Success Rate, Misfire Rate, Undo Rate, INP, Time-to-Action, Drop-off.
13) Lokalizasiýa we medeni tapawutlar
RTL dilleri: gorizontal yşaratlary we nyşanlary görkeziň.
Simwolizm: "çep = sil" ähliumumy däl - onbordingde tassyklaň.
Taktil nagyşlar: ulgam profillerini ulanyň, olar ulanyja eýýäm tanyş.
14) Howpsuzlyk we ýalňyşlyklar
Destructive jestleri - diňe undo/tassyklama bilen.
Edge-swipler tötänleýin kritiki prosesleri ýapmaly däldir (töleg/KUS).
Titremeden goramak: hereket bosagasy (5-10 px) yşarat başlamazdan ozal.
Bloklaýjy ýagdaýlarda yşaratlary öçürmek (töleg goýujy, tassyklama modaly).
15) Duýgur stollar/planşetler üçin patternler
Iki golly ssenariýalar: dolandyryş zolaklarynyň bölünmegi.
Köp ulanyjy re modeimi: yşaratlar gapma-garşy bolmaýar, degmek wagty boýunça ileri tutulýar.
Uly nyşanlar: 56-64 dp; sürmek amallary üçin wizual ugrukdyryjylar.
16) Antipatternler
Gizlin möhüm hereketler diňe yşarat bilen (düwmesiz).
Ulgam hereketleri (edge-back, notification shade).
Wizual "söweş" we ses/wibro bolmazdan uzyn metbugat.
Dik skrollyň içinde okly loksyz gorizontal swaýp.
"Agyr" kölegeler/blur drag → lag we FPS ýykylanda.
Programmanyň dürli ýerlerinde utgaşdyrylmadyk hereketler.
17) Girizmegiň çek-sanawy (ädimme-ädim)
1. Alamatlar kartasy: nirede we haýsylar - A11y üçin alternatiwalar bilen.
2. Tanamagyň ileri tutulýan ugurlary: okly lok, edge-safe zonasy, gesture-arena.
3. Seslenme: wizual duzak, haptics-profiller, animasiýa ≤ 200 ms.
4. Çykyş: INP/60 FPS, drag/scroll.
5. Onbording: öçürmek mümkinçiligi bolan maslahatlar we synag hereketleri.
6. Telemetriýa: success/misfire/undo, heatmap degmek.
7. Test-matrisa: enjamlar, dykyzlyklar, çepçi/sagçy, erbet toruň ýagdaýlary.
8. Dokumentasiýa: dizaýn ulgamynda yşaratlar boýunça gollanma, mysallar we anti-mysallar.
18) Jemleýji
Sowatly yşarat çalt, düşnükli we ygtybarly. Ol ulgamlaýyn garaşylýanlary bozman, hemmeler üçin elýeterliligi üpjün edip, maksada barýan ýoly gysgaldýar. Yşaratlary dizaýn ulgamynyň bir bölegi hökmünde dizaýn ediň: ýeke-täk nagyşlar, anyk ileri tutulýan ugurlar, baý seslenme we çykyşlara berk gözegçilik - şonda sensor UX islendik enjamda we islendik ssenariýada deň derejede ýakymly bolar.