SlideShare una empresa de Scribd logo
1 de 69
by NASA Goddard Space Flight Center
Learnbasicsof UXDesign
坂本貴史
2015.02.25
グラフィックデザイナー出身
ネットイヤーグループ参画
HCD-Net 評議員
OpenUM プロジェクト発足
寄稿・講演多数
著書『IAシンキング』ほか
坂本貴史
@bookslope
by Sgkh
637Gbps
121Tbps
2006
2025
2010
2015
2020
ネット情報流通量(予想)経済産業省
情報は少ないほどきちんと処理される
読むことと理解することは同じではない
一度に覚えられるのは4つだけ
目標に近づくほど「ヤル気」が出る
データより物語のほうが説得力がある
Learn basics of UX Design
Learn basics of UX Design
Learn basics of UX Design
Learn basics of UX Design
なぜそうあるべきか
データ 情報 文脈
Learn basics of UX Design
手続きメニュー
カード挿入口
通帳挿入口
紙幣挿入口
営業時間
お知らせ
電卓
注意
注意
注意
注意
問い合わせ先
Learn basics of UX Design
Good UI = Good UX
ユーザビリティテストで問題点を抽出し修正すること (治療)に
依存しすぎるのではなく、設計/開発の段階でユーザビリティ
上の問題をあらかじめ潰しておくこと (予防) が大事
Rolf Molich, Usability testing myths
“
“
シーン レンズプロセス
プロセスが違う
by color-ip.com
Why?
具現化
表層
骨格
構造
要件
戦略
ビジュアルデザイン
ナビゲーション

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

デザイン
機能仕様
インターフェース

デザイン
情報デザイン
コンテンツ要求
情報アーキテクチャ
ユーザーニーズ
サイトの目的
戦略策定 インターフェース
アクティビティ インタラクションサービス
シナリオ
Learn basics of UX Design
インターフェース
インタラクション
シナリオ
アクティビティ
How it looks How it works
どう機能するかどう見えるか
by Saku Takakusaki
UXDesign
by Saku Takakusaki
Learn basics of UX Design
インサイト ソリューション
どこでも仕事がしたい
支払いを手早くしたい
心地良く過ごしたい アロマの香り
Wi-Fi 環境
クレジットカード支払い
利用状況の理解
デザインの作成
要求の明確化評価、再検証
1
2
3
4 HCD Process
ユーザーテスト ペルソナ/シナリオ
インタビュー
プロトタイピング
シーンが違う
by Julien GONG Min
D2C, マルチデバイス利用動向調査, 2013/05
情報をじっくり調べる時
10%
9%
82%
D2C, マルチデバイス利用動向調査, 2013/05
外出先や移動中での利用
9%
4%
87%
1  2  3  4  5  6  7  8  9  10  11  12  1  2  3  4  5  6  7  8  9  10  11  12
Pocket Trend, January 12th, 2011
Is Mobile Affecting When We Read?
by Marco Derksen
そのシーンに求められるもの
タッチポイント
Learn basics of UX Design
ジャーニーマップ
by Jacopo Romei
ステージ
メディア・チャンネル
行動・タッチポイント
場所・環境
感情
ジャーニーマップ
Learn basics of UX Design
店の入口で待つ
待ち時間が長そう…
店の入口
列に並ぶ
何にしようかな
レジ前の列
ディスプレイを見る
ディスプレイの商品名が見えない…
レジの直前
お会計をする
これ飲みたい!
レジ
店の入口で待つ
待ち時間が長そう…
店の入口
列に並ぶ
何にしようかな
レジ前の列
ディスプレイを見る
商品名が読めない…
レジの直前
お会計をする
これ飲みたい!
レジ
ジャーニーマッピング
ジャーニーからタッチポイントをデザインする
レンズが違う
by visualpun.ch
一方向性
固定・ストック型の情報
一覧性が高い
入手方法はひとつ
端末は不要
双方向性
流動・フロー型の情報
一覧性が低い
入手方法が選べる
専用端末が必要
デジタル リアル
Learn basics of UX Design
TV Web
くわしくキッカケ
Learn basics of UX Design
Learn basics of UX Design
Learn basics of UX Design
ユーザー行動に合った情報提供
Learn basics of UX Design
Learn basics of UX Design
Learn basics of UX Design
チラ見でもわかるシンプルなデザイン
必要十分な表現に留める
ちら見しやすいようにデザインする
階層を深くしない
自然な形で接点を見せる
途中で操作を止めても同じ事ができる
時間軸を使って情報を整理する
Learn basics of UX Design
Learn basics of UX Design
レンズに合ったデザイン
シーン レンズプロセス
提供価値 クロスチャネルジャーニーマップ
UXマップを作成するツールを開発中
@bookslope
bookslope@gmail.com
bookslope.jp/blog/
Special Thanks

