正しい情報設計によるデザインプロセス

Slide 1

Slide 1 text

正しい情報設計によるデザインプロセス UI Lab 2018.3 伊原力也 2018.03.17 1

Slide 2

Slide 2 text

本日の流れ ● 13:30〜13:31（01分）：講師自己紹介 ● 13:31〜13:40（09分）：チーム分け＆アイスブレイク ● 13:40〜13:55（15分）：①トーク：要件とUIのあいだにあるもの ● 13:55〜14:25（30分）：①タスク：シナリオから改善点を見出そう ● 14:25〜14:40（15分）：②トーク：情報構造設計の基礎知識 ● 14:40〜15:20（40分）：②タスク：新しい分類体系と検索軸を作ろう ● 15:20〜15:30（10分）：休憩 ● 15:30〜15:45（15分）：③トーク：GUIの基礎を支えるパターン ● 15:45〜16:25（40分）：③タスク：新しいフロー図を作ろう ● 16:25〜17:00（35分）：④タスク：ペーパープロトタイピング ● 17:00〜17:10（10分）：休憩 ● 17:10〜18:00（50分）：成果発表

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

自己紹介

Slide 5

Slide 5 text

伊原力也 5 ● freee IA/UX ● HCD-Net 評議委員 / 認定人間中心設計専門家 ● ウェブアクセシビリティ基盤委員会 WG1委員 ● 国際ユニヴァーサルデザイン協議会移動空間研究部会副主査

Slide 6

Slide 6 text

https://www.hcdnet.org 6

Slide 7

Slide 7 text

https://waic.jp 7

Slide 8

Slide 8 text

Amazonで「アクセシビリティ」と検索！ 8

Slide 9

Slide 9 text

9 Amazonで「インクルーシブHTML」と検索！

Slide 10

Slide 10 text

10 Amazonで「インクルーシブHTML」と検索！

Slide 11

Slide 11 text

チーム分け＆アイスブレイク

Slide 12

Slide 12 text

チーム分け ● サイトマップやフロー図やワイヤーフレームが書ける人、挙手ください ● 挙手した人がテーブルごとにバラけるようにしてください

Slide 13

Slide 13 text

アイスブレイク ● ひとり2分で自己紹介してください ● 名前、所属、やっている仕事 ● 今日参加した理由 ● サイトマップやフロー図などを書くときに、何をインプットにしてどう考えて書いているか（やったことがない人は、どういうイメージか）

Slide 14

Slide 14 text

ワーク①

Slide 15

Slide 15 text

【トーク】要件とUIのあいだにあるもの

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

https://reras-factory.com/iphone-10year/

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/

Slide 25

Slide 25 text

https://www.hcdnet.org/docs/Hints%20of%20HCD_vol%201.pdf

Slide 26

Slide 26 text

https://jasonfurnell.wordpress.com/2011/08/02/workshop-capture-templates-for-customer-journeys-content-workflows-business-model-canvas-and-more/

Slide 27

Slide 27 text

【質問】ペルソナやジャーニーマップからどうやってUIにするのか？

Slide 28

Slide 28 text

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

ペルソナ・ジャーニーとUIの間にあるギャップ ● シナリオ ● 情報構造設計 ● インタラクションデザイン

Slide 31

Slide 31 text

https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/

Slide 32

Slide 32 text

https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/

Slide 33

Slide 33 text

https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

http://www.jjg.net/elements/translations/elements_jp.pdf

Slide 36

Slide 36 text

http://www.jjg.net/elements/translations/elements_jp.pdf

Slide 37

Slide 37 text

【タスク】シナリオから改善点を見出そう

Slide 38

Slide 38 text

会員番号　：2663492752 パスワード：work1806

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

https://www.coop-takuhai.jp/takuhai/about

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

ご質問はありますか？

Slide 47

Slide 47 text

ワーク内容 1. ペルソナとシナリオを読み込み、ユーザーが何が求めているのかを理解する 2. 構造シートを見つつ、このアプリを実際に一通り触ってみる 3. ペルソナとシナリオに対する現状のアプリのギャップ（改善点）を洗い出す 4. その課題をグルーピングしてまとめる

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

ご質問はありますか？

Slide 50

Slide 50 text

　スタート！

Slide 51

Slide 51 text

Slide 52

Slide 52 text

　終了！

Slide 53

Slide 53 text

ワーク②

Slide 54

Slide 54 text

【トーク】情報構造設計の基礎知識

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

https://drive.google.com/file/d/10jVReTJ2cbc_8gNcXKqeJBTM7A-FJ5F9/view?usp=sharing/

Slide 62

Slide 62 text

ユーザーニーズと　コンテンツの属性をもとに、構造パターンを選択し分類方針を定める

Slide 63

Slide 63 text

トップダウン・アプローチとボトムアップ・アプローチ　

