ajaxとユーザーインターフェースデザイン

先日、RSSリーダーをもっと使った方がいい、いや、使うべきだ、みたいな話を(もの凄くイマサラなんですけど)、某所で行った際、とりあえずインストールもいらなくて便利なRSSリーダーといえばlivedoor Readerでしょうとハイテク好きな小娘にレコメンドしてみたりしたのです。当ブログの読者様も、LDRユーザーはかなり多いみたいですしね。MacならSafariに入ってるRSSリーダーが必要にして十分快適なんですけどね。

livedoor Readerはajaxを駆使して作られた素晴らしいソフトです。クライアント型リーダーならglucoseもあるのですが、Macだし使えないし、ということでルック&フィールも軽やかなlivedoor Readerを薦めたのですが、一時間もしないうちにとんでもないことを言われました。

　「動作が不安定でぜんぜん使えない」

そんな馬鹿な、と思って自分のlivedoor Readerにログインしてみると、ちゃんと使えます。

　「ちゃんと動いてるじゃないか」

と言うと、彼女は言いました。

　「でも新しいフィード?を追加できないのよ」

　「え、ちゃんと追加できるけど?」

　「できないの。ほら、見て」

と言って、彼女が僕に示したのは、「RSSマーク」のついているGizmodo JapanのRSSマークを、なんとlivedoor Readerのフォルダーペインにドラッグ&ドロップしたのでした。これには度肝を抜かれた。

　「こうすると、いちおう表示されるんだけど、なんかもとのlivedoor Readerにもどるとダメなのよ」

　「当たり前だよ。これWindowsのエクスプローラじゃないんだから」

　「えっ、違うの?」

　「どうみても違うじゃん。アイコンの形とか」

　「わかんないよ。似たようなもんだもん」

解れよ、と思ったのですが、確かに似たような形になっていると、Windowsのエクスプローラと相互にドラッグ&ドロップできそうな感じがします。

こういうのを「テクノリテラシーが低いって恥ずかしい」と思うか、UIデザインの失策だと思うかは人によるのでしょうが、僕はどちらかというと、UIデザインの方を直すべきかもしれない、と思いました。

確かにエクスプローラ的なスタイル、つまり、フォルダの中にフォルダや書類が入れ子構造で入っているというマトリョーシカ人形タイプの階層表現は見た目に解りやすいのですが、あまりにリアルだと間違えます。Vistaを使っていれば違ったのかも知れませんが、ここではそういう問題には目をつむります。

将来、Webが完全にプラットフォームになり、あらゆるアプリケーションがWebで動作する世界がやってくるとすると、当然、ウィンドウ間のドラッグ&ドロップや、ウィンドウとデスクトップの間のドラッグ&ドロップもできるようになるでしょう(げんにParallels DesktopではWin-Mac間のドラッグ&ドロップすら実現しています)。それが当然できないと考えているのは原理を理解している技術者だけです。

仮にJavaScriptでの対応が難しかったとしても、Apolloなら対応してくるでしょう。原理的にもFlashエンジンがドラッグ&ドロップをサポートするのは難しくありません(いや、ひょっとすると既にできるのかな?)。

このあたり、Gmailでは実に秀逸にクリアしています。
この左端のフォルダ列を見て、Windowsのエクスプローラと勘違いする人はまずいないでしょう。
ドロップできそうにもありません。

デザインと機能が一体化しているのです。

ちなみにYahooメールもここらへんはクリアしています。

せっかくブラウザ上でいろいろと高度なことが出来るAjaxなので、Windowsのネイティブアプリみたいにしてやろうという発想はよくあります。たとえばdesknets'のAjaxメールなどはその典型です。

しかし、ブラウザで動く以上、それはWebアプリケーションです。

Ajax的にはダサいデザインであっても、結果的にUIとしては混乱を招きにくいデザインにすることが大切です。

さらに過激にWindowsに似ているStartforceでは問題はもっと深刻ですが、まあここまで来ると、ブラウザをフルスクリーンにして使うのが当たり前になるかもしれません。

スタートフォースの画面

UIについてもうひとつ。僕が最近気になるのは、スクロールバーの存在です。

MacのSafariについて、言いたいことは山ほどありますが、まずスクロールバーの色くらい変えられるようになって欲しい(あと、JavaScriptのへんなエラーで落ちないで欲しい)。

どんなにカッコイイページでも、スクロールバーの色がファンシーな水色では興ざめです。

ウィンドウの端に付いてるスクロールバーはともかくとして、インラインフレームのスクロールバーの色まで変わらないというのはなにかの陰謀でしょうか。

