新しいはてなブックマークのデザインがなぜ読みにくいか考えてみる

photo credit: esther** via photopin cc

新しいはてなブックマークのデザインついて書くのがトレンドみたいなので、なぜ見にくいのかということを、私がいつもチェックしている一覧ページを例に挙げ、視線誘導の観点から分析してみました。

ちなみに、はてなのデザイン最悪ーとか、私ならもっといいのをデザインできるという意味ではないので留意してください。はてなのデザインから学ぼうという趣旨です。

新しいUSERS

新しい一覧ページのデザインでは、ブクマ数を表す USERSの数字が大きく目立ちます。一般的に人間には、項目の先頭の数字は、項目番号という潜在的な経験則があります。

新しいはてなブックマークの USERS のデザインでは、このような経験則と不規則に並ぶ数字との間で矛盾が生まれ脳が混乱を起こします。特に数字が上がって下がる（1,3,2 など）時、気持ち悪いという感覚を生みます。

試しに、連番（1,2,3）にしてみます。これだと気持ち悪いという感覚はないと思います。これは、脳が規則性から連番であることを瞬時に理解できるからです。

変則的なZ

新しい一覧のレイアウトは、Z型のレイアウトになりました。そのことだけでも、使いにくくなった理由に挙げる人もいるでしょうが、そのことはひとまず置いておきます。

新しいZ型のレイアウトでは、タイトルはサムネイルの下に配置されています。でもちょっと待ってください。はてなのヘビーユーザーは何を流し読みするのか考えてみてください。サムネイルではなくタイトルのはずです。

なので、このZ型レイアウトを読み進めるには下のような視線誘導を余儀なくされます。タイトルが下の方にあることで、(1)のような「上に視線を戻さなければならない」視線誘導が発生し、読みにくいと感じる原因になります。

試しに、画像を消してタイトルを横方向に読み進めれるようにしてみます。スムーズに横方向に読んでいき、読めることがわかると思います。

ちなみに pinterestも、サムネイルを優先するデザインですが、あれが成り立っているのは、piterest ユーザーはサムネイルを流し読みするからです。はてなのヘビーユーザーは、タイトルを流し読みして、読むかどうかを決めるので、やはりサムネイルよりタイトルが上にある方が横方向の視線誘導がスムーズに行われると思います。 

最後に

いろいろ書きましたが、いろいろな前提条件・しがらみのある既存サイトのデザインリニュアルは、難しいという事はよく分かっているつもりです。ただ、1はてな愛好家として少しでも使いやすくなってほしいという願いもあり、この記事を書きました。

デザインリニュアルに携わったデザイナーの方々、お疲れ様でした。そして、これからのはてなに期待しています。

-- 1/16 追記

さっき見たら、タイトルが一番上に表示されるように変更されていました。だいぶイイ感じになったかなー。ちなみに、今回のデザインのようなデザイナーの葛藤・苦労が見て取れるデザインは個人的には好物です。葛藤すれば必ずいいデザインになるというわけでもないところが、悲しいところですね。