要件をきっちりUIに落とし込む 〜はじめてのUIデザインを読んで〜
この記事は、(発売から大分経って、いまさらなのですが)はじめてのUIデザイン3章に書かれていることを紹介する記事です。とくにわたしがめっちゃためになる…！となった「要件をUIのペーパープロトタイプに落とし込む方法」を中心に書いてあります。
最後にも書くのですが、3章が大大大好きで会社でもめっっっちゃいいよと布教しています(笑)
実務では機能を作る際、HCDに沿ってだいたい
1.ユーザーインタビューををして
2.ペルソナ作って
3.CJM引いて
4.ユーザーストーリーを作って
5.ユーザーシナリオを作る
6.UMLアクティビティ図作成
7.ペーパープロトタイプ作成
ということをやっています。
しかし、5から6を経て7に落とし込む部分が自分の中でふわっとしていました。
この本を読んで、はー！なるほどー！そういうことかー！となりました。
特に、シナリオからUIFlow図に落とし込むところがためになりました。
自己紹介
みりんです。インハウスで新卒2年目デザイナーとして働いています。今メインはUIで、ユーザビリティテストもやったりします。去年はUX寄りユーザー調査も行なっていました。
まだまだ全然ひよっこ🐣なのですこしずつ毎日頑張ります！
Twitter : mimimiryn
はじめに
情報設計とは、わかりやすさを設計することです。
ユーザーがアプリやサービスの本質的な価値をとらえ、迷うことなく操作できるようにするためには情報設計が必要です。
情報設計はつくるものの要件とUIデザインをつなぐ架け橋となります。
ここでは、上記の4までは終わっている想定です。なので、ペルソナがいて、そのペルソナが達成したい目標やどう言った行動をとる人なのかのなどの情報はもう存在しています。
以下の流れで落とし込んでいきます。
1. 行動、操作のシナリオ作成
ユーザーが目的達成するまでの理想的な状態の仮説を立てる
2. コンテンツの分類軸の設計
シナリオからユーザーの性質を理解し、それに合わせたコンテンツの分類を行う
3. UIモデルの設計
コンテンツの見え方ごとにユーザーが何を見てどうするかを整理して、フロー図を作成する
4. レイアウトとインタラクションの設計
プロトタイプでレイアウトとインタラクションを設計する
(本書には流れとともに具体的な例が載っていて、とても参考になりました！最後に本の紹介をします。)
1. 行動、操作のシナリオの作成
シナリオは、ペルソナが「何ができると目的を達成できるのか」「それはどのようにして実行していくものなのか」といった目的達成の道のりを具体的にするためのものです。これから作ろうとしているものがユーザーにどのような価値を与えるものなのか共有するのにも有効な手段です。
・価値シナリオ：抽象度の高いペルソナの欲求から、ユーザが何をしたいと思っているか
ユーザーの欲求/特徴/やりたいこと(価値)/価値
価値と関連のあるシーン
・行動シナリオ：価値と関連のあるシーンを具体的な行動ストーリー
価値と関連のあるシーン
行動ストーリー
発生するタスク
・操作シナリオ：アプリ上での実際の操作に落とし込む
発生するタスク
操作モデル
の3つを作成します。
この図を見てもらうとわかるのですが、価値シナリオで書いた、価値と関連のあるシーンが、行動シナリオの方に移動しています。
それぞれ3つのシナリオはつながっており、価値シナリオで書いたものを基に行動シナリオを、行動シナリオで書いた発生するタスクを基に操作シナリオを書きます。
デザインは具体と抽象の行き来が大切だとよく言われますが、こんな風に抽象度高いものから具体に持っていくのか！と感動しました。
ここで決めたものが、アプリの機能要件やコンテンツ要件に繋がります。
2. コンテンツの分類軸の設計
シナリオを基にユーザーはどのような情報を利用しているのか洗い出す
ユーザーはどんなことへの理解が深く、あまりくわしくないことは何かなどの観点から導き出します。作るアプリにおいて「何をどのようなまとまりで探しているのか」も重要です。
コンテンツが持っている属性を洗い出す
例えば、音楽アプリなら、曲について属性を抽出します。
・曲名
・アーティスト名
・アルバム名
・アルバムアーティスト名
・作者名
・曲番号
・曲の長さ
・発売年月日
・ジャンル
・アートワーク
・BPM
・再生時間
・歌詞
などなど
分類軸を決める
ユーザーがコンテンツをどのように探すかを、シナリオ、コンテンツの持つ属性それぞれの視点で検討し、当てはめて分類軸を考えます。
この2のプロセスで、情報の構造パターンを選択し、構造の分類軸を決めます。この段階でコンテンツの必要な並び方や、載せるべき情報が決まります。ほかのサービスを参考にして、ユーザーが認識しやすいものを選ぶことが大切です。
全て羅列してそこから一般的な並び方(ユーザーのメンタルモデル)を選ぶとことで、レビューのときにわたしがよく言われがちな、「ほかには方法ない？」だったり「他のアプリはどうなってる上でこの案なの？」みたいなことがなくなりそうです。
3. UIモデルの設計
ユーザーが目的を達成するために、「何」を「どうすれば」いいのかというレベルでの整理をおこない(オブジェクトの抽出)、それらをつなぎます(UI flowsの作成)。
オブジェクトの抽出
オブジェクトは、シナリオにある「タスク」に抽出されている、ユーザーが目的を達成するために「何をどうするのか」の「何を」の部分です。名刺で表せます。すなわち操作対象になるものです。
フロー図の作成
ユーザーが見るもの、その時の操作、操作の結果を図にすることで、画面の流れをわかりやすくするものです。
出典：画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール
かつてのわたしはこの時点で画面名を書いていたのですが、画面名は次のステップで書くのか！と目から鱗でした。画面名も一緒にやると考えることが多くなって頭が混乱してきますので、別々に進めましょう。ここだけでなく、混乱した時は大きな粒度で考えている可能性があるので、細かくするのはおすすめです。
このとき、「見るもの」と「すること」の粒度をコントロールして必要以上に大きかったり、細かかったりしないようにします。
画面の構成
UI Flowsでコンテンツの見え方ごとに整理された情報のまとまりを、ユーザーの理解度や、webモバイルなど提供する環境に合わせて、画面を区切っていきます。
4. レイアウトとインタラクションの設計
3のUIフロー図によって、画面とそれぞれの画面の中に入るコンテンツが決まりました。
ナビゲーション構造を決める
画面名のみを抜き出して、構造を決めます。いろんなパターンを検討します。分類軸を見直す必要が出てくる場合もあります。ユーザーがコンテンツやコンテンツをどういう属性で探したいのかを考えて見ます。
レイアウトの作成
本書では、さらっとできあがってましたが、笑
いろんなwebやサイトを見てUIを決めるといいと思います。
参考資料：はじめてのUIデザイン2章
2章は、コンポーネントの名前や役割が詳しく書かれています。コンポーネントをきちんと一般的なルール(メンタルモデル)にのっとって使うことはユーザーを混乱させないために非常に重要です。チームのメンバーと会話するときにも共通言語として必要です。
インタラクションの作成
レイアウトの設計と合わせて、インタラクションの設計を行います。
UIFlow図で整理した「コンテンツの見え方ごとに整理された情報のまとまり」の移り変わりをどのように行うかの設計をします。日常で認知しているようなコンテンツの流れる方向(左から右)だったり、ユーザーがコンテンツを把握しやすい見慣れた体制、コンテンツの見え方や操作方法にします。
参考資料：はじめてのUIデザイン6 章の 1 節 の前半
画面遷移、インタラクションを考えるときに必要なことが書かれています。
ペーパープロトタイプの検証
作ったものを検証して、必要であればまた前のステップに戻ります。
参考資料：はじめてのUIデザイン6章1節 の後半
どのようなことを考えながら検証すればいいかについて書かれています。
最後に はじめてのUIデザインという本について
この本は、どの章も本当に本当に本当にためになりました！！！！
読んだあとも、辞書的な感じで何回も何回も見返しています。
ぜひ手に取ってみてください。
中身をすこし見ることができます👀
筆者の方々のTwitter
1と5章 吉竹 遼さん @ryo_pan
2章 池田 拓司さん @tikeda
3章 上ノ郷谷 太一さん @tchkmngy
4章 元山 和之さん @kudakurage
6章 宇野 雄さん @saladdays
7章 坪田 朋さん @tsubotax
この本を読んで
わたしは、いままでUIは、画面にコンポーネントを置くところの話だけだと思っていました。ユーザーリサーチして、UIに落とし込むときにどうしても一連の流れとして落とし込めなくてめちゃくちゃもやもやしていました。
この本を読んで少しスッキリしたと同時に、もっと情報設計について学びたいと思い今は、情報設計の本を読んでいます。
はじめてのUIデザインという名前や表紙のコンパスは、この本を読んだ人の進む道を明確にしたいという思いで書かれたようです。わたしにとってこの本は、もっと情報設計について学びたいという気持ちをもたせてくれた、本当にコンパスのような存在です。
このような本に出会えて喜ばしい限りです！
この方法を試して見た記事
この記事が気に入ったらサポートをしてみませんか？