どこにでもいるSEの備忘録

たぶん動くと思うからリリースしようぜ

【Google】ARデザインガイドラインの覚書

こんなサイトを読んでいました。

Introduction to AR & ARCore - Augmented Reality Design Guidelines

ARアプリを制作する際にデザインってどういう流れで決めていけばいいの?って話です。 アプリケーションのデザインとか今後考えなきゃいけなくなったときのためのメモです。

Environment

AR向けのデザインを考える際には、空間を想定します。 想定を固めた上でデザインをすすめる必要があります。

現実空間

想定する空間がプライベートの自室なのか、屋外の公共空間なのかによって、ユーザーの動作の範囲が限定されます。 屋外ではその場にいる物や人の数によっても行動に制限が加わります。 これらを想定したデザインを想定する必要があります。

使用空間の考え方
使用空間の考え方

拡張空間

ARでは空間認識を常に実施します。 カメラから得られる画像からの認識とモーションセンサによる認識を組み合わせて実施されます。

カメラからの認識では、現在は下記のような実空間は認識が困難であることを念頭に置く必要があります。

  • 模様のない平らな平面(真っ白なテーブルなど)
  • 特徴点の少ない物体
  • 明るすぎる空間
  • 透過や反射のある物体(ガラスや鏡)
  • 動く物体(草の葉や水面のさざなみ)

f:id:nogawanogawa:20180520103208j:plain:w450
認識できない物がある事を念頭に置く

User Nuance

次に、ユーザーがどんな動きをするかを想定する必要があります。

ユーザーの動き

ユーザーは360度空間で生活しているのに対して、ARに慣れていないとモバイルデバイスの慣習から身動きが小さくなりがちです。 そのため、あえて仮想物体を視界から少し外すなど、ユーザーが自ら動くように誘導することが有効になります。

f:id:nogawanogawa:20180520121532j:plain:w450
あえて視界からわずかに外すことでユーザーを誘導する

ユーザーの動きには段階があり、各段階に対して求められる要素は下記のようになる。

1. 座ったまま、手は固定
  • 小さくゆっくりとした動作を要求し、満足を誘う
2. 座ったまま、手は動く
  • ユーザーの必要に応じて動作の方向性を示す
3. 直立して、手は固定
  • 特定の経験を得られる動作について、ユーザーを教育する
4. 十分に動く
  • 明確なガイダンスによって動きのはばや適切な調節を支持する

また、ユーザが動き回れない場合を想定し、仮想のアセットを動かせるようにすることが必要になります。 その際、テキストやアノテーションをどの角度からでも判別できるようにすることがユーザーの負担を軽減します。

負担の軽減

負担を軽減するために、下記が重要になります。

  • ユーザーに対して後ろ向きに動くように誘導しない
  • 体験に必要になる空間の広さを正しくユーザーに伝える
  • 周囲に注意が行くように注意をうながす
  • ユーザーの目の前に巨大なオブジェクトを配置しないようにする

Initialization and adding virtual assets

表面の検知

実空間表面の認識は、次の動作を指示するタイミングの一つです。 その際に、ユーザーにストレスを与えないためには、次のようなポイントがあります。

  • ユーザーが表面を見つけてからそれを認識させる間のアクションを小さくする
  • どの表面を認識したかをユーザーにはっきり知らせる
  • 美しさにこだわる
  • 視覚的ハイライトやテキストメッセージによって進捗状況を常にユーザーに伝える

また、複数の表面を取り扱う際にも注意が必要になります。

  • 仮想オブジェクトを配置するなどの準備ができた際には、平面にハイライトする
  • 別々の平面には明確に区別をつける
  • フォーカスしている平面にハイライトをする場合、複数表面を同時にハイライトさせない

f:id:nogawanogawa:20180520135034j:plain
認識した表面をハイライトする

ディスプレイの使用に伴う配慮

ディスプレイの初期配置にも配慮が必要になります。 他の動作を邪魔するような位置に配置したり、配置するオブジェクトが大きすぎたりするとユーザーの体験を大きく損ないかねません。 ユーザーが快適に感じるようにオブジェクトを配置しましょう。

f:id:nogawanogawa:20180520140400j:plain
ディスプレイ上でのオブジェクトの配置位置

オブジェクトの移動に関しては、配置できる最も遠い位置をデフォルトとすることが望まれます。 そこからドラッグよって、ユーザーが位置を調整します。

f:id:nogawanogawa:20180520141305j:plain
ドラッグと物体の移動の対応

