業務システムにおけるインタラクションとアニメーション

【対象】
インタラクションデザインの概要を知りたいデザイナーやフロントエンドエンジニア
アニメーションの効果と実装方法を知りたいデザイナーやフロントエンドエンジニア
【読んだらどうなる】
インタラクションの意味とメリットを知ることができる
アニメーションの効果的な使い方と実装方法を知ることができる

Transcript

1. 業務システムにおける インタラクションとアニメーション 2020/04/30
2. 目次 1. インタラクションとアニメーション 2. マクロインタラクションと マイクロインタラクション 3. 業務システムにおけるインタラクション 4. マテリアルデザインに見る 機能的アニメーション 5. アニメーションの実装方法 6. アニメーションライブラリとUIライブラリ
3. 3 1. インタラクションと アニメーション
4. 4 インタラクション ≠ アニメーション インタラクションとは ✓ インタラクション（interaction）は日本 語で「相互作用」と訳される ✓ IT用語では「ユーザーが特定の操作を 行ったとき、システムがその操作に応じ た反応を返すこと」という意味で使われ る ✓ インタラクションデザインとは、「機器 やソフトウェアなどが使われる際の、 ユーザー側の操作やシステム側の反応な どをデザインすること」 アニメーションとは ✓ ある特定の時間をかけて、オブジェクト を変化させること ✓ インタラクションデザインの中の効果的 な手法として利用される ✓ インタラクションにアニメーションは必 須ではない
5. 5 UXとインタラクションデザイン UXはユーザーのソフトウェアの操作を含めた、さらに広範な範囲のユーザー体験を指す が、インタラクションデザインはその中の、ユーザーがソフトウェアに触れる部分に限定 した体験をデザインすること インタラクションデザインの ユーザー側のメリット ✓ 簡単かつ正確に操作できる ✓ 「その操作」をすることで何が起きるのかを 予測できる ✓ 誤操作を防いでくれる インタラクションデザインの 企業側のメリット ✓ ユーザーに企業側の意図に沿った 行動をしてもらう ✓ 不具合やシステムエラーを防ぎやすくなる ✓ 売上や集客につながることが期待できる 参考：インタラクションデザインとは何か？メリットや事例をわかりやすく解説！（パンタグラフブログ：https://pantograph.co.jp/blog/uiux/interaction_design.html）
6. 6 インタラクションデザイン インタラクションデザインの原則 • 説明がなくても操作できること (アフォーダンス、シグニファイア) • 操作がしやすいこと • レスポンスにかかる時間が適切であること • 定型パターンを活用すること インタラクションデザインの要素 • ビジュアル • モーショングラフィックス（アニメーション） • サウンド • 時間
7. 7 インタラクションデザイン インタラクションデザインの分類 • 人間とマシンのコミュニケーション（Human/machine communication） • 操作と操作への応答（Action/Reaction） • 状態（State） • ワークフロー（Workflow） • 不具合（Error/Mulfunction） 参考：Introducing Interaction Design（Bob Baxley：http://boxesandarrows.com/introducing-interaction-design/）
8. 8 2. マクロインタラクションと マイクロインタラクション
9. 9 マクロインタラクションとは ✓ ページレベル ✓ スクリーン間のトランジションをデザインするのが主な内容 マクロインタラクションの要素 トランジション開始のきっかけが何かによってどの効果を使うか選ぶ また、デバイスの種類によってもその効果がどのような意味を持つかが変わってくる • きっかけ クリック、スワイプ • 効果 ディゾルブ、ワイプ、スライド • デバイス PC、モバイル 参考：UIデザインへのアプローチ Part 2: インタラクションとアニメーション（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo （https://blogs.adobe.com/japan/web-fundamentals-ui-design-part-2-interactions-animations/）
10. 10 マイクロインタラクションとは ✓ オブジェクトレベル（製品の最小単位のインタラクション） ✓ ユーザーのアクションに対するフィードバックや、 現在のステータスを正しく伝えるための、細かなデザイン マイクロインタラクションの目的 • アクションに対するフィードバックを伝える • タスクの進行状況を伝える • 現在のステータスを伝える • 新着情報を伝える • エラーの発生を伝える
11. 11 3. 業務システムにおける インタラクション
12. 12 業務システムに求められるUX 業務システムにはゲームのような「楽しさ」や「心地よさ」はそれほど求められない 作業を間違えずに効率的に進めるための「安心感」や「スムーズさ」が求められる 「楽しい」「心地よい」より 「安心」「スムーズ」
13. 13 業務システムに求められるインタラクション 1. 最初の状態と現在の状態を的確に伝える ✓ 現在の状態とユーザーの入力よって起こった状態変化を正しく伝える 2. 入力のフィードバックをわかりやすく、ストレスのないようにする ✓ 入力に対して離れた場所が一瞬で変化すると見逃しやすい ✓ 入力に対してのフィードバックに時間がかかる場合、何らかの反応を返さないと操作ミスと感じられてし まうなど 3. エラーの無効な入力を適切なタイミングで的確に伝える ✓ システムは入力が正しくないことを何らかの形で伝えるが、状態は変わらない（※ボタンのディセーブルなど） ✓ 最も近い「正しい入力」などに補正される（※数値入力が最大値を超えたら、最大値に補正されるなど） ✓ ユーザーが自分で入力を「正しい状態」になおすまでエラーが続く（※バリデーションエラー表示など）
14. 14 業務システムに求められるインタラクション 4. ユーザーに次のアクションを知らせ、誘導する ✓ ユーザーにスムーズに作業を進めさせるため、 次のアクションを探したり、迷ったりせずに済むようにする • 次に作業すべき画面に遷移する • 次に押すべきボタンがアニメーションするなど 5. 直感的である ✓ UIや画面の操作が説明しなくてもわかる ✓ 余計な解釈や翻訳が必要ない 6. ユーザーに学習させる ✓ インタラクションによる適切な誘導により、ユーザーに操作方法を学習させる
15. 15 4. マテリアルデザインにみる 機能的アニメーション
16. 16 機能的アニメーション 参考：Functional Animation In UX Design: What Makes a Good Transition? （http://babich.biz/functional-animation-in-ux-design-what-makes-a-good-transition/） レスポンスが良い UIがユーザーの操作に正確に 反応していることが必要 要素同士が 関連付けられている UI上で新しく生成される要素 と、その生成のきっかけと なったUIを関連付ける 動きが自然である ユーザーにとって予測不可能 なトランジションは避ける 意図的である 適切なタイミングで、適切な 場所にユーザーを導く 動作が素早い 不必要なタイムラグやアニ メーション全体を長くする不 必要な動きは避ける 明確でシンプルである 複数の要素が異なる方向に動 く、画面を横切るなど混乱を 招く動きは避ける
17. 17 5. アニメーションの実装方法
18. 18 アニメーションの実装方法 3. 画像アニメーション • GIFアニメーション • APNG 1. CSSアニメーション • DOM操作 • SVG操作 2. JavaScript アニメーション • DOM操作 • Canvas描画
19. 19 CSSアニメーションのメリット・デメリット メリット デメリット 1. 比較的簡単に実装が可能 処理が宣言的なため複雑なロジックが不要 で実装が比較的簡単 2. パフォーマンスが良い ブラウザのレンダリングでComposit thread で実行されるためレンダリングコス トが低い 1. 複雑なアニメーションが難しい 処理が宣言的なため複雑な動きを表現する のが難しい 2. パターンがある程度決まっている CSSアニメーションで表現できるパターンが 多くないので、そのパターンの組み合わせ で表現する必要がある
20. 20 JavaScriptアニメーションのメリット・デメリット メリット デメリット 1. 複雑な動きを作りやすい 柔軟にプログラミングが可能であるため、 複雑な動きを作ることが可能 2. Canvasに描画することで 様々な表現が可能 Canvasに描画することで、3D表現やパー ティクルなどの表現も可能 1. 実装コストが高い 処理を自作するかライブラリを利用する必 要があるので実装コストが高くなる CanvasのGPU処理やアニメーションのロ ジックなど専門的な知識が必要な場合も 2. パフォーマンスが悪い メインスレッドでのレンダリングとなるた め、レンダリングのコストが高い
21. 21 画像アニメーションのメリット・デメリット 1. より複雑な動きを作りやすい キャラクターの部分を動かすなど細かく複 雑な動きを表現しやすい 2. プログラミング不要 画像を表示させるだけなので、プログラミ ングが不要 デザイナーの作業だけで完結できる 1. 専用のアニメーションツールが必要 アニメを作成するためのアプリが別途必要 となる。 2. APNGは対応している環境が少ない IE, Edgeなど対応していない環境がまだ存在 する メリット デメリット
22. 22 6. アニメーションライブラリと UIライブラリ
23. 23 アニメーションライブラリ 1. Lottie　　https://airbnb.design/lottie/ • After Effects などで作成したアニメーションを、JavaScriptのライブラリで再生できるフォーマットの JSONファイルを書き出すことができる • WebサイトではLottieの再生用JSライブラリと書き出したアニメーションを読み込み、再生を開始する コードを記述する • iOS、Android、React Native、Webに対応 2. Anime.js　　https://animejs.com/ • JavaScriptアニメーションライブラリ • 複数のアニメーションプロパティのチェーンやタイムラインを作ることができる 3. Animate.css　https://daneden.github.io/animate.css/ • CSSライブラリ • 様々なCSSトランジションが定義されていて、すぐ使える
24. 24 UIライブラリ 2. Bootstrap • https://getbootstrap.com/ 1. マテリアルデザインUIライブラリ • MATERIAL-UI (React用)　　https://material-ui.com/ • Vuetify (Vue.js用)　　https://vuetifyjs.com/ja/ 3. Element • https://element.eleme.io/#/en-US • React, Vue.js, Angular に対応している
25. 25 Vue.js でのアニメーションの実装 参考：https://jp.vuejs.org/v2/guide/transitions.html Vue.js にはトランジションを簡単に実装できる機能が搭載されている • コンポーネント単位でCSSでトランジション効果を付けることができる • アニメーションしたいコンポーネントを <transition> タグで囲み、 一定のルールで命名したCSSクラスにトランジションを設定するだけ • コンポーネントの生成、破棄のタイミングやデータの変化によって トランジションを開始することができる