「なぞり出し」ユーザ・インターフェイスを「気持ちいい」と感じる理由
はじめに
先日公開したTagGridは比較的好評だったようでAsiajinにもとりあげて頂きました。
Flickr mashup on Google App Engine from Japan – Asiajin
TagGridでは、画面全体を埋めつくすように75x75のサムネイル画像を表示しています。1024x768と比較的小さいウィンドウサイズの場合でも、表示される写真の数は70枚くらいになります。
TagGridでは、これらのサムネイル画像を一度に全部表示するのではなく、マウスを移動させるごとに、マウスでなぞった箇所の写真を表示するようにしています。このUIは個人的にもかなり気に入っているのですが、はてなブックマークでのコメントでも「気持ちいい」との評価を頂けているようです。そこで、このUIをなぜ「気持ちいい」と感じるのか理由を考えてみました。
はてなブックマーク - 16000枚のFlickrの写真を気楽に眺めるためのサービスを作ってみた - llameradaの日記
「なぞり出し」の誕生
名前ないと不便なので、このマウスオーバーで画像を表示するUIを「なぞり出し」と呼ぶことにします。「あぶり出し」からの連想です。UIの専門家ではないので、既に有名なUIなのかもしれませんが、気にしないことにします。
「なぞり出し」は偶然から生まれました。全ての画像を一度に表示するのは、Flickrのレスポンスが悪いので、使い勝手が悪いものでした。そこで、この問題をごまかす目的で「なぞり出し」を導入しました。Flickrのレスポンスが高速だったら、「なぞり出し」は使わなかったでしょう。
そんな理由で導入した「なぞり出し」ですが、非常に気に入ってしまい、「なぞり出し」の快適さを損なわないために周辺のUIの高速化をかなり頑張りました。例えば、jQueryを使っているにもかかわらず、ほとんどのcss操作にjQueryは使わず、直接DOMをいじっています。その方が高速だからです。
「なぞり出し」を「気持ちいい」と感じる理由
前置きが長くなりましたが、偶然から導入したUIのため、なぜ心地よく感じるのか理由は自分でもよくわかっていませんでした。そこで、改めてその原因を考えてみました。
一度に表示される情報量が少ない
人間が一度に処理できる情報量はあまり多くありません。そのため、大量の情報を一度に提示するよりも、徐々に小分けした方が処理しやすいです。例えば、スライドの箇条書きを、一度に全部表示するのではなく、項目ごとに徐々に表示した方がわかりやすいです。「なぞり出し」では、なぞった箇所から情報が徐々に表示されるので、人間が扱いやすいUIである可能性があります。
みかけの待ち時間が少ない
なぞった箇所から表示するので、画面上には常に変化が生じています。そのため、待ち時間が少ない快適なUIと感じるような気がします。自分がなにか操作したにもかかわらず、画面上に変化が乏しいと、不安に思ったりイライラすることが多いようです。
自分で表示する情報量をコントロールできる
自分でなぞる箇所は選択できるので、自分の情報処理能力に応じて、表示される情報量をコントロールできます。そのため、情報量が多すぎたり少なすぎたりして、ストレスを感じることがありません。
隠された情報を見つけ出すのが楽しい
隠されたものを浮かび上がらせるのは楽しい作業です。ただ、この作業が楽しいのは、提示される情報の質が高い場合に限るような気がします。