バーチャルオブジェクトは三次元空間に存在するのに対して、操作するデバイスは二次元です。 そのため、ユーザーが快適にバーチャルオブジェクトを操作するには、オブジェクトの位置を表示するインジケータが必要になります。 また、影は床面がどこにあるかをユーザーが認識することに役立ちます。

f:id:nogawanogawa:20180520141702j:plain
ターゲットの空間の位置を表示

配置方法

オブジェクトの配置方法には大きく2種類あります。

自動配置

カメラから見えている範囲に応じてオブジェクトを表示していく方法です。

f:id:nogawanogawa:20180527101354j:plain
視野内に自動配置

手動配置

手動配置の一つに、画面上に表示されたアノテーションをタップすることでオブジェクトを表示する方法が考えられます。

f:id:nogawanogawa:20180527101422j:plain
インジケータによって配置制御

また、画面にギャラリーを表示しそこからドラッグアンドドロップでオブジェクトを配置する方法もあります。

f:id:nogawanogawa:20180527101500j:plain
ギャラリーからドラッグして配置

Interacting with virtual assets

Selection

ユーザーのユーザビリティを向上させるため、バーチャルなオブジェクトを操作するためのオブジェクトの選択は、ユーザーに対して視覚的にフィードバックすることが効果的です。

f:id:nogawanogawa:20180520210919j:plain
選択されているものを明確にする

物体の移動

物を動かす際には、単一の平面でも複数の平面でも指一本で移動できることが理想です。スケールは維持しつつ、移動する際には床面の位置を示すことが有効です。

f:id:nogawanogawa:20180520213554j:plain
同じ平面上にも別の平面上にもオブジェクトを移動

一方で、物体の移動はユーザーの認識の中にとどめておくことも重要で、移動できる領域を制限する必要があります。

f:id:nogawanogawa:20180520212847j:plain
床面が認識できない範囲には移動できない制限が必要

回転

ユーザーの位置に応じて常に同じ方向を向けることはユーザーにとって不都合なことがあります。 基本的にはオブジェクトの向きは空間に固定し、画面から手動でオブジェクトの向きを変更できるようにしましょう。

f:id:nogawanogawa:20180526084042j:plain
オブジェクトは手動で回転

拡大・縮小

拡大・縮小も回転と同様に画面から操作できるようにしましょう。 その際に、画面からはみ出るほど大きく、あるいは見えなくなるほど小さくならないように、大きさに制限を設けることが重要です。

f:id:nogawanogawa:20180526084119j:plain
拡大

画面からはみ出るほどの巨大なオブジェクトは、ユーザーに驚きや楽しさを与えます。 そのような体験を設計する際には、巨大なオブジェクトの配置が有効です。

Gestures and proximity

バーチャルオブジェクトの中には小さなものもあり、画面から操作することが難しいこともあります。 バーチャルオブジェクトの周辺を操作した場合でも、バーチャルオブジェクトに対する操作だと認識するようにしましょう。

f:id:nogawanogawa:20180527103143j:plain
周辺も操作範囲

Designing the experience

UIの要素

UIとして、様々な機能を実装することが求められます。

追加

オブジェクトを拡張現実内に追加することが必要になります。 その際に、ギャラリーを画面に表示することがあるかもしれません。 ギャラリーは画面の端に配置し、なるべく画面を拡張現実の空間として使えるようにしましょう。

f:id:nogawanogawa:20180527103221j:plain
ギャラリーは端を使う

削除

生成したオブジェクトを削除する機能が必要になります。

f:id:nogawanogawa:20180527103252j:plain
オブジェクトの消去

リセット

一旦配置したオブジェクトをすべて初期状態に戻すことも必要になります。

許可

バイスの特定の機能にアクセスすることの許可をするためのダイアログメッセージを表示する必要があります。

エラー

不具合が起きたときに、ユーザにその旨を通知する機能が必要になります。

Experience

体験を向上させるためにはいくつか重要なポイントがあります。

サウンドエフェクト

ユーザーのアクションに対してアプリ側からのフィードバックとしてサウンドエフェクトは非常に重要になります。

f:id:nogawanogawa:20180526095243j:plain
サウンドエフェクト

オフスクリーンへの配慮

スクリーンの外にオブジェクトが出ていってしまった際にユーザーに認知させることが重要になります。

f:id:nogawanogawa:20180525212759j:plain
スクリーンの外に対してアノテーションをつける

Realism

奥行き

影や視点、サイズの大きさなどを使用して奥行きをオブジェクトに反映させることが重要です。

配置したオブジェクトに対して適切に影をつけることは没入感に繋がります。

振る舞い

オブジェクトには実世界の物理法則等に則った動きを定義することが重要です。