第15章　人間は、知っている使い方を新しい画面へ持ち込む

初めて訪れたサイトでも、ロゴを押せばトップページへ戻る、下線付きの文字は別のページを開く、虫眼鏡は検索だと予想します。初めて見る画面にも、過去に使ったサイトや端末の経験を持ち込んでいます。

「直感的だった」という言葉だけでは、なぜ使えたのか分かりません。前に似た操作を使ったからかもしれません。ボタンの名前が分かりやすかったからかもしれません。一度失敗したあとに覚えたのかもしれません。

この章では、使い慣れた操作を借りることと、独自の表現を作ることを分けて考えます。

15.1 見た目から、押したあとの結果を予想する

サイトの左上にあるロゴを見ると、トップページへ戻る入口だと予想する人がいます。

文章中の下線付き文字には、別のページへ進む働きを予想します。

虫眼鏡の印には、検索欄を開く、または入力した言葉で検索する働きを予想します。

この予想は、形から自然に生まれたものではありません。別のサイトやアプリで、同じ形と結果を何度も経験したために生まれます。

誰にとっても同じ「普通」があるわけでもありません。スマートフォンの戻る方法は端末によって異なります。「申請のあとに上司が承認する」といった順序は、その仕事を知る人にしか分かりません。誰の経験を借りている画面なのかを考えます。

文化祭の申込画面に「演目を選ぶ」という見出しと「次へ」ボタンがあれば、押したあとは連絡先の入力へ進むと予想できます。「2 / 3 連絡先」と表示されれば、最後にもう一段階あることも分かります。

利用者には、サイト内部のプログラムは見えません。見出し、ボタンの名前、現在の段階、操作後のメッセージから、「押したら何が起きるか」「戻ったら入力内容は残るか」を考えます。

このように、仕組みについて頭の中に作る予想をメンタルモデルと呼びます。サイトの中身を正確に知ることではありません。次に起きることをだいたい予想でき、外れたときに画面から修正できる状態です。

「次へ」のような名前だけでは、次に何があるか分からない場合もあります。ページの見出しや手順表示と組み合わせ、行き先を予想できるようにします。削除や購入のように結果が大きい操作では、「実行」のような曖昧な言葉を避け、何が起きるかをボタン名へ書きます。

利用者は、ほかのサイトで覚えた使い方を新しいサイトにも持ち込みます。見慣れた操作なら、使い方を一から覚え直さずに済みます。

ただし、ほかのサイトの色や形をそのままコピーするという意味ではありません。借りたいのは、次のような操作と結果のつながりです。

ブランドの色、写真、文字、余白、言葉遣いには独自性を持たせられます。購入、閉じる、戻る、エラーからやり直す方法まで独自にすると、使い方を覚える手間と、失敗したときの危険が増えます。

独自性を、何を見せるかと、どう操作するかに分けます。見たことのない美しい演出を使っても、申込ボタンの名前と結果は分かりやすくできます。

次のイベントカードは、長押しすると保存や共有のメニューを開けます。しかし、画面上には長押しできる手がかりがありません。

カードを一度押せると分かっても、長押しという方法まで予想できるとは限りません。偶然長押しして成功しても、入口が分かりやすかった証拠にはなりません。

同じメニューを開く、見えるボタンを加えます。

長押しを知っている人はそのまま使え、知らない人はボタンから進めます。入口を二つにするため、画面上の操作は一つ増えます。それでも、保存や共有が重要なら、見つけられることを優先できます。

ボタンを押すと、操作名の分かるメニューが開きます。

保存を選んだあとには、結果を伝えます。

この流れには、入口を見つける、操作名から結果を予想する、保存結果を理解するという別々の段階があります。「直感的だった」という一言へまとめると、どこで迷ったのか分かりません。

独自の操作が悪いわけではありません。新しい操作そのものが製品の魅力で、安全に試せ、失敗しても戻れるなら、覚える価値がある場合もあります。ただし「普通の人なら分かる」とは決めつけず、初めての人にも見える入口と結果を用意します。

画面から次の結果を予想できても、押したあとに反応がなければ、その予想が合っていたか分かりません。

次章では、操作を受け付けたこと、処理中であること、成功や失敗を画面から返す方法を見ていきます。

Norman, “Some Observations on Mental Models,” 1983. 人が仕組みについて作る、不完全で変化する理解を扱った研究です。
ISO 9241-110:2020. 利用者が持つ予想と操作の関係を考えるための人間工学規格です。
Nielsen Norman Group, “Jakob’s Law of Internet User Experience.” 他のサイトで得た経験を持ち込むという UX の経験則です。