Google glass ui guidelines

禁断の
Google Glass
安藤幸央 Yukio Andoh
@yukio_andoh
photo by seanmcgrath

Building New Experiences with Glass
http://www.youtube.com/watch?v=JpWmGX55a40

Glass How-to: Getting Started
http://www.youtube.com/watch?v=4EvNxWhskf8

Best Practices
General
ユーザーの行動に干渉せずに情報を届けられる
ユーザーの感覚にとても近い体験、今までに無い新しい体験
刺激的であるとともに、挑戦的な課題を内包している
ガイドラインを用意 → 全フェーズで活用してください！
https://developers.google.com/glass/guidelines

Best Practices
Guidelines
Glass のためのデザイン
スマートフォンとは根本的に違う。実機テスト重視
要らない時には隠れる
頻繁さや不意に通知はダメ。必要時には対話、不要時は無視
タイムリーさを維持する
この瞬間の情報を更新する。常に最新かつ関係のあるものを
予想外のことをしない
意図を正確に伝え、あらゆることに明確な許可を得る

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

Creating well-formatted
timeline cards
タイムラインカードはユーザーと「グラス」の相互関係の中
でその中心となるものです。タイムラインカードはそこにあ
なたの作成した内容を表示するだけではなく、ユーザーがい
かにしてその内容を「グラス」と相互作用させるかをも表示
します。ですから、タイムラインカードはそのフォーマット
とスタイルが明確で理解しやすく、読みやすいものであるこ
とが重要となります。

Creating well-formatted
timeline cards
Mirror APIにはこのカードの作成に3通りの方法があります。
テキストによる方法
HTML のテンプレートを使用する方法
そしてユーザー自身が作成した HTML のテンプレートを使用
する方法

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

Using text
こんな場合にテキストを使いましょう。
表示したい内容の大部分がテキストである場合。
ユーザーにもっとも効果的な表示方法を「グラス」に決定し
てほしい場合。これは、インターフェースの変化にともなっ
て、あなたの表示内容も変化します。
「グラス」の使用において、あなたの表示内容を常に最新で
一律に保ちたい場合。

Using Glass HTML templates
すべての表示内容が数行のテキストで書かれるものばかりと
は限りません。時には構成された表示内容をユーザーのタイ
ムラインに送る必要や、フォーマットをコントロールする必
要があります。こんな時に、Mirror API は timeline items 上
のフィールドに HTML を表示します。

あなたのユーザーが進展の時間を節約していつも安定した結果が
得られるように、「グラス」で通常表示される幾つかの HTML テ
ンプレートを用意しました。これらのテンプレートは、あなたが
自分自身の HTML テンプレートを作成する時のガイドとなるもの
です。
既存のテンプレートのすべてを Mirror API Playground で見るこ
とができます。

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

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

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

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

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

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

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

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

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

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

バンドルに適さない場合。
すべての表示があなた自身から送られたもの
である場合
多数のヘッドラインが数日間にわたって「グ
ラス」へ送られてもの

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

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

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

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

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

Sharing content to contacts
コンタクトとは、一人の人である場合もあれば、ユーザーが
内容をシェアできる抽象的な存在である場合もあります。
ユーザーに最良の経験をしてもらうために、次のルールに
従ってください。
コンタクトはフルスクリーンで表示されるので、アイコンは
640x360 ピクセルのものを使ってください。
ユーザーがシェアする内容に対して、選択に役立つような操
作ができるように、acceptTypesで指示してください。

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

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

Quick Reference
• 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

8 Principles for Designing
Gesture-Based Applications
1 精確さは良いことです……でもそれは、ある程度まで！
2 既存のユーザーインターフェースをモデルにしないようにしましょう。
3 ユーザーが肩より高く手を上げなくてはいけないような動作は避けましょう！
4 アクティビティを、小さく短い動作に分割しましょう！
5 すべてのユーザーが右利きというわけではありません！
6 ジェスチャーには文化的な意味を内包している！
7 ユーザーを「効果的なインタラクション領域」に留めておくようにインターフェース
を設計しよう！
8 あらゆるサイズの人や手を使って、テストをしよう！

CURIOUS RITUALS
http://curiousrituals.wordpress.com

Google glass ui guidelines

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

More from Yukio Andoh

More from Yukio Andoh (20)

Recently uploaded

Recently uploaded (10)

Google glass ui guidelines