Slide 64

Slide 64 text

トップダウン・アプローチユーザーがどんなふうに見つけたり探したりするのだろうか？ペルソナやシナリオをもとに： ● その人がどんな分野には明るくて、どんな分野には詳しくないか ● ウェブやアプリをどのくらい使っているか ● どんなサイトやアプリを使っていて、どのくらい類推できそうか ● このアプリにおいては、何をどういうくくりで探しているのか

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

ボトムアップ・アプローチコンテンツが持つ属性（メタデータ）にはどんなものがあるのか？ ● 名前、重さ、サイズ、色、大きさ、型番、などなど… ● 取り扱うコンテンツ自体が持ちうる属性を洗い出す ● それらにまとまりを与える ● そこから、ユーザーがものを探し出すための切り口を見出す

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

ポイント：独自のことをやらない

Slide 72

Slide 72 text

　IAはパクリだ！

Slide 73

Slide 73 text

構造のパターン

Slide 74

Slide 74 text

ツリー

Slide 75

Slide 75 text

ファセット

Slide 76

Slide 76 text

ウェブ

Slide 77

Slide 77 text

ハブ＆スポーク

Slide 78

Slide 78 text

リニア

Slide 79

Slide 79 text

トピック、オーディエンス、タスク

Slide 80

Slide 80 text

LATCH

Slide 81

Slide 81 text

Location：場所 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/

Slide 82

Slide 82 text

Alphabet：アルファベット/五十音 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/

Slide 83

Slide 83 text

Time：時間 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/

Slide 84

Slide 84 text

Category：カテゴリ https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/

Slide 85

Slide 85 text

Hierarchy：連続量 https://www.duarte.com/presentation-skills-resources/organizing-information-is-finite/

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

Slide 88

Slide 88 text

ご質問はありますか？

Slide 89

Slide 89 text

【タスク】新しい分類体系と検索軸を作ろう

Slide 90

Slide 90 text

ワーク内容 1. 現状の分類体系を洗い出す 2. 商品のもつ属性を洗い出す 3. トップダウン・アプローチ（ユーザーの探し方による分類）を試みる 4. ボトムアップ・アプローチ（商品の属性による分類）を試みる 5. 妥当そうなカテゴリ分け、検索軸、フィルタ軸、ソート軸を書き出す

Slide 91

Slide 91 text

検討カテゴリは2画面目まで 1 2

Slide 92

Slide 92 text

紙カタログ・Webカタログも参照OK

Slide 93

Slide 93 text

「ウィークリーコープ」で検索会員番号　：2663492752 パスワード：work1806

Slide 94

Slide 94 text

ヒント：ネットスーパーなどを参考に

Slide 95

Slide 95 text

ヒント：アパレルや価格.comなどを参考に重さ産地色賞味期限価格割引率番号評価等級人気度

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

ご質問はありますか？

Slide 98

Slide 98 text

　スタート！

Slide 99

Slide 99 text

ワーク内容 1. 現状の分類体系を洗い出す（※1〜2画面目まで） 2. 商品のもつ属性を洗い出す（※カタログなども参考に） 3. トップダウン・アプローチ（ユーザーの探し方による分類）を試みる 4. ボトムアップ・アプローチ（商品の属性による分類）を試みる 5. 妥当そうなカテゴリ分け、検索軸、フィルタ軸、ソート軸を書き出す

Slide 100

Slide 100 text

　終了！

Slide 101

Slide 101 text

ワーク③

Slide 102

Slide 102 text

【トーク】 GUIの基礎を支えるパターン

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

　ユーザーがサイト上の各種機能にどう反応するかを定義し、タスクの実行を促進するアプリケーションフローを開発すること

Slide 106

Slide 106 text

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

Slide 110

Slide 110 text

画面にするにはまだ早い

Slide 111

Slide 111 text

ある1画面に何をどれだけ置くのか？以下の条件で、いかようにも変化する ● 画面の大きさ ● 表示すべき内容の量 ● ユーザーのリテラシーの想定 ● ユーザーの利用状況の想定 ● ユーザーの学習度合いの想定

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

まず「何をどうやれるようにするのか」を　画面という単位に規定されずに並べそれらを繋いでフローにする

Slide 116

Slide 116 text

UI Flows http://www.standardinc.jp/reflection/article/ui-flows/

Slide 117

Slide 117 text

UI Flowsの「見るもの」と「やること」の粒度 ✗ これは細かすぎ：ボタンを見て、ボタンを押す ✗ これは画面遷移：ログイン画面を見て、ログインする ◎ よい粒度はこれ：オブジェクトを見て、アクションする

Slide 118

Slide 118 text

Slide 119

Slide 119 text

