AbemaTVのマイクロインタラクション

前回はEvernoteのマイクロインタラクションを観察しました。今回はAbemaTV（ver. 2.14.0）のマイクロインタラクションを観察し、それらがユーザーに与える効果を考察します。

----

左右スワイプでのザッピングUI
AbemaTVの視聴体験の中心となるマイクロインタラクション。
左右のスワイプで画像や動画が切り替わるUIはありふれているが、ライブ動画の即時再生と結びつくことでテレビのザッピングに近い視聴体験が実現されている。画面下部のチャンネルロゴも連動して動くため、チャンネル切り替えであることが伝わる。
※AbemaTVでは動画のスクリーンキャプチャが防止されているため、下図では動画が静止画に置き換わっています。

横：チャンネル移動、縦：時間帯のスクロール
横移動でチャンネルが切り替わるのに対して、縦スクロールでは時間帯の変化が表現される。動画プレイヤー画面で縦スクロールすると、時間帯毎の番組が表示される。番組表画面でも、横：チャンネル、縦：時間帯の関係となっている。

ダブルタップで動画のフルスクリーン表示
動画プレイヤー内をダブルタップするとLandscape（横位置）でフルスクリーン表示。上級者向けインタラクションのため右上の最大化ボタンから代替操作が可能。

Landscape（横位置）でのビデオプレイヤー内の関連シリーズ表示
ビデオを表示している際、Portrait（縦位置）では、再生中の動画の情報がプレイヤー下部にスクロールで確認できる。Landscape（横位置）では画面を上方向にスワイプすると、関連シリーズの一覧のみを表示する。動画再生をなるべく邪魔せずに、優先度の高い情報のみをユーザーに提示するマイクロインタラクション。

タイムラインのフェードアウト
動画プレイヤー下部にスクロール表示されるタイムラインは、操作を停止してしばらくすると少し暗くなる。ユーザーが動画に集中できるように、必要の無いときは他要素の存在感が薄まる。

適切なタイミングでアプリの通知設定を促す
アプリの通知設定が無効になっている状態で放送予定の番組の通知ボタンを押すと、アプリの通知設定の許可を促すダイアログが表示され、iOSの設定画面に移動できる。ユーザーにとって適切なタイミングで設定の変更を促すマイクロインタラクション。

マイビデオ登録のフィードバック
ビデオ再生中に「マイビデオ」ボタンを押すと、ボタンアイコンがチェックマークに変わると同時にSuccessの触覚フィードバック（※１）。
同時に画面下部に一定時間Snackbar（※２）を表示する。Snackbarからはマイビデオ一覧へ遷移できる。ユーザー操作を妨げずにアクション完了を伝え、関連する導線を表示するマイクロインタラクション。

※１：Haptic Feedback - iOS - Human Interface Guidelines
※２：Snackbars - Material Design

アニメーションを活用した簡潔なウォークスルー
多くのアプリでは機能を説明するために起動直後にウォークスルーが表示されるが、Abema TVのウォークスルーはとても簡潔。アニメーションを用いて左右のチャンネル切り替えとマイビデオに追加の操作のみが説明され、最後に通知の許可を促す。細かな機能の説明をしてもユーザーは一字一句読んだりしないし、使い始めてみないとわからないことが多いので、本当に重要な点を少ない言葉で伝えるのが効果的。

インストール後の２回目の起動で表示されるチュートリアル
アプリを２回目に起動すると、ビデオ機能への切り替えボタンの説明が表示される。操作の説明を促すチュートリアルやツールチップは、特定の機能の理解を深めたり利用率を高めたい場合に有用だが、それによってユーザーの操作が妨げられてしまう懸念もある。チュートリアルを表示する際は、起動回数やその機能を使用したことがないユーザーに向けてなど、条件を細かく指定して表示することを検討してみてもよいかもしれない。

----

AbemaTVは「インターネットテレビ局」と謳っているだけあって、ストリーミング動画の視聴や切り替えに関わるマイクロインタラクションに工夫が感じられました。
また左右スワイプでのチャンネル切り替えで実現されるザッピングのように、一つのマイクロインタラクションがサービス全体の個性に繋がっている点が特徴的で面白いと感じました。

----

Twitterでもマイクロインタラクションについて発信しています。マイクロインタラクションを活用したUIデザインやUI改善などお気軽にご相談ください。

Twitter (@shingo2000)