Más contenido relacionado

Destacado

Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016Atsushi HASEGAWA, Ph.D.
 
これから求められる自社メディアの最適化・効果分析について
これから求められる自社メディアの最適化・効果分析についてこれから求められる自社メディアの最適化・効果分析について
これから求められる自社メディアの最適化・効果分析についてNetyearGroup
 
Business ICT seminar #43 Keynote Presentation
Business ICT seminar #43 Keynote PresentationBusiness ICT seminar #43 Keynote Presentation
Business ICT seminar #43 Keynote PresentationTakashi Sakamoto
 
”サポートから始めるソーシャルCRM" netyear seminar 20101008
”サポートから始めるソーシャルCRM" netyear seminar 20101008”サポートから始めるソーシャルCRM" netyear seminar 20101008
”サポートから始めるソーシャルCRM" netyear seminar 20101008NetyearGroup
 
TC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
TC x IA "UX Design" Technical Communication Symposium 2012 TokyoTC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
TC x IA "UX Design" Technical Communication Symposium 2012 TokyoTakashi Sakamoto
 
Beyond Mobile IA Thinking at Goodpatch LT
Beyond Mobile IA Thinking at Goodpatch LTBeyond Mobile IA Thinking at Goodpatch LT
Beyond Mobile IA Thinking at Goodpatch LTTakashi Sakamoto
 
”Facebookと企業の上手な付き合い方について" netyeargroup seminar 20110114
”Facebookと企業の上手な付き合い方について" netyeargroup seminar 20110114”Facebookと企業の上手な付き合い方について" netyeargroup seminar 20110114
”Facebookと企業の上手な付き合い方について" netyeargroup seminar 20110114NetyearGroup
 
「ソーシャルメディアがもたらす変化と企業戦略 ~ビジネスチャンスを活かす組織づくり~」
「ソーシャルメディアがもたらす変化と企業戦略 ~ビジネスチャンスを活かす組織づくり~」「ソーシャルメディアがもたらす変化と企業戦略 ~ビジネスチャンスを活かす組織づくり~」
「ソーシャルメディアがもたらす変化と企業戦略 ~ビジネスチャンスを活かす組織づくり~」NetyearGroup
 
「地域がメディアを持つ時代」~地域共創メディア開発への挑戦~
「地域がメディアを持つ時代」~地域共創メディア開発への挑戦~「地域がメディアを持つ時代」~地域共創メディア開発への挑戦~
「地域がメディアを持つ時代」~地域共創メディア開発への挑戦~NetyearGroup
 
”FaceBookと企業サイト" netyear seminar 20101008
”FaceBookと企業サイト" netyear seminar 20101008”FaceBookと企業サイト" netyear seminar 20101008
”FaceBookと企業サイト" netyear seminar 20101008NetyearGroup
 
