UI Labさん主催のイベントに参加してきました。
講師はfreeeの伊原さん@magi1125でした。
調査により導き出されたユーザーモデルや、利用シーンといったシナリオ、そして UI デザインパターンがあれば完成度の高い UI はデザインできるはずです。
しかし従来のワークショップなどではリサーチや利用シーンを策定することはあっても、そこから UI という形に落とし込むまでのプロセスはそれぞれの経験則で行われ、言語化されることも少なかったと思います。
そこにはデザインコンセプトの策定、要件の取捨選択、それらの構造化や要素の配置を決める「情報設計」が介在し、UI を形にするための重要なプロセスがあります。
情報設計に携わるインフォメーションアーキテクト自らそのプロセスを明らかにし、UI を設計するまでの手法を皆さんと考えていければと思います。
まさに書いてあるような、策定したペルソナやジャーニーマップを画面のデザインへと落とし込む「情報設計」に興味があり、参加しました。
やったこと
デザインプロセスにはいくつかの段階があります。
※「ウェブ戦略としてのユーザーエクスペリエンス - 5つの段階で考えるユーザー中心デザイン」の著者であるJesseJames Garrett氏のサイトより引用。
ペルソナやジャーニーマップといったものは１層目（一番下）ですね。
それとUIデザインの間にあるギャップとして次の３つを挙げられました。
- ユーザーの要求事項の明確化（シナリオ）
- ユーザーの要求事項を実現する情報構造の設計（IA）
- インタラクションデザインのパターン
これらをどう埋めるのかについて、座学と、とあるアプリのリニューアル検討のワークを通し学んでいきました。
ペルソナと利用シナリオは事前に用意されており、実際のワークは次の４ステップでした。
- シナリオから改善点を見出そう
- 新しい分類体系と検索軸を作ろう
- 新しいフロー図を作ろう
- ペーパープロトタイピング
4時間半...座学や発表会も交えつつということでかなり濃密な時間でした。
作業に夢中で全然写真撮ってなかった…。
シナリオから改善点を見出そう
事前（前日）に配布されていた資料はこちら。
- ペルソナ
- 理想のシナリオ
- 価値（バリュー）のシナリオ...ペルソナが何をしたい(価値)と思っているのか
- 行動（アクティビティ）のシナリオ...ペルソナがどんな行動を取れると目標が達成できるのか
- 操作（インタラクション）のシナリオ...ペルソナが目標にたどりつくまでの具体的な操作
- 現アプリの構造図
こうした情報を元に、実際にアプリをさわり分析し、理想と現状とのギャップを洗い出します。そうしてみんなで挙げた課題を、グルーピングしてまとめました。
新しい分類体系と検索軸を作ろう
前のワークで、「とにかくモノが探しづらい」という共通課題が挙がりました。それを解決していくべく、分類体系＝商品のカテゴリ、検索軸＝フィルタ/ソートを考えていきました。
情報設計でコアになる観点が、「ユーザーニーズとコンテンツの属性をもとに、構造パターンを選択し分類方針を定める」だそうです。属性（メタデータ）というのは、例えば...名前・重さ・サイズ・色・大きさ・型番などをさします。
そこで大事になのが次のアプローチです。
- トップダウン・アプローチ ...ユーザーやシナリオを元に考える
- ボトムアップ・アプローチ ...コンテンツを洗い出し、それらの属性を分析して考える
私たちのチーム（４人）では、半分に別れてそれぞれのアプローチにトライし、互いの分類を共有・整理しました。
新しいフロー図を作ろう
「ユーザーが見るもの（オブジェクト）」と「ユーザーがやること（アクション）」に着目した画面遷移図...UI Flowをつくりました。
UI Flowがどんなものなのかは、次のサイトがわかりやすいです。
なぜ「オブジェクト」と「アクション」にフォーカスするのかというと、UIパターン（粒度）は基本的に次の４つしかないからです。
さらにここでは「モードレスデザイン」という概念が紹介されました。
- モーダル (モードを持つ) ... 何か決められた行動（選択）をしないと他の行動ができない状態
≒ 見るもの（オブジェクト）を選んでから、やること（アクション）を決める - モードレス ... モーダルではない状態
≒ やること（アクション）を決めてから、見るもの（オブジェクト）を選ぶ
こう書くとイメージがわきにくいですが、次の記事が非常に詳しくわかりやすく書かれています。
ペーパープロトタイピング
主要な画面のラフをテンプレート用紙に手書きしました。
「独自のことをやらない」のも大事にして、その分野で人気の高いアプリなども参考にしながら具体化しました。
最後に、各チーム成果を発表し合いました。
まとめ
とにかく内容が濃く、参加して良かったです。(今回書いてない内容も結構あります。。)２週間経ってようやくこの記事を書いてるわけですが、こうして振り返られるのはフォローアップや共有された資料が非常に充実していたからです。
学んだことをかなり大雑把にまとめます。
ペルソナ・ジャーニーをつくってからUI設計に落とし込む間には、次のようなプロセスがあります。
- ジャーニーの改善策とペルソナから、理想的なシナリオ（価値・行動・操作）を書き起こす
- シナリオを踏まえてデザイン対象を分析し、ユーザーの求めている情報と現状の課題を明らかにする
- 課題を解決すべく、トップダウン・アプローチとボトムアップ・アプローチを行き来しながら情報の分類方針を定める
- 分類を踏まえ、ユーザーが「見るもの（オブジェクト）」と「やること（アクション）」に着目したUI Flowをつくる
- ペーパープロトタイピングする
特に、画面ありきではなく、ユーザーのやること（やりたいこと）にフォーカスして考えるのがまだまだ不慣れなのでしっかり肝に命じます。
みなさま、ありがとうございました。
おまけ
UI Flowを作成できるツールがあります。実際、スクール課題でアプリデザインをした際にガッツリ使わせていただきましたが便利でした。