そのほかのアイデアを追加しました。(追記・2020.07.02 - 03:21)
Qiitaで記事を読んでいるとき、ストックアイコンを見て、
あれ、この記事ストックされてるんだっけ？
っと感じたこと、ありませんか？
私はかなりの頻度で感じます。特に、昔LGTMした記事を読み直した時とかに多いです。
今のストックアイコンには、「一瞬で確実に識別させる」という力が足りないのかもしれません。
考察記事です
この記事では、主に2つの点を軸に考察していきます。
- なぜ一瞬で状態を識別できないのか？
- 状態を一瞬で確実に識別させるにはどうすれば良いか？
Qiitaの中の人へ・・・
僭越ながら改善案をご提案させて頂きました。実装を検討して頂けたら幸いでございます...
話は戻って、
どういうこと？
まずは、以下の画像をご覧ください。
どうですか？
あなたは、この記事がストックされているか、一瞬で識別できましたか？
私はこの状態を見ると、
「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つのプランがあると考えます。
- LGTMのようなストーリーを持たせたアイコンの組み合わせに変更する。
- ストーリーは持たせないが、誰もが経験から明確に推測できるアイコンに変更する。
前者はアニメーションを実装する必要が出てきそうですが、今の仕様から変更するのはコストがかかりすぎる気がします。
本記事では比較的難易度が低い、後者のプランを考えてみます。
変更するアイコン
| 状態 | 変更内容 |
|---|---|
| 未ストック | 肉抜き部分を塗りつぶして「＋」を追加 |
| ストック済み | 変更なし(※) |
※・・・今のままでも充分一瞬で識別できるポテンシャルがあるため。強いて言えば、"チェックマーク"の短い方は、もっと短くてもいいかも...？
変更したアイコンと並べてみる
「＋」は追加という意味で良く使われるマークですよね。
どうでしょう？
これなら、誰でも「クリックすれば"ストック"に追加される状態 ≒ 未ストック状態」と、一瞬で識別できますよね。
「＋」の他に、「↓」もアリかもしれません。
「＋」は、医療機関を示すマークのようにも見える
そのほかのアイデア(随時追加)
追加で考えてみたアイデアや、コメント頂いたアイデアを並べてみました。
この項の量が多くなってきたら、別記事にする予定です。
おわりに
正直、ストックのアイコンについては、LGTMアイコン変更以前から判りにくいと思っていました。(小声
私たちのQiitaをより良くしたい、その一心で記事を書きました。
アイコンを作成されたデザイナー様を批判する意図はございません。
P.S.
それにしても、ヒトの無意識をコントロールする「UXデザイン」、面白すぎる。