Recommended
More Related Content
What's hot
What's hot (20)
Similar to ユーザーエクスペリエンスの分解
Similar to ユーザーエクスペリエンスの分解 (20)
ユーザーエクスペリエンスの分解
- 2. 1. UXとは何か？
- 4. ちまたで言われるキーワード (超抜粋) から見る UX おもてなし 直感的 気持ちいい 使いやすい わかりやすい 体験 ジャーニーマップ シナリオ コンセプトマップ サービスブループリント ワイヤーフレーム ペルソナ A/Bテスト ヒューリスティック評価 グロースハック アクティングアウト コンテクスチュアル インクワイアリー ユーザーテスト
- 5. 有名なダイアグラムから見るUX その1 The Elements of UX | Jasse James Garrett (2000) 元々はウェブサイトのUXとして定義されたものです。 UXを役割や作業で分解した図
- 6. 有名なダイアグラムから見るUX その2 UX Honeycomb | Peter Mobil (2004) Useful. As practitioners, we can't be content to paint within the lines drawn by managers. We must have the courage and creativity to ask whether our products and systems are useful, and to apply our deep knowledge of craft and medium to define innovative solutions that are more useful. Usable. Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient. Desirable. Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design. Findable. We must strive to design navigable web sites and locatable objects, so users can find what they need. Accessible. Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities (more than 10% of the population). Today, it's good business and the ethical thing to do. Eventually, it will become the law. Credible. Thanks to the Web Credibility Project, we're beginning to understand the design elements that influence whether users trust and believe what we tell them. Valuable. Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction. http://semanticstudios.com/publications/semantics/000029.php目指すべきUXの方向を表した図
- 7. 有名なダイアグラムから見るUX その3 UX Wheel | Magnus Revang (2007) UXの価値を生むためのプロセスと成果物を一枚で表現した図
- 8. 有名なダイアグラムから見るUX その4 さまざまなスキルと UX デザインの関係を示した図 Designing for Interaction | Dan Saffer (2007) 旧バージョン
- 10. [ISO 9241-210] ユーザエクスペリエンスとは、製品、システムまたはサービスを使用した時、 および／または使用を予測した時に生じる個人の知覚や反応 ISOの定義から見る UXISOの定義から見る UX その2 UXは仕様前、使用中、使用後に起こる、ユーザーの感情、信念、嗜好、近く、生理学的・心 理学的な反応、態度、達成感のすべてを含む。 UXはブランドイメージ、見た目、機能、システムのパフォーマンス、インタラクティブシス テムのインタラクティブな振る舞いと支援機能、事前の経験から生じたユーザーの内的および 身体的状態、態度、スキルとパーソナリティ、利用状況の結果である。 ユーザーの個人的目標という観点から考えたときには、通常はUXに付随する知覚的・感情的 な側面を、ユーザービリティは含むことができる。ユーザビリティの基準を用いて、UXの諸 側面を評価できる。 安藤先生のスライドより http://www.slideshare.net/masaya0730/iso92412102010 (P15)
- 11. まとめ この順序で作業して この方向を目指して できあがった成果物と価値 できあがった成果物に対する仕様前、使用中、使用後の結果 ISO 9241-210 このような専門家が
- 12. まとめるとややこしい
- 13. この順序で作業して この方向を目指して できあがった成果物と価値 できあがった成果物に対する仕様前、使用中、使用後の結果 ISO 9241-210 このような専門家が ＵＸデザイン ＵＸ UXデザインとUXを分けて話しましょう
- 14. UXを捉えるためのポイント 時間 UXは瞬間ではなく、「利用前」「利用中」「利用後」という 時間軸上で発生する。 結果 UX は時間軸上でユーザーの身に発生する 「からだ」「行動」「記憶」「気持ち」…などさまざまなこと。 ※ ISOの定義が今UXデザイナーの間で認識されている「UX」の定義にもっとも近い
- 15. User Experience ユーザーと利用対象の 出会いから別れまで ゴカイチ的 UX の捉え方 (かんたん)
- 17. 2. UXのステージ
- 19. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい！ 思い出をきれいに残せて うれしいな 作例が素敵！ 箱がかっこいい欲しいなあ気持ち UXのステージ 例: デジタルカメラ
- 20. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい！ 思い出をきれいに残せて うれしいな 作例が素敵！ 箱がかっこいい欲しいなあ気持ち UX 利用対象 (UIや機能) UXのステージ
- 21. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい！ 思い出をきれいに残せて うれしいな 作例が素敵！ 箱がかっこいい欲しいなあ気持ち コンテキスト いつ だれが どこで だれと なにを どのように なぜ UXのステージ
- 22. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい！ 思い出をきれいに残せて うれしいな 作例が素敵！ 箱がかっこいい欲しいなあ気持ち 利用対象の学習 期待の発生 UXのステージ
- 23. 学習 ユーザビリティに影響 期待 販売と顧客満足度に影響 • 利用開始前にユーザーへ利用目的を与える • 利用開始時にすぐ迷わず使えるようにする • ユーザーとマッチするかそれ以上の期待を持たせる。 • 期待値を上げ過ぎないようにする。 使用予測時 = 利用対象を知る活動
- 24. 新しい概念だが視聴者が利用シーンを想像できるビデオ • 「うそ」「おおげさ」「まぎらわしい」が少ない • なにができるかわかる • 買ったあとどうすればいいかがわかる • 操作方法がわかる • 動きのなめらかさがわかる • 使うと何を得するかがわかる など。 iPhone 3G Around me 使用予測時 | 学習の例 : CM https://www.youtube.com/watch?v=T2WsaUlkO5c
- 25. 12:34●●●●● 100% 使用予測時 | 期待の例 : Instagram twitter で友人が Instagram で撮っ た写真を見てかっこ いいなー！と思い、 AppStore から Instagram をダウ ンロードした。 さっそくアプリを立 ち上げた。 ライブラリーの写真 を読み込む方法がわ からなかったけど、 カメラ機能で写真 撮ってフィルタをか けたら究極かっこい い写真ができた！ やったね！！ 12:34●●●●● 100% 12:34●●●●● 100% 12:34●●●●● 100%
- 26. 12:34●●●●● 100% 使用予測時 | 期待の例 : Instagram twitter で友人が Instagram で撮っ た写真を見てかっこ いいなー！と思い、 AppStore から Instagram をダウ ンロードした。 さっそくアプリを立 ち上げた。 ライブラリーの写真 を読み込む方法がわ からなかったけど、 カメラ機能で写真 撮ってフィルタをか けたら究極かっこい い写真ができた！ やったね！！ 12:34●●●●● 100% 12:34●●●●● 100% 12:34●●●●● 100% ギャップ 期待の発生 購入の判断に つながる 期待の検証 満足(期待どおりだったか)に つながる
- 27. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい！ 思い出をきれいに残せて うれしいな 作例が素敵！ 箱がかっこいい欲しいなあ気持ち 使用体験 (UXの中心) UXのステージ
- 28. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい！ 思い出をきれいに残せて うれしいな 作例が素敵！ 箱がかっこいい欲しいなあ気持ち ユーザーゴール UXのステージ
- 29. 使用 = ゴールへ向かう活動 使用 ゴール 一度使ったら終わりなのか、継続的に使用するものなのか
- 30. ゴールは使用時と限らない 使用中にゴールがあるパターン 使用後にゴールがあるパターン • ゲーム • ビデオの視聴 • 読書 • 学習 • 情報収集 • 親が子供の写真を両親に送り、両親に喜ん でもらう • 自慢したい出来事をFacebookに投稿し、 たくさんの「いいね」をもらう。 • クーポンを使って安く服を購入する • 旅行先の週刊天気を見て荷物を軽くする
- 31. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい！ 思い出をきれいに残せて うれしいな 作例が素敵！ 箱がかっこいい欲しいなあ気持ち ビジネスゴール UXのステージ
- 32. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい！ 思い出をきれいに残せて うれしいな 作例が素敵！ 箱がかっこいい欲しいなあ気持ち アップグレード ガチャ・魔法石 入会金 サブサービス 利用費 購入 サポート 利用費 定期的課金 従量課金 解約 UXのステージ
- 33. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい！ 思い出をきれいに残せて うれしいな 作例が素敵！ 箱がかっこいい欲しいなあ気持ち 使用後の 体験 UXのステージ
- 35. 使用後の体験 : GoProの例 こんなビデオを撮りたい！ アプリの「Video of the Day」やGoPro Channel 使い方がよくわかった！ たくさんのチュートリアルビデオ また撮影したい！ 他にもGoProは誰でも良質な作品を作ってシェアできるようなアプリを無料提供するなど、バイラルを樹幹させるためのUXになるよう工夫をしている
- 37. 3. UXデザインの分解
- 41. コンテキスト • いつ • どこで • だれが • だれと • なにを • どのように • どんな気持ちで • どうなった？ ジャーニーマップ 台本の内容
- 42. 台本の作り方 リサーチ ユーザー モデリング (台本) ユーザーモデル 検証 • アクティングアウト • 競合のユーザーテスト • プロトタイピング など • ペルソナ/シナリオ • アクティビティシナリオ • ジャーニーマップ など • エスノグラフィ調査 • コンテキスチュアル インクワイアリー • ステークホルダー インタビュー など 専門家の知見
- 43. 台本を作る人 UXデザイナー
- 45. Web系Ad 紙系Ad TV系Ad 口コミ 製品紹介 (紙/Web) 製品レビュー(Blogな ども含める) EC店舗 実店舗 EC店舗 実店舗 アプリストアのページ 配送業者 製品/サービス - 機能 - UI / インタラクション - ビジュアル - コンテンツ SNS コールセンター サポートサイト レビューサイト 関連サービス 使用を予測した時 使用した時 使用する 使用後に活動する 期待の発生 (満足できそうかどうか) 期待とのギャップの発生 (満足か不満か) 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) 価格、製品情報、製品デザイン、広告、キャンペーン、ブランドなど ユーザーゴールへの達成度、コンテンツの魅力、 使い勝手、耐久性、習熟必要性、信頼性、アクセシビリティなど • 広告ディレクター • DTPデザイナー • Webディレクター • Webデザイナー • インフォメーションアーキテクト • コピーライター • ドキュメントライター • リサーチャー • 営業 • 店員 • 個人ブロガー • UIグラフィックデザ イナー • インタラクションデ ザイナー • IA • ソフトウェアアーキ テクト • プログラマー • ユーザビリティアナ リスト • テクニカルライター • ウェブデザイナー • DTPデザイナー • サポートセンター • コールセンター • 店舗(店舗) • 個人 ステージ タッチ ポイント 専門家 手法 要素 なぜ主要関係者と共に作るのか？ ペルソナ / シナリオ / ジャーニーマップ / サービスブループリント UI Blueprint / プロトタイプ ユーザーテスト A/Bテスト ヒューリスティック評価 UXはさまざまな専門性から生まれるから
- 46. Co-Working の重要性 ワークショップデザイン ファシリテーション チームビルディングデザインマネジメント 関わる人が多いとコミュニケーションの障壁が増える 障壁を崩すために必要なスキル
- 47. UXデザイナーの役割 1. リサーチ結果と専門家の知見をもとに UXの仮説をまとめること。 2. その仮説を立てる方法として 手法や成果物を効果的に利用すること。 3. 仮説を関係者に共感させ、 タッチポイントに仮説を落とし込むこと。
- 53. 5. まとめ
- 54. User Experience ユーザーと利用対象の 出会いから別れまで ゴカイチ的 UX の捉え方 (かんたん)