Google Waveをデザインする

このように、我々の生活を大きく変化させる可能性を秘めたGoogle Waveであるが、その革新性ゆえに、Google WaveクライアントのUIデザインを行うにあたっては相当な苦労があったという。Waveのデザインを決定するにあたり常に重視してきたのは、縦軸に「わかりやすさ(Discoverability)」横軸に「使い勝手(Efficiency)」をとる以下のようなパターンマトリックスだ。

わかりやすさと使い勝手のマトリクス

例えば、以下のようなラベルを伴うテキストフィールドは、わかりやすさも使い勝手も非常に高い。上のマトリックスで言えば、最も右上に位置するUIと言って良い。

ラベルを伴うテキストフィールド

しかし、ラベルの領域を節約するためにアイコンを使用した以下のようなテキストフィールドは、使い勝手は良いもののわかりやすさが少し落ちる。テキストフィールドの左に表示されているアイコンの意味をユーザが理解し、記憶していなくてはならないからだ。

アイコンを使用したテキストフィールド

上のマトリックスに従えば、デザイン上の決断がユーザにとってどのような効果をもたらすかを常に確認できるというわけだ。Google Waveクライアントのデザインにおいてこの方法がどう役に立ったかを、Waveにおけるメッセージスレッド機能を例に挙げて説明した。

Waveではメッセージに「返信」を行うことで、メッセージのスレッドが作成される。こうして作成されたスレッドは、UI上は親のメッセージに対する「入れ子」のメッセージとして表現される。

メッセージの返信は入れ子で表現される

ここで考慮しなくてはならないのが、Waveならではの以下のような特徴だ。

  • 過去に送信されたどのメッセージに対しても返信することができ、スレッドを分岐させられる。
  • スレッド内の最新メッセージに対しては、「返信」ではなくメッセージの「追加」になる(スレッドの先端は、延ばす事はできても分岐はできない)

これらをできるだけわかりやすく、使いやすいUIで実現するにはどうしたらよいだろうか。例えば、スレッドの先端にあり、追加が可能なメッセージについては以下のように「Continue」ボタンを配置するというUIはどうだろうか。

「Continue」ボタンを配置

このデザインはボタンのラベルによりわかりやすくはあるが、あまり格好いいとは言えないし、ボタンが一定の表示領域を常に占めてしまうので使い勝手もあまりよくない。そこで固定のボタンというデザインを排し、マウスオーバー時にのみメッセージ下部にインジケータが表示されるという形式をとったのが以下のデザインだ。またメッセージに対する返信は、メッセージ右上に表示されるボタンを通じて行う事ができる。

マウスオーバー時にのみメッセージ下部にインジケータを表示

このデザインは、以前よりも使い勝手に優れているが、そのぶん少し分かりにくくなってしまった。インジケータが何を表すのかが、ぱっと見ではよく理解できないからだ。

その後試行錯誤を経て、わかりやすさと使い勝手をどちらも高める努力をした結果たどり着いたのが現在のデザイン。メッセージ下部のインジケータをクリックすれば、返信とメッセージ追加のどちらも行う事ができる。インジケータの形状が改良されており、クリックすると何が起きるかが直感的に理解できる。使い勝手と分かりやすさをどちらも高いレベルで実現したデザインだ※。

※ 最新のWaveクライアントではさらに改良されており、返信とメッセージ追加のどちらを行うかがインジケータの形状を見るとすぐに分かるようになっている。

現在のデザイン

このようにデザインを改善していくにあたっては、ユーザによるテストが欠かせない。ユーザテスティングを行うにあたっては、フィードバックに対して真摯に耳を傾け、改善のための努力を続けることはもちろん必要だ。しかし、「革新的なものには、必ず反対意見が一定割合で存在する」という事もあらかじめ認識しておくべきである、とCameron氏は語った。ユーザの好みは千差万別であり、万人に受け入れられるデザインはあり得ない、と。新規性が高く、かつ桁違いに多くのユーザに使われる、そういったWebアプリをリリースし続けてきたGoogleからの、非常に示唆に富んだメッセージだと言って良いだろう。