読者です 読者をやめる 読者になる 読者になる

Google GlassとWinApp UIから将来のWeb UIを妄想してみる。

Google Glass。話題になってますね。デバイス的にはスマートフォン登場以来のInterest Deviceって感じでしょうか。これが本当にオシャレなのかどうかは別として、こういうデバイスが一般的になれば情報関係で便利になりそうな気はします。

2年前に来年のGoogleの発表を妄想するというネタスライドで「次はメガネに違いないわ!」みたいなことをほざいたら本当にメガネが出たのであーやっぱりそっちかーと思った。

グーグルは人間の行動データを上手に取得してビジネスにしている企業なのでより生活中で使用頻度の高いものをデバイス化して普及させることにはメリットがある。それで今まで取れなかったデータも取れるようになるから。

且つ生命に関わるような用途でないこと。そう考えるとメガネは一番適当だとスライドをつくった当時に思ったんです。ほぼネタの発表だったけど、結構まじめに考えていたわけですじつはw

まあそれは置いといて、発表されたGoogle Glass。面白いデバイスだと思うしハードの仕組みとかも気になるんだけど、それは対して興味がなくて他に強い興味がある。UIである。Google GlassでWebページ表示したらどうなるか?そんなことばっかり考えるのである。

アプリケーションはレンズの中で表示される。それはつまりユーザーインターフェースは自分の視界の面積以内に固定される必要がある。キーボードやポインティングデバイスのような入力装置もなさそうなのでスクロールやページ切り替えなどの操作も容易ではない。そんな中で例えばWebコンテンツなんかはどうやって表示するんだろうか?

メガネのディスプレイ(レンズ部)はスマートフォンの画面よりも制約がきつい。今言われているRWD(レスポンシブ・ウェブデザイン)なんかが宜しく対応してくれるんだろうか?

当然、マルチウィンドウを採用してウィンドウ内に従来のWebブラウザを表示してスクロールなりページングなりをするという方法はある。しかしまあ非常に操作が煩雑になるんじゃないだろうか。操作は音声で?

そんなんでニュースフィードを読むくらいならタブレットで読んだほうがはやいと思う。ナンセンス。ジェスチャーでポインティング操作?操作の手間は音声と変わらないんじゃないの?やはりナンセンスと思う。

下記はGoogle Glassをかけてる人の視界。飛行機に乗り遅れそうで急いで走っているっぽい。こちらのビデオの1:30あたりから。

f:id:bathtimefish:20130224160308p:plain

右上にフライトのインフォメーションが表示されている。必要な情報が端的に、視界を遮らない形で提供されている。情報の優先度や重要度はアイコンやフォントのスタイルや大きさで表現されていて必要最低限。

無駄がなく直感的に把握できるよう設計されているっぽい。こういうUIで非常に大事なのは視界を遮らないこと。このインフォメーションがフルスクリーンで表示されるのはユーザーを危険に晒すことになる。

視界を遮らない程度の表示であっても、集中しないと読めないような情報量だったり複雑なレイアウトだあってもやっぱり危険だ。この手の情報表示というのは駅の掲示板、オーディオ機器のパネルなどで日常的に何気なく目にするデザインなのだけど、極めて洗練されたマイナスのアートワークであると言える。

これはこれで出発時刻ギリギリなんで急がないと!ということが判って便利なのだけど、ターミナルは?出発ゲートは何番?など目的地にたどり着くための情報がいくつか足りない。しかし、それらを詳しく表示すると視界が狭くなるし直感的に情報が取得しづらくなる。

「もっと見る」ボタンをつける?手は荷物でいっぱいだし、走っているから音声コマンドもままならない。ナンセンス。こういうスマフォ見る手間も惜しいようなシーンでGlassの本領は発揮されるべきですね。

じゃあどういうUIがよいのか?このビデオを進めるとひとつの回答が出てくる。このシーンから以後2~3秒間なので一瞬のことなんだけど。右上のインフォメーションは以下のようになる。

