Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

第11章 人間は、覚えながら操作すると間違えやすい

長いフォームの途中で、「さっき選んだプランはいくらだったかな」と前の画面へ戻ったことはないでしょうか。選んだ内容が次の画面から消えると、氏名や住所を入力しながら、プラン名や料金まで覚えていなければなりません。

必要な情報が画面に残っていれば、忘れても見直せます。電話番号の区切り、入力欄の近くにある書き方の例、注文内容と合計を並べた確認画面は、頭の中だけで覚え続けなくてもよいようにする工夫です。

この章では、画面の項目を機械的に減らすのではなく、いま何を覚えたまま、次の操作をしているのかを考えます。

11.1 電話番号は、区切ると照らし合わせやすい

次の二枚は、同じ電話番号です。一枚目は十桁が続いています。

区切りのない電話番号表示。同じ十桁を一つの入力欄へ写すときの表示例。
図 11-1A 区切りのない電話番号表示
意味のある位置で区切った電話番号表示。同じ十桁を一つの入力欄へ写すときの表示例。
図 11-1B 意味のある位置で区切った電話番号表示

数字の個数は変わっていません。空白によって記憶できる量が増えたわけでもありません。読み直す場所と、照らし合わせる単位が画面に見えるようになりました。

だからといって、電話番号の入力欄を三つへ分ければ必ず使いやすくなるわけではありません。番号全体の貼り付けや、スマートフォンの自動入力が使いにくくなる場合があります。一つの入力欄のまま、入力された数字を読みやすく表示する方法もあります。

見た目の区切りと、入力欄の分け方は別に考えます。

11.2 「七個まで」「四個まで」を画面の規則にしない

「人間が一度に覚えられるのは 7±2 個だから、メニューは七項目以下にする」という説明を見かけます。しかし、この数字は Web サイトのメニューを調べて得られたものではありません。短い時間だけ音や記号を覚える研究から広まった数字です。

メニュー項目が十二個でも、すべてが見えていて、意味の分かる見出しで分類され、何度でも見直せるなら、目的の項目を探せる場合があります。六個でも、「サービス」「ソリューション」のような違いの分かりにくい名前を覚えて階層を往復するなら迷います。

「四つのまとまりまで」という説明も、カードを四枚までにする規則ではありません。画面上のカードは、選ぶまで見直せます。短時間だけ見たあとに隠される記号とは、行っていることが違います。

大切なのは個数を特定の数字へ収めることではなく、次の点です。

  • 候補の名前から違いが分かる
  • 必要な間は画面に表示されている
  • 多い場合は分類や検索で絞り込める
  • 前の画面へ戻らなくても判断材料を見直せる

項目を七個へ収めるために、分かりにくい分類の中へ隠せば、かえって探しにくくなります。

11.3 覚えることと、考えることが重なる

確認コードを覚えるだけでも、時間がたてば忘れることがあります。そのコードを覚えたまま価格を計算したり、別の文章を読んだりすれば、さらに間違えやすくなります。

短い時間だけ情報を保つ働きを短期記憶、保った情報を使って判断や計算をする働きをワーキングメモリと呼ぶことがあります。名前を暗記する必要はありません。「覚えておくこと」と「いま考えること」が重なるほど大変になる、と捉えれば十分です。

画面側でできることは、必要な情報を消さないことです。六桁のコードなら入力欄の近くで見直せるようにする。人数を選ぶ画面なら、一人当たりの料金を残す。合計金額なら、人数の変更に合わせて更新し、計算の理由を読めるようにします。

説明も、使う場所の近くへ置きます。住所の書き方を読んでから、離れた入力欄まで覚えて移動させる必要はありません。エラーの理由は、問題のある入力欄の近くへ表示します。

11.4 情報が多い画面は、目的ごとに入口を変える

ダッシュボードには数値、警告、表が多く並びます。すべてを減らすと、一画面はすっきりしますが、業務に必要な比較までできなくなります。

同じ業務データでも、何をする画面なのかによって見せ方を変えられます。

異常を監視するダッシュボード。同じ業務データでも目的に合わせて表示する手がかりを変える。
図 11-7A 異常を監視するダッシュボード

監視画面では、普段見る状態をいつも同じ位置へ置きます。異常が起きた場所だけを強く示せば、すべての数値を順番に覚えて比べなくても変化を見つけられます。

一件の注文を探すダッシュボード。同じ業務データでも目的に合わせて表示する手がかりを変える。
図 11-7B 一件の注文を探すダッシュボード

一件の注文を探すときは、すべての小さな区画を眺める必要はありません。注文番号を入力する場所と、見つかった一件の状態を近くへ表示します。

複数店舗を比較するダッシュボード。同じ業務データでも目的に合わせて表示する手がかりを変える。
図 11-7C 複数店舗を比較するダッシュボード

店舗を比べるときは、名前と値を同じ位置、同じ幅の尺度へそろえます。一店舗ずつ開いて数値を覚えなくても、棒の長さを同時に比べられます。

情報量だけを問題にするのではなく、監視、探索、比較のどれを助ける画面なのかを決めます。

11.5 前の画面で決めたことを、次の画面にも残す

イベント申込を、プラン選択、情報入力、確認の三段階で見ます。

プランを選ぶ最初の画面。前の段階で決めた情報を次の画面にも残す流れの一段階。
図 11-9A プランを選ぶ最初の画面

最初の画面では、プランの名前と一人当たりの価格を見て選びます。

選んだプランを残した情報入力画面。前の段階で決めた情報を次の画面にも残す流れの一段階。
図 11-9B 選んだプランを残した情報入力画面

次の画面では氏名や人数を入力します。ここでプラン名と価格が消えると、前の画面を覚えておくか、戻って確認しなければなりません。必要な情報だけを近くへ残し、人数が変われば合計も更新します。

入力内容と合計を残した確認画面。前の段階で決めた情報を次の画面にも残す流れの一段階。
図 11-9C 入力内容と合計を残した確認画面

確認画面には、入力した値と料金の計算根拠を同時に表示します。利用者は記憶から注文内容を作り直すのではなく、画面にある内容同士を照らし合わせられます。

前の画面にあったものを全部残す必要はありません。いま判断するために必要なプラン名、単価、人数、合計を選び、最新の状態で残します。

複数の画面へ分ければ、自動的に分かりやすくなるわけでもありません。前の情報が消え、比較するたびに往復するなら、覚えることは増えます。良い画面は、人の記憶力を試すのではなく、忘れても見直せるように作られています。

次章へ

必要な情報を画面へ残しても、押す場所が小さかったり、選択肢同士が近すぎたりすれば操作を間違えます。

次章では、マウスや指で目的の場所を選ぶときに、距離と大きさがどう関係するかを見ていきます。

参考資料

  • Miller, “The Magical Number Seven, Plus or Minus Two,” 1956. 「七」という数字の元になった研究です。Web メニューの項目数を決める研究ではありません。
  • Cowan, “The magical number 4 in short-term memory,” 2001. 短時間の記憶について、条件を分けて論じた研究です。
  • Baddeley and Hitch, “Working Memory,” 1974. 情報を保ちながら考える働きを扱った研究です。
  • Scaife and Rogers, “External cognition,” 1996. 画面など外にある情報が、考える作業をどう助けるかを扱います。