Tweet
Tweet

Slide 1

Slide 1 text

UIデザインを行う際に知っておきたい、 情報設計とインタラクションデザインの基礎 伊原 力也 テクトモ #8｜2019.01.31 1

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

伊原 力也 3 ● freee株式会社 プロダクトマネジャー ● HCD-Net 評議委員 / 認定人間中心設計専門家 ● ウェブアクセシビリティ基盤委員会 WG1委員

Slide 4

Slide 4 text

https://www.hcdnet.org 4

Slide 5

Slide 5 text

https://waic.jp 5

Slide 6

Slide 6 text

6

Slide 7

Slide 7 text

本日の流れ ● WebデザインとUIデザインの違い ● UIデザインの進め方? ● ペルソナとUIの間にある3つのギャップ ● 理想シナリオ ● 情報構造設計 ● インタラクションデザイン

Slide 8

Slide 8 text

WebデザインとUIデザインの違い

Slide 9

Slide 9 text

アプリケーションはプラットフォームがある ● iOS・Android ● プラットフォームのお作法に乗りつつ、独自の機能性を考える ● Webなら同じ？

Slide 10

Slide 10 text

Webサイトなのかアプリケーションなのか ● WebサイトデザインをやっているからUIデザインできるわけではない ● 同じ木から出来ていても、新聞と椅子ぐらい違う ● 閲覧ベースかインタラクションベースかで重視するポイントは異なる

Slide 11

Slide 11 text

アプリケーションは目的を設定しやすい ● 例：ターゲットを絞らずに広く閲覧してもらうサイト ● 例：特定のユーザーがゴールに向かうことを支援するアプリ ● 提供側の意図を適切に伝えるのか、ユーザーをゴールに向かわせるのか

Slide 12

Slide 12 text

Webサイトを作っていても、その素養は磨ける ● フォーム最適化：業務アプリのグロースやUI改善に活きる ● ECサイトやシミュレーター案件：Webサイトとアプリの境界線 ● CMSの入出力の設計：エンドユーザーではない人のタスクを支援する ● いずれにしてもユーザーのゴールがある案件に携わるのが重要

Slide 13

Slide 13 text

UIデザインの進め方?

Slide 14

Slide 14 text

よくある話 ● よさそうなサイトやアプリを日々ウォッチする ● デザイン写経でパターンを身につける ● なるべくいろんなものを使ってみる ● そうすると構成やUIが思いつく……?

Slide 15

Slide 15 text

よくある実務の進行 ● いきなりサイトマップを書く ● いきなりワイヤーフレームを書く ● いきなりUIをデザインする ● いきなりプロトタイプを作る

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

基礎を知るとより近道ができる ● UIデザインには根幹となる概念がある ● それを知った上で学習や実務を行うのが合理的 ● 文法を知ったうえで用例を学ぼう

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

よくある実務の進行：その２ ● ペルソナとジャーニーマップを作る ● いきなりサイトマップを書く ● いきなりワイヤーフレームを書く ● いきなりUIをデザインする ● いきなりプロトタイプを作る

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

ペルソナとUIの間にある3つのギャップ 1. 理想シナリオ 2. 情報構造設計 3. インタラクションデザイン

Slide 29

Slide 29 text

1. 理想シナリオ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

2. 情報構造設計

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

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

構造のパターン

Slide 59

Slide 59 text

ツリー

Slide 60

Slide 60 text

ファセット

Slide 61

Slide 61 text

ウェブ

Slide 62

Slide 62 text

ハブ＆スポーク

Slide 63

Slide 63 text

リニア

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

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

LATCH

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

3. インタラクションデザイン

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

ポイント ● OOUI ● 4つのパターン ● 画面で考えない

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

？

Slide 93

Slide 93 text

ユーザーの興味関心の対象はこちらにある 重さ 産地 色 賞味期限 価格 割引率 番号 評価 等級 人気度

Slide 94

Slide 94 text

ユーザーの興味関心の対象はこちらにある

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

OOUI タスクベースUI ● 何をするか（動詞）を決めて、もの（名詞）を選ぶ オブジェクトベースUI ● もの（名詞）を選んで、何をするか（動詞）決める

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Modal

Slide 103

Slide 103 text

Modeless

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

画面のことは後で考える ● 画面の大きさ ● 表示すべき内容の量 ● ユーザーのリテラシーの想定 ● ユーザーの利用状況の想定 ● ユーザーの学習度合いの想定

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

http://modelessdesign.com/

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

そしてUIデザインへ

Slide 117

Slide 117 text

ここまで来ると、これが活きる ● よさそうなサイトやアプリを日々ウォッチする ● デザイン写経でパターンを身につける ● なるべくいろんなものを使ってみる ● シナリオを考え、情報構造設計を行い、インタラクションを考える ● そうすると、適用すべきUIパターンが思いつく

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

本日の流れ ● WebデザインとUIデザインの違い ● UIデザインの進め方? ● ペルソナとUIの間にある3つのギャップ ● 理想シナリオ ● 情報構造設計 ● インタラクションデザイン ● そしてUIデザインへ

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

ありがとうございました 引き続きQ&Aコーナーへ！ @magi1125 124