UI Lab 2018.3 正しい情報設計によるデザインプロセス | Peatix講師はfreeeの伊原さん@magi1125でした。調査により導き出されたユーザーモデルや、利用シーンといったシナリオ、そして UI デザインパターンがあれば完成度の高い UI はデザインできるはずです。 しかし従来のワークショップなどではリサーチや利用シーンを策定することはあっても、そこから UI という形に落とし込むまでのプロセスはそれぞれの経験則で行われ、言語化されることも少なかったと思います。 そこにはデザインコンセプトの策定、要件の取捨選択、それらの構造化や要素の配置を決める「情報設計」が介在し、UI を形にするための重要なプロセスがあります。 情報設計に携わるインフォメーションアーキテクト自らそのプロセスを明らかにし、UI を設計するまでの手法を皆さんと考えていければと思います。まさに書いてあるような、策定したペルソナやジャーニーマップを画面のデザインへと落とし込む「情報設計」に興味があり、参加しました。やったことデザインプロセスにはいくつかの段階があります。※画像は、「ウェブ戦略としてのユーザーエクスペリエンス - 5つの段階で考えるユーザー中心デザイン」の著者であるJesseJames Garrett氏のサイトより引用。ペルソナやジャーニーマップといったものは１層目（一番下）ですね。 またUIデザインの間にあるギャップとして挙げられたのは次の３つ。ユーザーの要求事項の明確化（シナリオ）ユーザーの要求事項を実現する情報構造の設計（IA）インタラクションデザインのパターンこれらをどう埋めるのか、座学と「とあるアプリ」のリニューアル検討ワークを通し学びました。ペルソナと利用シナリオは事前に用意されており、実際のワークは次の４ステップ。シナリオから改善点を見出そう新しい分類体系と検索軸を作ろう新しいフロー図を作ろうペーパープロトタイピング4時間半...座学や発表会も交えつつということでかなり濃密な時間でした。 作業に夢中で全然写真撮ってなかった…。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E3%83%AF%E3%83%BC%E3%82%AF%E9%96%8B%E5%A7%8B%EF%BC%81%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%94%B9%E5%96%84%E7%82%B9%E3%82%92%E6%B4%97%E3%81%84%E5%87%BA%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhashtag%2Fuilab%3Fsrc%3Dhash%26amp%3Bref_src%3Dtwsrc%255Etfw%22%3E%23uilab%3C%2Fa%3E%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FfJWgc83mJQ%22%3Epic.twitter.com%2FfJWgc83mJQ%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20uilab%20(%40_uilab)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2F_uilab%2Fstatus%2F974883123979681792%3Fref_src%3Dtwsrc%255Etfw%22%3EMarch%2017%2C%202018%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E7%B6%9A%E3%81%84%E3%81%A6%E3%80%81%E6%96%B0%E3%81%9F%E3%81%AA%E5%88%86%E9%A1%9E%E4%BD%93%E7%B3%BB%E3%81%A8%E6%A4%9C%E7%B4%A2%E8%BB%B8%E3%82%92%E4%BD%9C%E3%82%8B%E3%83%AF%E3%83%BC%E3%82%AF%EF%BC%81%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhashtag%2Fuilab%3Fsrc%3Dhash%26amp%3Bref_src%3Dtwsrc%255Etfw%22%3E%23uilab%3C%2Fa%3E%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2F5N1n9FTRHh%22%3Epic.twitter.com%2F5N1n9FTRHh%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20uilab%20(%40_uilab)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2F_uilab%2Fstatus%2F974896327942316032%3Fref_src%3Dtwsrc%255Etfw%22%3EMarch%2017%2C%202018%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E7%99%BA%E8%A1%A8%E4%B8%AD%E3%81%A7%E3%81%99%E3%80%82%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhashtag%2Fuilab%3Fsrc%3Dhash%26amp%3Bref_src%3Dtwsrc%255Etfw%22%3E%23uilab%3C%2Fa%3E%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FO8n2VwhzzG%22%3Epic.twitter.com%2FO8n2VwhzzG%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20uilab%20(%40_uilab)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2F_uilab%2Fstatus%2F974931305161932800%3Fref_src%3Dtwsrc%255Etfw%22%3EMarch%2017%2C%202018%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3Eシナリオから改善点を見出そう事前（前日）に配布されていた資料はこちら。ペルソナ理想のシナリオ現アプリの構造図「理想のシナリオ」の内容はこちら。価値（バリュー）のシナリオ...ペルソナが何をしたい(価値)と思っているのか行動（アクティビティ）のシナリオ...ペルソナがどんな行動を取れると目標が達成できるのか操作（インタラクション）のシナリオ...ペルソナが目標にたどりつくまでの具体的な操作こうした情報を元に、実際にアプリをさわり、分析し、理想と現状とのギャップを洗い出します。そうして挙げた課題を、チーム内でグルーピングしました。新しい分類体系と検索軸を作ろう「とにかくモノが探しづらい」という共通の課題が挙がったので、それを解決すべく、まず分類体系＝商品のカテゴリ、検索軸＝フィルタ/ソートを考えていきました。情報設計でコアになる観点が、「ユーザーニーズとコンテンツの属性をもとに、構造パターンを選択し分類方針を定める」だそうです。属性（メタデータ）というのは、例えば...名前・重さ・サイズ・色・大きさ・型番などをさします。そこで大事なのが次のアプローチとのこと。トップダウン・アプローチ ...ユーザーやシナリオを元に考えるボトムアップ・アプローチ ...コンテンツを洗い出し、それらの属性を分析して考える私たちのチーム（４人）では、半分に別れてそれぞれのアプローチにトライし、互いの分類を共有・整理しました。新しいフロー図を作ろう「ユーザーが見るもの（オブジェクト）」と「ユーザーがやること（アクション）」に着目した画面遷移図...UI Flowをつくりました。 UI Flowがどんなものなのかは、次のサイトがわかりやすいです。画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログなぜ「オブジェクト」と「アクション」にフォーカスするのかというと、UIパターン（粒度）は基本的に次の４つしかないからです。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3EWeb%E3%82%84%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AEUI%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%EF%BC%9F%E3%81%AE%E7%B2%92%E5%BA%A6%E3%81%AF%EF%BC%94%E3%81%A4%E3%81%A0%E3%81%91%3Cbr%3E%E3%83%BB%E4%B8%80%E8%A6%A7%EF%BC%88%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%89%3Cbr%3E%E3%83%BB%E8%A9%B3%E7%B4%B0%EF%BC%88%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%EF%BC%89%3Cbr%3E%E3%83%BB%E3%82%BF%E3%82%B9%E3%82%AF%E6%94%AF%E6%8F%B4%EF%BC%88%E5%85%A5%E5%8A%9B%E3%82%84%E8%A8%AD%E5%AE%9A%EF%BC%89%3Cbr%3E%E3%83%BB%E3%83%84%E3%83%BC%E3%83%AB%EF%BC%88%E5%86%99%E7%9C%9F%E7%B7%A8%E9%9B%86%E3%81%AA%E3%81%A9%EF%BC%89%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhashtag%2Fuilab%3Fsrc%3Dhash%26amp%3Bref_src%3Dtwsrc%255Etfw%22%3E%23uilab%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20%E3%82%8D%E3%81%8F%E3%81%9C%E3%81%86%E3%81%A9%E3%82%93%E2%9B%84%EF%B8%8F%20(%40rokuzeudon)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Frokuzeudon%2Fstatus%2F974907603128954880%3Fref_src%3Dtwsrc%255Etfw%22%3EMarch%2017%2C%202018%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3Eさらにここでは「モードレスデザイン」という概念が紹介されました。モーダル (モードを持つ) ... 何か決められた行動（選択）をしないと他の行動ができない状態 ≒ やること（アクション）を決めるのに、見るもの（オブジェクト）を選ぶ必要があるモードレス ... モーダルではない状態 ≒ やること（アクション）を決めてから、見るもの（オブジェクト）を選ぶこう書くとイメージがわきにくいですが、次の記事が非常に詳しくわかりやすく書かれています。モードレスデザイン｜ai｜noteペーパープロトタイピング主要な画面のラフをテンプレート用紙に手書きしました。 「独自のことをやらない」のも大事にして、その分野で人気の高いアプリなども参考にしながら具体化しました。最後に、各チーム成果を発表。まとめとにかく内容が濃く、参加して良かったです。今回書けてない内容も結構あります。２週間経ってようやくこの記事を書いてるわけですが、こうして振り返られるのはフォローアップや共有された資料が非常に充実していたからで、とてもありがたいですね。最後に、学んだことをまとめてみます。ペルソナ・ジャーニーをつくってからUI設計に落とし込む間には、次のようなプロセスがあります。ジャーニーの改善策とペルソナから、理想的なシナリオ（価値・行動・操作）を書き起こすシナリオを踏まえてデザイン対象を分析し、ユーザーの求めている情報と現状の課題を明らかにする課題を解決すべく、トップダウン・アプローチとボトムアップ・アプローチを行き来しながら情報の分類方針を定める分類を踏まえ、ユーザーが「見るもの（オブジェクト）」と「やること（アクション）」に着目したUI Flowをつくるペーパープロトタイピングする特に、画面ありきではなく、ユーザーのやること（やりたいこと）にフォーカスして考えるのがまだまだ不慣れなのでしっかり肝に命じます。みなさま、ありがとうございました。おまけUI Flowを手軽につくれるアプリがあります。以前、スクール課題でアプリデザインをした際にガッツリ使わせていただきましたが便利でした。もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita