INDEX of This Page
あらゆる操作に「反応」を用意しよう。
皆さん、こんにちは。本日は「フィードバック」の重要性について、T Fきりんさんにお話を伺いたいと思います。よろしくお願いします。
こんにちは。こちらこそよろしくお願いします。今日は、ユーザーインターフェースにおける「反応」、つまりフィードバックの重要性についてお話ししたいと思います。
私たちの生活は、いたるところで反応があふれています。電話がかかってくれば着信音が鳴り、自動販売機に硬貨を入れれば、購入可能なジュースのボタンが光ります。これらはシステムからの応答ですが、もっと身近なレベルでも反応は重要です。
確かに、日常生活でも多くの反応を受け取っていますね。
その通りです。例えば、フライパンで肉を焼けば音とともに香りが立ちますし、靴を履いて外を歩けば足音と接地感があります。最も身近な例で言えば、人に声をかければ何らかの反応があります。
もし何も反応がなければ、声が相手に届いていないのかもしれません。そもそものルーツをたどれば、私たちの祖先や生き物全般が、反応とともに生き延びてきたからなのでしょう。
なるほど。反応は生存にも関わる重要な要素なんですね。
そうです。Webサイトやアプリといったシステムは、無機的な施設のようなものですが、同時に擬人的な存在でもあります。ユーザーが何かアクションを起こしたら、必ず反応を返してあげることが大切です。
インターフェースとは入力と応答の繰り返し
インターフェースにおけるフィードバックの役割について詳しく教えてください。
はい。インターフェースとは、人間と人間以外(機械)とのやりとりを指します。どんなものであれ、ユーザーからの操作(入力)があったときには、それに対するフィードバック(反応)を返すことが重要です。
もし何も反応がなければ、操作に失敗したのか、そこが操作できる場所ではなかったのか、あるいはシステムが動作していないのか、ユーザーには判断がつきません。
確かに、反応がないと不安になりますね。
例えば、あるボタンを選択してもらうには、カーソルをボタンの上に移動したときに、ホバー(マウスオーバー)によって色が変わるなど、ボタンに変化を付けます。
その変化によって、そのボタンが押せるものであることをユーザーは理解できます。さらに、入力フォームに空欄があったら知らせてあげたり、条件を満たしたならばボタンを変化させて押せることを伝えたり、アクションが完了したときには、本当に完了したことを伝えてあげます。
そうすることで、ユーザーは安心して操作を進められますね。
おっしゃる通りです。これら全てが、ユーザーの操作(入力)に対するフィードバック(応答)です。インターフェースは、この入力と応答の繰り返しによって成り立っています。
あらゆる操作にはフィードバックが必要
具体的には、どのようなフィードバックを用意すれば良いのでしょうか?
OSであれWebサイトであれ、微細な部分から明確な部分まで、あらゆる操作に対してフィードバックを用意する必要があります。フィードバックを頼りに、ユーザーは状況を理解し、操作を進めることができるからです。
デバイスごとのフィードバックの重要性
例えば、PCではホバーによるフィードバックが特に重要です。ホバーに反応があることで、そこが選択できる、あるいはクリックできる場所であることをユーザーに明確に伝えることができます。
これは、ホバーによる反応がないWebサイトに触れると実感できるでしょう。他にも、デバイスごとに特徴的なフィードバックがあります。スマートフォンやタブレットではタッチに対する反応、テレビではフォーカスの移動による反応があることで、ユーザーは状況を理解できます。
デバイスに合わせたフィードバックが必要なんですね。
ステータスを明確に示す
フィードバックはユーザーの状態を示すことにも役立ちますか?
その通りです。ユーザーのステータスは、いつも同じではありません。あるときはエラー状態であり、あるときは入力を受け付けないローディング状態であり、またあるときは特殊な「選択モード」に切り替わった状態かもしれません。フィードバックを返すことで、今がどういう状態になったのかをユーザーに伝えることができます。
状態がわかると、次に何をすれば良いか判断しやすいですね。
致命的な操作には再確認を
また、「削除」や「リセット」など、その行為をしてしまったら元に戻せない致命的な操作の前には、再確認のためのワンクッションを置くことが重要です。
最も一般的な方法は再確認のポップアップを表示することですが、画面を一枚差し挟む方法でも構いません。ただし、再確認の画面を挟む場合、そこで操作が完了したと誤解されることがあります。
そのため、「まだ削除は完了しておりません」「次の画面で削除が完了します」など、現在のステータスを明確に示すメッセージを添えると良いでしょう。
ユーザーにとって誤操作を防ぐためにも、丁寧なフィードバックが必要ですね。
2種類の「待ち状態」を使い分ける
ユーザーが操作した後、応答に時間がかかる場合はどうすれば良いでしょうか?
その場合、「待ち状態」であることをユーザーに伝える必要があります。待ち状態には「ローディング」と「プログレスバー」の2種類があり、状況に応じて使い分けます。
ローディング
ローディングは、何かがぐるぐる回ったり、同じ動作を繰り返したりして、待機中であることを伝えるアニメーションです。待ち時間が比較的短い場合に使用します。
プログレスバー
プログレスバーは、ある程度時間がかかる場合に、どの程度それが進んでいるかを視覚的に表現したアニメーションです。数秒以上の待ち時間が予想される場合に使用すると良いでしょう。
また、プログレスバーでは進行状況の「%」や「残り時間」を表示するものもあります。これらの情報はあったほうが望ましいですが、必須ではありません。
ユーザーが処理の進行状況を把握できると、安心して待つことができますね。
その通りです。大切なのは、今処理が進行していることが分かり、完了までの大まかな目安が提示されていることです。それが分かることで、ユーザーは辛抱して「待つ」ことができます。
本日はフィードバックの重要性について、とても勉強になりました。ありがとうございました。
こちらこそ、ありがとうございました。ユーザーに適切なフィードバックを提供することで、より良いユーザーエクスペリエンスを実現できます。何か質問があれば、いつでもお声がけください。
ありがとうございます!今回のお話を今後のプロジェクトに活かしていきたいと思います。