WWDC「Principles of spatial design」空間デザイン原則
日本語になる前で翻訳に不安が多いですが、内容をメモ。普段はWebAR領域かつ勉強中の人です！
感想
- Dimensional 次元の話以降が感動した
- そこにあるように見せるために（現実との融合には）光と影が重要だとか、ステータス変化を連続したアニメーションでユーザーに伝えるべきだとか
- スマートフォンサイズにおけるWebARにおいては完全に一致しないだろうポイントも個人的にはある
- キーモーメント！！
- 納得が強かった
- ここで差別化させていくことが単純にワクワクする
- D2Cのミスティークと同じで、偏愛だったりこだわりが心に残るものになるんだろうな
Principles of spatial design
空間デザインの原則は以下の５つ。
- Apps Familiar（既存アプリに親しみ）
- Human-Centered（人間中心）
- Dimensional（次元）
- Immersive（没入）
- Authentic（本物）
Apps Familiar
- サイドバー、検索バー、タブなど見慣れたものを使うよ
- Windows
- 明るいモードでもダークモードでもどちらでも見えやすくなるシステム
- 閉じたり拡大縮小したりできる
- 顔を動かしてもそれに追従するからいつでも使いやすい状態だよ
- Sizing
- コンテンツに合わせて最適なウィンドウサイズを選ぼう
- タブバーやツールバーは上のレイヤーにある→いつでも操作できるように
- Points
- ウィンドウサイズが変わってもスケールを維持させよう
- 60pxのボックスに44pxのボタン、16pxのギャップ
Human-Centered
- 優れたUIはいつも人間中心に設計されているけど、新しい意味があるよ
- Field of view
- 真ん中に大事なコンテンツを表示する
- Safariでタブを開いた時にウィンドウが広がる
- 没入感のために全体に要素を広げることができるけど、大事なコンテンツは常にfield of viewにおいておくことを覚えておこう
- 全てを読んだり理解することは難しいことも覚えておく
- Ergonomics
- 人間工学
- どの次元でもオブジェクトを快適に設置しよう
- 腕の動きより少し大きい余白が体の周りにあり、インタラクトができる距離を維持
- 没入体験以外では後や極端に高い場所低い場所にコンテンツを配置しないように
- 頭に合わせてウィンドウも動いた時
- 動けないと感じ、方向感覚を見失いやすい
- 場所に固定させる
- 自由を感じて周りを自然と見ることができる
- Movement
- 最小限の動きをお奨めするよ
- みんなにとって使いやすいアプリになる
- コアなUX体験になる場合でない限り動かす必要のないアプリにしよう
- 最小限の動きをお奨めするよ
Dimensional
- Space
- 良いアプリは人の周りの空間にメリットを与えるよ
- リアルは有限だけど無限の空間を作り出せる
- どんな量の空間でもアプリが良い働きをするようにデザインしよう
- ユーザーがどんな空間でそれを使うかわからないからね
- 物理的な利用可能空間にとらわれてアプリを構築しないように気をつけてね
- ウィンドウをユーザーが使いやすいように移動した
- （移動時はopacityがかかってる）
- ウィンドウについては、空間にどうfitするかはシステム側で調節するから心配しなくて大丈夫
- 調光はシンプルだけど空間の最大化に強い影響を持っている
- 後ろを暗くすることで映画などのコンテンツに集中できる
- 自然に周りを確認することができつつコンテンツに集中できるバランス
Depth
Scale
- 小さなものは個人的で軽いものに感じる
- スケールが大きいと感動につながったりする
- リアルサイズのものが好ましい場合もある
- 靴とか
- 感じ方が変わるよ
Immersive
- Immersion spectrum
- 没入する広がり、分布
- アプリはshared spaceに他のアプリと並んで表示させることができるし、Full spaceに表示させることもできる（他のアプリを隠して）
- プレゼンテーションの時のdepthとかリハーサルの時にステージを表示させたり（すごい！13:55）
- full space momentは誰かを新しい場所に連れていかず、今いる場所に存在させることもできる
- キーボードやコントローラーを使うことを可能にできる
- 体験が物理的な周囲に関係することの場合は柔軟なデザインを維持することを覚えておく
- みんな空間が異なるからね
- Essential tips
- 不可欠なtips
- 多すぎることが起こると混乱してしまう
- Guide people’s focus
- ここは8th wallのUX体験と同じことを言っているね
- マインドフルネスのアプリの例
- スムーズで予測可能な動きをデザインしよう
- 異なるステータスへの連続的な遷移を作る
- 快適に何が起こっているのかを理解できる
- Blend thoughtfully with reality
- 現実との思慮深い融合も大事
- Full spaceのアプリの場合は部屋の形を利用しよう
- 柔らかい輪郭を使用してスムーズな部屋との統合を作り出す
- 突然の遷移を避けながらコンテンツに集中し続けることができる
- Make things feel alive
- 感動体験は物事が生きているように作成することで生み出せる
- 微細なアニメーションはライブ映像のような風景を作り出せる
- Create atmosphere with sound
- 音で雰囲気を作る
- 空間に音を設置できる！体験してみたいな〜
- 周りに音源を置くと立体感が出てくるっぽい
- Do more with less
- Comfort
- 快適な体験を提供し続ける
- 大きくて早い動きを避けましょう
- 気を散らせてしまう
- Fade out content in motion
- フェードアウトが安定していることを感じてもらえるアニメーションとAppleは考えていて使用をお勧めしている
- 短くわかりやすい文言でユーザーをガイドする
- Exit View ⇆
- 日本語だとビューから出る…？
- 快適な体験を提供し続ける
Authentic
2023.03開催の「8Talks: UX for WebAR」をざっくりまとめる
WebARでのUXポイント10こまとめ
- 安全についてユーザーに知らせよう
- ユーザーにどう動いてほしいかをシンプルに表示しよう
- 探索させるような部屋を作ろう（ARはでかく作れ！）
- 視覚的なマーカーを使おう（重要なものに集中させたり、モデルの位置に矢印を出したりしよう）
- スケールを忘れないように、ARを作る前の計画でまずはスケールを考えるべき（8th Wallは良いサイズで出せるよ）
- ユーザーの徘徊ルートもデザインしよう（行って欲しくない場所にきたらぼかして移動を促したりするべき）
- オブジェクトを操作させよう（タップやドラッグなど一般的な操作ジェスチャーでオブジェクトを操作できると良い）
- オブジェクトのタップエリアを広げよう
- 視覚的な合図をいろいろなものに出せ！！（ツールチップとか）
- UIはシンプルにしよう！（画面に貼り付けるものは少なく、モーダルなどポップアップはARの内側に出そう）
感想
- 画面前面に出すモーダルについては、場面を吟味して表示させる必要がありそう
- 体験の中で出すようなものはAR内で、体験前の安全のお知らせなどは画面前面でもいいのかも
- ARは大きく作ろうは強く同意
- もう少し体験のフォーマット評価などの話も聞いてみたいかも
- 質疑応答は観れていないのでそちらで補足がある可能性はある
- ツールチップや線などでの動作の合図を出す部分の見た目はゲームUIに近いイメージなので個人的に頑張らないとなと思う
- オブジェクトのタップエリアを自分でつけるというよりは、自動でオンオフできる仕組みがあるとGUIでARを作る際は便利かも
- コンテンツによってはタップエリアが広いと重なってしまったりするかもしれない
- 余白の8,4の倍数のようにタップエリアのオフセット幅の理想も知りたい...
- 操作ジェスチャー大事そう
- コンテンツにもよるが、動くARが出てきたら自然とタップしようとする人も多い
- タップできない時のFBやドラッグなどで移動できることの伝え方が上手なものも体験してみたい
注意書き
three.jsやA-frameの技術の知識が0なので、動画の中で言及されていた箇所はまるまる飛ばしています🙏🏼
翻訳のニュアンスが異なる場合もありますので、一次情報である冒頭に添付している動画をご覧ください〜！
