Webページにおける細かいパーツを正しく実装することがユーザー経験の向上につながるということについて書かれたUI: Getting the Details Rightを読んだ。WordPressの結構な人気テーマでもタブがあたかもパンくずリストのように表示されていたりするし、頭ではわかってても実践にまでは至らないことも多そう。
Getting the Details Rightではいくつかの有名なパターンを例に、こう実装するとユーザーが混乱しにくいという説明をしている。例えばスライドショーでは切り替えの矢印以外にも「いくつくらい画像が用意されていて、今何番目を表示しているのか」を示すドットを使ったインジケーターが重要であるとしている。また、画像や画面の切り替えにも簡単なアニメーションを導入することによって、ユーザーに「どう切り替わったのかをアニメーションで示すことによって戻る方法を示唆できる」などとも。
中でもリンクを適切に張ることは見過ごされがちなんじゃないかと思う。ナビゲーションでボタンのような形をしているのに文字の部分しかクリックできないなどよくある。記事でも触れられているようにサムネイル付きならその付近全体をクリックできるようにするべきだ。サムネイルやタイトルまではクリックできても概要の文章の部分がクリックできないとかありがち。HTML5ではa要素の内容モデルがtransparentになったので以下のように書いてしまえば良い。
<section>
<a href="http://example.com/article/foo">
<header>
<p><img src="/img/foo.png" alt="。"></p>
<h1>Foo</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue iaculis vestibulum. Nulla consequat placerat magna et varius. Nam tincidunt rutrum diam eu cursus.</p>
</a>
</section>記事はそのディテールの属する基本的な振る舞いから逸脱させてしまうと困ったことになるよというような文で〆られている。Baymard Instituteの記事はAlertboxやUsabilityPostと同じ系統で、ユーザビリティについて数多くの興味深い記事を提供していておすすめ。
こういったディテールの実装で間違ってるような気がするのは画像にオンマウスするとその画像に対してオーバーレイで情報が表示され画像が見えなくなるというやつ。オンマウスで情報を追加するまでは良いと思うんだけど、画像を隠すというのはダメなんじゃないか。画像にカーソルを合わせる人は「画像」に興味を惹かれたからで、それの大きいサイズの画像を見たいとか、リンクになっていそうだからクリックしたいとかそういうのが目的のはずだ。それなのに画像を隠してどうしたいのかよくわからない。そもそもオンマウスで文字を読ませようというのにも無理がある。カーソルで隠れてしまうよね？
JavaScriptを使ったインタラクティブなアクションを起こす要素に対して適切なカーソル形状を提供しないとかも。cursorプロパティーは妙な使い方しかされていないため使いどころが難しいが、必要ならばちゃんと使うべき。例えばVimのカラースキームのオンライン・エディタ、Vivifyでは適切に使われてないため、プレビューに使うコードの切り替えボタンやカラースキームの切り替えメニューでテキスト選択に使うカーソルになってしまっている。defaultかpointerを指定しておくべきだろう。
ドロップダウンのメニュー項目がABC(あいうえお)順に並んでいなかったりするのもなかなかひどい。省スペースにナビゲーションを詰め込めるドロップダウンは重宝するが、一覧性に欠ける。なので、その項目の並びは探しやすいように目的のものの位置が類推しやすいような順序、ABC(あいうえお)順や数値なら昇順で並べるべき。ABC(あいうえお)順じゃなくても良いものは都道府県の選択メニューくらいだ。
タブのデザインは特にデスクトップOSにも似たようなUIがあることから注意して作ってやらなくてはならない。アクティブなタブとコンテンツを同じ背景(色)にしてちゃんとつなげてやるとか、非アクティブなタブは色を変えるとか、Getting the Details Rightでも触れられているようにタブ全体をクリックできるようにするとか。
ディテールの間違った実装というのは人気のあるWebサイトのパーツを表面的にだけパクッた場合に起こりやすいんじゃないかと思う。Twitterの新着ツイートを読み込む青い横長のリンクなんかもよくパクられているが、文字の部分だけしかクリックできないような中途半端なものになってたりする。Deliciousのことですけどね！
Good artists copy. Great artists steal.
完全に盗むためにはどうしてそのデザインがそういうコードになっているかを理解する必要がある。結果として表面的な模倣に終わらないものを作ることができるようになるだろう。