ネットイヤーグループ×レスポンシス共催 米国最新事例を紹介!利益が30%向上した次世代のデジタルコミュニケーションの実践とは?
ネットイヤーグループ×レスポンシス共催  米国最新事例を紹介!利益が30%向上した次世代のデジタルコミュニケーションの実践とは?ネットイヤーグループ×レスポンシス共催  米国最新事例を紹介!利益が30%向上した次世代のデジタルコミュニケーションの実践とは?
ネットイヤーグループ×レスポンシス共催 米国最新事例を紹介!利益が30%向上した次世代のデジタルコミュニケーションの実践とは?NetyearGroup
 
2013.12.06開催 Google アナリティクス プレミアム導入検討・活用セミナー ~マーケティングプラットフォームとしての可能性を考える~
2013.12.06開催 Google アナリティクス プレミアム導入検討・活用セミナー ~マーケティングプラットフォームとしての可能性を考える~2013.12.06開催 Google アナリティクス プレミアム導入検討・活用セミナー ~マーケティングプラットフォームとしての可能性を考える~
2013.12.06開催 Google アナリティクス プレミアム導入検討・活用セミナー ~マーケティングプラットフォームとしての可能性を考える~NetyearGroup
 
20110712中国ecセミナー
20110712中国ecセミナー20110712中国ecセミナー
20110712中国ecセミナーNetyearGroup
 
成果を出すデジタル化支援とは
成果を出すデジタル化支援とは成果を出すデジタル化支援とは
成果を出すデジタル化支援とはNetyearGroup
 
20170215 NPS導入のSTEPと成功に導くアプローチとは
20170215 NPS導入のSTEPと成功に導くアプローチとは20170215 NPS導入のSTEPと成功に導くアプローチとは
20170215 NPS導入のSTEPと成功に導くアプローチとはNetyearGroup
 
Lead the webmasters to future with "IA Thinking" for UX Design
Lead the webmasters to future with "IA Thinking" for UX DesignLead the webmasters to future with "IA Thinking" for UX Design
Lead the webmasters to future with "IA Thinking" for UX DesignTakashi Sakamoto
 
訳書『デザイニング・インターフェース』について
訳書『デザイニング・インターフェース』について訳書『デザイニング・インターフェース』について
訳書『デザイニング・インターフェース』についてNoriyo Asano
 

Destacado (18)

Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016
 
これから求められる自社メディアの最適化・効果分析について
これから求められる自社メディアの最適化・効果分析についてこれから求められる自社メディアの最適化・効果分析について
これから求められる自社メディアの最適化・効果分析について
 
Business ICT seminar #43 Keynote Presentation
Business ICT seminar #43 Keynote PresentationBusiness ICT seminar #43 Keynote Presentation
Business ICT seminar #43 Keynote Presentation
 
”サポートから始めるソーシャルCRM" netyear seminar 20101008
”サポートから始めるソーシャルCRM" netyear seminar 20101008”サポートから始めるソーシャルCRM" netyear seminar 20101008
”サポートから始めるソーシャルCRM" netyear seminar 20101008
 
TC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
TC x IA "UX Design" Technical Communication Symposium 2012 TokyoTC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
TC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
 
Beyond Mobile IA Thinking at Goodpatch LT
Beyond Mobile IA Thinking at Goodpatch LTBeyond Mobile IA Thinking at Goodpatch LT
Beyond Mobile IA Thinking at Goodpatch LT
 
”Facebookと企業の上手な付き合い方について" netyeargroup seminar 20110114
”Facebookと企業の上手な付き合い方について" netyeargroup seminar 20110114”Facebookと企業の上手な付き合い方について" netyeargroup seminar 20110114
”Facebookと企業の上手な付き合い方について" netyeargroup seminar 20110114
 
「ソーシャルメディアがもたらす変化と企業戦略 ~ビジネスチャンスを活かす組織づくり~」
「ソーシャルメディアがもたらす変化と企業戦略 ~ビジネスチャンスを活かす組織づくり~」「ソーシャルメディアがもたらす変化と企業戦略 ~ビジネスチャンスを活かす組織づくり~」
「ソーシャルメディアがもたらす変化と企業戦略 ~ビジネスチャンスを活かす組織づくり~」
 
