Weitere ähnliche Inhalte
Ähnlich wie UXとUXのためのデザインのはなし (20130824 使いたくなるUIをつくる!フロントエンド勉強会) (20)
Mehr von chachaki chachaki (20)
UXとUXのためのデザインのはなし (20130824 使いたくなるUIをつくる!フロントエンド勉強会)
- 4. 2nd FACTORY CO.,Ltd.
4
自己紹介
2007年年より、通信システム系受託
システム企業に⼊入社。⾃自社製品開
発部署にて、ホームネットワーク
系メディアプレイヤー関連のミド
ルウェア開発業務に従事。2012年年
11⽉月に株式会社セカンドファクト
リー⼊入社。
エンジニアとしてExTOUCH、
ExTOUCH Biz、QOOpaなどのプロ
ダクト・サービス開発に従事。
佐々⽊木 将之
エクスペリエンスアーキテクト
プロダクト&サービスグループ
- 6. 2nd FACTORY CO.,Ltd.
6
セカンドファクトリーの提供できること
UX&CLOUD Professional Services
Comfortable experience for everyone everywhere
Device CLOUD
Consulting(Engagement)
Solution & Services
Design & Development
- 10. 2nd FACTORY CO.,Ltd.
10
自己紹介
2007年年より、通信システム系受託
システム企業に⼊入社。⾃自社製品開
発部署にて、ホームネットワーク
系メディアプレイヤー関連のミド
ルウェア開発業務に従事。2012年年
11⽉月に株式会社セカンドファクト
リー⼊入社。
エンジニアとしてExTOUCH、
ExTOUCH Biz、QOOpaなどの⾃自社
プロダクト・サービス開発に従事。
佐々⽊木 将之
エクスペリエンスアーキテクト
プロダクト&サービスグループ
- 11. 2nd FACTORY CO.,Ltd.
11
裏の自己紹介
「開発の楽しさを発⾒見見しよう。広
げよう。」「開発の現場を前進さ
せよう」をコンセプトとした
【DevLOVE】の裏裏⽅方に2010年年10
⽉月よりジョイン。2010年年度度産業技
術⼤大学院⼤大学履履修証明プログラム
⼈人間中⼼心デザイン履履修証明取得。
2011年年3⽉月より「現場で使える⼈人
間中⼼心デザインの実践」をコンセ
プトとした【hcdvalue】の⽴立立ち上
げより参加。
ちゃちゃき
勉強会イベント・ワークショップの企画・運営
DevLOVE & hcdvalue
chachaki
- 12. 2nd FACTORY CO.,Ltd.
12
社外勉強会コミュニティ
hcdvalue
DevLOVE
開発の楽しさを発⾒見見しよう。広げよう。
開発の現場を前進させよう。
現場で使える⼈人間中⼼心設計(HCD)の実践
- 14. 2nd FACTORY CO.,Ltd.
14
私のモチベーション
エンジニアリングと
(創り出す⽅方法、⽣生み出す⽅方法、プラスの⽅方向)
デザインを
(⾒見見分ける⽅方法、⾒見見極める⽅方法、マイナスの⽅方向)
繋げていきたい
- 18. 2nd FACTORY CO.,Ltd.
18
ISO9241-210における定義
Ø 製品やシステム、サービスの利利⽤用、および/もしくは予
想された使い⽅方によってもたらされる⼈人々の知覚と反応
1. 使⽤用前、使⽤用中、使⽤用後に起こる、ユーザの感情、新年年、嗜好、近く、⽣生理理学的・⼼心理理学
的な反応、態度度、達成感のすべてを含む。
2. ブランドイメージ、⾒見見た⽬目、機能、システムのパフォーマンス、インタラクティブシステ
ムのインタラクティブな振る舞いと⽀支援機能、事前の経験から⽣生じたユーザの内的および
⾝身体的状態、態度度、スキルとパーソナリティ、利利⽤用状況の結果である。
3. ユーザの個⼈人的⽬目標という観点から考えた時には、通常はユーザーエクスペリエンスに付
随する知覚的・感情的な側⾯面をユーザービリティは含むことができる。ユーザービリティ
の基準を⽤用いてユーザーエクスペリエンスの諸側⾯面を評価することができる。
- 19. 2nd FACTORY CO.,Ltd.
19
ISO9241-210における定義
Ø 製品やシステム、サービスの利利⽤用、および/もしくは予
想された使い⽅方によってもたらされる⼈人々の知覚と反応
1. 使⽤用前、使⽤用中、使⽤用後に起こる、ユーザの感情、新年年、嗜好、近く、⽣生理理学的・⼼心理理学
的な反応、態度度、達成感のすべてを含む。
2. ブランドイメージ、⾒見見た⽬目、機能、システムのパフォーマンス、インタラクティブシステ
ムのインタラクティブな振る舞いと⽀支援機能、事前の経験から⽣生じたユーザの内的および
⾝身体的状態、態度度、スキルとパーソナリティ、利利⽤用状況の結果である。
3. ユーザの個⼈人的⽬目標という観点から考えた時には、通常はユーザーエクスペリエンスに付
随する知覚的・感情的な側⾯面をユーザービリティは含むことができる。ユーザービリティ
の基準を⽤用いてユーザーエクスペリエンスの諸側⾯面を評価することができる。
- 21. 2nd FACTORY CO.,Ltd.
21
インタフェースによって感じ方が異なる例
h"p://blogs.yahoo.co.jp/kmatsui0317/11029354.html
h"p://www.hitachi.co.jp/area/kansai/portal/casestudy/2068288_39249.html
エスカレータ
スロープ式エスカレータ
- 22. 2nd FACTORY CO.,Ltd.
22
ヒトとモノ・サービスの関係
コンテキスト(利利⽤用状況)
ヒト 画⾯面
タッチ
ポイント
システム
Web
サービス
UX
フロントエンド バックエンド
- 23. 2nd FACTORY CO.,Ltd.
23
ヒトとモノ・サービスの関係
コンテキスト(利利⽤用状況)
ヒト 画⾯面
タッチ
ポイント
システム
Web
サービス
UX
インタラクション
Ix
インタフェース
UI
- 24. 2nd FACTORY CO.,Ltd.
24
ヒトとモノ・サービスの関係
コンテキスト(利利⽤用状況)
ヒト 画⾯面
タッチ
ポイント
システム
Web
サービス
UX
利利⽤用状況が異異なれば
同じUIでもUXは
異異なります
- 25. 2nd FACTORY CO.,Ltd.
25
利用状況によって感じ方が異なる例
Ø 「google map」
ファーストビューで現在位置が表⽰示
される
-‐‑‒ 現在位置の近くを探したい
もし
・検索索したかったら?
・絶対に現在位置情報を送信しては
いけない状況だったら?
- 26. 2nd FACTORY CO.,Ltd.
26
ここまでのまとめ
Ø UXはヒトの内⾯面の話です
– UXとUIは関連はするが別物です
– 字⾯面が似ているだけです
Ø UX「のための」デザインです(Design for UX)
– UX「を」デザインするのではないです(Design UX)
– 私達開発者がデザインする対象は「⼈人⼯工物」です
Ø 利利⽤用状況の把握が⼤大事です
– 全く同じUIでも、利利⽤用状況が異異なれば全く違うものになります
- 28. 2nd FACTORY CO.,Ltd.
28
UX白書について
Ø UX⽩白書とは?
UXの薄い本
ドイツのDagstuhlで専⾨門家(研究
者・実務家)30名が「UXの概念念」に
ついて共通認識識を形成すべく、
2010年年9⽉月に実施したセミナーにて
議論論された内容をまとめた宣⾔言⽂文。
2011年年2⽉月英語版web公開。
2011年年12⽉月⽇日本語版web公開。 h"p://www.allaboutux.org/uxwhitepaper
h"p://site.hcdvalue.org/docs
- 29. 2nd FACTORY CO.,Ltd.
29
UX白書における定義(期間的概念)
予期的
UX
利利⽤用前
⼀一時的
UX
利利⽤用中
エピソード
的UX
利利⽤用後
累累積的
UX
利利⽤用時間
全体
体験を
想像する
体験する ある体験を
内省する
回想する
iPhoneに触れる前、
CMなどetc.
iPhoneを
使ってる間etc.
iPhoneについてブロ
グに書くetc.
iPhoneが
無くてはならない
ものになる
- 30. 2nd FACTORY CO.,Ltd.
30
UXのはなしのまとめ
Ø UXは製品・サービスに「触れている間」だけではない
– 製品・サービスに触れる前
– 製品・サービスに触れた後、思い返す時
– それによって「意味」が形成される
- 33. 2nd FACTORY CO.,Ltd.
33
UXDの話
では、製品・サービスに対する反応は、
全部「UX」なのではないか?
⇒はい。私はそう思います。
⇒⼤大事なのは「UX」ではなく「UXD(Design for UX)」
の視点だと思っています。
- 34. 2nd FACTORY CO.,Ltd.
34
UXDの話
Ø デザイン
– 意匠(装飾)
– 設計(こちらの意味で使っています!)
Ø UXのために「設計」する
Ø UXのために「計画」する
⇒UXを「再⽣生産可能」なものにする
- 35. 2nd FACTORY CO.,Ltd.
35
産業革命以降の話
使い⼿手 作り⼿手
1:1
産業⾰革命
以前
使い⼿手
作り⼿手
N:1
産業⾰革命
以後
「⼀一点もの」
使い⼿手にfixしたものづくり
⼤大量量⽣生産・⼤大量量消費
コスト競争
⾼高機能化
- 38. 2nd FACTORY CO.,Ltd.
38
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
- 39. 2nd FACTORY CO.,Ltd.
39
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXのための
⼈人⼯工物のデザイン
- 40. 2nd FACTORY CO.,Ltd.
40
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXのための
⼈人⼯工物のデザイン
UXを提供するための
仕組みのデザイン
- 41. 2nd FACTORY CO.,Ltd.
41
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXのための
⼈人⼯工物のデザイン
UXを提供するための
仕組みのデザイン
UXを提供する仕組み
の仕組みのデザイン
- 44. 2nd FACTORY CO.,Ltd.
44
ここまでのまとめ
Ø 開発者にとって、⼤大事なのはUXそのものよりUXD
Ø 再⽣生産可能な体験を提供するための話をしましょう
Ø どのレイヤの話をしたいのか
– UXを考えたUIのデザイン
– ユーザーシナリオのデザイン
– ユーザーシナリオを考えられる組織のデザイン
- 48. 2nd FACTORY CO.,Ltd.
48
ここのレイヤの話をします
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXを提供するための
仕組みのデザイン
- 49. 2nd FACTORY CO.,Ltd.
49
こうやったらいいのでは?
ユーザーやその周辺のことを
分析する
ユーザーのための製品・サービ
スを企画する・作ってみる
ユーザーが体験できているか
評価する
ユーザーやその周辺のことを
調べる
- 51. 2nd FACTORY CO.,Ltd.
51
ISO9241-210のHCDプロセス
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
利利⽤用状況の
把握と明⽰示
⼈人間中⼼心設計
プロセスの計画
システムが
ユーザーの要求
事項を満たす
- 52. 2nd FACTORY CO.,Ltd.
52
調査・分析の対象
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
利利⽤用状況の
把握と明⽰示
⼈人間中⼼心設計
プロセスの計画
システムが
ユーザーの要求
事項を満たす
- 54. 2nd FACTORY CO.,Ltd.
54
調査・分析の対象
コンテキスト(利利⽤用状況)
ヒト 画⾯面
(デバイス)
システム
Web
サービス
UX
• インタビュー
• アンケート
• 参与観察
• ペルソナ・シナリ
オ法や構造化
シナリオ法
• KJ法やカード
ソート
• KA法
- 55. 2nd FACTORY CO.,Ltd.
55
解決策作成の対象
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
利利⽤用状況の
把握と明⽰示
⼈人間中⼼心設計
プロセスの計画
システムが
ユーザーの要求
事項を満たす
- 57. 2nd FACTORY CO.,Ltd.
57
解決策作成の対象
コンテキスト(利利⽤用状況)
ヒト 画⾯面
(タッチ
ポイント)
システム
Web
サービス
UX
• ペーパープロト
タイピング
• モックアップ
• アクティングア
ウト
- 58. 2nd FACTORY CO.,Ltd.
58
評価の対象
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
利利⽤用状況の
把握と明⽰示
⼈人間中⼼心設計
プロセスの計画
システムが
ユーザーの要求
事項を満たす
- 61. 2nd FACTORY CO.,Ltd.
61
ここまでのまとめ
Ø UXD(シナリオのデザイン)の⼀一例例としてのHCDプロセ
スをご紹介しました
Ø 調査→分析→試⾏行行→評価のプロセスは単なるPDCAです
し、⼿手法・技法もおおよそ揃ってきました。約10年年の積
み上げがありますので、使わない⼿手はないかなぁと思い
ます。
- 64. 2nd FACTORY CO.,Ltd.
64
QOOPa
Ø クラウドアプリケーション
Ø スマートフォンを利利⽤用
– ⾼高価なハンディ不不要
Ø BYOD・ソーシャル
– SNSを活⽤用して広告可能
- 65. 2nd FACTORY CO.,Ltd.
65
QOOPa
ハンディ端末
お客様の
スマートフォン
オーダーシステム
クラウドアプリケーション
Wifi や 3G で利用可能
常に最新のアプリケーションをご提供!
お客様のスマホでも!
キッチン端末
- 67. 2nd FACTORY CO.,Ltd.
67
これはUXD?
Ø UIデザインと開発の協業
Ø スマートフォンを中⼼心としたシナリオデザイン
Ø そこに⾄至るためのチームのタスク・意識識の共有
- 68. 2nd FACTORY CO.,Ltd.
68
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXのための
⼈人⼯工物のデザイン
UXを提供するための
仕組みのデザイン
UXを提供する仕組み
の仕組みのデザイン
- 70. 2nd FACTORY CO.,Ltd.
70
プロセス
開発プロセス
エンジニアリング
プロセス
デザイン
プロセス
1
2
7
8
3
4
5
6
調査
分析
解決策
評価
要件定義
設計
実装
テスト
- 73. 2nd FACTORY CO.,Ltd.
73
私のモチベーション
エンジニアリングと
(創り出す⽅方法、⽣生み出す⽅方法、プラスの⽅方向)
デザインを
(⾒見見分ける⽅方法、⾒見見極める⽅方法、マイナスの⽅方向)
繋げていきたい
- 74. 2nd FACTORY CO.,Ltd.
74
まとめ(1/4)
Ø UXはヒトの内⾯面の話です
– UXとUIは関連はするが別物です
Ø UX「のための」デザインです(Design for UX)
– UX「を」デザインするのではないです(Design UX)
– 私達開発者がデザインする対象は「⼈人⼯工物」です
Ø 利利⽤用状況の把握が⼤大事です
– 全く同じUIでも、利利⽤用状況が異異なれば全く違うものになります
- 75. 2nd FACTORY CO.,Ltd.
75
まとめ(2/4)
Ø UXは製品・サービスに「触れている間」だけではない
– 製品・サービスに触れる前
– 製品・サービスに触れた後、思い返す時
– それによって「意味」が形成される
- 76. 2nd FACTORY CO.,Ltd.
76
まとめ(3/4)
Ø 開発者にとって、⼤大事なのはUXそのものよりUXD
Ø 再⽣生産可能な体験を提供するための話をしましょう
Ø どのレイヤの話をしたいのか
– UXを考えたUIのデザイン
– ユーザーシナリオのデザイン
– ユーザーシナリオを考えられる組織のデザイン
- 77. 2nd FACTORY CO.,Ltd.
77
まとめ(4/4)
Ø UXD(シナリオのデザイン)の⼀一例例としてのHCDプロセ
スをご紹介しました
Ø 調査→分析→試⾏行行→評価のプロセスは単なるPDCAです
し、⼿手法・技法もおおよそ揃ってきました。約10年年の積
み上げがありますので、使わない⼿手はないかなぁと思い
ます。