見落としがちなインタラクションデザイン

画面の要件定義は決まっているものの画面遷移する際の状態変化について明記されてないケースが最近ありました。
そのプロジェクトではUIデザイナー担当だったので、このポジションから今回どのように対処したのか、実際やってみた上で今後考慮するべきことを記載します。

（PM、ディレクターを責めてるわけてはありません。フォローも大事な仕事だと思ってます、時間の許す限りですが・・・。）

インタラクションデザインとは

インタラクションデザインとは「相互作用の設計」
インタラクション （interaction）とは、日本語で「相互作用」と訳されます。
IT用語としては、「ユーザーが特定の操作を行なったとき、システムがその操作に応じた反応を返すこと」という意味で使われています。
つまり、インタラクションデザインは、「機器やソフトウェアなどが使われる際の、ユーザー側の操作やシステム側の反応などをデザインすること」といえます。
出典：インタラクションデザインとは何か？メリットや事例をわかりやすく解説！

このケースでやったこと

・要件定義書の確認
・フレームワークの確認（今回はMaterial UIを使用）
・UIデザイン（状態変化も網羅してます）
・ビジュアルデザイン（グラフィックですね）
---------------------------------------------------
・インタラクションデザイン👈（今日話すのはここ）

今回は、読み込み中や完了画面などで表現するインタラクションについて話します。もちろんワイヤーフレームはあります。しかし、１つ目の問題はモーダルonモーダル＝2重モーダルなこと。
２つ目は「完了しました」のように、表示する直前の仕様がないこと。

なんで早めに言わないの？

今回はクライアント（＋私）と、開発ベンダーの三社で進めてました。しかし多くのメンバーが「初めまして」状態だったので議論の際に以下の課題を感じました。

❶認知バイアスがかかりやすい
例えば「Amazonではこうです」と言っても、それがモバイルアプリなのか、webブラウザで見たのかで認識にズレが起きます。今回はお初の人ばかりなのでニュアンスが伝わりにくいのかなと慎重でした。
❷空中戦になりやすい
また、エビデンスを用意していないと主観ベースになりやすく、決め打ちになりやすく決まりづらくなります。さらに「他のアプリだとどう表現されてますか？」といった急な質問にも対処しづらいです。
信頼関係やメンバーの特徴が掴めないまま無策で挑むのは無謀だなと、デザインのサンプルを用意して臨みました。

やってみて思うこと

9割ものユーザーがモバイル（web）かモバイルアプリ利用なので、モバイルアプリのインタラクションを参考に案を作りました。早く終わるかなと思いきや意外とかかりました。

❶意外と参考になるアプリが少ない
かなりメジャーなアプリを参考にしたものの、ピンとくるものがなく、どんどんアプリをダウンロードしては確認する作業が発生しました（自転車で有名なフードデリバリーアプリですらprogress circular系が２〜３種あって頭を抱えました）
❷チェックマーク（完了）を出すときの挙動
切り替わるタイミングを見るために幾つかのアプリで購入してチェックしました。勿論、自腹です。ただ、こうして検証すると別角度で見れるので普段使うpaypayやsuicaなど「そういえばこんな感じだったっけなぁ」と、振り返るきっかけにはなりました。
❸Material UIで表現するなら・・・
❷で確認したことがMaterial UIで表現可能なのかをサンプルパターンを見ながら画面に落とし込んでいきました（今回はvuetifyjsを参考にしてます）
画面の処理と前後関係を意識してインタラクションは３パターン用意。内、１パターンはオリジナルのデザインにしています。

今後は...

ずばり、サンプルをストックしておくに限ります。
noteやSNSなどで備忘録としてストックしておけば、パッと取り出すことができるのだろうと感じています。
また、今回はメジャーなアプリでも細部まで表現しきれてないことが新発見でした。
noteの有効活用にも一役買うので収集グセをつけていこうと思います。