「地域がメディアを持つ時代」~地域共創メディア開発への挑戦~
「地域がメディアを持つ時代」~地域共創メディア開発への挑戦~「地域がメディアを持つ時代」~地域共創メディア開発への挑戦~
「地域がメディアを持つ時代」~地域共創メディア開発への挑戦~
 
”FaceBookと企業サイト" netyear seminar 20101008
”FaceBookと企業サイト" netyear seminar 20101008”FaceBookと企業サイト" netyear seminar 20101008
”FaceBookと企業サイト" netyear seminar 20101008
 
ネットイヤーグループ×レスポンシス共催 米国最新事例を紹介!利益が30%向上した次世代のデジタルコミュニケーションの実践とは?
ネットイヤーグループ×レスポンシス共催  米国最新事例を紹介!利益が30%向上した次世代のデジタルコミュニケーションの実践とは?ネットイヤーグループ×レスポンシス共催  米国最新事例を紹介!利益が30%向上した次世代のデジタルコミュニケーションの実践とは?
ネットイヤーグループ×レスポンシス共催 米国最新事例を紹介!利益が30%向上した次世代のデジタルコミュニケーションの実践とは?
 
2013.12.06開催 Google アナリティクス プレミアム導入検討・活用セミナー ~マーケティングプラットフォームとしての可能性を考える~
2013.12.06開催 Google アナリティクス プレミアム導入検討・活用セミナー ~マーケティングプラットフォームとしての可能性を考える~2013.12.06開催 Google アナリティクス プレミアム導入検討・活用セミナー ~マーケティングプラットフォームとしての可能性を考える~
2013.12.06開催 Google アナリティクス プレミアム導入検討・活用セミナー ~マーケティングプラットフォームとしての可能性を考える~
 
20110712中国ecセミナー
20110712中国ecセミナー20110712中国ecセミナー
20110712中国ecセミナー
 
成果を出すデジタル化支援とは
成果を出すデジタル化支援とは成果を出すデジタル化支援とは
成果を出すデジタル化支援とは
 
20170215 NPS導入のSTEPと成功に導くアプローチとは
20170215 NPS導入のSTEPと成功に導くアプローチとは20170215 NPS導入のSTEPと成功に導くアプローチとは
20170215 NPS導入のSTEPと成功に導くアプローチとは
 
World IA Day 2017 Tokyo
World IA Day 2017 TokyoWorld IA Day 2017 Tokyo
World IA Day 2017 Tokyo
 
Lead the webmasters to future with "IA Thinking" for UX Design
Lead the webmasters to future with "IA Thinking" for UX DesignLead the webmasters to future with "IA Thinking" for UX Design
Lead the webmasters to future with "IA Thinking" for UX Design
 
訳書『デザイニング・インターフェース』について
訳書『デザイニング・インターフェース』について訳書『デザイニング・インターフェース』について
訳書『デザイニング・インターフェース』について
 

Más de Takashi Sakamoto

Casual Journey Mapping for UX Design Method - UXSF 2015 Summer
Casual Journey Mapping for UX Design Method - UXSF 2015 SummerCasual Journey Mapping for UX Design Method - UXSF 2015 Summer
Casual Journey Mapping for UX Design Method - UXSF 2015 SummerTakashi Sakamoto
 
UX approach for real cross media planning
UX approach for real cross media planningUX approach for real cross media planning
UX approach for real cross media planningTakashi Sakamoto
 
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014Takashi Sakamoto
 
東北セミボラ #6 IA/UXデザインワークショップ
東北セミボラ #6 IA/UXデザインワークショップ東北セミボラ #6 IA/UXデザインワークショップ
東北セミボラ #6 IA/UXデザインワークショップTakashi Sakamoto
 
