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

[そのほかのアイデア](https://qiita.com/thzking/items/3386c63799231dee5390#そのほかのアイデア随時追加)を追加しました。(追記・2020.07.02 - 03:21)

---
Qiitaで記事を読んでいるとき、ストックアイコンを見て、
#あれ、この記事ストックされてるんだっけ？
っと感じたこと、ありませんか？
私はかなりの頻度で感じます。特に、昔LGTMした記事を読み直した時とかに多いです。

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

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

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

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

---
話は戻って、

#どういうこと？
まずは、以下の画像をご覧ください。
<img width="999" alt="Head_LGTM_Only.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/1393c7fe-3b13-1762-8043-09826f2f29a4.png">
<img width="134" alt="Side_LGTM_Only.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/403ac7b4-cdb1-b83c-e401-b0ccd96f3ec7.png">

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

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

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

#LGTMは判りやすい
LGTMの状態は、どんなタイミングで見ても**一瞬で状態を識別できます**。
<img width="667" alt="HeadMode_LGTM_OFF.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/3a63d5c9-817b-32af-c2f9-1822b6083df2.png">
<img width="667" alt="HeadMode_LGTM_ON.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/2a28e2cd-e1b0-21ee-c3db-27e1f91ccc11.png">
<img width="150" alt="SideMode_LGTM_OFF.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/38cefdc7-b8dc-c45b-5703-046c2f23dc75.png">
<img width="150" alt="SideMode_LGTM_ON.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/c53dbe51-1c1a-1b97-a747-d821f33a2dc6.png">

#一方でストックは・・・
前項のLGTMと同じように、ストックの各状態を見てみます。
<img width="336" alt="HeadMode_Stock_OFF.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/0366f7d1-a046-fdef-32cf-d031b4ce2ef9.png">
<img width="336" alt="HeadMode_Stock_ON.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/5e498748-4e27-15b7-23f4-04c29ea7656a.png">
<img width="150" alt="SideMode_Stock_OFF.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/164a444f-f5ec-c4e4-de16-4148f3ccbddd.png">
<img width="150" alt="SideMode_Stock_ON.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/6b4b4ae7-f4fd-a098-7927-2e91728e23b5.png">
おやおや？
並んで出てくると、「間違えようがないやんけ！」って感じですよね。

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

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

#なぜストックは判りづらい？
それはズバリ、「**アイコンの変化にストーリーがない**」からだと私は考えます。

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

##LGTMが判りやすいワケ
LGTMのアイコンには、**「LGTMしたことで、"L"が"チェックマーク"に変化した」**という、**誰の目にも明らかなストーリー**を持たせています。
<img width="667" alt="HeadMode_LGTM_OFF.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/3a63d5c9-817b-32af-c2f9-1822b6083df2.png">
<img width="667" alt="HeadMode_LGTM_ON.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/2a28e2cd-e1b0-21ee-c3db-27e1f91ccc11.png">
2つの状態を示す**ストーリーがあるアイコン**のうち、**どちらかの状態のみ**を見たとき、私たちは、

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

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

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

>[Qiitaの「いいね」が「LGTM」に変わります - Qiita Blog](https://blog.qiita.com/like-to-lgtm/)
「LGTM済み」のときは「L」が回転してチェックマークに見えるようにしています。

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

そのため、「**未ストック**」と「**ストック済み**」の2つの状態において、**「アイコンの変化にストーリーがない」**のです。
<img width="336" alt="HeadMode_Stock_OFF.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/0366f7d1-a046-fdef-32cf-d031b4ce2ef9.png">
<img width="336" alt="HeadMode_Stock_ON.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/5e498748-4e27-15b7-23f4-04c29ea7656a.png">

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

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

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

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

>[Qiitaの「いいね」が「LGTM」に変わります - Qiita Blog](https://blog.qiita.com/like-to-lgtm/)
大量にある技術情報の中から取っておきたいものをポケットにしまうイメージでデザインしています。

#ストックを判りやすくするには
**2つのプラン**があると考えます。

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

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

##変更するアイコン

|状態|変更内容|
|---|---|
|未ストック|肉抜き部分を塗りつぶして「＋」を追加|
|ストック済み|変更なし(※)|
※・・・今のままでも充分一瞬で識別できるポテンシャルがあるため。強いて言えば、"チェックマーク"の短い方は、もっと短くてもいいかも...？

##変更したアイコンと並べてみる
<img width="336" alt="HeadMode_Stock_OFF_Re1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/8102a090-e856-c148-8785-e1f9aacc2f41.png">
<img width="336" alt="HeadMode_Stock_ON.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/5e498748-4e27-15b7-23f4-04c29ea7656a.png">
<img width="150" alt="SideMode_Stock_OFF_Re1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/4f3abb67-0ecc-c05a-361d-4c4857dc622f.png">
<img width="150" alt="SideMode_Stock_ON.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/6b4b4ae7-f4fd-a098-7927-2e91728e23b5.png">
**「＋」**は**追加**という意味で良く使われるマークですよね。

どうでしょう？

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

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

#そのほかのアイデア(随時追加)
追加で考えてみたアイデアや、コメント頂いたアイデアを並べてみました。
この項の量が多くなってきたら、別記事にする予定です。
<img width="150" alt="SideMode_Stock_OFF_Re2_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/420d48f5-2035-f6a8-3941-b1d4365c3d21.png">
<img width="150" alt="SideMode_Stock_OFF_Re2_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/bb013188-004e-5997-7d04-513f5ef2ab85.png">
<img width="150" alt="SideMode_Stock_OFF_Re2_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/3d18074e-9dfc-9199-0f3e-d0c714a3f7a2.png">
<img width="150" alt="SideMode_Stock_OFF_Re2_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/b33eccaa-4d41-f5b2-5ac5-9954fa48ed11.png">
<img width="150" alt="SideMode_Stock_OFF_Re2_5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/a5e59395-4c21-3809-7d4c-8d81a7fab177.png">
<img width="150" alt="SideMode_Stock_OFF_Re2_4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/21f16d81-0751-29a2-8ec9-a96b175b83e6.png">
<img width="150" alt="SideMode_Stock_OFF_Re2_7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/7b1e7aed-1851-ee4b-4ee0-6db6a5eea69d.png">
<img width="150" alt="SideMode_Stock_OFF_Re2_6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/cffee3c6-0d2a-12dd-4cf7-dcc41cd1f694.png">
<img width="150" alt="SideMode_Stock_OFF_Re2_8v2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/df4004bb-161c-548b-fa95-a0babbb92383.png">
<img width="150" alt="SideMode_Stock_OFF_Re2_9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232583/ed7abf85-383d-9233-68b5-d26bc01b3f9c.png">


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

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


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