GH GambleHub

タッチデバイス上のジェスチャーとUX

1)なぜジェスチャーが適切なのか

ジェスチャーは、アクションへのユーザーのパスを短くします:3つのタップの代わりに1つのスワイプ。次の場合、速度と保持率が向上します:
  • 予測可能(プラットフォームの期待に沿って)。
  • 検出可能(ユーザーはジェスチャーが利用可能であると推測します)。
  • フィードバック(ビジュアル/オーディオ/触覚)でサポートされています。
  • 誤った接触および異なった装置つかむことと信頼できる。

原則:最初の明示的なUI要素→それからヒントのジェスチャー→その後、高度な隠されたジェスチャー。重要なアクション-常に明示的なボタンで複製します。

2)ジェスチャータクソノミ

タップ/ダブルタップ/ロングプレス-選択/追加。メニュー/高度なアクション。
スワイプ(mountain/vert)-ナビゲーション、削除/アーカイブ、アクションの開示。
ドラッグアンドドロップ-並べ替え、転送、階層変更。
ピンチ/スプレッド(ズーム)-スケール(ギャラリー、マップ、グラフ)。
回転-まれで、エディタ/ビューで適切です。
Pull-to-refresh/Release-to-action-更新/セカンダリアクション。
エッジスワイプ-システムナビゲーション(バック/メニュー)、慎重にウェブ上で。
マルチタッチ-高度なシナリオのための2-3指のジェスチャー。
システムジェスチャー-スクリーンショット、PiP、システム「戻る」(Android)-競合を考慮に入れます。

3)人間工学および親指区域

親指ゾーン:リーチゾーン-画面の下半分;キーCTA、チップフィルタ、タブが下部にあります。
ヒットターゲット:最小44 × 44 pt/48 × 48 dp。小物のヒットスロップを追加します。
エッジインデント:偽のエッジスワイプを減らす。重要な相互作用-エッジに近いわけではありません。
向き:ポートレート-デフォルト;landscape-2つの親指に最適化(特にゲーム/ビデオ)。

4)検出可能性および訓練

Affordance:ジェスチャーのヒント(側面に半可視カード、シートの下部に「ペン」)。
マイクロオンボーディング:ワンオフの手がかり(「Swipe to delete」)、侵入的ではなく「、Got it」で。
トライアルジェスチャー:パターンの最初の出現時のデモアニメーション。
再現性:ジェスチャーは、同じような内容のすべての場所で同じように動作する必要があります。

5)フィードバック: ビジュアル、触覚、オーディオ

ビジュアル:シャドウ、パララックス、ガイドに固執、プルツーリフレッシュ時の進捗インジケータ。
ハプティクス:ドラッグをつかむときの軽い衝動、より「重い」-ドロップ/成功するとき。
オーディオ(中程度):ゲームまたは有形イベントの短いクリック/クリック(勝利/エラー)。
キャンセル状態:破壊的なスワイプ、除去前の振動ヒントを持つ視覚的な「レッドゾーン」。

6)ジェスチャーコンフリクトと優先順位

認識階層:内部スクロール>スワイプカード>システムエッジバック(Web上-その逆)。ジェスチャーアリーナ/優先順位を設定します。
垂直スクロールと水平スワイプ:10-15 pxの移動の後に1軸をロックします。
エッジスワイプ対ジェスチャー:システムを傍受しないように内部インデントまたは「ペン」ジェスチャーを追加します。
グローバルバックジェスチャー(Android/iOS):期待されるナビゲーションを壊さないでください-重要なアクションを「戻る」ボタンで複製します。

7)スクリプト化されたパターン

7.1リストとカード

スワイプアクション:短いスワイプ-アクションのヒント(アイコン)、長時間-インスタントアクション。
Undo-paradigm:破壊的ジェスチャーショースナックバー「キャンセル」の後。
ドラッグリオーダー:「handle」をドラッグします。縦軸を固定します。

7.2マップ、ギャラリー、グラフ

ピンチズーム+ダブルタップで拡大縮小できます。
慣性&境界:弾性境界、滑らかな慣性。
グラフ上の「虫眼鏡「/ポイントの詳細をタップします。

7.3ナビゲーションとシールド

ボトムシート:ハンドルからの引きのジェスチャー、崩壊/部分的/完全な状態;スワイプダウンして閉じます。
タブ/チップ:進行状況インジケータを持つタブ間で水平スワイプします。

7.4ゲームと高速シナリオ

ワンハンドプレイ:ボトムエッジの大きな賭け/アクションゾーン。
ダブルジェスチャー:「リピートベット」(確認ハプティック)としてダブルタップします。
破壊のしきい値:300ミリ秒で指を「ロック」するか「、レッドゾーン」を通過して実行します。

8)空室状況(A11y)

すべてのジェスチャーはボタンまたはメニュー項目で複製されます。
VoiceOver/TalkBack:正しい説明とフォーカスオーダー。
モーターのアクセシビリティ:ロングプレス(アイコン「⋮」)の代替、タッチゾーンの増加。
コントラストとスケール:ジェスチャーはアクションに到達する唯一の方法ではありません。

