なぜ必要なのか
訪問者が項目を探して比べる一覧画面を作るとします。スマートフォンでも案内、絞り込み、結果、選ぶための説明が必要です。
必要な機能が全部あっても、最初に何をすべきか見つけにくい画面があります。狭い端末では横の領域が本文を圧迫し、操作の読む順序が乱れます。何列が美しいかより先に、利用者が終えたい作業に沿って情報を整理する必要があります。配置は装飾を埋める仕事ではなく、行動の順番を作る仕事です。
どう解決するのか
- カタログの二項目を探して比較するなど、一つの作業を選びます。最初に必要な情報、判断を支える情報、後でよい情報を分けます。案内、絞り込み、結果、補足へ違う役割を与えます。すべてを主役にすると、始める場所が分からなくなります。優先順位は実際の作業で決めます。
- 一列の読む順序を描きます。ページの正体と目的、操作、結果、補足の順を試します。本物の長い題名、翻訳したラベル、空の結果を使います。短い仮文だけでは空間の問題が隠れます。内容が増えたときに何が押され、何を見せ続けるかも確認します。
- 同時に見えることが助けになるときだけ列を増やします。広い画面では長い一覧の横にフィルターを置けます。狭くなったら窮屈になる前に意味のある順へ積みます。分岐点は内容に使える幅で決め、端末名だけに依存しません。見た目とキーボードの順番も合わせます。
- 比較する情報に表現を合わせます。反復する文字情報は行で、似た画像は整列したカードで比較できます。高さの違う画像には不均一な配置も使えますが、キーボード順序は理解できる必要があります。同じ内容で配置を比較し、装飾や情報量の違いに結論を決めさせません。
- 実際の状態を試します。読み込み中、結果なし、失敗、長文、説明を展開した状態を確認します。キーボードだけで操作から結果へ移動します。モーダルが必要なら名前、閉じ方、内部のフォーカス、終了後の戻り先を用意します。通常状態の画像一枚ではこの動作を証明できません。
狭い幅と広い幅、拡大表示、対応言語で作業全体をたどります。始める場所、次の結果、何も出ないときの回復方法が分かるでしょうか。その答えで配置を直します。画面内に収まることと、読んで操作できることは別です。空間不足では優先度の低い情報を再配置し、必要な機能を無説明で消しません。
カタログ閲覧 · 二つの項目を比較
比較までの道筋を見せる
題材を探し、結果を見渡し、詳細を読みます。領域ごとに役割を一つにします。
絞り込み実用ガイドを表示
結果
- 散歩道ガイド
- レシピ一覧
詳細選ぶ前に範囲と限界を読みます。
狭い画面では絞り込みを結果の前に積み、読む順序を保ちます。必要な内容は消しません。
結果が空でも絞り込みを残し、検索を広げる方法を示します。名前を付けた領域はCSSの段組文章とは異なります。この図に動く絞り込みやダイアログはありません。
この選択を話し合う
コメントは全言語で共有。投稿にはGitHubログインが必要です。