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

第 III 部 人間は、勝手に予想する

初めて開いた Web サイトでも、私たちは何も分からない状態から始めるわけではありません。

虫眼鏡の印を見れば、検索ができそうだと思います。下線のある文字を見れば、押すと別のページへ進みそうだと思います。買い物かごの印を見れば、選んだ商品が入っていそうだと思います。

まだ押していなくても、過去に使った別のサイトを手がかりにして、次に起こることを予想しているのです。

この予想が当たれば、初めてのサイトでも迷わず使えます。反対に、見た目から想像した結果と実際の動きが違えば、利用者は立ち止まります。

たとえば、「戻る」と書かれたボタンを押したのに、入力した内容がすべて消えたらどうでしょう。青いボタンが三つの画面で「次へ進む」を表していたのに、四つ目の画面だけ「すべて削除する」になったらどうでしょう。同じ見た目を信じて操作した人ほど、間違えやすくなります。

画面の中でも、使い方を覚えていく

予想は、ほかのサイトで覚えた使い方から生まれるだけではありません。一つのサイトを使っている間にも、新しい規則を覚えていきます。

同じ位置にある青いボタンが何度も「申し込む」という働きをすれば、次の画面でも同じだろうと考えます。同じ形のカードを押すたびに詳しい内容が開けば、その形を「詳しく見る場所」として覚えます。

デザインの一貫性が大切なのは、すべてを同じ見た目にするためではありません。同じ見た目と同じ働きを結びつけ、次に起こることを予想できるようにするためです。

もちろん、例外が必要なこともあります。危険な操作や緊急のお知らせは、通常の操作と違って見える方がよいでしょう。その場合は、色だけを突然変えるのではなく、何が違うのか、押すと何が起きるのかを言葉でも伝えます。

操作したあとの返事も、予想を作る

ボタンを押したあと、何も変わらなければ、押せたのかどうか分かりません。もう一度押してよいのか、待つべきなのかも判断できません。

反対に、「送信中」「申し込みが完了しました」「通信できませんでした」と画面が返事をすれば、起きたことと次にできることが分かります。このような画面からの返事を、フィードバックと呼びます。

第15章では、利用者が画面へ持ち込む予想を見ます。第16章では、操作できそうな見た目と実際の働きが合っているかを考えます。第17章では、同じ見た目と働きを繰り返す意味を扱います。第18章では、操作後の返事が、成功、失敗、処理中をどう伝えるかを見ます。

「直感的だから」「普通はこうだから」で説明を終えず、どの見た目が、どの経験と結びつき、どの結果を予想させたのかを順に見ていきます。