押下、選択、キーボードフォーカスは別の状態だ。すべて同じ明るい枠で示すと、利用者は意味を推測しなければならない。
何が起きたかを伝え、前の動きが終わる前でも次の操作を受け止めたい。そのために操作範囲と状態を分け、遷移と前後の識別を整える。
この記事は元の文章を再編し、内容を加えたものだ。数値は各試料の条件を示し、あらゆる画面に共通する設定ではない。シリーズの背景とツールは 総論。
操作と状態
押したとき、内容は跳ねさせない
続く選択状態と一時的な 押下状態（pressed state） は仕事が違う。選択は現在の位置を示し、押下はその瞬間の操作に応える。図の押下時は外側の奥行きを淡い内影へ替え、白を少し下げて#F5F5F5にした。ring、アイコン、文字、部品全体の寸法は変えない。
小さいアイコンにも操作しやすい範囲を残す
見えるアイコンの大きさと 操作領域（hit area） は分けて作れる。図の閉じる記号は16 × 16 pxのまま、ボタン領域は44 × 44 pxとし、指にもポインターにも十分な落としどころを用意した。補助枠は図解だけに表示する。
44 pxはこの試作の選択だ。密なツールバーに置くなら、隣の操作との距離と操作領域も合わせて確かめ、互いに重ならないようにする。図形は小さくても、周囲には適切な操作空間を残したい。
静かな面でも、フォーカスは見えるようにする
キーボードフォーカス（keyboard focus） は今どの部品を操作しているかを示し、見分けられるだけの重みが要る。このボタンはring、塗り、寸法を維持し、右だけボタンから3 px離して2 pxの輪郭を足した。表面の細縁は形を伝え続け、フォーカスは位置を明確に示す。
面は控えめで、操作位置はひと目で分かるのが好きだ。フォーカスの輪郭は周囲の下地と一緒に確かめ、パネルの切り抜きや隣の部品にも気を配る。選択、押下、フォーカスは別の役割を持ち、同時に成立できる。
視覚的な手掛かりの意味をそろえる
選択は持続する選び方、フォーカスはキーボードの操作位置、エラーは修正すべき内容を示す。同時に成立することもある。ここでは塗りとチェックで選択を、外側の輪郭でフォーカスを、文字でエラーを示し、選択中の項目にフォーカスが移っても両方を保つ。
この対応を画面全体に適用し、色を取り除いても分かるか確認する。W3C の色の使用に関する指針のとおり、重要な情報を赤と緑だけに依存させない。利用不可の理由も明示する。
続く操作を受け止める
状態が変わるとき、アイコンを柔らかくつなぐ
保存から保存済みへの変化は、アイコンと文字の両方で結果を伝える。この クロスフェード（cross-fade） は同じ枠に置いた2つのアイコンの不透明度だけを変え、ボタン幅と文字位置を固定する。左は直接置き換え、右は150 msのease-outでつなぐ。どちらかのボタンを押すと、両方が同じ状態へ切り替わる。
こうした小さな動きは、たまに起こる状態変化に留めたい。頻繁に切り替えるタブや各行で繰り返す操作には、より直接的な反応が向く。現在の状態は文字やアイコンだけでも明確に伝わる必要がある。押下反応は前の表面明暗と影を使い、内容は元の位置に残す。
動きの途中でも、次の操作を受け止める
パネルが開ききる前に、もう閉じる操作をすることはある。中断できる遷移（interruptible transition） は現在位置から新しい状態へ向きを変え、連続操作をつながりのあるものにする。以下は距離、200 msの時間、イージングが同じ。左は毎回指定の始点から再生し直し、右はその時点の位置から新しい終点へ進む。
途中で素早く開閉を切り替え、パネルが急に移るかを観察できる。この試作はCSS transitionで状態に追従している。タイムライン型アニメーションも再生制御を加えれば中断に対応できる。大切なのは実際の操作が途切れず続くかだ。動きを無効にしても、状態の文字と静的な前後比較は残る。
登場と退出の動きを使う場面に合わせる
初回の表示は見出し、説明、操作をグループに分け、読む順序を少しずつ広げてもよい。退出では移動量と時間を控え、次の内容へ注意を渡す。こうしたリズムは立ち止まって見るのに適した場面に残し、普段の開閉や繰り返す操作は直接的にしたい。
動きを減らす設定では移動を抑え、状態は明確に残す。2つの対照はいずれも操作で始まり、初回表示では初期状態に止まる。いつ比べるかは読者が決められる。
状態が変わっても識別の手掛かりを残す
ファイルが待機からアップロード中、完了へ進むとき、名前、位置、行の骨格を保ち、状態の領域だけを変える。同じファイルだと分かるため、別の成功カードで探し直さずに変化を比較できる。
安定とは一切動かさないことではない。並べ替えは位置を変え、削除は項目を消す。その理由と結果を明確にする。一方、背景更新だけなら、フォーカスを移したり読んでいる項目を並べ替えたりしないようにする。
現在の状態を見分けて、次の操作へ進めるところまでがフィードバックである。押下から非同期更新まで、対象の識別、フォーカス、中断の手掛かりを保ちたい。動きは、そのための表現方法の一つだ。