「オブジェクト指向UIデザイン」のワークアウト応用編は、既存のタスク指向UIデザインをオブジェクト指向にし、複雑な構造になっているものをユーザーにとって使いやすいものにリデザインするという内容です。

この記事では、応用編レベル10の「スマートフォン用の営業支援アプリケーション」のリデザインにチャレンジした記録をまとめていきます。

概要

これはスマートフォン用の営業支援アプリケーションで、営業マンが案件、訪問、顧客情報などを管理するためのものです。このアプリで、ユーザーが任意の顧客を探してメッセージを送信するまでのフローは次の図のようになっていました。（「オブジェクト指向UIデザイン」より抜粋）

本書の課題では、この現行のUIをリデザインして、特定の顧客を探してメッセージ送信するというタスクに必要な操作の流れを考える、という内容でしたが、せっかくなのでアプリ全体のリデザインを考えてみることにしました。

• 使用ツール：Figma

• 制作期間：2週間

オブジェクトの抽出

改善前UIを見て、オブジェクトを抽出していきます。オブジェクトを抽出するときは、目の前の事実（改善前のUIデザイン画面）だけにとらわれずに、ユーザーがどのようにアプリを使うのか想像しながら、より使いやすいフローを考えて、必要なオブジェクトを洗い出していくように意識しました。そしてまとめたのが下になります。（字が汚くてごめんなさい。。）

ビューとナビゲーションの検討

抽出したオブジェクトを画面上でどのようにまとめて遷移させていくかを考えます。基本的には、それぞれのメニューのコレクションビューとシングルビューが発生するかなと思い、そのようにまとめました。

レイアウトの検討

以上の情報を元にレイアウトを考えていきます。
競合分析として、ビジネス管理アプリや連絡帳アプリ、スケジュール管理アプリなどを参考にして考えました。

なんとなくイメージがまとまってきたら、ざっくりとペーパープロトタイプを書いていきます。
このとき、改善前アプリのメニュー名があまり聞きなれないワードに感じたので、馴染みのあるワードに変更しました。
（顧客→クライアント、予定→スケジュール）

また、お題ではアプリの機能の中に「メッセージを送信する」アクションがある想定ですが、その使い方はあまり現実的じゃないな、と感じました。
なぜなら、アプリ内でメッセージをやりとりするとなると、クライアントにも同じアプリをインストールしてもらう必要があり、なかなかハードルが高いと感じたためです。
より汎用性高く利用してもらうには、電話番号やメールアドレスを登録できる、いわゆる「連絡帳」アプリの形式が使いやすいのではと思いました。なので、「クライアント」のレイアウトでは、それを想定したデザインで考えています。

次に、ワイヤーフレームを作ります。ワイヤーフレームを作るときは、見やすく使いやすいレイアウトを整えると同時に、繰り返し必要になるパーツは何かを把握することを意識しました。そのベースがあると、最終的なアウトプットを作りこんでいくときに、一貫性のあるデザインを効率よく組み立てていくことができると考えました。

アウトプット

最終的に、このようにアウトプットしました。

ユーザーが必要とする情報をストレスなく探せるように、スッキリとしたシンプルなデザインにしています。
文字の情報量が多い画面になるので、それぞれ重要な項目が目に留まりやすいよう、要素に優先順位をつけてフォントサイズを決め、余白もゆとりをもって設定しました。

ビジネス関係のサービスでは「落ち着いたブルー」をメインカラーにしているものが多いので、このアプリも「落ち着いたブルー｣をメインカラーにし、その他のカラーは、スケジュールでのみ任意で使えるようにしました。

まとめ

営業職では、クライアントやスケジュール、案件など、さまざまな情報をしっかりと管理していく必要があります。それらを一限管理でき、必要な情報をスムーズに取り出せるようなアプリとなるようリデザインを考えました。

工夫点として、クライアントは企業と人でカテゴリ分けしたり、企業のシングルビュー内に所属する人まとめたり、クライアントと案件を紐付けたり等、関連する情報を紐付けてまとめるようにしました。
実際に使う場面を想像しながら情報設計を考えることで、改善前よりも使いやすいUIデザインにできたかなと思います。
引き続き、勉強頑張ろう！！