非同期コンテンツの空・失敗・再試行を区別する
読み込み、0件、失敗、再試行、更新失敗を分け、内容を失わず回復するための手順です。
関連する利用場面
- 初回読込または更新処理を持つ領域。
- 成功時の内容を保持したまま再取得する画面。
Problem solving guides
問題解決記事
困っている状態から原因候補を整理し、関連するUIレシピと修正手順を確認できます。
問題から選ぶ
深い階層と長いページで現在位置を保つ
パンくず、本文へのスキップ、章ナビゲーションを使い分け、現在位置を見失わせない手順です。
関連する利用場面
- 上位階層へ戻る必要がある詳細画面。
- 反復する共通領域と複数章を持つ長いページ。
入力エラーと送信失敗から回復できるフォームにする
修正箇所を見失わせず、入力値を保ったまま再送できるフォームの判断と確認手順です。
関連する利用場面
- 必須項目や形式検証を持つ入力フォーム。
- ファイル選択または送信処理に失敗状態がある画面。
表示切替をキーボードでも一貫して操作できるようにする
タブと表示形式切替の役割を分け、focus、選択状態、内容を同期するための手順です。
関連する利用場面
- 関連するpanelを切り替えるタブ。
- 同じデータをカードとリストなど別形式で表示する切替。
狭い画面の開閉ナビゲーションから安全に戻る
drawerとoverflow menuの開閉、利用可能項目、focus復帰を一貫させる手順です。
関連する利用場面
- 画面端から開くmobile navigation。
- 主操作からあふれた項目をまとめるmenu。
長い内容を隠しすぎず必要箇所へ到達させる
開閉section、目次、先頭へ戻る操作を組み合わせ、長文の探索と復帰を支える手順です。
関連する利用場面
- 複数sectionを持つ長文ページ。
- 一部を開閉しながら見出し間を移動する内容。
狭い画面でも表の比較軸とページ位置を保つ
データ表の意味構造を保ち、横方向の閲覧とページ移動を安全に組み合わせる手順です。
関連する利用場面
- 複数列を比較する表形式データ。
- 複数ページに分割された結果一覧。
重要操作の確認と処理中状態を安全につなぐ
対象と影響を確認し、取消、処理中、失敗回復、完了までを迷わず進める手順です。
関連する利用場面
- 実行前に確認が必要な重要操作。
- 複数段階または非同期処理を伴う完了フロー。