2008-11-28

昨日から続いて、今日はデザイン面でのはてなブックマーク改善案……というわけでもないのですけれども、ちょっと気になった点。

- ところてん - アットウィキ

出っ張ってる印象を与えるオブジェクトはボタンに見える。
で、ついクリックしてしまう。
http://www16.atwiki.jp/tokoroten/pages/1015.html

こちらで指摘されていますが、新しいはてなブックマークのBookmarkletのデザイン*1で、誤操作が多いようですね。

例えば私のTwitterのタイムラインでも、そうした話題が結構聞かれてます、

はてブ２のブックマーク追加ページ、「追加する」ボタンじゃなくて、コメント欄左のコメント部分をつい押してしまう。なんかボタンぽいデザインなのでつい・・・・・・。

リニューアルしたはてブの、ブクマを追加するときのコメント & タグ入力画面、「タイトル」と「コメント」と書かれた画像 http://tinyurl.com/5zlpbb , http://tinyurl.com/6dvfga がボタンに見えて、よくないと思う

追加

新はてブって、「コメント」って画像をクリックしちゃいそうになる。「追加する」をもっと目立たせてほしい。

はてブ２、追加の代わりにコメント画像を押す人、頻発しているなぁ。2週間使って、もう慣れたけど、最初の3日はコメント画像を押しまくってた。

@westerndog 間違えざるを得ないけどなんでだろう

@yamifuu おそらく、通常の[追加する]が小さく文字や背景に埋もれてしまうのに対して、[コメント]画像は、色あいがボタンぽく背景とのコントラストが強く目に入りやすいので、目を誘導しやすいのではないかと。

@westerndog コメントの青目立ちますもんねえ

では具体的にどう間違えやすいか？というのを、考察してみました。

ボタンのデザイン

他の方も指摘していますが、このコメントのアイコンが

ボタンっぽい印象を受ける

というのが大きな問題点ですが、もう一つ勘違いしやすい要因となっているのが

ということ。
「コメント」の上部にあるタイトル変更のアイコンはボタンとして機能するので、その下にあるアイコンもボタンではないか？と感じてしまうのではないでしょうか。
（実際にクリックできるのは「変更する」の部分ですが）

そこに至る導線の問題点

さらに他のページについても見ていくと、混同しやすい理由が分かるかと思います。

非ログイン時のメッセージ

こちらの画像は、Bookmarklet を使ったものの、はてなにログインを行っていなかったときに表示される画面です。ここでは先ほどまでの「コメント」アイコンと同系統の青いアイコンがボタンとして配置されています。

Bookmarkletの登録ページ

こちらは、Bookmarkletの登録ページでやはりログインを行っていないときに表示される画面です。
http://b.hatena.ne.jp/register
ここでも同系統の青いアイコンがボタンとして使われています。
そういった導線での画像の使い方を考えると、ブックマーク追加時の「コメント」アイコンをボタンとして間違いやすいのではないだろうか、と分析できます。

まとめ

整理すると

「コメント」アイコンのデザイン上、ボタンとして受け取られやすい

これは、はてなブックマークだけでなく他のサイトや、ブラウザのデザインでテカリがあり角丸の長方形のものがボタンとしてよく使われているため、そう認識してしまうのでしょう。

例えば Safari で見た場合はこのようになります。
「追加する」のボタンが、色こそ違いますが雰囲気として「コメント」アイコンと似ていますね。Safariに限らず、そうしたボタンのデザインは他のサイト等で広く使われているため

これも、ボタンとして捉えてしまう、という点が一つ。

同系統のアイコンがボタンとして使われている

もう一つとしては、前述したログインを促す場面でのボタンとして使われているなど

似たようなアイコンが、実際にボタンとして利用されているため「コメント」アイコンも「ボタンである」と認識してしまうことになるわけです。

改善策としては

Bookmarklet、追加ページでの「コメント」アイコンのデザインを見直してはどうでしょう？具体的にどういう対応になるか、位置や大きさ、色や形状、そもそも画像かテキストか、など色々あるでしょうが、なんにせよボタンと混同しないよう区別しやすいデザインがいいんじゃないかなー、と思うわけです。
どうでしょうか？ > はてなさん（g:hatena:id:hatenabookmark）