ボタンを押したのに何も起きなかったように見えて、つい何度も押してしまった経験はありませんか。
反対に、押せると思って文字をタップしたら、ただの見出しだったということもあるでしょう。
こうした「迷い」は、ユーザーの操作とUI(画面の見た目や操作する部分)の関係がうまく設計されていないときに起こります。
この記事では、ユーザーがUIを操作するときの流れと、「押せそうに見えること」「押したら反応が返ること(フィードバック)」の2つの基本を、見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。見本の部品は押しても動きません。
ユーザーの操作とUIの関係
まずは、ユーザーが画面を操作するときに何が起きているのかを、順番に分けて見ていきましょう。
操作は「見る→押す→結果を受け取る」のくり返し
ユーザーが画面を操作するときは、次の3つの流れをくり返しています。
- 見る
画面を見て、「どこで何ができそうか」を判断します。 - 押す(操作する)
押せそうだと思った場所を、クリックやタップで操作します。 - 結果を受け取る
画面の変化を見て、「思ったとおりになったか」を確かめ、次の操作を決めます。
UIの役割は、この流れのそれぞれで、ユーザーが迷わないように手がかりを用意することです。
1つ目の「見る」で必要なのが押せそうに見えること、3つ目の「結果を受け取る」で必要なのが反応が返ること(フィードバック)です。
どちらかが欠けると、ユーザーは「どこを押せばいいか分からない」「押せたのか分からない」と手が止まってしまいます。
押せそうに見えること(アフォーダンスとシグニファイア)
ユーザーは説明書を読まずに、見た目から「これは押せそう」「これは読むだけの文字」と判断して操作します。
そのため、押せるものは押せるように、押せないものは押せないように見せることが、UIデザインの基本になります。
このことを説明するときによく使われるのが、「アフォーダンス」と「シグニファイア」という2つの言葉です。
- アフォーダンス
もの(や環境)と、それを使う人とのあいだで成り立つ「どんな行動ができるか」という関係のことです。
もとは知覚心理学者ジェームズ・ギブソンが作った言葉で、たとえば「ひざくらいの高さの、平らで硬い面は、人が座ることを可能にする」のように使います。 - シグニファイア
「ここでこういう行動ができますよ」と、使う人に伝える手がかり(しるし)のことです。
ドアの「押」と書かれたプレートや、押す位置に付いた平らな金属板などがシグニファイアにあたります。
アフォーダンスという言葉をデザインの世界に広めたのは、認知科学者ドナルド・ノーマンの著書『誰のためのデザイン?』(原著1988年)です。
その後、ノーマン自身が「デザイナーが用意すべきなのは、アフォーダンスよりもシグニファイア(手がかり)だ」と述べ、2013年の増補・改訂版ではシグニファイアの考え方をあらためて詳しく説明しています(Signifiers, not affordances – Don Norman(英語)、日本語訳は『誰のためのデザイン? 増補・改訂版』新曜社、2015年)。
押して開けるドアで考えてみましょう。
「人がそのドアを押して開けられる」という、ドアと人との関係がアフォーダンスです。
ただ、ドアは見ただけでは押すのか引くのか分からないことがあります。
そこで貼られる「押」の文字や、手を当てる金属板が、「ここを押せば開きます」と教える目印、つまりシグニファイアです。
画面のデザインで作るのは、この目印(シグニファイア)のほうです。
画面のUIでいえば、ボタンの四角い形や塗りの色、リンクの下線、入力欄の枠などが、「押せる」「入力できる」ことを伝えるシグニファイアです。
押せるものと、押せないもので比べてみましょう。
ご注文内容を確認してください。
注文を確定する
ご注文内容を確認してください。
注文を確定するご注文内容を確認してください。
送料無料見本Aは押せる部分ですが、ほかの文字と同じ見た目なので、押せることに気づいてもらえません。
見本Bは、塗りつぶした四角い形が「押せる」という手がかりになり、迷わず押せます。
見本Cは、押しても何も起きない「送料無料」のラベルですが、ボタンと同じ色と形をしているので、押せそうに見えてしまいます。
このように、押せないものを押せそうに見せることも、押せるものを押せなさそうに見せることと同じくらい、ユーザーを迷わせます。
押したら反応が返ること(フィードバック)
UIでのフィードバックとは、ユーザーの操作に対して、画面が「受け付けました」「こうなりました」と反応を返すことです。
反応がないと、ユーザーは押せたのかどうか分からず、何度も押してしまったり、壊れたと思って離れてしまったりするからです。
使いやすさの評価によく使われるヤコブ・ニールセンの「10のユーザビリティ・ヒューリスティクス」(使いやすさを点検するための経験則をまとめたもので、UIの定番のチェックリストとして知られる)でも、1つ目に「システムの状態を見えるようにする」ことが挙げられ、適切なフィードバックを、妥当な時間内に返すことが求められています(10 Usability Heuristics for User Interface Design – Nielsen Norman Group(英語))。
フィードバックには、たとえば次のようなものがあります。
- 押した瞬間の変化
ボタンの色が少し濃くなる、少し沈んだように見える。 - 処理中の表示
「送信中…」の文字や、くるくる回るマーク(スピナー)を出す。 - 結果の表示
「カートに追加しました」のメッセージ、カートのアイコンに付いた数字が増える。 - うまくいかなかったときの表示
「メールアドレスの形式が正しくありません」のように、何が起きてどうすればいいかを伝える。
「カートに入れる」ボタンを押したあとの画面で比べてみましょう。
NGの見本では、押したあとも画面がまったく変わらないため、ユーザーはもう一度押してしまい、同じ商品が2つカートに入ってしまうかもしれません。
OKの見本では、ボタンの文言とカートの数字の2か所が変わるので、「追加できた」ことがひと目で分かります。
操作が伝わるUIの作り方
ここからは、押せそうに見せることと、反応を返すことを、実際のデザインでどう実現するかを見ていきます。
押せるものと押せないものを見た目で分ける
まず、サイトの中で「押せるものの見た目」を決め、押せないものには使わないようにします。
見た目のルールがはっきりしていると、ユーザーは一度覚えた手がかりを、ほかの画面でもそのまま頼りにできるからです。
たとえば、ボタンは塗りつぶしか枠線付きの四角、リンクは色付きの下線付きの文字、と決めたら、見出しや飾りのラベルにはその見た目を使いません。
色の決め方はリンク・ボタンなどのUIカラーとは?で解説しています。
反応はすぐに、操作した場所の近くで返す
フィードバックは、操作したらすぐに、ユーザーが見ている場所の近くで返すのが基本です。
反応が遅かったり、画面の離れた場所に小さく出たりすると、ユーザーは操作が受け付けられたことに気づけないからです。
ニールセンは、反応までの時間の目安として次の3つを示しています(Response Times: The 3 Important Limits – Nielsen Norman Group(英語))。
| 反応までの時間 | ユーザーの感じ方 | 必要なフィードバック |
|---|---|---|
| 約0.1秒以内 | すぐに反応したと感じる | 結果を表示するだけでよい |
| 約1秒以内 | 待ったことには気づくが、考えは途切れない | 特別な表示はなくてもよい |
| 約10秒まで | 注意を保っていられる限界 | それ以上かかるなら、あとどのくらいかかるかを示す |
身近な操作に置きかえると、次のようなイメージです。
- 約0.1秒
ボタンを押した瞬間に色が変わる、キーを押した文字がすぐ入力欄に出る。 - 約1秒
リンクを押してから、次のページに切り替わるまで。 - 約10秒
大きなファイルのアップロードなど。
これを超えそうな処理では、進み具合を示すバー(プログレスバー)などで、あとどのくらいかかるかを見せます。
押した瞬間にボタンの色を変えるのは、処理そのものに時間がかかっても「押せた」ことだけはすぐに伝えるためです。
時間のかかる処理では、「送信中…」のような表示を出し、さらに長くかかる場合は進み具合を見せると、ユーザーは安心して待てます。
結果は色だけでなく言葉でも伝える
成功やエラーなどの結果は、色の変化だけでなく、言葉やアイコンでも伝えます。
色の見え方には個人差があり、たとえば赤と緑の区別がつきにくい人には、色の変化だけでは結果が伝わらないからです。
OKの見本の「✓ カートに追加しました」のように、記号と言葉を添えておけば、色が見分けにくい人にも結果が伝わります(考え方は色だけに頼らないデザインとは?で解説しています)。
エラーの場合は「エラーです」だけで終わらせず、何が起きたのか、どうすれば直せるのかまで書くと、ユーザーが次の操作に進めます。
状態ごとの見た目を決めておく
「押した瞬間」「処理中」「完了」のように、同じボタンでも状況によって見た目を変えることを、ボタンの状態といいます。
フィードバックを確実に返すには、部品ごとに状態の見た目をあらかじめ決めておくことが大切です。
状態は英語で「ステート」とも呼ばれます。
デザインツールで作るときは、1つのボタンについて、状態ごとの見た目をセットで用意しておくのが一般的です。
Figmaでは、こうした状態ごとの見た目を「バリアント」という機能で1つのボタンにまとめられます(バリアントの作成と使用 – Figma ヘルプセンター)。
処理中にボタンを押せない見た目にしておくと、待ちきれずに何度も押して、同じ内容が二重に送られるのを防げます。
パソコンでマウスを乗せたとき(ホバー)や、キーボードで選んだとき(フォーカス)の状態もあります。
ホバーやフォーカスの色の付け方はリンク・ボタンなどのUIカラーとは?で紹介しています。
実践のポイント
操作とフィードバックを考えるときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 見た目をすっきりさせようとして、ボタンの枠や塗り、リンクの下線を消してしまうことがあります。
押せる手がかりがなくなり、ユーザーがどこを押せばいいか分からなくなります。
押せるものには、形・色・下線などの手がかりを必ず残しましょう。 - 目立たせたい見出しやラベルに、ボタンと同じ色と形を使ってしまうことがあります。
押せないのに押せそうに見え、ユーザーを迷わせます。
ボタンの見た目は、押せるものだけに使いましょう。 - 処理に時間がかかるのに、何も表示しないことがあります。
ユーザーは固まったと思い、何度も押したり、ページを離れたりします。
「送信中…」などの表示を出しましょう。 - パソコンのホバー(マウスを乗せたときの変化)だけで、押せることを伝えようとすることがあります。
スマホにはマウスがないため、ホバーの変化は見えません。
スマホやタブレットでは、指が画面に触れた瞬間にもう操作になります。「乗せているだけ」の状態がないので、触る前に見た目を変えて押せることを知らせることができないのです。
何もしていない通常の状態で、押せることが分かる見た目にしておきましょう。
よくある質問
- Q. アフォーダンスとシグニファイアは、どう使い分ければいい?
A. アフォーダンスは「その人がそのものに対してどんな行動ができるか」という関係、シグニファイアは「その行動ができると伝える手がかり」です。
画面のデザインで実際に作るのは、ボタンの形やリンクの下線といった手がかりなので、UIデザインではシグニファイアのほうを意識すると考えやすくなります。
なお、日常の会話では「押せそうな見た目」の意味でアフォーダンスという言葉が使われることも多くあります。 - Q. ボタンを押したときのアニメーションは必要?
A. 派手な動きは必要ありません。
大切なのは「押せた」「結果が出た」がすぐ分かることで、色が少し変わる程度の変化で十分伝わります。
動きが大きすぎると、かえって操作の邪魔になったり、動きが苦手な人の負担になったりすることがあります。 - Q. フィードバックのメッセージは、どこに出せばいい?
A. 基本は、ユーザーが操作した場所の近くです。
ボタンを押したならボタンの周り、入力欄の間違いならその入力欄のすぐ近くに出すと、見落とされにくくなります。
まとめ
ユーザーはUIを「見る→押す→結果を受け取る」の流れで操作しており、UIは「押せそうに見えること」と「押したら反応が返ること(フィードバック)」でその流れを支えます。
押せるものと押せないものを見た目で分け、操作にはすぐに、近くで、色だけでなく言葉でも反応を返すことがポイントです。
まずは自分がよく使うWebサイトでボタンを1つ押し、押した瞬間・処理中・完了のそれぞれで、画面がどう変わるかを観察してみてください。