CSS Nite LP33 UI/UX "Bridge Builder"
CSS Nite LP33 UI/UX "Bridge Builder"CSS Nite LP33 UI/UX "Bridge Builder"
CSS Nite LP33 UI/UX "Bridge Builder"Takashi Sakamoto
 
Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Thinking Backwards: モバイルデザインと情報アーキテクチャの課題Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Thinking Backwards: モバイルデザインと情報アーキテクチャの課題Takashi Sakamoto
 
#DevLOVE IAシンキングによるモバイル再設計
#DevLOVE IAシンキングによるモバイル再設計#DevLOVE IAシンキングによるモバイル再設計
#DevLOVE IAシンキングによるモバイル再設計Takashi Sakamoto
 
schoo "よりよいサイトやアプリを作るための、情報設計"
schoo "よりよいサイトやアプリを作るための、情報設計"schoo "よりよいサイトやアプリを作るための、情報設計"
schoo "よりよいサイトやアプリを作るための、情報設計"Takashi Sakamoto
 
"UI Patterns for Smartphone" HCD-Net SD #6
"UI Patterns for Smartphone" HCD-Net SD #6"UI Patterns for Smartphone" HCD-Net SD #6
"UI Patterns for Smartphone" HCD-Net SD #6Takashi Sakamoto
 
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #01 ウェブサイトやアプリを成功に導くUXデザインUX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #01 ウェブサイトやアプリを成功に導くUXデザインTakashi Sakamoto
 
UX design for #02 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #02 ウェブサイトやアプリを成功に導くUXデザインUX design for #02 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #02 ウェブサイトやアプリを成功に導くUXデザインTakashi Sakamoto
 
Future Sync #03 "Beyond IA Thinking"
Future Sync #03 "Beyond IA Thinking"Future Sync #03 "Beyond IA Thinking"
Future Sync #03 "Beyond IA Thinking"Takashi Sakamoto
 
Schoo the user experience of web site
Schoo the user experience of web siteSchoo the user experience of web site
Schoo the user experience of web siteTakashi Sakamoto
 
"World IA Day 2012 Tokyo" Keynote Presentation
"World IA Day 2012 Tokyo" Keynote Presentation"World IA Day 2012 Tokyo" Keynote Presentation
"World IA Day 2012 Tokyo" Keynote PresentationTakashi Sakamoto
 
HCD-Net "Information inventory" of local government website
HCD-Net "Information inventory" of local government websiteHCD-Net "Information inventory" of local government website
HCD-Net "Information inventory" of local government websiteTakashi Sakamoto
 
OpenUM presents "Content First" for local government sites"
OpenUM presents "Content First" for local government sites" OpenUM presents "Content First" for local government sites"
OpenUM presents "Content First" for local government sites" Takashi Sakamoto
 
aquent "IA" Workshop @Osaka 20111123
aquent "IA" Workshop @Osaka 20111123aquent "IA" Workshop @Osaka 20111123
aquent "IA" Workshop @Osaka 20111123Takashi Sakamoto
 
"IA and Global Web" at FatWire Seminar 20110607
"IA and Global Web" at FatWire Seminar 20110607"IA and Global Web" at FatWire Seminar 20110607
"IA and Global Web" at FatWire Seminar 20110607Takashi Sakamoto
 
UX Design Project Guide at WebUX information design forum 20110604
UX Design Project Guide at WebUX information design forum 20110604UX Design Project Guide at WebUX information design forum 20110604
UX Design Project Guide at WebUX information design forum 20110604Takashi Sakamoto
 
"IA Thinking" Workshop at Open-I Seminar 20110528
"IA Thinking" Workshop at Open-I Seminar 20110528 "IA Thinking" Workshop at Open-I Seminar 20110528
"IA Thinking" Workshop at Open-I Seminar 20110528 Takashi Sakamoto
 

Más de Takashi Sakamoto (20)