9)性能および信頼性

INP (Interaction to Next Paint) ≤キージェスチャーのための200msです。
接触遅延:最初の応答(視覚的な捕獲/照明)の前のターゲット<50-100ms。
60 FPS:ドラッグ/スクロールのための滑らかさ;移動時に重い影とぼかしをオフにします。
ヒットテスト:オーバーラップを避ける(Zインデックス/オーバーフロー)-トラップは「ソフト」です。
グリップテスト:右利き/左利き、親指/小指、立ち/輸送中。

10) Web vsネイティブ

Web/PWA:スクロールのためのパッシブリスナー('passive: true')、軸をロックするための'touch-action'、システムのジェスチャーを不必要に傍受することを避けます。
iOS/Androidネイティブ:use system recognizer (UIGestureRecognizer/Android GestureDetector)、標準的なハプティクス、予測的な「戻る」(Android 14+)。
Webview:ブリッジと安全ゾーン、シールドの予測クロージャ-ウェブ内、システムを壊すことなく「バック」。

11)マルチタッチと高度なジェスチャー

2つの指:ズームがロックされている間のパンニング;カードの上-addのためのジェスチャー「2本の指」。レイヤー。
3つの指:パワーユーザーのためだけ;常に代わりを与える。
組み合わせ:長押し+範囲選択/グループ移動のためのドラッグ。

12)検証、テレメトリー、メトリック

СónovaPX: 'gesture_start'、 'gesture_commit'、 'gesture_cancel'、 'latency_ms'、 'distance_px'、 'overscroll'、 'misfire' (ложный жест)、 'undo_used'。
KPI:成功率、失敗率、元に戻す率、INP、アクション時間、ジェスチャの競合のためのドロップオフ。

13)ローカライズと文化の違い

RTL言語:水平ジェスチャーとアイコンをミラーします。
シンボリズム:「swipe left=remove」は普遍的ではありません-オンボーディングで確認してください。
触覚パターン:システムプロファイルを使用すると、すでにユーザーに馴染みがあります。

14)セキュリティとバグ

破壊的なジェスチャー-元に戻す/確認するだけ。
エッジスワイプは、誤って重要なプロセス(payment/CCM)を閉じてはなりません。
Shiver保護:ジェスチャーを開始する前にモーションスレッショルド(5-10 px)。
ブロック状態(ペイメントローダー、確認モーダル)のジェスチャを無効にします。

15)タッチテーブル/タブレットパターン

両利きのシナリオ:制御ゾーンの分離。
マルチユーザーモード:ジェスチャーが競合しない、タッチ時間優先。
大きいヒットターゲット:56-64 dp;ドラッグ操作のビジュアルガイド。

16) Antipatterns

ジェスチャーのみでクリティカルアクションを隠す(ボタンなし)。
システムと競合するジェスチャー(エッジバック、通知シェード)。
視覚的な「スクランブル」とサウンド/バイブのないロングプレス。
軸ロックなしで縦スクロール中の水平スワイプ。
ドラッグ→ラグとFPSドロップ時に「重い」影/ぼかし。
アプリケーションのさまざまな部分で一貫性のないジェスチャー。

17)実装チェックリスト(ステップバイステップ)

1.ジェスチャーマップ:どこで何を-A11yのための選択肢で。
2.認識の優先順位:軸ロック、エッジセーフゾーン、ジェスチャーアリーナ。
3.フィードバック:ビジュアルトラップ、ハプティックプロファイル、アニメーション≤ 200ミリ秒。
4.パフォーマンス:FPS INP/60、ドラッグ/スクロールプロファイリング。
5.オンボーディング:オフにする機能を備えたプロンプトとトライアルジェスチャー。
6.テレメトリー:成功/失敗/元に戻す、ヒートマップタッチ。
7.テストマトリックス:デバイス、密度、左利き/右利き、悪いネットワークケース。
8.ドキュメンテーション:デザインシステムのジェスチャーガイド、例とアンチケース。

18)ボトムライン

有能なジェスチャーは速く、理解しやすく、信頼できるものです。それは、システムの期待を破り、すべての人にアクセシビリティを確保することなく、目標へのパスを削減します。デザインシステムの一部としてのデザインジェスチャ:ユニフォームパターン、明確な優先順位、豊富なフィードバックと厳格なパフォーマンス制御-その後、UXに触れると、任意のデバイスで、任意のシナリオで同様に快適になります。

Contact

お問い合わせ

ご質問やサポートが必要な場合はお気軽にご連絡ください。いつでもお手伝いします!

Telegram
@Gamble_GC
統合を開始

Email は 必須。Telegram または WhatsApp は 任意

お名前 任意
Email 任意
件名 任意
メッセージ 任意
Telegram 任意
@
Telegram を入力いただいた場合、Email に加えてそちらにもご連絡します。
WhatsApp 任意
形式:+国番号と電話番号(例:+81XXXXXXXXX)。

ボタンを押すことで、データ処理に同意したものとみなされます。