コレクション商品名称グラム数／数量価格シングル商品番号商品名称グラム数／数量価格税込価格コレクションカテゴリ名称カテゴリ一覧商品一覧商品詳細詳しく見る検索する並び替える詳しく見る絞り込むソートするブックマークする注文する検索する

Slide 120

Slide 120 text

Webやアプリを司るパターンは4つだけ ● コレクション（複数のもの ≒ 一覧） ● シングル（個別のもの ≒ 詳細） ● タスク支援（フォームなど ≒ 入力や設定） ● ツール提供（写真の編集ツールなど）

Slide 121

Slide 121 text

　なぜこの粒度？

Slide 122

Slide 122 text

http://modelessdesign.com/

Slide 123

Slide 123 text

モードレスデザインモードレス：モードがない ● もの（名詞）を選んで、何をするか（動詞）決めるモーダル：モードがある ● 何をするか（動詞）を決めて、もの（名詞）を選ぶ

Slide 124

Slide 124 text

「釘を打つ時、我々はまずハンマーを持ち、それから振り下ろします。振り下ろしてからハンマーを持つ人はいないのです」 https://www.sociomedia.co.jp/7279

Slide 125

Slide 125 text

自然界の道具はモードレスであり GUIの基本もモードレスなのでモードレスにデザインする

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

Modal

Slide 130

Slide 130 text

Modal

Slide 131

Slide 131 text

オマケ：モードレスの知見を深めるコーナー ● Modeless and Modal ● ユーザー理解に合わせたユーザーインターフェイスデザイン ● アプリケーションのイディオムデザイン（ページ下の方） ● モードレス・ユーザーインターフェース ● アナーキー・イン・ザ・ UX ● OOUX - オブジェクトベースの UIモデリング ● モードレスインタラクション ● SEのためのUIデザインの教科書 ● 複雑なアプリケーションにオブジェクト指向 UIで立ち向かう ● ユーザーインターフェース解剖学・改訂版

Slide 132

Slide 132 text

ご質問はありますか？

Slide 133

Slide 133 text

【タスク】新しいフロー図を作ろう

Slide 134

Slide 134 text

Slide 135

Slide 135 text

ワーク内容 1. ペルソナ、シナリオ、現行アプリの構造シートをもう一度見る 2. いままでのワークの結果を眺める 3. 新しいフロー図を書いてみる

Slide 136

Slide 136 text

フロー図のルール ● 「操作のシナリオ」にあるものが対象。ただし主要な部分だけでOK ● ハコは画面単位と一致しない。あくまで「ユーザーが見るもの→やること」でハコを作って繋ぐ ○ 先のメルカリ・amazon・パルシステム・ZOZOTOWNのアプローチの違いを思い出す。どれも「コレクション：カテゴリ名称」のハコはあるが、画面の括りは異なる ● やること欄の中で、そのハコの中で終わるものは矢印を繋がなくてよい ○ この例で言うと「ブックマークする」「注文する」はその場で終わるアクション ● 「戻る」アクションは省略する

Slide 137

Slide 137 text

No content

Slide 138

Slide 138 text

ご質問はありますか？

Slide 139

Slide 139 text

　スタート！

Slide 140

Slide 140 text

ワーク内容 1. ペルソナ、シナリオ、現行アプリの構造シートをもう一度見る 2. いままでのワークの結果を眺める 3. 新しいフロー図を書いてみる

Slide 141

Slide 141 text

　終了！

Slide 142

Slide 142 text

ワーク④

Slide 143

Slide 143 text

【タスク】ペーパープロトタイピング

Slide 144

Slide 144 text

No content

Slide 145

Slide 145 text

ワーク内容 1. ペルソナ、シナリオ、現行アプリの構造シートをもう一度見る 2. いままでのワークの結果を眺める 3. テンプレートを使って、主要画面のペーパープロトタイプを作成する ※精緻でなく、構成がわかるレベルでOK

Slide 146

Slide 146 text

いままで出てきた事例も参考に ● 西友ネットスーパー ● 価格.com ● amazon ● メルカリ ● ZOZOTOWN ● パルシステム（アプリ）

Slide 147

Slide 147 text

ご質問はありますか？

Slide 148

Slide 148 text

　スタート！

Slide 149

Slide 149 text

Slide 150

Slide 150 text

　終了！

Slide 151

Slide 151 text

成果発表

Slide 152

Slide 152 text

チームごとに発表（準備） ● 1チームあたり5分で発表です ● だれが発表者になるか、どんな風に話すか、相談してください

Slide 153

Slide 153 text

　スタート！

Slide 154

Slide 154 text

チームごとに発表（準備） ● 1チームあたり5分で発表です ● だれが発表者になるか、どんな風に話すか、相談してください

Slide 155

Slide 155 text

　終了！

Slide 156

Slide 156 text

チームごとに発表 ● 発表者の方、ご起立ください ● じゃんけんで勝った順で発表しましょう！