禁断の

Google Glass

安藤幸央 Yukio Andoh

@yukio_andoh

photo by seanmcgrath

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

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

Best PracticesGeneralユーザーの行動に干渉せずに情報を届けられる

ユーザーの感覚にとても近い体験、今までに無い新しい体験

刺激的であるとともに、挑戦的な課題を内包している

ガイドラインを用意　→　全フェーズで活用してください！

https://developers.google.com/glass/guidelines

Best PracticesGuidelines

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 を表示します。

Using Glass HTML templates

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

既存のテンプレートのすべてを Mirror API Playground で見ることができます。

Using Glass HTML templates

こんな場合に HTML テンプレートを使いましょう。

リストやテーブルなど、構造的な内容を表示したい場合。

内容の表示にもっといろいろな可能性を追求したい場合。

Displaying your own custom HTML

時によって、既成のテンプレートでは作成できない内容表示を「グラス」に送る必要がある場合。

こんな場合には、自分自身のテンプレートを作成して、それを timeline items の html フィールドに追加することができます。

Displaying your own custom HTML

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

Displaying your own custom HTML

base_style.css に紹介されているスタイルを使用すること。このファイルは「グラス」で表示されるすべてのタイムラインカードに含まれています。

既存のテンプレートで使用されているガーター（溝）やスペース（余白）と同じ規定に従ってください。

Delivering photos and video

タイムラインカードには写真や動画の添付が可能です。

写真はタイムラインカードの上でフルスクリーンで見ることができます。

動画も同じですが、動画の上映中にはテキストが消えます。

Delivering photos and video

フルスクリーンで見られるように、画面対比率を16x9 にして送ってください。

解像度は 640x360 をターゲットにしてください。

常に画像の幅と高さを指定してください。そうすることでカードの表示時に画像の位置のリフローを防げます。また、画像が見えない場合の「グラス」のエラーメッセージが表示される場合にも役立ちます。

動画の再生時間は10～20秒にしてください。「グラス」は素早いデータの消費のためのデバイスですから、長時間の動画はユーザーにとって適当ではありません。

Bundling timeline cards

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

Bundling timeline cards

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

バンドルに適する場合。

Bundling timeline cards

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

Bundling timeline cards

バンドルに適する場合。

脈絡の続いた一連のメールや短いメッセージ

数ページにわたる長い記事

幾つかの関連記事が一箇所に集められたもの

一連のスポーツゲームなどの重要なイベントやスコアの更新

Bundling timeline cards

バンドルに適さない場合。

すべての表示があなた自身から送られたものである場合

多数のヘッドラインが数日間にわたって「グラス」へ送られてもの

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

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

8 Principles for Designing Gesture-Based Applications

1 精確さは良いことです……でもそれは、ある程度まで！

2 既存のユーザーインターフェースをモデルにしないようにしましょう。

3 ユーザーが肩より高く手を上げなくてはいけないような動作は避けましょう！

4 アクティビティを、小さく短い動作に分割しましょう！

5 すべてのユーザーが右利きというわけではありません！

6 ジェスチャーには文化的な意味を内包している！

7 ユーザーを「効果的なインタラクション領域」に留めておくようにインターフェースを設計しよう！

8 あらゆるサイズの人や手を使って、テストをしよう！

CURIOUS RITUALShttp://curiousrituals.wordpress.com

?