こんにちは。
AWAでプロダクトマネージャー兼インタラクティブアニメーターをやっている冨樫(@kokiiiviii)です。
今回はAWAのインタラクションについて書いていこうと思います。
いきなりですが、実はこのテーマは以前個人ブログで綴ったことがあります。
→AWAインタラクションの主軸は『ギャップレス』
はい、そうなんです。
AWAのインタラクションを創るうえで一つのテーマとして置いていたのは
ギャップレス
です。
個人ブログの内容とかぶりますが、ざっくりまとめます。
ジェスチャーのスピードに合わせてアニメーションのスピードを変えるようにしています。
ではどのようにこのインタラクションを開発していったかというと、
AWAではストア版アプリとは別に、インタラクション専用のアプリを並行で作成し、確認が取れたものをストア版に徐々にマージしていくような形をとっていました。
その専用アプリがこの
AWA-IxD です。
例えば、HOME画面での横スクロール時に、
通常のデザインのまま実装すると左のようにノッペリとした画面になりますが、そこにパララックスエフェクトを加えることで奥行きを持たせ、より"背景"であることを直感的に理解する手助けをします。
この「パララックスエフェクトを加える」という部分をストア版のアプリよりも先行して実装し、確認するためのアプリがAWA-IxDです。
また、AWA-IxDは完全にインタラクションに特化させているため、サービスのシステム上の制約がほとんどない（一番良い）状態のインタラクションをまとめることが可能です。
そのためストア版にマージする際に、より洗練させたものも、取り入れるのが困難だったものも多数あります。
実はiOS版のプレイリストのトランジションはリリース直前までAndroid版のようにサムネイルを起点に広がって出てくるようなアニメーションでした。
しかし、iOSではエッジスワイプ（画面左端からスワイプ）すると前の画面にバックできるというのが、標準的な動作となっています。
もちろんこのアニメーションでもエッジスワイプすれば前画面に戻れるようにインタラクティブなトランジションにしていましたが、
より直感的にエッジスワイプで戻れることを伝えるため、リリース直前に現在ストア版に出ているようなiOSに最適化したアニメーションに変わりました。
AWAのHOME5画面(TRENDING / DISCOVERY / GENRE / MOOD / RADIO)は
それぞれ下にスクロールすることができます。
iPhone6などの画面サイズであれば、下部コンテンツがチラ見しているためすぐに気付けますが、iPhone5のような画面サイズだとチラ見していないため、場合によっては気付けません。
また、この画面での主役はコンテンツであり、タイトル部分は一度わかってしまえばそこまで重要な要素ではありません。
そこでAWA-IxDではこの5画面それぞれで少しでも触れると、触れたときの指の速さを計測し、その慣性のようにコンテンツのトップが画面の一番上に自動的にFIXするようなインタラクションを加えていました。
しかし、このインタラクションの実装には複雑な制御と意図しない動作をさせる可能性などのデメリットの側面があったため、ストア版へのマージは控えました。
これは前述の連続的な動作の中にギャップを作らないための一つの方法です。
AWAではスクロールするともともと画面上に出ていなかったナビゲーションバーがフェードインしてくるマテリアルデザインに近い画面が多数存在します。
ただし、ナビゲーションバーには基本的にタイトルは文字のみで表示するため、突然フェードインしてくると何を表しているページかここだけでは理解しにくい側面があります。
そこで、元から画面上に出ていたタイトルラベルを継続利用して、ナビゲーションバーに自然にFIXさせることによって、その画面の意味を無意識的に伝えられるようにしていました。
例えばプロフィール画面の場合は、プロフィール画像の上にあるユーザー名のラベルがそのままナビゲーションバーのタイトルへと移るため、ナビゲーションのタイトルはユーザー名であり、この画面はユーザーのページであることが直観的に理解できます。
しかし、各画面に存在するナビゲーションバーに統一性を持たせることと、UIの階層構造を複雑にしないために、このインタラクションの実装は控えました。
AWA-IxDには今後導入予定の新機能も入っているため、
ここでは一部のインタラクションしか取り上げられませんでしたが、
AWAのすべてのアニメーションにおいて意識していることは
Meaningful Animations
意味のあるアニメーション
にすることです。
Google Material DesignのガイドラインにはMeaningful Transitionsというものがありますが、AWAではトランジションだけでなく、すべてのアニメーションに対して意味のあるものになるようにしています。
インタラクションはその意味がそぐわないとユーザーの混乱を招く真逆の効果を与えてしまうものです。
これからさらに改善を重ねていきますが、
インタラクションにおいては、なんとなく気持ちいいだけのアニメーションではなく、ユーザーの操作を手助けする意味のあるアニメーションになるように、まだまだ磨き上げていきたいと思います。
Thank you for your time.
AWAでプロダクトマネージャー兼インタラクティブアニメーターをやっている冨樫(@kokiiiviii)です。
今回はAWAのインタラクションについて書いていこうと思います。
AWAインタラクションの軸
いきなりですが、実はこのテーマは以前個人ブログで綴ったことがあります。
→AWAインタラクションの主軸は『ギャップレス』
はい、そうなんです。
AWAのインタラクションを創るうえで一つのテーマとして置いていたのは
ギャップレス
です。
個人ブログの内容とかぶりますが、ざっくりまとめます。
◆ 現実世界の動きとアニメーションの間にギャップを作らない
現実世界では「後ろの模様の動きが遅いから、あれは遠くにあるものだ」なんて意識して理解してる人はいないと思います。
脳が無意識に理解している部分です。
ということは、アプリ内の動きを現実で目にしている動きに近づけるだけで、ページの構造を直感的に理解してもらうことができます。
パララックスやシャドウはまさにここに直結していて、これを正確に使うことは直感的なUIにするための最も簡単な方法と言ってもいいかもしれません。
AWAでもパララックス、シャドウを正確にアニメーションさせることに気をつけました。
またスクロールするにつれて背景にブラーをかける処理（Lively Blurと呼んでいます）も
近くにあるものに視点を合わせると、他の部分はボヤけるという現実世界の現象に合わせて、
プレイリストを見やすくするとともに視点の移り変わりをスムーズにしています。
◆ ユーザーの連続的な動作とアニメーションの間にギャップを作らない
"継続性"を保つことはアプリの使いやすさに直結する大きなポイントの一つだと思っています。
ユーザーが連続的な動作をするときには、無意識に思考の連鎖が起きています。
この思考の連鎖をなるべく保つようにすることで、スムーズに使えるアプリになっていきます。
この思考の連鎖をなるべく保つようにすることで、スムーズに使えるアプリになっていきます。
これをただ切り替わるアニメーションにしてしまうと、
ユーザーの連続的な動作の間に、今までの行動とそれに関わる要素を脳が再構築する時間がわずかに生まれ、直感的でスムーズな操作がしづらくなってしまいます。
AWAではなるべく継続性を保てるようなトランジションになるように気をつけています。
◆ ユーザーの操作とアニメーションの間にギャップを作らない
ジェスチャーのスピードに合わせてアニメーションのスピードを変えるようにしています。
実はiOSの標準のアニメーションにも連動性は低く条件付きですが、
ジェスチャーの速さによってアニメーション速度を変える処理がわずかに入っています。
しかしながら、この連動性が低いとジェスチャーとアニメーションにギャップが生まれ、ユーザーの脳はそのギャップに気が向いてしまい、それまでの行動を忘れてしまいやすくなります。"継続性"を失うポイントとなります。
しかしながら、この連動性が低いとジェスチャーとアニメーションにギャップが生まれ、ユーザーの脳はそのギャップに気が向いてしまい、それまでの行動を忘れてしまいやすくなります。"継続性"を失うポイントとなります。
このギャップを無くすために、AWAのカスタムトランジションのほぼすべてにジェスチャーのスピードを考慮するための仕組みを入れました。
インタラクション専用アプリの開発
ではどのようにこのインタラクションを開発していったかというと、
AWAではストア版アプリとは別に、インタラクション専用のアプリを並行で作成し、確認が取れたものをストア版に徐々にマージしていくような形をとっていました。
その専用アプリがこの
AWA-IxD です。
例えば、HOME画面での横スクロール時に、
通常のデザインのまま実装すると左のようにノッペリとした画面になりますが、そこにパララックスエフェクトを加えることで奥行きを持たせ、より"背景"であることを直感的に理解する手助けをします。
左(または上)：パララックスなし 右(または下)：パララックスあり
この「パララックスエフェクトを加える」という部分をストア版のアプリよりも先行して実装し、確認するためのアプリがAWA-IxDです。
また、AWA-IxDは完全にインタラクションに特化させているため、サービスのシステム上の制約がほとんどない（一番良い）状態のインタラクションをまとめることが可能です。
そのためストア版にマージする際に、より洗練させたものも、取り入れるのが困難だったものも多数あります。
■ OSに最適化したトランジション
左(または上)：AWA-IxD 右(または下)：AWA (ストア版)
実はiOS版のプレイリストのトランジションはリリース直前までAndroid版のようにサムネイルを起点に広がって出てくるようなアニメーションでした。
しかし、iOSではエッジスワイプ（画面左端からスワイプ）すると前の画面にバックできるというのが、標準的な動作となっています。
もちろんこのアニメーションでもエッジスワイプすれば前画面に戻れるようにインタラクティブなトランジションにしていましたが、
より直感的にエッジスワイプで戻れることを伝えるため、リリース直前に現在ストア版に出ているようなiOSに最適化したアニメーションに変わりました。
■ 慣性を利用した下部コンテンツへのアテンション
AWAのHOME5画面(TRENDING / DISCOVERY / GENRE / MOOD / RADIO)は
それぞれ下にスクロールすることができます。
iPhone6などの画面サイズであれば、下部コンテンツがチラ見しているためすぐに気付けますが、iPhone5のような画面サイズだとチラ見していないため、場合によっては気付けません。
また、この画面での主役はコンテンツであり、タイトル部分は一度わかってしまえばそこまで重要な要素ではありません。
そこでAWA-IxDではこの5画面それぞれで少しでも触れると、触れたときの指の速さを計測し、その慣性のようにコンテンツのトップが画面の一番上に自動的にFIXするようなインタラクションを加えていました。
しかし、このインタラクションの実装には複雑な制御と意図しない動作をさせる可能性などのデメリットの側面があったため、ストア版へのマージは控えました。
■ タイトルラベルのナビゲーションバーへのFIX
これは前述の連続的な動作の中にギャップを作らないための一つの方法です。
AWAではスクロールするともともと画面上に出ていなかったナビゲーションバーがフェードインしてくるマテリアルデザインに近い画面が多数存在します。
ただし、ナビゲーションバーには基本的にタイトルは文字のみで表示するため、突然フェードインしてくると何を表しているページかここだけでは理解しにくい側面があります。
そこで、元から画面上に出ていたタイトルラベルを継続利用して、ナビゲーションバーに自然にFIXさせることによって、その画面の意味を無意識的に伝えられるようにしていました。
例えばプロフィール画面の場合は、プロフィール画像の上にあるユーザー名のラベルがそのままナビゲーションバーのタイトルへと移るため、ナビゲーションのタイトルはユーザー名であり、この画面はユーザーのページであることが直観的に理解できます。
しかし、各画面に存在するナビゲーションバーに統一性を持たせることと、UIの階層構造を複雑にしないために、このインタラクションの実装は控えました。
Meaningful Animations
AWA-IxDには今後導入予定の新機能も入っているため、
ここでは一部のインタラクションしか取り上げられませんでしたが、
AWAのすべてのアニメーションにおいて意識していることは
Meaningful Animations
意味のあるアニメーション
にすることです。
Google Material DesignのガイドラインにはMeaningful Transitionsというものがありますが、AWAではトランジションだけでなく、すべてのアニメーションに対して意味のあるものになるようにしています。
インタラクションはその意味がそぐわないとユーザーの混乱を招く真逆の効果を与えてしまうものです。
一つ一つの要素の役割、それらを全体で見た時の役割、サービスの特性、
そのときのユーザーのアクションの意図を考えてアニメーションを付けていくことが
直感的でスムーズな使用を手助けするインタラクションに繋がります。
AWAではこれらのチェックをチーム全員で行い、納得するまで毎晩のように議論を重ねることで一貫性のあるMeaningfulなインタラクションになるように開発を続けています。
AWAではこれらのチェックをチーム全員で行い、納得するまで毎晩のように議論を重ねることで一貫性のあるMeaningfulなインタラクションになるように開発を続けています。
これからさらに改善を重ねていきますが、
インタラクションにおいては、なんとなく気持ちいいだけのアニメーションではなく、ユーザーの操作を手助けする意味のあるアニメーションになるように、まだまだ磨き上げていきたいと思います。
Thank you for your time.