ちなみにIEだとちゃんとCSSで指定できます。

HTMLの根本に立ち戻って考えると、もともとのHTMLとは、固定化されたデータを扱うためのデータ形式だと考えることが出来ます。

つまり、HTMLになった時点で全てのデータが静的に決定されていることがそもそもの前提だったわけです。

ところが、画像を組み込むことになったとき、画像は読み込んでみるまでサイズがわからなくなりました。
サイズがわからないので、とりあえず画像が入るであろうところにプレースフォルダを表示して、あとから正しい配置に「再レイアウト」する、という描画方式が一般的になり、さらにはブラウザのタテヨコ比や大きさを変えても見やすい「リキッドデザイン」なるものが生まれました。

このリキッドデザインは、ウィンドウシステムともの凄くマッチした凄い発明だと思います。
自分のところでやっていてなんですが、「サイトスニーカー」のような、「実際の画面はもっと大きいけど、その一部をスクロールして見る」という、GoogleMap形式のインターフェースだったら、Webはここまで流行らなかったのではないかと思います。

これだと好きな情報を好きなスタイルで見ることが出来るので、マルチウィンドウの利便性がとても活きることになります。

今気づいたのですが、このブログ、というかココログのテンプレートはリキッドデザイン未対応でした。ダメですね。

なんでこんなことを思ったのかというと、AjaxでRSSリーダーを作ったとき、画面の大きさを固定すると、自分のデスクトップマシン以外ではとても見れたものじゃなくなってしまったからです。

僕のデスクトップマシンは、まあ社長といっても控えめに23インチのシネマディスプレイ一台なのですけど、もう一台買ったときに入院したので、本当は二台です。はやくシネマディスプレイに会いたいです。

それはともかく、23インチのシネマディスプレイでは最適でも、Let's Noteや、MacBook Proや、iMac、そしてThinkPadなんかでみるともの凄く使い辛いのです。

これはなぜだろう?と考えたのですが、それは画面の余裕の無さではないかと思いました。

サイズ固定で作ると、確かにプログラムは書きやすいです。昔のゲーム機のプログラムと一緒だからです。
しかも、同じディスプレイでも、最大化して使いたいときとそうでもないときがあって、その両者でどうするべきか本当に悩むのです。

はたと気づいたのは、いまさら当たり前なのですが、リキッドデザインにすれば良いということでした。

ブラウザのウィンドウにあわせて情報を伸縮させるだけで、ずいぶん扱いやすくなりました。
しかし、リキッドデザインにすると、今度は別の部分が気になってきます。
小さくしたときに文字や画像が大きいままなのです。

これはとても不便なので、これもまた三段階くらいで自動調節したほうが良いような気がしてきました。

完全にブラウザと大きさの比率をあわせたかったら、もういっそFlashにしたほうが早いのですが、Flashにすると拡大縮小には柔軟に対応できても、リキッドデザイン特有の便利さはありません。たぶん頑張ればできるのでしょうが、プログラミングが面倒なのではないかと思います。

さて、次に気になるのがスクロールバーです。

僕は先ほども述べたように、インラインフレームのスクロールバーが好きではありません。
というかむしろ憎んでいます。理由は特にありませんが、あの美観を損なう感じがたまらなく嫌なのです。

とはいっても、スクロールバーをつけないわけにもいきません。

このあたり、Gmailではどう解決しているのかと思ったら、さすがです。
完全なリキッドデザインになっていて、或程度のところまで意地悪をしてウィンドウを小さくしても、追従してきます。

Gmailの秀逸なところは、ウィンドウがどこまでもどこまでも下に長くなっていくところです。

これは、実際の利便性からするとけっこう不便です。
つまり、下の方までスクロールしてから、メールを出したり、他のメールを確認しようとすると、一番上まで戻らなければならないからです。

でも、メールの切れ目、切れ目には「受信トレイ　一覧に戻る」や、「返信」「転送」「次」といった、次に行動しそうなアクションが並んでいるので、これでも全くストレス無く使えるのです。凄いですね

Googleがやってると「敢えてそうしてるのかな」と思わせてしまうあたりが凄いです。

つまり、AjaxにおけるUIデザインをするにあたっては、AjaxらしさよりもむしろWebらしさを重視した方が、ユーザーにとって戸惑いが少なそうです。

確かにAjaxを駆使した方がかっこいいページとかを容易に作れるのでついついそういう方向で考えてしまいがちなのですが・・・　難しいですね。これも煩悩かな

自社で開発・販売しているAjaxベースのCMSも、この原則に反する部分が多々あるので、それもふまえて改善していきたいと思っています。

千里の道も一歩から、か。トホホ