ウェブ画面の情報優先度を決める

このLessonの結論

画面内の目的、主要操作、補助情報を順番に配置します。

大切なのは、知識として覚えることではありません。自分の仕事を一つ選び、判断基準を当てはめ、変更前と変更後を比べられる状態まで進めることです。

• 一画面の主目的を一つにする
• 主な行動ボタンと補助操作を分ける
• モバイルで読む順番を確認する

なぜ、うまく進まないのか

一画面に複数の目的を置くと、見る人は次に何をすべきか迷います。主目的と主要操作を一つに絞ります。

3つの基準を、実務でどう使い分けるか

ここまでの要点は、三つを同時に満たすための標語ではありません。作業の段階ごとに使う判断基準です。順番を飛ばすと、手段だけが増え、何を改善したのか分からなくなります。

変更前と変更後の間にある判断

重要なのは、変更後の表現をそのまままねることではありません。何が曖昧だったために判断できず、どの情報を加えたことで次の行動を選べるようになったかを読み取ります。

自分の仕事へ置き換えるときは、固有名詞や数字だけを差し替えません。相手の状況、止まっている理由、決める必要があることを先に書き換えてください。

変更後の案が長くなった場合は、目的に直接関係しない説明を削ります。短さを優先するのではなく、判断に必要な情報だけが残っている状態を目指します。

手順ごとの確認点

「ウェブ画面の情報優先度を決める」を実務で使うときは、次の手順を一度に終わらせません。各段階で短い記録を残すと、途中で迷っても一つ前の判断へ戻れます。

1. 画面を見た人に起こしたい行動を一つ書く

   最初の作業では、対象と出力を一文で書きます。固有の業務名、相手、利用場面のどれかが入っていると、次の手順で迷いません。

2. その判断に必要な情報を上から並べる

   二つ目の作業では、選んだ内容と理由を並べます。別の案を採用しなかった理由も一言残すと、判断基準が明確になります。

3. 幅375pxで最初のスクロール順を確認する

   三つ目の作業では、今回扱う範囲を固定します。追加したくなった内容は別のメモへ移し、最初に決めた目的から外れないように進めてください。

結果が出ないときは、どこへ戻るか

失敗は、最初からすべてやり直す合図ではありません。対象、根拠、変更、確認のうち、記録が途切れた場所だけへ戻ると改善を続けられます。

実践課題の完成条件

課題は「一つのウェブ画面を、見出し、本文、行動ボタン、補助情報の配置図へ変えます。」です。資料を作っただけでは完了にしません。次の四項目を第三者が読み取れる状態まで整えます。

• 誰の、どの業務や場面を扱ったかが一文で分かる
• 変更前の事実と、困っていた理由が分かれている
• 今回変えた箇所と、その判断理由が対応している
• 結果を確認する数字、行動、完成状態のどれかがある

説明を加えないと伝わらない場合は、情報量を増やす前に順番を見直します。第三者が「何を見て、何を変え、どう確かめるか」を説明できれば合格です。

つまずきやすい3つの点

最初から対象を広げすぎる

一度に多くを変えると、どの変更が効いたか分かりません。最初は一つの対象、一つの場面へ絞ります。

曖昧な目標で終える

「改善する」「注意する」だけでは、完了を判断できません。何がどう変われば成功かを、観察できる言葉で決めます。

変更前を残さない

元の状態がないと、改善したかを振り返れません。変更前、変更内容、確認結果の三つを同じ場所へ保存します。

そのまま使える作業メモ

理解度チェック

1. 自分の業務では「一画面の主目的を一つにする」を、どの事実で確認しますか。
2. 自分の業務では「主な行動ボタンと補助操作を分ける」を、どの事実で確認しますか。
3. 自分の業務では「モバイルで読む順番を確認する」を、どの事実で確認しますか。

まとめ

画面内の目的、主要操作、補助情報を順番に配置します。

まずは小さな一例で試し、結果を見てから対象を広げます。次のLessonへ進む前に作業メモを一つ残すと、学んだ内容を次の仕事でも再利用できます。