説明書なんていらない！直感で使えるUIの秘密📱| vol.4

お疲れ様です。花冷です🌸

UI/UXのいろは第4弾！
今回は「直感的な操作」を生み出す法則についてです！

初めて使うアプリなのに、
説明書も読んでいないのに「ここは押せそうだな」
「ここはスワイプできそうだな」って感覚的にわかること、ありませんか？そこには、現実世界の物理法則と
私たちの記憶を利用した魔法が隠されているんです🪄

🔴 「押せそう！」を無言で伝える「知覚アフォーダンス」

UIデザインにおいて、その物体が「どのように使えるか」を
ユーザーに自然と想起させるデザインのヒントを
「知覚アフォーダンス（シグニファイア）」と呼びます。

例えば、ボタンのデザイン。
少し下に影がついていて立体感があったり、
グラデーションがかかっていたりすると、
私たちは現実世界の「物理的なボタン」と脳内で結びつけて
「あ、これはカチッと押せるものだ！」と即座に認識します。

逆に、ただの平坦なベタ塗りの文字だと
「これはクリックできるリンクなのか、
ただの目立たせたいテキストなのか」
迷ってしまいますよね。

見ただけで使い方が推測できるのが、優れたUIの絶対条件です✨

確かに最近うっすら影ついているようなボタン多いですね！

🔴 ユーザーの無意識の常識に合わせる「メンタルモデル」

もうひとつ重要なのが「メンタルモデル」です。
これは、ユーザーが過去の経験から
「こういう見た目のものは、こういう風に動くはずだ」と
無意識に持っている行動イメージや思い込みのことです。

例えば、Webの世界で長く培われた常識として、

• 青色で下線が引いてある文字 ＝ クリックできるリンク

• 虫眼鏡のアイコン ＝ 検索機能

• 歯車のアイコン ＝ 設定画面
  といったものがあります。

もし、デザイナーが斬新さを狙って
「虫眼鏡アイコンを押すとデータが保存される」
「赤い文字をリンクにする」なんてUIを作ったらどうなるでしょうか？

ユーザーの頭の中にある常識（メンタルモデル）とシステムが矛盾して、
大混乱が起きてしまいます😥

UIデザインにおいては、奇をてらった独自性よりも、
「ユーザーが慣れ親しんだ型」を素直に守ることが、
最もユーザーに優しい正義なんです！

🔴 直感と意味がズレると脳がバグる「ストループ効果」

私たちは、色に対しても強いメンタルモデル（意味）を持たせています。

• 赤色 ＝ エラー、停止、危険、削除

• 緑色・青色 ＝ 正常、進行、安全、保存

もし、画面に
「データが正常に保存されました」
という文字が「真っ赤」で表示されたら……

一瞬「えっ！？何か重大なエラーが起きた！？」って
ドキッとしますよね（笑）。

このように、
色が持つ意味情報と文字が持つ意味情報が
一致していないと、脳が情報を理解するのに時間が
かかってしまう現象を「ストループ効果」
と呼びます。

📝 まとめ

いかがでしたか？？

言われてみれば確かに！って話と、
そりゃそうだよね🤔って感じた話もあったと思います。

ってことはエンジニアさん！
身近なところのUIを知ること！
自分が好きなUI、いいなこれ！ってやつの特徴、
押さえておくのが大事です🚩

きっとそれはあなただけの感覚じゃなくて、
多くの人が満足したUIだと思います✨

でも個人開発してると、気を衒いたくなる！ｗ

ちょっとアイデンティティ欲しい！！けど、
どう出すか、どこで出すかに依っては、
ユーザーさんの使い心地に影響しちゃうので要注意ですね(＠_＠;)

🌸直感的なUIデザインとは、ユーザーの「過去の経験」と
🌸「現実世界の感覚」にどこまでも寄り添うこと。
🌸脳のバグを起こさせない設計で実現される
んですね！

次回は「記憶」をサポートする法則についてです。

お楽しみに✨

⭐次の記事はこちら📝

⭐マガジンはこちら📚