ユーザーエクスペリエンスの分解

ユーザーエクスペリエンスの分解 Takehisa Gokaichi m1201097@gmail.com @5kaichi

1. UXとは何か？

User Experience ユーザー体験・経験サービス・製品を利用している人実際に見たり、聞いたり、行ったりすること。また、それによって得られた知識や技能など。サービス・製品を利用している人が、実際に見たり、聞いたり、行ったりすること。また、それによって得られた知識や技能など。言葉の意味から見るUX

ちまたで言われるキーワード (超抜粋) から見る UX おもてなし直感的気持ちいい使いやすいわかりやすい体験ジャーニーマップシナリオコンセプトマップサービスブループリントワイヤーフレームペルソナ A/Bテストヒューリスティック評価グロースハックアクティングアウトコンテクスチュアルインクワイアリーユーザーテスト

有名なダイアグラムから見るUX その1 The Elements of UX | Jasse James Garrett (2000) 元々はウェブサイトのUXとして定義されたものです。 UXを役割や作業で分解した図

有名なダイアグラムから見る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の方向を表した図

有名なダイアグラムから見るUX その3 UX Wheel | Magnus Revang (2007) UXの価値を生むためのプロセスと成果物を一枚で表現した図

有名なダイアグラムから見るUX その4 さまざまなスキルと UX デザインの関係を示した図 Designing for Interaction | Dan Saffer (2007) 旧バージョン

[ISO 9241-210] ユーザエクスペリエンスとは、製品、システムまたはサービスを使用した時、および／または使用を予測した時に生じる個人の知覚や反応 ISOの定義から見る UX その1

[ISO 9241-210] ユーザエクスペリエンスとは、製品、システムまたはサービスを使用した時、および／または使用を予測した時に生じる個人の知覚や反応 ISOの定義から見る UXISOの定義から見る UX その2 UXは仕様前、使用中、使用後に起こる、ユーザーの感情、信念、嗜好、近く、生理学的・心理学的な反応、態度、達成感のすべてを含む。 UXはブランドイメージ、見た目、機能、システムのパフォーマンス、インタラクティブシステムのインタラクティブな振る舞いと支援機能、事前の経験から生じたユーザーの内的および身体的状態、態度、スキルとパーソナリティ、利用状況の結果である。ユーザーの個人的目標という観点から考えたときには、通常はUXに付随する知覚的・感情的な側面を、ユーザービリティは含むことができる。ユーザビリティの基準を用いて、UXの諸側面を評価できる。安藤先生のスライドより http://www.slideshare.net/masaya0730/iso92412102010 (P15)

まとめこの順序で作業してこの方向を目指してできあがった成果物と価値できあがった成果物に対する仕様前、使用中、使用後の結果 ISO 9241-210 このような専門家が

まとめるとややこしい

この順序で作業してこの方向を目指してできあがった成果物と価値できあがった成果物に対する仕様前、使用中、使用後の結果 ISO 9241-210 このような専門家がＵＸデザインＵＸ UXデザインとUXを分けて話しましょう

UXを捉えるためのポイント時間 UXは瞬間ではなく、「利用前」「利用中」「利用後」という時間軸上で発生する。結果 UX は時間軸上でユーザーの身に発生する「からだ」「行動」「記憶」「気持ち」…などさまざまなこと。 ※ ISOの定義が今UXデザイナーの間で認識されている「UX」の定義にもっとも近い

User Experience ユーザーと利用対象の出会いから別れまでゴカイチ的 UX の捉え方 (かんたん)

「ユーザビリティ」では意味がちと狭いから UXって言おうぜ (1990年代中頃@ ) Donald Arthur Norman UX と最初に言った人は…

2. UXのステージ

[ISO 9241-210] ユーザエクスペリエンスとは、製品、システムまたはサービスを使用した時、および／または使用を予測した時に生じる個人の知覚や反応時間結果使用を予測した時使用した時個人の知覚や反応

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ち UXのステージ例: デジタルカメラ

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ち UX 利用対象 (UIや機能) UXのステージ

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ちコンテキストいつだれがどこでだれとなにをどのようになぜ UXのステージ

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ち利用対象の学習期待の発生 UXのステージ

