マイクロインタラクションとフィードバック

1）マイクロインタラクションとは

マイクロインタラクションは、システムがユーザーを聞いたことがあり、結果に向かって動いていることを確認する短い信号↔応答サイクルです。

1.トリガー（クリック、スワイプ、フォーカス、システムイベント）。

2.ルール（どのような変更と方法）。

3.Fidbeck（ビジュアル/サウンド/触覚/テキスト）。

4.ループ/メタルール（繰り返し、有効期限、元に戻す/やり直し）。

目標：タスクから注意をそらすことなく、不確実性と認知負荷を低減する。

2）設計原則

Meaning>エフェクト。この効果は「、何が起こったのか」と「次のこと」を説明します。
瞬時性。最初の応答≤ 100ms（ボタン/スイッチ）です。
あいまいさ。識別可能な状態：hover/focus/pressed/disabled/loading。
貯蓄。最低の特性、短い期間、花火なし。
一貫性。同じ動作が同じ信号です。
アクセシビリティ。Fidbekはスクリーンリーダーによって見られ、聞かれ、読まれる；動き/音に代わるものがあります。

3）タイミングおよびカーブ

ホバー/フォーカス： 120-180ms

プレス/トグル： 80-120

トースト/ツールチップ： 入力180-240ms、出力120-160ms

インライン検証： フィールドフォーカスの損失後100ミリ秒を≤

デフォルトの曲線は'cubic-bezier （0。2, 0, 0.2, 1)`;pressed-accelerated 'cubic-bezier （0。4, 0, 1, 1)`.

4）マイクロインターラクションカタログ

4.1ボタンとスイッチ

即座の応答：ネットワークによって照会されたとき視覚的なかちりと言う音/インデント+ビジー状態。
楽観的なアップデート：UIをすぐに変更し、エラーにロールバックします（元に戻す）。
ディベートをダブルクリック：/timeoutに答えるまでの繰り返しをブロックします。

4.2フォームのインライン検証

ぼかしフィールドの検証；メッセージは簡潔で建設的です（「少なくとも8文字」）。
ステータスアイコン+色+テキスト（1つの色ではありません）。
パスワードの場合-「強さ」の瞬時のインジケータ（入力に干渉しません）。

4.3トースト/バナー/スナック

ノンブロッキングの確認に使用します。
デュレーション2-5 s、ホバー/フォーカスで一時停止、必要に応じて元に戻すボタン。
重要なコンテンツやCTAをシャットダウンしないでください。

4.4進捗状況とスケルトン

プロセスの長さがわかっている場合、プログレスバー；そうでない場合は、スピナーの代わりにスケルトン。
レイアウトがジャンプしない：修正。ブロックの高さ。

4.5バッジ/カウンター

ディジットコントラスト≥ 4。5:1;切り捨て'99+'で最大99/999。
増分アニメーション-「震える」レイアウトなしで、40〜60ミリ秒のバッチの短いステップ。

4.6ツールチップ/ヘルプ

ホバー/焦点による出現；'aria-describedby'によるアクセシビリティ。
重要な情報をツールチップでのみ禁止します。

5）エラー、空の状態、元に戻す

エラー：正直なテキスト、理由とアクションの説明（「繰り返し」、「カードの変更」）。
空の状態：それが何であり、どのように開始するか；イラストのミュート、テキストコントラストAA/AAA。
元に戻すウィンドウ：リバーシブルアクションの5-10 s（削除、弾丸前のベットのキャンセル）。

6）マルチモーダルフィードバック

サウンド：静か、短い、イベントタイプごとに1パターン（成功/エラー/注意）。設定をオフにします。
Vibro/haptika：容易な出版物の応答/成功；'prefers-reduced-motion'とシステムの制限を尊重します。
ビジュアル：'transform/opacity'のみで、配列に重いぼかし/影はありません。

7）空室状況（A11y）

キーボードの'：focus-visible'；ぼかしのないフォーカスリング。
スクリーンセーバー：'role=「status「/」alert 」'for toast；リビングリージョン'aria-live=「丁寧/アサーティブ」'。

音/動きに代わるもの。'prefers-reduced-motion： reduce'

テキストとアイコンのコントラスト-WCAG（通常≥ 4。5:1).

8）パフォーマンス

100ms ≤応答：ネットワークへの視覚的な応答。
'transform/opacity'をアニメーション化します。複数の要素で'height/left/box-shadow'を避けます。
ネットワーク効果-プリフェッチと楽観；レトライは馬鹿だ。

9）マイクロインターラクショントークン（設計システム）

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10）実装スニペット

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11）指標と品質管理

INP p75 <200ミリ秒、Long Tasksシェア<5％。

最初のユーザーフィードバックklik→vizualnyy ≤ 100ms

ロールバックの楽観的行動の割合<3％（そうでなければ-不信感）。
UX調査：エラーメッセージの明確さ、確認の可視性。

QAチェックリスト

• 各インタラクティブには'pressed/busy/disabled'があります。
• エラーにはテキストとアクション（リトライ/元に戻す）が伴います。
• トーストはSRで利用可能であり、キーコンテンツは重複しません。
• インライン検証は入力を妨げません。メッセージは特定のものです。
• 'prefers-reduced-motion'サポート；音/振動がオフになります。
• レイアウトとストロボのジャンプはありません。'transform/opacity'のアニメーション。

12） iGamingの詳細

ベット/購入： インスタント'pressed→busy'、トースト「Accepted」 Undoで（規制が許可されている場合）、idempotentキー；遅延>1秒-「確認を待っています……。」

スピン/明らかにして下さい：短い出版物のフィードバック、無限の点滅なしで滑らかな開始/停止；win-500ミリ秒≤バースト+読み取り可能なテキスト（AAA）。
Live係数：バッチによる更新、「ジャンプ」なしの視覚的な差分（矢印/厚さ）。
支払い/結論：ステップバイステップの進捗状況（KUS→Proverka→Vyplata）、拒否理由の透明なテキスト。
責任あるプレー：気を散らす効果のない通知。より高いコントラスト、明示的な「制限設定」CTA。

13）アンチパターン

クリックへの応答を表示する前に、ネットワーク応答を待ちます。
「形状のない色」：状態は日陰でのみ異なります。
無限の脈動/点滅、スイッチなしでシャープな音。
重要なコンテンツがキーボードからアクセスできないツールチップ。
void> 1-2 sのスピナーで進行/スケルトンがありません。
何百もの要素の薄い影/ぼやけ（弱いデバイスの遅延）。

14）設計システムにおけるドキュメンテーション

「マイクロトークン」：「持続時間/イージング」、トースト/バッジ/バリデータのプリセット。
「パターン」：ボタン、図形、トースト、進行状況、インラインエラー、元に戻す。
「A11y&Motion」： SR/HC/減速モーションのルール。ARIAの例。
「Do/Don 't」：タイミングの短いクリップ、INP/Firstフィードバック番号。

概要

マイクロインタラクションは自信の言語です。≤ 100msで応答を与え、理解可能な状態をキャプチャし、安全なロールバックで楽観的に使用し、色だけに頼らず、光の特性を活性化します。可用性とパフォーマンスを尊重する-製品は、特にリアルタイムシナリオで、生存しており、正直で信頼性が高いと感じます。