Help us understand the problem. What is going on with this article?

Qiitaの「ストック」の状態が判りづらい

そのほかのアイデアを追加しました。(追記・2020.07.02 - 03:21)


Qiitaで記事を読んでいるとき、ストックアイコンを見て、

あれ、この記事ストックされてるんだっけ?

っと感じたこと、ありませんか?
私はかなりの頻度で感じます。特に、昔LGTMした記事を読み直した時とかに多いです。

今のストックアイコンには、「一瞬で確実に識別させる」という力が足りないのかもしれません。

考察記事です

この記事では、主に2つの点を軸に考察していきます。

  • なぜ一瞬で状態を識別できないのか?
  • 状態を一瞬で確実に識別させるにはどうすれば良いか?

Qiitaの中の人へ・・・

僭越ながら改善案をご提案させて頂きました。実装を検討して頂けたら幸いでございます...


話は戻って、

どういうこと?

まずは、以下の画像をご覧ください。
Head_LGTM_Only.png
Side_LGTM_Only.png

どうですか?
あなたは、この記事がストックされているか、一瞬で識別できましたか?

私はこの状態を見ると、
「LGTMはしてあるが、ストックされているか判らないページだ。」
と認識します。

つまり、今のストックアイコンには、「一瞬で確実に識別させる」という力が足りません。

LGTMは判りやすい

LGTMの状態は、どんなタイミングで見ても一瞬で状態を識別できます
HeadMode_LGTM_OFF.png
HeadMode_LGTM_ON.png
SideMode_LGTM_OFF.png
SideMode_LGTM_ON.png

一方でストックは・・・

前項のLGTMと同じように、ストックの各状態を見てみます。
HeadMode_Stock_OFF.png
HeadMode_Stock_ON.png
SideMode_Stock_OFF.png
SideMode_Stock_ON.png
おやおや?
並んで出てくると、「間違えようがないやんけ!」って感じですよね。

しかし、実際に「未ストック」状態の記事を読んでる最中、ふとストックボタンに目をやると迷いが生じるんです。

一瞬で状態を識別できないのは、「未ストック」の状態の時だけです。

なぜストックは判りづらい?

それはズバリ、「アイコンの変化にストーリーがない」からだと私は考えます。

ストックを判りやすくするには、まず先に「LGTMが判りやすいワケ」を具体的に知る必要があります。

LGTMが判りやすいワケ

LGTMのアイコンには、「LGTMしたことで、"L"が"チェックマーク"に変化した」という、誰の目にも明らかなストーリーを持たせています。
HeadMode_LGTM_OFF.png
HeadMode_LGTM_ON.png
2つの状態を示すストーリーがあるアイコンのうち、どちらかの状態のみを見たとき、私たちは、

判断結果 認識・分析
未LGTM "L"が"チェックマーク"に変化していない
LGTM済み "L"が"チェックマーク"に変化している

と、無意識かつ確実に一瞬で判別しています。
私たちは無意識のうちに、このストーリーにコントロールされているのです。

それほどまでに、アイコンにストーリーがあるということは強力なのです。
ストーリーの影響力を理解していただけたでしょうか?

Qiitaの「いいね」が「LGTM」に変わります - Qiita Blog
「LGTM済み」のときは「L」が回転してチェックマークに見えるようにしています。

ストックが判りづらいワケ

今のストックアイコンには、状態の変化に対してLGTMの"L"ような「ストーリーを持つ部分」が存在しません

そのため、「未ストック」と「ストック済み」の2つの状態において、「アイコンの変化にストーリーがない」のです。
HeadMode_Stock_OFF.png
HeadMode_Stock_ON.png

2つの状態を示すストーリーがないアイコンのうち、どちらかの状態のみを見たとき、私たちは、

判断結果 認識・分析
未ストック
ストック済み 馴染み深い"チェックマーク"が出てきた
見たことがある"ポケットのアイコン"が出てきた

と、馴染み深いものなどの自らの経験から無意識にヒントを得て状態を判断します。
判断すべき結果を確定できないような、弱いヒントしか得られなかった時、思考に迷いが生じます。

これが、「未ストック」状態のアイコンを見て、一瞬で識別できない原因です。

Qiitaの「いいね」が「LGTM」に変わります - Qiita Blog
大量にある技術情報の中から取っておきたいものをポケットにしまうイメージでデザインしています。

ストックを判りやすくするには

2つのプランがあると考えます。

  • LGTMのようなストーリーを持たせたアイコンの組み合わせに変更する。
  • ストーリーは持たせないが、誰もが経験から明確に推測できるアイコンに変更する。

前者はアニメーションを実装する必要が出てきそうですが、今の仕様から変更するのはコストがかかりすぎる気がします。
本記事では比較的難易度が低い、後者のプランを考えてみます。

変更するアイコン

状態 変更内容
未ストック 肉抜き部分を塗りつぶして「+」を追加
ストック済み 変更なし(※)

※・・・今のままでも充分一瞬で識別できるポテンシャルがあるため。強いて言えば、"チェックマーク"の短い方は、もっと短くてもいいかも...?

変更したアイコンと並べてみる

HeadMode_Stock_OFF_Re1.png
HeadMode_Stock_ON.png
SideMode_Stock_OFF_Re1.png
SideMode_Stock_ON.png
「+」追加という意味で良く使われるマークですよね。

どうでしょう?

これなら、誰でも「クリックすれば"ストック"に追加される状態 ≒ 未ストック状態」と、一瞬で識別できますよね。

「+」の他に、「↓」もアリかもしれません。
「+」は、医療機関を示すマークのようにも見える

そのほかのアイデア(随時追加)

追加で考えてみたアイデアや、コメント頂いたアイデアを並べてみました。
この項の量が多くなってきたら、別記事にする予定です。
SideMode_Stock_OFF_Re2_1.png
SideMode_Stock_OFF_Re2_2.png
SideMode_Stock_OFF_Re2_10.png
SideMode_Stock_OFF_Re2_3.png
SideMode_Stock_OFF_Re2_5.png
SideMode_Stock_OFF_Re2_4.png
SideMode_Stock_OFF_Re2_7.png
SideMode_Stock_OFF_Re2_6.png
SideMode_Stock_OFF_Re2_8v2.png
SideMode_Stock_OFF_Re2_9.png

おわりに

正直、ストックのアイコンについては、LGTMアイコン変更以前から判りにくいと思っていました。(小声

私たちのQiitaをより良くしたい、その一心で記事を書きました。
アイコンを作成されたデザイナー様を批判する意図はございません。

P.S.

それにしても、ヒトの無意識をコントロールする「UXデザイン」、面白すぎる。

thzking
ハマった部分や備忘録を需要ありそうなら読みやすくして一般公開、そうでもなければ雑に限定公開で不法投棄しています((((Xamarin.Formsはいいぞ))))
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした