5/01/2013

[&] Google Glass UI Guidelines

Google Glass UI Guidelines
https://developers.google.com/glass/ui-guidelines

#throughglass Glassによる写真/動画のポスト
実物の詳細写真が mashable に!
http://mashable.com/2013/04/30/google-glass-future
Google Glass Emulator https://github.com/Scarygami/mirror-api
Demo https://glass-java-starter-demo.appspot.com/


■ユーザーインターフェースガイドライン

Glass は斬新なインターフェースを用意していますが、
新しいものはなんでもそうであるように、
ユーザーにとっては新しい可能性を開くと同時にチャレンジにもなります。
私達がGlassを開発する途上で皆さんと共有したい幾つかの点がありました。
どうぞこれらのガイドラインに留意してください。


■きちんと構成されたタイムラインカードの作成

タイムラインカードはユーザーとGlassの相互関係の中でその中心となるものです。
タイムラインカードはそこにあなたの作成した内容を表示するだけではなく、
ユーザーがいかにしてその内容をGlassと相互作用させるかをも表示します。
ですから、タイムラインカードはそのフォーマットとスタイルが明確で理解しやすく、
読みやすいものであることが重要となります。
Mirror API にはこのカードの作成に3通りの方法があります。
つまり、テキストによる方法、
HTML のテンプレートを使用する方法、
そしてユーザー自身が作成した HTML のテンプレートを使用する方法です。

■テキストの利用

テキストの使用は、Glassにきれいで見やすいカードを作成するのには一番簡単な方法です。
あなたが表示したいものを単にテキストと、
オプションとしての画像の形で API で送るだけで、
あとはGlassがそれをすばらしいものにしてくれます。
グラスウェアが timeline items 上に text フィールドを設定して、テキストカードを表示します。

text https://developers.google.com/glass/v1/reference/timeline/insert#text
timeline items https://developers.google.com/glass/v1/reference/timeline



こんな場合にテキストを使いましょう。
●表示したい内容の大部分がテキストである場合。
●ユーザーにもっとも効果的な表示方法をGlassに決定してほしい場合。
これは、インターフェースの変化にともなって、あなたの表示内容も変化します。
●Glassの使用において、あなたの表示内容を常に最新で一律に保ちたい場合。
(追記:APIのバージョンが変わって標準アプリの色や文字サイズが変わっても他の標準アプリと見た目を揃えることが出来る。Thanx K.M.)

■GlassのHTML テンプレートの使用

すべての表示内容が数行のテキストで書かれるものばかりとは限りません。
時には構造化された表示内容をユーザーのタイムラインに送る必要や、
フォーマットをコントロールする必要があります。
こんな時に、Mirror API は timeline items 上のフィールドに HTML を表示します。
あなたのユーザーが進展の時間を節約していつも安定した結果が得られるように、
Glassでふつう表示される幾つかの HTML テンプレートを用意しました。
これらのテンプレートは、あなたが自分自身の HTML テンプレートを作成する時の
ガイドとなるものなので、強くお薦めします。
テンプレートのすべてを Mirror API Playground で見ることができます。

Mirror API Playground
https://developers.google.com/glass/playground



こんな場合に HTML テンプレートを使いましょう:
リストやテーブルなど、構造化された内容を表示したい場合。
内容の表示にもっといろいろな可能性を追求したい場合。

■オリジナルのカスタム HTML の表示方法

時によって、既成のテンプレートでは作成できない内容表示をGlassに送る必要がある場合、
そのような場合には、自分自身のテンプレートを作成して、
それを timeline items の html フィールドに追加することができます。

自分自身のテンプレートを制作することで、
あなたの表示内容をコントロールできるパワーを獲得することができますが、
そのためには幾つかの条件があります。
Glass上での表示内容を一定に保持して、予想しないことが発生しないようにすることが大切です。
あなた自身のカスタム HTML を制作して内容表示をするのは良いですが、
できれば既存の HTML テンプレートを使うことをお薦めします。
なぜなら、これらの既存のテンプレートにはGoogleのノウハウが込められているからです。
もし、どうしても新しいテンプレートを制作したいなら、次のガイドラインに従ってください。

●base_style.css に紹介されているスタイルを使用すること。
このファイルはGlassで表示されるすべてのタイムラインカードに含まれています。
●既存のテンプレートで使用されているガーター(枠)やスペース(空白)と同じ規定に従ってください。

base_style.css
https://mirror-api-playground.appspot.com/assets/css/base_style.css





■写真や動画の送付について

タイムラインカードには写真や動画の添付が可能です。
写真はタイムラインカードの上でフルスクリーンで見ることができます。
動画も同じですが、動画の再生中にはテキストが消えます。



最高の効果をあげるためには:
●フルスクリーンで見れるように、画面対比率を16x9 にして送ってください。
●解像度は 640x360 をターゲットにしてください。
●常に画像の幅と高さを指定してください。
そうすることでカードの表示時に画像の位置のリフローを防げます。
また、画像が見えない場合のGlassのエラーメッセージが表示されることにも役立ちます。
●動画の再生時間は10〜20秒にしてください。Glassは素早いデータの消費のためのデバイスですから、
長時間の動画はユーザーにとって適当ではありません。

■タイムラインカードのバンドルの扱い方

バンドルすることで表示内容をページ割りすることができて、
より多くの内容が表示され、ユーザーのタイムラインのスペース節約にもなります。
バンドルされたページはタイムラインカードの右上端にページがめくれて見えるので、
ユーザーは次のページにさらに情報があることがわかります。



バンドリングはコンセプト自体は簡単なものですが、不適当に使われることがあります。
どのような場合にバンドルすべきか、
あるいはすべきではないかを一連のルールで示す代わりに次の項を参考にしてください。

バンドルに適する場合:
●脈絡の続いた一連のメールや短いメッセージ
●数ページにわたる長い記事
●幾つかの関連記事が一箇所に集められたもの
●一連のスポーツゲームなどの重要なイベントやスコアの更新

バンドルに適さない場合:
●すべての表示があなた自身から送られたものである場合
(追記:あなた自身が送ったもの全てを1つのバンドルにまとめてはいけない
(送信者が同じでも関連ないコンテンツはまとめるべきではない)Thanx k.m.)
●多数のヘッドラインが数日間にわたってGlassへ送られたもの

注:バンドリングをするのには2つの方法があります。ページ表示とスレッド表示です。
詳しくはバンドリングのガイドを参照してください。

■メニューの作成

メニューは、あなたがユーザーのタイムラインに挿入したタイムラインカードに、
ユーザーが直接反応できるためのものです。
API には強力なメニュー機能が内蔵されているので、
あなた自身のカスタムメニューの作成が可能です。




メニューの作成には次のガイドラインに従ってください:
●もしアイコンを指定する場合は、その画像を50x50 ピクセルにしてください。
●表示するメニューの文言はできるだけ短く、数語にしてください。
●メニューを本来の目的以外に使用するのでなければ、
既成のメニューにはデフォルトのアイコンと表示メニューを使用してください。

追加として、既成のメニューに関するガイドラインです:
REPLY, REPLY_ALL ‐ ボイスリプライ機能は音声により、
自由な状況から返信ができるように作成されています。
ゲーム中の移動のような限られた利用にはボイスリプライを使用しないでください。

■ユーザーのタイムラインから内容を削除するためのメニューの提供

ユーザーがタイムラインの内容を削除するのには、2つの方法があります。
「Dismiss消去/却下」 と 「Delete削除」

「Dismiss」はタイムラインからタイムラインカードを取り除きます。
タイムラインカードは新しいカードが加わると古いカードは
自動的に押し出されていく仕組みになっているので、
通常はこの機能をユーザーに提供すべきではありません。
ユーザーはできるだけ簡単に操作できるべきなので、
「Dismiss」の機能のようにアプリの操作をユーザーに強制する機能は好ましいものではありません。
「Delete」はタイムラインカードを閉鎖してそのカードに関するすべての内容を削除します。
(ローカルからもサーバーのストレージからも)。
もし「Dismiss」の機能をユーザーに提供する場合は、
それをメニュー上で「Delete」と表示してユーザーを混乱させないようにしてください。


■表示内容をコンタクト相手と共有する

コンタクトとは、一人の人である場合もあれば、
ユーザーが内容を共有できる抽象的な存在である場合もあります。
ユーザーに最良の体験をしてもらうために、次のルールに従ってください。

●コンタクトはフルスクリーンで表示されるので、アイコンは 640x360 ピクセルのものを使ってください。
●ユーザーがシェアする内容に対して、コンタクトに役立つような操作ができるように、
acceptTypes に指示してください。

acceptTypes
https://developers.google.com/glass/v1/reference/contacts/insert#acceptTypes

■タイムラインカードの配送を適切にする方法

せっかく美しいカードを作成しても、それがタイミングよくしかも正当な量で届かなければ役に立ちません。

●ユーザーがあなたのグラスウェアを承認したあと、
「ようこそ」 のカードをGlassのデバイスに送りましょう。
そうすることで、ユーザーは設定が正当になされたことを知るからです。
●表示内容は元の形のままで送りましょう。とくに音声の通告を付けた場合はそうしてください。
●時には内容を要約した形で送るほうが良い場合もありますが、その時は音声を付けないで送るのが最良です。

■クイックリファレンス
開発者用のスペックリスト

●Screen aspect ratio
16x9
●Screen resolution
640 x 360 pixels
●Share contact icon size
640 x 360 pixels
●Menu option icon size
50 x 50 pixels
●Supported media format
Container: MP4
Video: H.264 baseline and H.263 baseline
Audio: AAC and MP3