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

はじめに

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

さて今回は、
分かりやすい状態表現のコツについて解説します。

とはいってもまずは、「状態とは？」と思った方も多いのではないでしょうか？
このブログにおける「状態」の意味については、
過去ブログで詳しく解説しています。
こちらの内容を見てから今回のブログを読むと、さらに理解が深まるはずです！

👉第5回：形を見分ける力解説

インターフェイス設計において迷われがちな、状態の表し方のコツについて
徹底解説していきます！

状態表現について

まず、状態表現について解説していきます。

画面には、様々な状態があります。
選択中、未読／既読、アクティブ／非アクティブ　…等、
画面上で色々な手法を用いて表現されています。

この画像をご覧ください。

この一画面だけでも、下記のような状態を色や文字の太さで表現しています。

①の部分では、
受信トレイに青色図形の「２」が存在することで
２件の未読メールがあるという状態を表現しています。
②の部分では、
メール自体の背景が白色で、右部分に青い印があったり件名が太字であることで
未読メールという状態を表現しています。
③の部分では、
星マークに色がついていることで、お気に入りメールであるという状態を表現しています。

このように、私たちが普段使用している画面では
様々な状態を色や図形で表現されています。

状態表現の基本

日々何気なく使用している状態表現ですが
表現を統一させないと、一気にUXが低下した画面となってしまいます。

例えば、下記画像をごらんください。

これは、状態表現に統一性がない画面の例です。

①の部分では、
未読表現が、赤色の背景であったり黄色や青のラインがあったりなど表現がばらばらなので
どのメールが未読なのか不明慮になっています。
②の部分では、
星マークに赤色が設定されていますが、ほかのメールは黄色が設定されていたりなど
お気に入り状態の表現が統一されておらず、状態が不明慮となっています。

先ほどの画面と比べると、UXが低下していることが体感できたのではないでしょうか？

つまり、「表現を統一する」ことが
状態表現の基本となってきます。

当たり前だと感じる方も多いでしょう。
しかし、当たり前と感じることをおざなりにせず、意識をすることが
使いやすいインターフェイスの作成に繋がります！

最後に：状態の表し方のコツとは？

ずばり、分かりやすい状態表現のコツとは
「表現を統一する」
ことです！
もちろん、一画面だけでなく、システム内の全ての画面で統一されていることが重要です。
（ホーム画面、メニュー画面…等）

皆さんが作成している画面は果たして、
状態表現は統一されているでしょうか？
ぜひ注目してみてください。

さらに、こうした状態を強調するためには、コントラストを意識した画面設計が不可欠です。
そのポイントは

👉第2回：コントラストのコツ

で詳しく解説しています。

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

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