Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015

52,746 views

Published on

2015年12月11日に行われた「UXまとめ2015」における上野学のプレゼンテーションです。
A presentation given by Manabu Ueno in UX matome 2015, Dec 11th 2015.

イベントの様子はこちらのイベントレポートから
https://www.sociomedia.co.jp/6819

Published in: Internet
  • Be the first to comment

UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015

  1. 1. © Sociomedia, Inc. 1
  2. 2. © Sociomedia, Inc. 2
  3. 3. © Sociomedia, Inc. 3 Google
  4. 4. © Sociomedia, Inc. 4 Product Service GE Sizzler
  5. 5. © Sociomedia, Inc. 5 Function Experience AppleApple
  6. 6. © Sociomedia, Inc. A History of UX 6
  7. 7. © Sociomedia, Inc. 1430: Leonardo da Vinci s kitchen nightmare A History of UX • ディナーパーティ準備を支援 •料理を運ぶベルトコンベヤー •巨大なオーブン •スプリンクラーシステム •食べられる彫刻 7 http://boxesandarrows.com/leonardos-kitchen-nightmare/
  8. 8. © Sociomedia, Inc. 1911: Taylorism and the Industrial Revolution A History of UX • フレデリック・テイラーが、時間と作 業の研究および産業効率向上を図るた めの方法を著した Principles of Scientific Management(科学的管理法 の原理) を出版。 8 https://www.sociomedia.co.jp/6370
  9. 9. © Sociomedia, Inc. 1936: Frigidaire's Usability A History of UX • Palm Beach Post 紙が新型 Frigidaire 冷蔵庫の広告を掲載。 ユーザビリティをその特徴の一つ として強調した。 9 imageshack.com https://www.sociomedia.co.jp/6370
  10. 10. © Sociomedia, Inc. 1947: Bell Labs' User Preference Department A History of UX • ベル研究所のジョン・カーリ ン が新しく創設されたユー ザー・プリファレンス部(後に 「ヒューマン・ファクター部」 と名称変更)の責任者に任命 される。ここで彼は、現在も なお使用されている現代の数字 式ダイヤルシステムとキーパッ ドを完成するのに一役買った。 10 nytimes.com Courtesy of Alcatel-Lucent USA https://www.sociomedia.co.jp/6370
  11. 11. © Sociomedia, Inc. 1955: Dreyfuss Designing for People A History of UX • インダストリアルデザイナー のヘンリードレイファスが、 "Designing for People" を書 いた。ユーザーにとっての安 全や快適さこそがデザイナー にとっての成功である、とし た。 11 http://blog.invisionapp.com/a-brief-history-of-user-experience/
  12. 12. © Sociomedia, Inc. 1966: Disney and the role of joy A History of UX • 後にディズニーワールドとな るプロジェクトの初期構想が 発表される。最新のテクノロ ジーで人々に楽しさを与える というコンセプトを打ち出し た。 12 http://blog.invisionapp.com/a-brief-history-of-user-experience/ disneydose.com
  13. 13. © Sociomedia, Inc. 1973: PARC and Personal Computer A History of UX • XEROX の PARC で Alto が作られ た。GUI、オブジェクト指向プロ グラミングなど、現在のパーソナ ルコンピュータのもととなるコン セプトが具現化された。 13 ucsc.edu
  14. 14. © Sociomedia, Inc. 1984: Apple Released Macintosh A History of UX • Apple が "The computer for the rest of us" のコンセプト で開発された Macintosh を 発売した。 14 wikipedia.org
  15. 15. © Sociomedia, Inc. 1989-1991: First WWW A History of UX • ティム・バーナーズ・リー によって WWW が作られ た。ネットワークベースで ハイパーテキストを自由に 扱えるようになった。 15 cern.ch
  16. 16. © Sociomedia, Inc. 1995: Don Norman, the first user experience professional A History of UX • 認知科学者のドン・ノーマンが Apple に入り、"User Experience Architect" の肩書きを得た。 • 1998年の著書 "The Invisible Computer" の中で "User Experience" という言葉を使っ た。 16 nngroup.com http://blog.invisionapp.com/a-brief-history-of-user-experience/
  17. 17. © Sociomedia, Inc. 1999: People started Googling A History of UX • Google がシンプルなUIと優秀な検索能力で評判になる。 17 blogoscoped.com
  18. 18. © Sociomedia, Inc. 2004: Web was updated to 2.0 A History of UX • ティム・オライリーによっ て Web 2.0 の概念が提唱さ れる。ウェブをプラット フォームとして扱う技術や サービスが発達した。 18 wikipedia.org
  19. 19. © Sociomedia, Inc. 2007: iPhone was unveiled A History of UX • Apple が iPhone を発表。ヒッ ト商品となり、パーソナルコン ピュータのフォームファクター を変えた。 19 Apple
  20. 20. © Sociomedia, Inc. 2012: UPA to UXPA A History of UX • Usability Professionals Association(UPA)が名称を User Experience Professionals Association(UxPA)に変更。 20 UXPA
  21. 21. © Sociomedia, Inc. 21 User Experience 利用者 経験
  22. 22. © Sociomedia, Inc. The Elements of User Experience - Jesse James Garrett, 2003 UX Definition 22 『ウェブ戦略としての「ユーザーエクスペリエンス」』(2005, 毎日コミュニケーションズ)
  23. 23. © Sociomedia, Inc. User Experience Honeycomb - Peter Morville, 2004 UX Definition 23 "User Experience Design" Semantic Studios
  24. 24. © Sociomedia, Inc. User Experience White Paper - 2011 UX Definition 24 『UX白書』(hcdvalue)
  25. 25. © Sociomedia, Inc. Nielsen Norman Group UX Definition • "企業やサービスや製品とのエンドユーザーのインタラクションのすべて の側面のこと。典型的なUXにまず必要なことは、顧客のニーズについて 誇張なしに的確に適合させることである。次に、所有や保有をしたくな るような製品を作るための単純さや簡潔さが必要である。真のUXは、 単に顧客が欲しいというモノを与えたり、チェックリストで検証できる ような特徴を提供したりすることではなく、それ以上のことである。企 業が高品質のUXを達成するためには、エンジニアリングやマーケティン グ、グラフィックデザイン、工業デザイン、インターフェースデザイン などの多様な取り組みを連続的に結合しておくことが必要である。" 25 『人間中心設計の基礎』(近代科学社)
  26. 26. © Sociomedia, Inc. UPA/UXPA UX Definition • "ユーザーの全体的な知覚の構成要素 となる製品やサービスや企業とユーザー とのインタラクションのあらゆる側面 のこと。UXデザインは、レイアウト や視覚デザイン、テキスト、ブランド、 音響、インタラクションといった要素 を含むインターフェースのあらゆる構 成要素に関係している。" 26 『人間中心設計の基礎』(近代科学社) UPA
  27. 27. © Sociomedia, Inc. ISO 9241-210 UX Definition • "製品、システム、またはサービスの、利用または予期的な利 用の結果である、人の知覚と反応" 27
  28. 28. © Sociomedia, Inc. 様々な定義からうかがえるポイント UX Definition • 主観性 • 消費者とユーザーを対象とする(つまり製品ライフサイクル のすべてを包含する長期的レンジのものである) • 品質特性と感性特性の関与 28 『人間中心設計の基礎』(近代科学社) • テクノロジーの活用
  29. 29. © Sociomedia, Inc. The Sound of UX 29
  30. 30. © Sociomedia, Inc. 併記問題 The Sound of UX 30 UI/UX
  31. 31. © Sociomedia, Inc. 併記問題 The Sound of UX 31 PC/AT TCP/IP UI/UX
  32. 32. © Sociomedia, Inc. 併記問題 The Sound of UX 32 UIUX
  33. 33. © Sociomedia, Inc. 併記問題 The Sound of UX 33 HTTP WCAG UIUX
  34. 34. © Sociomedia, Inc. 併記問題 The Sound of UX 34 UX/UX
  35. 35. © Sociomedia, Inc. 併記問題 The Sound of UX 35 UX UX
  36. 36. © Sociomedia, Inc. UIの操作性の観点 The Sound of UX • UXとは、UIのこと •UIと同義。 •それまで良いUIというものを意識的に作ろうと したことがなかった現場においては、UIをデザ インするという発想自体がかなり新しい。 •使用例 •「UXのリニューアル」(RFP) •「UXの全面見直し」(RFP) •「うちのシステムにもUXを入れないと」 36
  37. 37. © Sociomedia, Inc. UIの操作性の観点 The Sound of UX • UXとは、ユーザビリティを考慮した 画面設計のこと •システムの画面を使い勝手を考慮 して設計すること。 •クライアントからUXを要求された Sier が使う。 •使用例 •「UX納品:○月○日」(RFP) •「UXを適用する」(RFP) 37 ワンツーパンチ スウェー ヒートアクション 回し蹴り アクションをひとつ選んでください。 実行 アクションをひとつ選んでください。 スウェー ワンツーパンチ 回し蹴り ヒートアクション
  38. 38. © Sociomedia, Inc. UIの操作性の観点 The Sound of UX • UXとは、気持ちいい操作感こと •スクロールのスムーズさとかタッチ入力 の精度をもってUXが優れているなどとい う。 •トランジション効果やビジュアルフィード バックなどの小粋なアニメーション。 •使用例 •「このナビゲーションのUXは新しい」 •「最近のタッチパネルはUXがいい」 38
  39. 39. © Sociomedia, Inc. デザインプロセスの観点 The Sound of UX • UXとは、UCD プロセスのこと •観察インタビュー、プロトタイピン グ、ユーザビリティテストなど、要 するに UCD とか HCD と呼ばれてき たプロセス。それらを知らなかった 人がUXと言っている。 •使用例 •「うちの開発工程にもUXを取り 入れないと」 •「UXを行うこと」(RFP) 39 http://www.usability.gov/how-to-and-tools/resources/ucd-map.html
  40. 40. © Sociomedia, Inc. デザインプロセスの観点 The Sound of UX • UXとは、アジャイルにデザインすること •主に小規模システムの開発プロセスとして普及したアジャイルのコンセプ トに共感した(憧れた)デザインチームが、モバイルアプリなどで実践し はじめている。 •使用例 •「アジャイルUX」 •「デザインスプリント」 40 TRY CATCH 1 TRY CATCH 2 TRY CATCH 3 TRY CATCH 4
  41. 41. © Sociomedia, Inc. マーケティングの観点 The Sound of UX • UXとは、サービス企画のこと •ユーザーモデルとかサービスモデルと か課金モデルとかプロモーション方針 とかを最上流で定義すること。 •使用例 •「UIは画面のことで、UXはもっとサー ビス全体のこと」 •「うちらもいつかUXやりたいよね」 41
  42. 42. © Sociomedia, Inc. マーケティングの観点 The Sound of UX • UXとは、クロスチャネル/ロングター ムのサービス設計のこと •複数の媒体や製品を通じて価値提供 するためのサービスモデリング。 •タッチポイントを時間軸でマッピン グするのが主な作業。 •使用例 •「UXストーリーボード」 •「UXジャーニーマップ」 42 Adaptive Path
  43. 43. © Sociomedia, Inc. マーケティングの観点 The Sound of UX • UXとは、モノよりコトのこと •経験マーケティングや感性デザインといった視点でサービスを検討する。 •モノよりもコトの方が高尚であると考えている。 •使用例 •「モノよりコト」 43
  44. 44. © Sociomedia, Inc. マーケティングの観点 The Sound of UX • UXとは、ユーザーがはまる仕組みのこと •オンボーディング、ソーシャル連携、足あと、既読、 ガチャ、レコメンデーション、つりタイトルなどな ど。 •ユーザーに行動変化を促すノウハウは Persuasive Technology と呼ばれていたが、オンラインサービス の技術と競争が過熱し、広告宣伝活動に変化した。 •すでに運用中のサービスに後付けすることができる のがこのUX。 •使用例 •「うちのサービスにはUXが足りない」 •「UXが古くなってきた」 44 Angry Birds
  45. 45. © Sociomedia, Inc. マーケティングの観点 The Sound of UX • UXとは、とにかくマーケットインでデザインすること •顧客のレビューや行動特性をインプットにして製 品改良を重ね、短期間にビジネス評価を上げる活 動。 •A/B テストや行動経済学を好む。サービスモデル 全体よりも部分最適化。 •経営層に対して説得力のあるUX。 •使用例 •「リーンUX」 •「カスタマー・エクスペリエンス」 45 https://medium.com/@awojnowski/how-i-hacked-app-store-ratings-for-a-consistently-perfect-5-stars-3de17d40ca1f
  46. 46. © Sociomedia, Inc. 組織スローガンの観点 The Sound of UX • UXとは、デザインを重視する組織活動のこと •大手メーカーやサービス事業者などの多くが、 組織横断的な方針として、もっとデザイン(操 作性、見栄え、楽しさなど)を重視していこ うという取り組みを活発化させている。 •使用例 •「デザイン思考でUXに取り組みます」 •「エクスペリエンスセンター」 •「デザイン統括本部」 •「開発1部UX課」 46
  47. 47. © Sociomedia, Inc. 利用者体験 UX 47 X-test X-map X-method X-bility X-research X-bility X-bility X-design X-analysis X-design X-bility UX?
  48. 48. © Sociomedia, Inc. 利用者体験 UX 48 Artifact UX Design Human

×