🔖

Pixiv 小説機能のブックマークアイコンが不便な理由、そして改善案

3 min read

始め

私の大好きなサービスである Pixiv がこの間ダークモードを開始して嬉しい!と思いましたが、使ってるうちに不便に感じたことがありました。

この画面をご覧ください。なんか全部ブックマークしてるように見えませんか? 実は全部ブックマークしてない作品です。私は使ってて何度も「あれ、この作品ブクマしたっけ」と思いました。

そこで急に興味が湧いてアイコン部分を色々観察してみました。そしたらいくつか改善できそうな部分がありましたので、記事でお話させていただきます。

*IOSアプリ基準です。

2. 課題点

2-1. 他サービスと違う挙動

最初に「ブクマしてないのにしてるように見える」という話をしました。その理由は Jakob’s Law に関係あります。

Jakob’s Law (from laws of ux)
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
ユーザーはほとんどの時間を他のサイトで過ごす。これは、ユーザがすでに知っている他のすべてのサイトと同じ方法で動作することを好むことを意味する。

結論から言うと、他サービスでは鮮明な塗りつぶしアイコンをブクマしてる状態に使ってるのに Pixiv は逆にブクマしてない状態に使ってるのでユーザーが混乱するということです。

実例を見てみましょう。

たとえこの中に使ったことのないサービスがあるとしても、全部ブックマークしてないということはわかります。アウトラインアイコン・鮮明じゃない塗りつぶしアイコンは活性化されてない状態を表すためによく使われますので、ユーザーもそういう仕様を期待します。

こちらは全部ブックマークしてる状態ですね。鮮明な塗りつぶしアイコンは活性化されてる状態を表すためによく使われてます。上の4つは彩度の高い色でアイコンを塗りつぶすことで、下の2つは明度の差が大きい白黒を組み合わせることでアイコンを鮮やかにしてます。

こうしてユーザーは他サービスで「鮮明な塗りつぶしアイコンはブクマしたやつ」という認識を積んできたので Pixiv の画面を見たら混乱することになります。

+)明度・彩度の説明は「明度差による色のコントラスト -配色テクニック活用法-」という記事がわかりやすいと思います。

2-2. 優先順位の競争

ここにダークモードとライトモードの小説リスト画面があります。この画面を最初に見たとき、どの部分が一番最初に目に入りますか?

多分小説のタイトルとブックマークアイコンが同時に目に入ると思います。両方ともダークモードでは一番明るい白、ライトモードでは一番暗い黒になってるのがその理由です。

ですが、これはあまり良くないと思います。

ユーザーの動きを考えてみましょう。小説リスト画面でタイトルもタグも見ずにさっそくブクマからする人は普通はないはずです。「小説のタイトル見てから気になる作品をブクマする」というのが自然な流れだと思います。

こういう行動パターンを考えたら視線がいく順番もそれに合わせて設計する必要があります。つまり、一番最初に目に入るべきの小説タイトルが優先順位1位で、ブックマークアイコンはその次です。

なのに今の状態だとタイトルもブックマークアイコンも同じぐらいで目立ってるため、お互い優先順位の競争をしてるのです。

2-3. 足りない一貫性

謎に「ブックマークされてない状態を表すアイコン」がダークモードの小説リスト・本文ページだけ塗りつぶしのアイコンになってますね🤔 一貫性が足りないUIはユーザーをもっと混乱にさせます。

3. 改善案

このような課題点をどう改善すればいいかを作成してみました。

3-1. 小説リスト画面


とりあえずブクマしてないアイコンはアウトラインにしてぱっと見で意味がわかるようにしました。アイコンの明度はタグと同じ程度にすることで、視線がまずタイトルにいってその次にタグやアイコンにいくように誘導しました。

3-2. 小説本文画面

同じ理由で小説本文画面もブクマしてないアイコンはアウトラインにしました(ライトモードはすでにこうなってました)。

この画面ではわざとアイコンの明度を落とす必要はありません。その理由はツールバーが表示されるタイミングです。

これが使ってるときの動きです。小説を読んでるときはツールバーが表示されなく、画面を一回タップしたときに表示される仕様になってます。

これははユーザーがツールバーを使いたくて表示させるという意味なので、その中のメニューアイコンは優先度が高いです。だから小説リスト画面と違って明度を落とし、目立たないようにする必要がないのです。

終わり

とても細かい部分ですが、こういうディーテールひとつひとつがもっと良いユーザ経験を生み出すのではないかと思います。

Pixivの皆さん!もしこの記事お読みになりましたらぜひ前向きにご検討お願いします🤗

Discussion

ログインするとコメントできます