今回は、コードの話ではなく、僕がこの１年間のARKit開発で培ったARKitとマイクロインタラクションの知見についての記事を書きたいと思います。
マイクロインタラクションとは
ユーザーのアクションに対するフィードバックやステータスの変化を正しく伝えるための細かなデザインのこと
https://webdesign-trends.net/entry/7583
僕も前にこの本を読みました。
オライリーのマイクロインタラクションを読んでいく。https://t.co/sMXyZcLoSg
— K-BOY@ARエンジニア (@kboy_silvergym) 2018年9月4日
Web上だとマイクロインタラクションを考える上で重要な４つの要素 | UX MILKがよくまとまっています。
マイクロインタラクションは、前述の本で、「トリガー」、「ルール」、「フィードバック」、「ループ＆モード」の４つの要素で表現されています。ARアプリはこの中でも特に「フィードバック」が大事だと思います。なぜなら大抵の人にとってARは新しく、何が起こっているか分かりにくいからです。
ユーザーの動作に対して適切な「フィードバック」を与えて、何が現在起こっているのかを伝えるためにマイクロインタラクションが必要です。
ARKitと相性の良いフィードバック
私がこの１年開発する中でARKitと相性が良いと思ったフィードバックについて紹介します。
- 触覚フィードバック
- バイブレーション
- 音声
- カメラレンズとしてのスマホ画面の描画
これらは全てペチャバトに含まれています。一つずつ説明していきましょう。
触覚フィードバック
iOSでは、iOS10からUIFeedbackGeneratorが使えます。コリっとiPhoneから反応が帰ってくるやつです。デバイスはiPhone6sから対応してます。(ARKitと同じ)
- UIImpactFeedbackGenerator
- UINotificationFeedbackGenerator
- UISelectionFeedbackGenerator
の３種類があってそれぞれ使い所が異なります。ARKitで使うのは前者の２つが多いでしょう。
let feedback = UIImpactFeedbackGenerator()
feedback.prepare() // viewDidLoadとかで事前に行う
// 必要なところで
feedback.impactOccurred()
このUIFeedbackGeneratorを使うタイミングですが、ペチャバトの場合は
- 画像マーカーを読み取った時
- 球を当てた時
に触覚フィードバックをいれています。
画像マーカーについては、画像を読み取るときはスマホを顔から遠ざけるのもあって、触覚で伝えるのが一番最適だなと思ってます。
球を当てた時については、ペチャバトは身体を動かしながらプレイするので、球当たったかどうかは視覚的には非常に分かりにくいんですが、触覚フィードバックを入れることで当たったことが少し伝わりやすくなると思います。(それでも夢中になると気づかないけど)
バイブレーション
先ほどのUIFeedbackGeneratorとは別で、どの端末でもできるのがバイブレーションです。
乱用はできませんが、ここぞという時に使うと効果的だと思います。
AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)
ペチャバトでは、
- バトルのスタート
- 球を当てられた時
のみバイブレーションを使ってフィードバックを与えています。ユーザーの端末がマナーモードであろうが確実にフィードバックが強く与えられるので、気づいてほしいイベントに対して使うのはかなり効果的かなと思います。
音声
音声の再生の実装はシンプルです。
import AVFoundation
var player: AVAudioPlayer?
func play(){
guard let sound = NSDataAsset(name: "music") else {
return
}
player = try? AVAudioPlayer(data: sound.data)
player?.play()
}
あとは、タイミングですが、ペチャバトの場合は
- 球を当てた時
- 球を当てられた時
にしっかり効果音をいれています。
触覚と同様に、当たったかどうかは視覚的に分かりにくいですが、音声と触覚を合わせて伝わりやすくなればと思い実装しています。また、ゲームはやはり音による没入感がでかいですからね。
ただ音声の欠点としては、マナーモードだと出せないことです。その意味で触覚とバイブレーションの方が確実かなと思います。
カメラレンズとしてのスマホ画面の描画
最後に、スマホARならではではないかと思うのがこのフィードバックです。
自分に対して当たってきた球をスマホのスクリーン上にはじけさせるような描画をしています。
実際には3D空間上で、的のNodeと球のNodeに当たり判定が発生しただけですが、ユーザーから見れば、球はスマホに向かって飛んできているわけで、そこに当たって弾けたらスマホのレンズに広がるというのは没入感を与えるフィードバックになっているのではないかなと思います。
まとめ
- マイクロインタラクションは「トリガー」、「ルール」、「フィードバック」、「ループ＆モード」の４つの要素で表現される。
- ARKitにおける「フィードバック」に着目した。
- 触覚、バイブレーション、音声、カメラスクリーンという４つのフィードバックの知見を共有した。