判別しやすいステータスのデザインを考える

初めましての方もこんにちは、さだこえ (@sadako_a_) と申します。DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しています。

今記事では、主にステータスのデザインに焦点を当てて記事を執筆します。

1. ステータスとステートの違い
2. 色で伝えるステータス
3. アイコンで伝えるステータス
4. 実例 : YOUTRUSTの副業意欲ステータス
5. まとめ

1. ステータスとステートの違い

まずはステータスの定義について決めます。似たような単語として、ステータス(status)とステート(state)、どちらも状態を表す概念ですが、両者は微妙にニュアンスの違いをもっています。

ステータスは状態を示す箱のような概念で、ステートはその状態の固有要素とであると今記事では定義します。分かりやすく言い換えるとしたら、人間の健康状態をステータスとした場合、骨折や病気といった固有要素がステート、といったイメージでしょうか。

そんなステータスですが、私達が普段利用するサービスの中で一機能として頻繁に登場します。ではどうやってユーザーが判別しやすいようなステータスをデザインするのか、実例を踏まえて考えていきたいと思います。

2. 色で伝えるステータス

例えばあなたが今見ているこのnoteは、記事の公開状態に関して、下書き・公開中を色で伝えることで公開されているか否かを、判別しやすくしています。またSlackのオンラインステータスも、色で伝えているパターンの1つです。ユーザー名の横にあるドットがオンラインなら緑色、オフラインなら透明色でオンラインか否かを判別します。

一般的には色が付いている状態がアクティブであり、付いていない状態がパッシブなのがデファクトスタンダードであることが多いです。それに則ることがユーザーの認知負担の低減に繋がるでしょう。

ただし気をつけたいのが、色を増やす = 判別しやすくなる わけではない点です。また緑色=正常、赤色=異常というイメージが持たれるように、ステートの文脈とその色が紐付いているかを考えることも重要です。

それに加えて、アクセシビリティ観点から色覚異常の方が見ても判別しやすいように、ステートが多い場合は別の手法も検討するべきでしょう。

3. アイコンで伝えるステータス

ではステートが多い場合、どのようにデザインすることが判別しやすいステータスに繋がるのでしょうか。その点で、前述でも紹介したSlackはとてもユニークな表現で伝えています。

休暇中なら🌴、リモートで作業中なら🏡のように、アイコンを見ただけでその人が今どんな状態なのか分かります。仮に休暇中が赤色、病欠が青色..のように色で伝えようとする場合、覚えるまでに時間が掛かってしまう、またその色のステータスに対して間違って覚える可能性が、アイコンによる手法と比べて非常に高いです。

色に対して感じる印象は人それぞれで変わりますが、アイコンの場合はある程度共通の認識が持ちやすいため、ステートの数が多い場合はこのような手法を取り入れるのも良いでしょう。

実際にアイコンの手法で、InVisionのSCREENSステータスをリデザインしてみました。色のモチーフを残しつつ、各ステータスに関連したアイコンにすることで、ラベルが無くても判別しやすい・アクセシビリティ観点も配慮された改修ができると考えます。

4. 実例 : YOUTRUSTの副業意欲ステータス

色、アイコンによる手法を例に出しましたが、実際にステータスのデザインに関わる実例をご紹介します。

現在、私は副業でYOUTRUSTという知人からオファーが来る副業マッチングSNSの開発に携わっています。YOUTRUSTには4つの副業ステータスが存在し、そのステータスに応じて現在、その人が副業募集中なのか否かを判別することができます。

4つのステータスはそれぞれ固有の色を持ち、ステータスによって紹介側は求職側に対してメッセージを送るかどうかを決めます。

仮に「今は難しい」ステータスならば、メッセージを送ってもマッチングしづらいことが送る前にあらかじめ予想できるため、この副業意欲はサービス内で最も重要な要素の1つであります。

しかしこの副業意欲ステータス、サイズが小さいことによりステータスに気づかず、見落とされてメッセージが送られてしまう、といった1つの課題がありました。

その課題の解決として、ステータスと相談を始めるボタンを1つの要素で固めるデザイン改修を行いました。

このステータスのデザイン改修は、下記3点の狙いがあります。

・副業意欲ステータスに気づかずメッセージが送られるのを防ぐ
・より副業意欲ステータスの色がユーザーに認知されるようにする
・仮に色覚異常で副業意欲ステータスの色が分からなくても、
 ボタンと一緒に1つの要素にすることで判別しやすくする

その人が今どんな副業意欲なのかをメッセージを送る前に必ず知ってもらうようにすることで、サービスの意向に反したメッセージのやり取りを減らすことができると考えています。

5. まとめ

今記事ではステータス(status)とステート(state)の違いから、参考としてサービスのステータス、実際のデザイン改修例をご紹介しました。

判別しやすいステータスとは、いかにそのデザインがユーザーの認知の妨げになっていないか、それを第一に考えることが重要だと思っています。

ここまで読んで頂き、大変ありがとうございました。
ご意見やFBは @sadako_a_ までよろしくお願い致します。

------------------------------------------------

SNSでは最新のデザイン情報や思考、制作物などを発信しています!🎉


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

頂いたサポートは記事執筆のための活動費や、書籍購入費用に当てさせて頂きます!💪また記事を読んで思うことがあったら、Twitterなどで感想やFBを頂けると大変うれしいです!

いつもスキありがとうございます!記事を執筆する励みになります🙋
148

MAMORU KIJIMA

「◯◯を考える」

デジタルプロダクトデザイン関係の記事をまとめています。
5つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。