学習ユーザビリティに影響期待販売と顧客満足度に影響 • 利用開始前にユーザーへ利用目的を与える • 利用開始時にすぐ迷わず使えるようにする • ユーザーとマッチするかそれ以上の期待を持たせる。 • 期待値を上げ過ぎないようにする。使用予測時 = 利用対象を知る活動

新しい概念だが視聴者が利用シーンを想像できるビデオ • 「うそ」「おおげさ」「まぎらわしい」が少ない • なにができるかわかる • 買ったあとどうすればいいかがわかる • 操作方法がわかる • 動きのなめらかさがわかる • 使うと何を得するかがわかるなど。 iPhone 3G Around me 使用予測時 | 学習の例 : CM https://www.youtube.com/watch?v=T2WsaUlkO5c

12:34●●●●● 100% 使用予測時 | 期待の例 : Instagram twitter で友人が Instagram で撮った写真を見てかっこいいなー！と思い、 AppStore から Instagram をダウンロードした。さっそくアプリを立ち上げた。ライブラリーの写真を読み込む方法がわからなかったけど、カメラ機能で写真撮ってフィルタをかけたら究極かっこいい写真ができた！やったね！！ 12:34●●●●● 100% 12:34●●●●● 100% 12:34●●●●● 100%

12:34●●●●● 100% 使用予測時 | 期待の例 : Instagram twitter で友人が Instagram で撮った写真を見てかっこいいなー！と思い、 AppStore から Instagram をダウンロードした。さっそくアプリを立ち上げた。ライブラリーの写真を読み込む方法がわからなかったけど、カメラ機能で写真撮ってフィルタをかけたら究極かっこいい写真ができた！やったね！！ 12:34●●●●● 100% 12:34●●●●● 100% 12:34●●●●● 100% ギャップ期待の発生購入の判断につながる期待の検証満足(期待どおりだったか)につながる

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ち使用体験 (UXの中心) UXのステージ

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ちユーザーゴール UXのステージ

使用 = ゴールへ向かう活動使用ゴール一度使ったら終わりなのか、継続的に使用するものなのか

ゴールは使用時と限らない使用中にゴールがあるパターン使用後にゴールがあるパターン • ゲーム • ビデオの視聴 • 読書 • 学習 • 情報収集 • 親が子供の写真を両親に送り、両親に喜んでもらう • 自慢したい出来事をFacebookに投稿し、たくさんの「いいね」をもらう。 • クーポンを使って安く服を購入する • 旅行先の週刊天気を見て荷物を軽くする

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ちビジネスゴール UXのステージ

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ちアップグレードガチャ・魔法石入会金サブサービス利用費購入サポート利用費定期的課金従量課金解約 UXのステージ

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ち使用後の体験 UXのステージ

使用後の体験はさまざまゴールへ向かうゴールと関係ない活動をする (サブサービスの利用など) サポートを受けるなど...

使用後の体験 : GoProの例こんなビデオを撮りたい！アプリの「Video of the Day」やGoPro Channel 使い方がよくわかった！たくさんのチュートリアルビデオまた撮影したい！他にもGoProは誰でも良質な作品を作ってシェアできるようなアプリを無料提供するなど、バイラルを樹幹させるためのUXになるよう工夫をしている

各ステージを全体で捉えることで UXを戦略として使うことができる

3. UXデザインの分解

UX Design ユーザーと利用対象の出会いから別れまでを設計すること

UX Design どう利用するか書かれた台本を作ること

台本どおりにユーザーが体験すると UX デザインは成功タッチポイントを通してユーザーは体験するタッチポイント台本 (結果) ユーザーの体験

コンテキスト • いつ • どこで • だれが • だれと • なにを • どのように • どんな気持ちで • どうなった？ジャーニーマップ台本の内容

台本の作り方リサーチユーザーモデリング (台本) ユーザーモデル検証 • アクティングアウト • 競合のユーザーテスト • プロトタイピングなど • ペルソナ/シナリオ • アクティビティシナリオ • ジャーニーマップなど • エスノグラフィ調査 • コンテキスチュアルインクワイアリー • ステークホルダーインタビューなど専門家の知見

台本を作る人 UXデザイナー

台本を作る人 UXデザイナーを、中心に主要関係者と共に作る

