カテゴリーの階層をたどるUIを考える

バイオの買物.comでもうじき公開予定の「まとめてカタログ」に関連して、最近は分類分けやアノテーション、そしてそれを閲覧するUIが非常に気になっています。多数の製品を多数のカテゴリーに分類分けし、いかに閲覧しやすくするかという課題が結構難しいからです。

生命科学は非常に多量の情報を扱うため、その分類・整理が大きな課題になります。この試みとして代表的なのは Gene Ontology (GO) だと思います。Gene Ontologyでは各遺伝子の特徴を生物学的プロセス、細胞の構成要素、分子機能の視点から分類分けをして、整理しています。そしてDNAアレイなどの網羅的な解析結果を大局的に理解する上では、GOは必要不可欠な情報になっています。

さてこのときに課題の一つは、この分類のツリーを閲覧するユーザインタフェース(UI)です。GOではAmiGOというツールを使って閲覧できるようにしています。このツールはWindowsのExplorerのフォルダービューを模したようなデザインで以下の図のような感じになります。

残念ながらこのAmiGOは閲覧性という視点からすると、あまり熟慮されていないように思います。本当はAJAXなどをうまく使えばもうちょっとさくさくと動きそうなのですが、AmiGOのブラウザはノードを展開するたびに全画面を再描写していますので、遅いです。その上、ページを再描写したときにスクロール位置を復帰させる工夫がされていませんので、いちいちスクロール位置がずれてしまいます。ちょっと我慢を強いられる使用感になってしまっています。

AJAXの話を別としても、Windows Explorerのツリー型のUIが本当に適切なのかどうか、ちょっと疑問を感じてしまいます。例えば Windows XPとWindows Vistaの比較をしたこのウェブページは、ツリー構造が深くなってしまったとき、いかに訳が分からなくなるかを良く示していると思います。ツリー構造の場合は、常にルートの階層が表示されてしまい、しかも以前に開けたノードが開きっ放しになります。結果としてもう不要になってしまった情報が画面のスペースを多く取ってしまい、閲覧性を損ないます。

さてもうじき公開するバイオの買物.comの新しいサービス「まとめてカタログ」では、15万ほどの研究用製品を1500のカテゴリーに分類し、整理します。Gene Ontologyは40万弱の遺伝子を3万弱のカテゴリーに分類しているということですので、それに比べれば「まとめてカタログ」のスコープはまだ大したことはありません。しかし多数の製品とカテゴリーをうまく整理しなければならないのは同じだと思います。どういうUIにすれば良いかかなり悩みました。その結果、最終的にベストと判断したUIのスクリーンショットを以下に掲載しました。ご覧のように「まとめてカタログ」ではWindows Explorerのツリービューではなく、Mac OS XのFinderのカラム表示にインスピレーションを得ています。

カラム表示の特徴は、過去にたどったノードが次から次へと左端に消えていくということです。そのため、どんなに階層が深くなってしまっても画面表示が見づらくなることがありません。また過去の階層に戻るのも非常に簡単で、左にスクロールするだけで済みます（ツリー表示だと上と左に同時に移動しつつ、行き過ぎてしまわないように気をつけないといけません）。この左スクロールはスクロールバーを使っても良いのですが、マルチタッチで360°にスクロールできる製品、例えばAppleのラップトップのトラックパッドやMagic Mouseなどを使うと非常に快適です。

今回はまだ「まとめてカタログ」を公開できていないので深い話はできないのですが、ちょっとだけ事前紹介として話しました。

多数の製品をカテゴリーに分類して表示するという課題は、生命科学に限らず、多くの分野でも問題になっていると思います。しかしそれをウェブブラウザーを使ってどうやったらうまく閲覧してもらえるかについては、いろいろなウェブサイトを見ても残念ながらあまり工夫が見られません。どちらかというと、閲覧性の向上はあきらめて検索機能に頼っているように感じられます。GOの功績からも分かりますように、少なくても生命科学分野では検索だけでは不十分です。この分野でいろいろなユーザインタフェースが試行されるのを期待していますし、私もやろうと思います。