timing-feedback について
timing-feedbackは、ユーザー操作に応じた応答時間とフィードバックを設計するスキルです。時間区分、フィードバックの種類、避けるべきパターンを示します。
主な機能
- 014段階の応答時間
- 02視覚・空間・情報によるフィードバック
- 03すべての操作へのフィードバック
- 04長時間処理への対応指針
- 05インタラクションのアンチパターン確認
活用シーン
- 01画面操作へのフィードバックを定める
- 02画面遷移や検索の応答時間を決める
- 03長時間タスクの進捗表示を設計する
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/timing-feedbackを入力して読み込まれたか確認します。
詳細
タイミングとフィードバック
すべてのユーザー操作には、何らかの応答が必要です。問題は、どのような応答をどれだけ速く返すかです。
使い方
/timing-feedbackこの会話のインタラクション設計に、タイミングとフィードバックの制約を適用します。
制約
タイミングの基準
- 即時（100ms 未満）： 直接操作です。ボタンの押下、トグル、ドラッグなどが該当します。ここで遅延すると、動作していないように感じられます。
- 高速（100～300ms）： ページの切り替え、パネルの表示、フィルターの適用などです。ほとんどの UI アニメーションはこの範囲です。
- 意図的（300ms～1 秒）： 複雑な操作です。ビューの読み込みや検索の実行などが該当します。操作に重要性が感じられるため、ユーザーは待ち時間を受け入れます。
- 待機（1 秒超）： 明示的なフィードバックが必要です。進行状況インジケーター、スケルトン、ステータスメッセージなどを表示します。ここで何も表示されないと、失敗したように感じられます。
フィードバックの種類
- 視覚的： 色の変化、アニメーション、状態の変化です。最低限必要なフィードバックです。
- 空間的： 要素の移動、展開、折りたたみです。対象がどこへ移動したかを伝えます。
- 情報的： テキストによる確認、件数の更新、ステータスの変化です。何が起きたかを伝えます。
- すべてのユーザー操作に、少なくとも 1 種類のフィードバックを必ず提供します。
- デバイスをミュートして確認することを推奨します。それでも何が起きているか分かりますか？
アンチパターン
- 操作の重要性にかかわらず、すべての操作に同じ応答時間を適用する
- 削除、解除、切断などの破壊的な操作にフィードバックを返さない
- 空間的なコンテキストを維持できるスケルトンの代わりにスピナーを使う
- 実際の操作より長く続くフィードバックアニメーション
コメント
Markdown 対応