心地よいユーザインターフェイス

なんだか西海岸では、Google 祭りをやっているようだ。祭り囃子や群衆のざわめきが、はるかかなたからケーブルに乗って伝わってくる。ユニバーサル検索か。ネーミングの陳腐さはさておき、単純にいくつかの検索サービスにクエリ投げて、帰ってきた検索結果をごちゃっとまぜるようなかっこわるいものなどではなさそう。

そんなざわめきのひとつの CNET の記事の片隅にこんなことが書いてあった。

また、ユーザーは「Google Labs」で、同社が実験中の「Google Experimental」の機能を試すことができる。そのなかの例としては、左利き用検索ナビゲーション、検索結果の上部に時系列表示を追加する機能、検索結果に地図画面を追加するものなどがある。
http://japan.cnet.com/news/media/story/0,2000056023,20348967-3,00.htm

控えめな記事ながら、なんとなく気になった。「Lab」（研究室）の中の「Experimental」（実験）というなんとも……。その記事にも語られていなかったひとつのユーザインターフェイス案が、「キーボードショートカット」。

• 検索結果ページの第一候補に「>」のマークがついている
• 「j」のキーを打つと、「>」は第二候補に移動する
• もう一度「j」のキーを打つと、「>」は第三候補に移動する
• 「k」のキーを打つと、「>」は逆に第二候補にもどる
• 「j」を連打して第十候補まで来たときに、さらに「j」のキーを打つと、次ページに遷移する
• 検索結果のいずれかに「>」がついているときに「o」のキーを打つと、その検索結果ページが開く。「enter」キーも同様
• 「/」のキーを打つと、検索窓にカーソルが移動して、入力文字列が選択される（つまり次の検索語をすぐに入力できる！　絞り込み検索をしたい人には、ちょっと……）
• 「esc」のキーを打つと、検索窓のカーソルが解除されて、直前に「>」のついていた検索結果にもどる

……という内容。なんかこれ見たことあるなあ……と思ったら、Bloglines（有名なウェブベースの RSS リーダー）のユーザインターフェイスもこのタイプ。たまったフィードをざくざくチェックするときに使ってた。なので、コードは違うにしてもユーザインターフェイス的にはさほど新しいものではない。

でも、これすごく便利。ずらっと並んだ検索結果を眺めているとときどきいま見ているのがどこだったかわからなくなって、ブラウザ上で意味なくカーソルで追っかけていることってある。このユーザインターフェイスだったら、「>」が先頭に表示されるので、一目瞭然。バックグラウンドに薄いハイライトがかかったり、大きめの文字で表示されたりするなんていうオプションもありだと思う。検索結果チェックが効率よくなりそう。

……なんてことを言うと、某社のエンジニアくんは、「j とか k なんて敷居が高いですよ」とか「それはやっぱり vi ※に慣れた人の発想ですよ」などと言う。そうかなあ……。じゃあ、「j」とか「k」でなくてもいい。「↑」や「↓」でもいい……などと話をしているうちに思ったんだけど、ホットスポット※※をマウス操作でクリックしたり、Ajax な地図サービスのマップをぐりぐり動かしたり、ブラウザ操作はどうもマウスに支配されすぎている気がする※※※。確かにマウスでなければできないこともたくさんあるし、マウスの方が便利なこともたくさんあるんだけど、検索結果の閲覧など作業の連続性がある程度予測されるようなサービスでは作業効率の向上を目的としたキー操作をもう少しフィーチャーしてもいいんじゃないだろうか。Excel なんかだと、上下キーとか普通に使うと思うんだけどな。

Ajax を利用して画面遷移回数を低減するのも、ユーザインターフェイスの向上に一役買っている。Google マップで「マイマップ」を作るときのスポット登録のインターフェイスもかなり心地よい。作業の連続性が分断されないインターフェイス。スポットを思いつく限りどんどん登録できる。先日、AdSense の申し込みのときもおもしろいユーザインターフェイスを目にした。あるページに誘導されたのだが、そのページには質問がひとつ掲載されているだけ。その質問に答えると、次の質問が表示される……というもの。質問の多いページだと、山のようにフォームが表示されて、それを見るだけで萎えてしまうということが多々ある。でも、この質問票にはそんな圧迫感はなかった。その質問票の続きに郵便番号を入力する欄があったのだが、ここにもいい工夫があった。「123-0001」のように「半角数字3桁＋半角ハイフン＋半角数字4桁」という形式で入力するように促すための工夫。入力フォームの脇に注意書きを掲載することもできるのだが、それだとフォームの周囲にテキストが増えて、鬱陶しくなる。フォームの脇に小さな「？」アイコンを設置して、それをクリックしてもらって、ヘルプメッセージを表示することもできるだろう。ここで、Google がやっていた工夫というのは、これ。郵便番号を入力しようとしたとき（郵便番号記入用欄が選択されたとき）に、脇に吹き出しで注意書きを表示するというもの。画面に「ぽっ」と表示されるので、視線が自然に移動する。で、注意書きを読む。入力が完了（別の項目の記入欄に移動）すると、吹き出しは消える。スマートなユーザインターフェイスだ。

別に驚くような工夫がなくてもいい。ユーザが快適に作業できるという心地よさの提供が大事。

※ UNIX に標準でインストールされているエディタ。「j」とか「k」とかキーを打つと、エディタ上のカーソルが上下移動する。あまりにシンプルなユーザインターフェイスで、初心者には敷居が高いけど、慣れると心地よい（やっぱり慣れると心地いいんじゃないか！）
※※あんまりこんな言い方しなくなったけど、ウェブブラウザ上の画面でクリックできるリンクのこと。
※※※だいたいのブラウザは、ホットスポットやフォームの移動に「tab」キーが使えたり、フォーム送信に「enter」が使えたりするけど。