「使いやすい」インターフェイスの作り方１０

はじめに

こんにちは！UI UX講座第10回目をはじめます。

今回は、
画面上で何が行われているかをユーザーに伝える必要性と方法について
解説していきます。

これまで9回にわたり 使いやすいインターフェイスの作り方を、様々な視点から解説してきました。
例１：「わからない」を発生させないためのコツ
👉第3回：「わからない」を徹底解説
例２：色の効果的な使い方について
👉第9回：色の効果的な使い方について

今回はより具体的な視点から
ユーザーのアクションに対する応答表現について、解説していきます。

応答とは

インターフェースとは、人間と機械とのやり取りです。
何か操作があったときは、必ず反応を返してあげることが大切です。
反応が無ければ、ユーザーは「操作が受け付けられたのか」「今何が起きているのか」が分からず、不安を感じてしまいます。

アナログの例でいえば、エレベーターのボタンを押すと、
ボタンが光ったり「ピッ」と音が鳴ったりしますよね。
これが「ちゃんと押されましたよ」という応答です。

同じように、画面上でも応答を設計してあげることで、UXは大きく向上します。
ここからは、その具体例を紹介していきます。

具体例

処理に時間がかかるとき

例えば、時間がかかる処理を実行した場合、画像のように
「ローディング表示が出る」か
「何も出ない」
この2つであれば、ローディング表示が出るほうが圧倒的に分かりやすいですよね。

何も表示がないと、
「フリーズした？」
「ちゃんと押せてない？」
と、不安になってしまいます。
ローディング表示は、「今は処理中です。少し待ってください」という応答になり、
ユーザーを安心させる役割を持ちます。

また近年、ローディング画面に人が歩くアニメーションを表示するなど、
待ち時間にユーザーを飽きさせない工夫も見られます。

ボタンを押下したとき

ボタンを押下したときについても
見た目が変わるほうが「押した」ことが直感的に伝わります。

ボタンを押した瞬間に、
・色が変わる
・影が付く／凹む
といった小さな変化を入れるだけで、「操作が受け付けられた」という応答になります。

変化がないと、ユーザーは「押せていないかも」と感じて、何度もボタンを連打してしまうことがあります。

最後に

インターフェース設計では、ユーザーの入力に対して必ず何らかの応答を返すことが重要です。
これまで解説してきたように、
処理中であればローディング表示、ボタンを押下した際は凹ませる、などの工夫をすることで
ユーザーの不安や誤操作を防ぐことができます。

そして、どう応答させると一番分かりやすいのか、
応答の手段を考えることが、認知負荷の低減につながります。

株式会社システムズでは、
UIUX改善を意識した画面デザインにこだわっています。
何か気になることやお困りごとがあれば
ぜひお問合せください。

引き続きUIUX改善のためのブログ執筆を続けていくので
今後ともよろしくお願いいたします！