Web系Ad 紙系Ad TV系Ad 口コミ製品紹介 (紙/Web) 製品レビュー(Blogなども含める) EC店舗実店舗 EC店舗実店舗アプリストアのページ配送業者製品/サービス - 機能 - UI / インタラクション - ビジュアル - コンテンツ SNS コールセンターサポートサイトレビューサイト関連サービス使用を予測した時使用した時使用する使用後に活動する期待の発生 (満足できそうかどうか) 期待とのギャップの発生 (満足か不満か) 検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) 価格、製品情報、製品デザイン、広告、キャンペーン、ブランドなどユーザーゴールへの達成度、コンテンツの魅力、使い勝手、耐久性、習熟必要性、信頼性、アクセシビリティなど • 広告ディレクター • DTPデザイナー • Webディレクター • Webデザイナー • インフォメーションアーキテクト • コピーライター • ドキュメントライター • リサーチャー • 営業 • 店員 • 個人ブロガー • UIグラフィックデザイナー • インタラクションデザイナー • IA • ソフトウェアアーキテクト • プログラマー • ユーザビリティアナリスト • テクニカルライター • ウェブデザイナー • DTPデザイナー • サポートセンター • コールセンター • 店舗(店舗) • 個人ステージタッチポイント専門家手法要素なぜ主要関係者と共に作るのか？ペルソナ / シナリオ / ジャーニーマップ / サービスブループリント UI Blueprint / プロトタイプユーザーテスト A/Bテストヒューリスティック評価 UXはさまざまな専門性から生まれるから

Co-Working の重要性ワークショップデザインファシリテーションチームビルディングデザインマネジメント関わる人が多いとコミュニケーションの障壁が増える障壁を崩すために必要なスキル

UXデザイナーの役割 1. リサーチ結果と専門家の知見をもとに UXの仮説をまとめること。 2. その仮説を立てる方法として手法や成果物を効果的に利用すること。 3. 仮説を関係者に共感させ、タッチポイントに仮説を落とし込むこと。

実際に体験を提供するのはタッチポイント体験を作るのはタッチポイントの設計者タッチポイント

UXデザイナー UI設計者台本を作る人体験させるモノを作る人

UXデザイナー統計や調査の知識ビジネスモデルの知識ユーザーモデルの知識認知心理学の知識ユーザー調査や観察のスキル調査結果をまとめるスキルデータからユーザーをモデル化するスキル組み立てたモデルをビジュアル化するスキルチームビルディングのスキルワークショップデザインのスキルワークショップファシリテーションのスキルデザインマネジメントのスキル UI設計者 UIコンポーネントの知識ビジュアルデザインの知識プラットフォームの知識プログラミングの知識認知心理学の知識人間工学の知識アクセシビリティに関する知識情報アーキテクチャのスキルデザインパターンを適用するスキル動きや仕様を表現し、伝えるスキル UIをビジュアル化するスキル文言を作成するスキル知識やスキルの違いスキルが異なる

UXとUI 操作ビジュアル UI 満足機能コンテンツパフォーマンスインタラクション

5. まとめ

User Experience ユーザーと利用対象の出会いから別れまでゴカイチ的 UX の捉え方 (かんたん)

使用を予測した時使用した時使用する使用後に活動する検討する (能動的に知る) 購入するダウンロードする知る (受動的に知る) ステージ行動雑誌の特集記事で知る検索して調べるお店で購入するプリントして両親へ送るシェアするかっこいい冊子にして保管する写真を撮るパソコンに保管するやっぱスマホよりきれい！思い出をきれいに残せてうれしいな作例が素敵！箱がかっこいい欲しいなあ気持ち UXのステージ例: デジタルカメラ

UX Design どう利用するか書かれた台本を作ること

UXとUI 操作ビジュアル UI 満足機能コンテンツパフォーマンスインタラクション

ユーザーエクスペリエンスの分解

by Takehisa Gokaichi, Working at Sony Digital Network Applications, Inc. ( Japan ) on May 09, 2014

Statistics

Views

Actions

2 Embeds 6

Accessibility

Categories

Upload Details

Usage Rights

Report content

ユーザーエクスペリエンスの分解 Presentation Transcript

https://twitter.com	5
http://s.deeeki.com	1