この記事の内容
あやね
Tooltipは近くの操作を説明し、popoverは小さな作業を受け持ち、dialogはページを一時停止して判断を包みます。PixsoのUIデザインメーカーで見た目ではなくoverlayの仕事から選びます。
1. まずoverlayの仕事を書く
アイコンやカードを先に作り、後からパターンを決めると役割が混ざります。何を表示し、何を操作し、背景を止める必要があるかを短い契約にします。
Workspace visibilityの説明にはtooltip、workspaceの選択にはpopover、削除確認にはdialogを使う例で比較します。
2. 説明だけならtooltip
Tooltipは、トリガー自体が機能し、短く補足的で、操作を含まないときに使います。表示ラベルが意味を持ち、tooltipがなくても基本操作が分かる状態にします。
Hoverだけに依存せずkeyboard focusとtouchでも利用できるようにします。馴染みのある全アイコンへ付けると遅延とノイズが増えます。
3. 小さな文脈作業ならpopover
Popoverはトリガーに紐づき、検索、短いリスト、現在の選択、管理リンクなどを含めます。クリック、外側、Escapeで閉じる条件とfocus位置を決めます。
複数の節、長い検証、レビューが必要になったらdialogまたはページへ移します。
4. 判断を閉じ込めるならdialog
Dialogは別のinteraction contextを作ります。削除確認のように対象、影響、実行とキャンセルを理解させる必要がある場合に適します。modalでは背景をinertにし、focusを内部へ移します。
Tab、Shift+Tab、Escape、送信中、失敗、focusの戻り先を仕様にします。情報だけをdialogで表示して利用者を止めません。
5. trigger、focus、dismissal、placementを定義する
全overlayにaccessible label、初期focus、閉じる経路、配置規則を記録します。画面端でpopoverが上下反転し、狭い画面ではbottom sheetになることも設計します。
6. Pixsoでpattern setを作る
Tooltip、popover、dialogを別コンポーネントにします。Tooltipにはplacementとvisibility、popoverにはsearch、no results、selected、loading、dialogには確認と失敗のvariantを用意します。
trigger、focus先、dismissal、responsive adaptation、content limitをコンポーネント横に注記します。
7. handoff前にedge caseを試す
- 長い翻訳と200% zoomでも説明が読める。
- keyboardだけでopen、移動、選択、closeできる。
- popoverにsearch、no results、loadingがある。
- dialogが対象と影響を示し、失敗を閉じずに報告する。
- 互換しないoverlayが同時に開かない。
キャンバスの見た目はbrowserのfocus containment、reading order、accessible nameを証明しません。実装テストを別ゲートにします。
結論
Tooltipは短い説明、popoverは小さな文脈作業、dialogはページを一時停止する集中した判断に使います。overlayの仕事に合わせて選び、Pixsoでbehaviorをhandoffしてください。
