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

はじめに

こんにちは！UI UX講座もついに第5回目となりました。
第5回目では、「形を見分ける力」について解説します。

•第3回・第4回のおさらい
第3回では、わからないについて解説しました。
（詳しくは「使いやすいインターフェイスの作り方3 ～「わからない」を徹底解説～」をご覧ください）
またその中の「場所がわからない」について、第４回で解説しました。
（詳しくは「使いやすいインターフェイスの作り方４ ～webサイト上で迷わせないテクニック解説～」をご覧ください）

今回は,第3回の「状態がわからない」を解決する方法についてさらに詳しく解説します。

形を見分ける力

突然ですが、あなたは次の画像の中から「O」を見つけることはできますか？

答えは、一目瞭然だと思います。

続いて、次の画像の中から、「O」を見つけることはできますか？

正解は。。。こちらです。

二つのパターンを比べると、「A」に混ざっている「O」のほうが、見つけやすかったはずです。

この理由は、
人間には、形を瞬間的に見分ける力が備わっているからです。
「A」と「O」のように、形が大きく違うものは瞬時に見分けることができます。

この力を利用することで
第3回で解説した「状態がわからない」を解決することができます。

フォーカス時

形を見分ける力を利用した、「状態がわからない」の解決方法のひとつとして
フォーカス時の動きの違いがあります。

例えば、下記二つの画像について
どちらのほうが「②を選択している」という状態がわかりやすいでしょうか？

おそらく、２つ目の画像のほうが選択しているという状態がわかりやすいと思います。
これは、②の選択範囲が大きくなっていて、他の形と差異があるからです。

ボタンの形

ボタンの形等のデザインでも、形を見分ける力を活用することができます。
例えば、下記画像をご覧ください。

これは、フード・ドリンクなどカテゴリを選択するボタン、
個数を選択するボタン、注文を確定するボタン
で形が違い、グループ分けがされていることから
操作の違いが直感的に理解できます。

また、注文を確定するボタンが最も大きい為、
最終確定のボタンだということも瞬時に分かるはずです。

形を区別することで、「状態がわからない」だけでなく、「操作がわからない」も
解決することができます。

最後に

形を瞬間的に見分ける力を活用することで
「状態がわからない」をはじめ
多くのわからない、を解決することができます。

形を瞬間的に見分ける力を意識して画面デザインを行うことで
より、わかりやすいインターフェイスの作成が可能です。
ぜひ習得してみてください！