Firefox 3を使っている方は、まずこのページのデモを試してほしい。2つのボックスがあり、上のボックス内でクリックすると1から7までの数字が並んだパイ型のメニュー、下のボックス内ではリスト型のメニューが出てくる。それぞれで"6"を選択するスピードを実感してもらうためのデモだ。

Mozillaのユーザーインタフェース(UI)デザイナーJono DiCarl氏が10月28日に、Webブラウザにおけるパイ型コンテキスト・メニューの可能性をブログで提案した。上記のデモは、その実験1である。

どちらのメニューが"6"を選択しやすかっただろうか。DiCarl氏は、UI操作の効率性を現したフィッツの法則(Fitts’ Law)を挙げて、パイ型の優位性を説いている。

フィッツの法則 T = a+b log2 (D/W + 1)

  • T = ポインターがターゲットまで動くのにかかる時間
  • D = ポインターの動きの始点からターゲットまでの距離
  • W = ターゲットの幅/ 大きさ
  • a、b = ハードウエアによって異なる定数

リスト・メニューではターゲットによってDの数値が変わるのに対して、パイ・メニューはDが小さな値で一定している。さらにWの数値を大きくしやすいため、aとbが同じ条件ならばTが小さくなる。

同氏はまた、パイ・メニューのもう一つのメリットとしてマウスの"動き"を挙げている。リスト・メニューの動きは上下だけだが、パイ・メニューでは様々な方向に動かせる。ターゲットと方向を組み合わせてコマンド化すればマウスジェスチャーになり、素早い操作が可能になる。「優れたユーザーインタフェースは、自然とユーザーに効率的な癖を覚えさせるものだ」とDiCarl氏。

Ubiquityにパイ・メニューを

パイ・メニューは新しい試みではない。1974年にはDon Hopkins氏がジェスチャーによるコンテキスト・メニュー操作を提案していたし、Mozillaにおいても検討されてきた。FirefoxにRadial Contextというアドオンを導入するとパイ型のコンテキスト・メニューを利用できる。それなのにパイ・メニューが今日のWebブラウザのコア機能になり得ていないのはデメリットも兼ね備えているためだ。

Firefoxでパイ型のコンテキストメニューを実現するアドオン「Radial Context」。パイ型だがパイのサイズが小さすぎて操作しにくい。パイは大きく、見やすくがフィッツの法則に従ったパイ・メニューのあるべき姿

たとえば実験2のように、ターゲット候補が多すぎるとWが小さくなりすぎて、選択に手間がかかってしまう。また動きをマウスジャスチャー化できるのはパイ・メニューのメリットだが、それを意識してUIをデザインしないと逆に使いにくくなる。それを証明するのが実験3("5"を選び続ける)だ。5の方向が変わり続けるため、同じ5なのに違う数字を選ぶように時間がかかる。

ただDiCarl氏いわく「UIデザイナーの多くがリスト・メニューに満足して、パイの存在すら意識していない」のが問題であり、パイ・メニューの効果に対する注目が高まれば課題解決はそれほど難しくないとみる。同氏はFirefox用のマッシュアップ・アドオン「Ubiquity」にパイ・メニューを利用したいと述べているから楽しみである。

オープンソースソフトを広く一般ユーザーに広める上でUsability (使い勝手) の向上が不可欠だ。どんなに便利なソフトでも、コマンドラインでしか動作しなければ開発者や専門的なユーザーを超えた展開は望めない。Mozillaは、Firefoxが一般ユーザー層に広がり始めると共にUI重視の姿勢を示し始めた。今回のパイ型コンテキスト・メニューの提案は、その例の一つと言える。ブログの主であるDiCarl氏はHumanizedのメンバーである。今年1月にAza Raskin氏 (MacintoshプロジェクトのJef Raskin氏の息子さん) などと共にMozillaに参加したのが話題になった。

パイ・メニューで高速プログラミング

DiCarl氏はPCでのマウス操作を前提にパイ・メニューの効果を提案していたが、むしろパイはマウス以外の操作方法にも適したメニューとしてアピールすべきだと思う。先週参加したMicrosoftの開発者会議PDC2008で、Microsoft Research (MSR) が「BOKU」という子供向けの教育ゲームのデモを披露した。モジュールを組み合わせてゲームを作りながら、自然とプログラミング・ロジックを習得できる。キーボードは使わず、操作はすべてXbox 360のコントローラで行う。MSRのMatt MacLaurin氏は、シンプルなゲームコントローラで複雑なモジュールの組み立てを快適に行えるようにするのに苦労していると述べていた。その解決策として採用していたのがパイ・メニューだった。1つのパイあたりの項目数は多くても10個程度。サブメニューのパイをパイの上にポップアップさせて、膨大なターゲット項目に対応していた。驚いたのはMacLaurin氏のプログラミングのスピードである。講演はBOKUの前で時間が足りなくなり、BOKUのデモ予定の削減やむなしという雰囲気だったが、MacLaurin氏は早口で説明しつづけながら、それに遅れることなくプログラムを組み立て、結局すべてのデモを披露した。BOKU自体も面白かったのだが、ゲームコントローラを使った高速プログラミングがスゴすぎて、そちらの印象ばかりが残っている。

MSRが開発している「BOKU」。複数のパイを重ねて、1枚あたりのターゲット数を操作しやすい範囲に収めている

PCのキーボードとマウスを使った操作は柔軟で機能的である。アプリケーション側のUIの使い勝手に制限があっても、それを十分に補うほど便利だ。だから今日のPC用アプリケーション開発でパイ・メニューが意識されていない。必要とされていないのだ。だがジョグスティックやタッチなどのシンプルな方法で複雑な操作をこなすには、リストメニューでは不十分である。フルブラウザが動作するデバイスの増加に伴い、今後Webブラウザをキーボードとマウスで操作しないケースが増えるだろう。BOKUのようなUIの改善は必然であり、クロスプラットフォームに応じたUIの進化を遂げていけば、Webアプリケーションがローカルソフトとは違った"使い勝手"を実現する可能性がある。今回のパイ・メニューのような議論が、今後も盛り上がることを期待したい。