More than 3 years have passed since last update.

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

Last updated at 2020-07-02Posted at 2020-06-28

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

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

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

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

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

話は戻って、

#どういうこと？
まずは、以下の画像をご覧ください。

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

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

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

#LGTMは判りやすい
LGTMの状態は、どんなタイミングで見ても一瞬で状態を識別できます。

#一方でストックは・・・
前項のLGTMと同じように、ストックの各状態を見てみます。

おやおや？
並んで出てくると、「間違えようがないやんけ！」って感じですよね。

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

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

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

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

##LGTMが判りやすいワケ
LGTMのアイコンには、「LGTMしたことで、"L"が"チェックマーク"に変化した」という、誰の目にも明らかなストーリーを持たせています。

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

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

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

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

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

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

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

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

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

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

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

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

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

##変更するアイコン

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