f:id:bathtimefish:20130224163624p:plain

スキップアップなアニメーションで情報が切り替わった。出発時刻、ターミナル、ゲートの情報が表示される。おそらくは数秒感覚で必要な情報が複数ブロックにわかれて、ループ表示される仕組みだろう。まさに電光掲示板感覚である。

制約の強い、限定的な空間に多くの情報を表示させるためのシンプルで、有用性の高い表示方法だ。これを採用すれば表示ブロックにスクロールバーは必要なくなり、無駄なハイパーリンクでナビゲーションが混乱することも防げる気がする。

なんとなく、RWDの先にはこういうデバイスの想定があって、「ノンスクロール・デザイン」とでも表現できそうなデザイン手法もRWDを拡張していくんじゃないかなあと思ったりするわけです。

Webコンテンツもストリーミングものが増えていて、静的なコンテンツの一括表示よりも小さなデータのリアルタイム表示というニーズも増えてきている。以前どっかでWebブラウザはストリーミングコンテンツを表示するものに変わっていくみたいな記事をみたけど、ある意味そうかもしれないと思う。

そういう中で、Webデザインの将来を考えるとまだまだ考えることがたくさんあるなあと思います。

一方で、そんなことを考えている中で気づいたことがひとつ。上記のようなノンスクロール・デザインを実践しているスマートフォンがあって、それをボクは使っているのでした。ボクの仕様端末はIS12T。現在国産唯一のWindows Phoneである。

Windows Phone/Windows8はWindows Store Appというアプリケーションのスタイルを提供していて、そのUIの特徴の一つにTileがある。TileはiOSとかで言うところのアプリのアイコンなんだけど、他にも機能を持っている。

例えばカレンダーアプリのTileは直近のスケジュールを一つ表示してくれる。PeopleというSNSのアプリは「◯◯さんがいいねと言っています。」のような直近の未読ステータスを一つ表示してくれる。Tileは簡単なnotification機能を備えている。そのためアプリを起動しなくてもアプリに起こっている何かを知ることができる。

Tileの面積は決まっていて、大きさは2種類(Windows Phone8では4種類だったか?)しかない。アイコンなのでスクロールは当然できない。その制限の中で面積以上の情報表示が必要な場合、Tileでは様々なアクションで情報を切り替えてユーザーの注目を惹く。

時にはゆっくりと自動スクロールしたり、忍者屋敷の隠し扉みたいにパネルが反転したり、素早くスキップしたり。チラッとみただけでも「お、何かがあったな」とすぐにわかるようになっている。Tileはアプリが「今自分を起動すべき」ということをユーザーに直感的に伝える仕組みを持っているのだ。

TileのレイアウトはXMLで定義する。このあたりが参考になると思う。いろいろな表現が可能なのでアプリに合わせた通知を考えられるだろう。Tileの通知は具体的には下記のように写真の下から青いテキストブロックが定期的にオーバーレイされるような感じだ。

あまり情報がないのだけど、Windows Store ApplicationのUIはユニバーサルデザインの観点から非常に興味深い特徴がいくつもある。今のWindowsのUIチームは情報アクセシビリティについてとても深い考察をしているような気がする。ここでは詳しく書かないけどまあ見れば見るほどすごいと思える。

アクセシビリティを追求したWindowsとGoogle GlassのインフォメーションUIに共通した点があるのは興味深い。どちらもこれからの情報端末の姿を模索しているプロダクトである。この点を踏まえてもWebデザイナーは将来のWeb UIを考える上での参考にできるのではないかと思ったりする。

しかしまあ、Google GlassでWebサーフィンできるようになるのはまだまだ先な気がしますけどね。なんちゃってGoogle Glassなメガネがすぐに出てきて、UIがダメダメで使えない事態になるのは目に見えるわけですよ。

そこにバズってていいから何かの解決方法を唱えられるデザイナやエンジニアはちょっと儲かるんじゃねーの?と思いつつ。なんかテンション落ちてきたのでこのへんで手を止めようとおもいます。