Casual Journey Mapping for UX Design Method - UXSF 2015 Summer
Casual Journey Mapping for UX Design Method - UXSF 2015 SummerCasual Journey Mapping for UX Design Method - UXSF 2015 Summer
Casual Journey Mapping for UX Design Method - UXSF 2015 Summer
 
UX approach for real cross media planning
UX approach for real cross media planningUX approach for real cross media planning
UX approach for real cross media planning
 
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
 
東北セミボラ #6 IA/UXデザインワークショップ
東北セミボラ #6 IA/UXデザインワークショップ東北セミボラ #6 IA/UXデザインワークショップ
東北セミボラ #6 IA/UXデザインワークショップ
 
CSS Nite LP33 UI/UX "Bridge Builder"
CSS Nite LP33 UI/UX "Bridge Builder"CSS Nite LP33 UI/UX "Bridge Builder"
CSS Nite LP33 UI/UX "Bridge Builder"
 
Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Thinking Backwards: モバイルデザインと情報アーキテクチャの課題Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
Thinking Backwards: モバイルデザインと情報アーキテクチャの課題
 
#DevLOVE IAシンキングによるモバイル再設計
#DevLOVE IAシンキングによるモバイル再設計#DevLOVE IAシンキングによるモバイル再設計
#DevLOVE IAシンキングによるモバイル再設計
 
schoo "よりよいサイトやアプリを作るための、情報設計"
schoo "よりよいサイトやアプリを作るための、情報設計"schoo "よりよいサイトやアプリを作るための、情報設計"
schoo "よりよいサイトやアプリを作るための、情報設計"
 
"UI Patterns for Smartphone" HCD-Net SD #6
"UI Patterns for Smartphone" HCD-Net SD #6"UI Patterns for Smartphone" HCD-Net SD #6
"UI Patterns for Smartphone" HCD-Net SD #6
 
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #01 ウェブサイトやアプリを成功に導くUXデザインUX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
 
UX design for #02 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #02 ウェブサイトやアプリを成功に導くUXデザインUX design for #02 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #02 ウェブサイトやアプリを成功に導くUXデザイン
 
Future Sync #03 "Beyond IA Thinking"
Future Sync #03 "Beyond IA Thinking"Future Sync #03 "Beyond IA Thinking"
Future Sync #03 "Beyond IA Thinking"
 
Schoo the user experience of web site
Schoo the user experience of web siteSchoo the user experience of web site
Schoo the user experience of web site
 
"World IA Day 2012 Tokyo" Keynote Presentation
"World IA Day 2012 Tokyo" Keynote Presentation"World IA Day 2012 Tokyo" Keynote Presentation
"World IA Day 2012 Tokyo" Keynote Presentation
 
HCD-Net "Information inventory" of local government website
HCD-Net "Information inventory" of local government websiteHCD-Net "Information inventory" of local government website
HCD-Net "Information inventory" of local government website
 
OpenUM presents "Content First" for local government sites"
OpenUM presents "Content First" for local government sites" OpenUM presents "Content First" for local government sites"
OpenUM presents "Content First" for local government sites"
 
aquent "IA" Workshop @Osaka 20111123
aquent "IA" Workshop @Osaka 20111123aquent "IA" Workshop @Osaka 20111123
aquent "IA" Workshop @Osaka 20111123
 
"IA and Global Web" at FatWire Seminar 20110607
"IA and Global Web" at FatWire Seminar 20110607"IA and Global Web" at FatWire Seminar 20110607
"IA and Global Web" at FatWire Seminar 20110607
 
UX Design Project Guide at WebUX information design forum 20110604
UX Design Project Guide at WebUX information design forum 20110604UX Design Project Guide at WebUX information design forum 20110604
UX Design Project Guide at WebUX information design forum 20110604
 
"IA Thinking" Workshop at Open-I Seminar 20110528
"IA Thinking" Workshop at Open-I Seminar 20110528 "IA Thinking" Workshop at Open-I Seminar 20110528
"IA Thinking" Workshop at Open-I Seminar 20110528
 

Learn basics of UX Design