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

1. © Sociomedia, Inc. 1

2. © Sociomedia, Inc. 2

3. © Sociomedia, Inc. 3 Google

4. © Sociomedia, Inc. 4 Product Service GE Sizzler

5. © Sociomedia, Inc. 5 Function Experience AppleApple

6. © Sociomedia, Inc. A History of UX 6

7. © Sociomedia, Inc. 1430: Leonardo da Vinci s kitchen nightmare A History of UX • ディナーパーティ準備を支援 •料理を運ぶベルトコンベヤー •巨大なオーブン •スプリンクラーシステム •食べられる彫刻 7 http://boxesandarrows.com/leonardos-kitchen-nightmare/

8. © Sociomedia, Inc. 1911: Taylorism and the Industrial Revolution A History of UX • フレデリック・テイラーが、時間と作業の研究および産業効率向上を図るための方法を著した Principles of Scientiﬁc Management（科学的管理法の原理）を出版。 8 https://www.sociomedia.co.jp/6370

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. © 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. © 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. © 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. © Sociomedia, Inc. 1973: PARC and Personal Computer A History of UX • XEROX の PARC で Alto が作られた。GUI、オブジェクト指向プログラミングなど、現在のパーソナルコンピュータのもととなるコンセプトが具現化された。 13 ucsc.edu

14. © Sociomedia, Inc. 1984: Apple Released Macintosh A History of UX • Apple が "The computer for the rest of us" のコンセプトで開発された Macintosh を発売した。 14 wikipedia.org

15. © Sociomedia, Inc. 1989-1991: First WWW A History of UX • ティム・バーナーズ・リーによって WWW が作られた。ネットワークベースでハイパーテキストを自由に扱えるようになった。 15 cern.ch

16. © Sociomedia, Inc. 1995: Don Norman, the ﬁrst 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. © Sociomedia, Inc. 1999: People started Googling A History of UX • Google がシンプルなUIと優秀な検索能力で評判になる。 17 blogoscoped.com

18. © Sociomedia, Inc. 2004: Web was updated to 2.0 A History of UX • ティム・オライリーによって Web 2.0 の概念が提唱される。ウェブをプラットフォームとして扱う技術やサービスが発達した。 18 wikipedia.org

19. © Sociomedia, Inc. 2007: iPhone was unveiled A History of UX • Apple が iPhone を発表。ヒット商品となり、パーソナルコンピュータのフォームファクターを変えた。 19 Apple

20. © Sociomedia, Inc. 2012: UPA to UXPA A History of UX • Usability Professionals Association（UPA）が名称を User Experience Professionals Association（UxPA）に変更。 20 UXPA

21. © Sociomedia, Inc. 21 User Experience 利用者経験

22. © Sociomedia, Inc. The Elements of User Experience - Jesse James Garrett, 2003 UX Deﬁnition 22 『ウェブ戦略としての「ユーザーエクスペリエンス」』（2005, 毎日コミュニケーションズ）

23. © Sociomedia, Inc. User Experience Honeycomb - Peter Morville, 2004 UX Deﬁnition 23 "User Experience Design" Semantic Studios

24. © Sociomedia, Inc. User Experience White Paper - 2011 UX Deﬁnition 24 『UX白書』（hcdvalue）

25. © Sociomedia, Inc. Nielsen Norman Group UX Deﬁnition • "企業やサービスや製品とのエンドユーザーのインタラクションのすべての側面のこと。典型的なUXにまず必要なことは、顧客のニーズについて誇張なしに的確に適合させることである。次に、所有や保有をしたくなるような製品を作るための単純さや簡潔さが必要である。真のUXは、単に顧客が欲しいというモノを与えたり、チェックリストで検証できるような特徴を提供したりすることではなく、それ以上のことである。企業が高品質のUXを達成するためには、エンジニアリングやマーケティング、グラフィックデザイン、工業デザイン、インターフェースデザインなどの多様な取り組みを連続的に結合しておくことが必要である。" 25 『人間中心設計の基礎』（近代科学社）

26. © Sociomedia, Inc. UPA/UXPA UX Deﬁnition • "ユーザーの全体的な知覚の構成要素となる製品やサービスや企業とユーザーとのインタラクションのあらゆる側面のこと。UXデザインは、レイアウトや視覚デザイン、テキスト、ブランド、音響、インタラクションといった要素を含むインターフェースのあらゆる構成要素に関係している。" 26 『人間中心設計の基礎』（近代科学社） UPA

27. © Sociomedia, Inc. ISO 9241-210 UX Deﬁnition • "製品、システム、またはサービスの、利用または予期的な利用の結果である、人の知覚と反応" 27

28. © Sociomedia, Inc. 様々な定義からうかがえるポイント UX Deﬁnition • 主観性 • 消費者とユーザーを対象とする（つまり製品ライフサイクルのすべてを包含する長期的レンジのものである） • 品質特性と感性特性の関与 28 『人間中心設計の基礎』（近代科学社） • テクノロジーの活用

29. © Sociomedia, Inc. The Sound of UX 29

30. © Sociomedia, Inc. 併記問題 The Sound of UX 30 UI/UX

31. © Sociomedia, Inc. 併記問題 The Sound of UX 31 PC/AT TCP/IP UI/UX

32. © Sociomedia, Inc. 併記問題 The Sound of UX 32 UIUX

33. © Sociomedia, Inc. 併記問題 The Sound of UX 33 HTTP WCAG UIUX

36. © Sociomedia, Inc. UIの操作性の観点 The Sound of UX • UXとは、UIのこと •UIと同義。 •それまで良いUIというものを意識的に作ろうとしたことがなかった現場においては、UIをデザインするという発想自体がかなり新しい。 •使用例 •「UXのリニューアル」（RFP） •「UXの全面見直し」（RFP） •「うちのシステムにもUXを入れないと」 36

37. © Sociomedia, Inc. UIの操作性の観点 The Sound of UX • UXとは、ユーザビリティを考慮した画面設計のこと •システムの画面を使い勝手を考慮して設計すること。 •クライアントからUXを要求された Sier が使う。 •使用例 •「UX納品：○月○日」（RFP） •「UXを適用する」（RFP） 37 ワンツーパンチスウェーヒートアクション回し蹴りアクションをひとつ選んでください。実行アクションをひとつ選んでください。スウェーワンツーパンチ回し蹴りヒートアクション

38. © Sociomedia, Inc. UIの操作性の観点 The Sound of UX • UXとは、気持ちいい操作感こと •スクロールのスムーズさとかタッチ入力の精度をもってUXが優れているなどという。 •トランジション効果やビジュアルフィードバックなどの小粋なアニメーション。 •使用例 •「このナビゲーションのUXは新しい」 •「最近のタッチパネルはUXがいい」 38

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. © Sociomedia, Inc. デザインプロセスの観点 The Sound of UX • UXとは、アジャイルにデザインすること •主に小規模システムの開発プロセスとして普及したアジャイルのコンセプトに共感した（憧れた）デザインチームが、モバイルアプリなどで実践しはじめている。 •使用例 •「アジャイルUX」 •「デザインスプリント」 40 TRY CATCH 1 TRY CATCH 2 TRY CATCH 3 TRY CATCH 4

41. © Sociomedia, Inc. マーケティングの観点 The Sound of UX • UXとは、サービス企画のこと •ユーザーモデルとかサービスモデルとか課金モデルとかプロモーション方針とかを最上流で定義すること。 •使用例 •「UIは画面のことで、UXはもっとサービス全体のこと」 •「うちらもいつかUXやりたいよね」 41

42. © Sociomedia, Inc. マーケティングの観点 The Sound of UX • UXとは、クロスチャネル／ロングタームのサービス設計のこと •複数の媒体や製品を通じて価値提供するためのサービスモデリング。 •タッチポイントを時間軸でマッピングするのが主な作業。 •使用例 •「UXストーリーボード」 •「UXジャーニーマップ」 42 Adaptive Path

43. © Sociomedia, Inc. マーケティングの観点 The Sound of UX • UXとは、モノよりコトのこと •経験マーケティングや感性デザインといった視点でサービスを検討する。 •モノよりもコトの方が高尚であると考えている。 •使用例 •「モノよりコト」 43

44. © Sociomedia, Inc. マーケティングの観点 The Sound of UX • UXとは、ユーザーがはまる仕組みのこと •オンボーディング、ソーシャル連携、足あと、既読、ガチャ、レコメンデーション、つりタイトルなどなど。 •ユーザーに行動変化を促すノウハウは Persuasive Technology と呼ばれていたが、オンラインサービスの技術と競争が過熱し、広告宣伝活動に変化した。 •すでに運用中のサービスに後付けすることができるのがこのUX。 •使用例 •「うちのサービスにはUXが足りない」 •「UXが古くなってきた」 44 Angry Birds

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. © Sociomedia, Inc. 組織スローガンの観点 The Sound of UX • UXとは、デザインを重視する組織活動のこと •大手メーカーやサービス事業者などの多くが、組織横断的な方針として、もっとデザイン（操作性、見栄え、楽しさなど）を重視していこうという取り組みを活発化させている。 •使用例 •「デザイン思考でUXに取り組みます」 •「エクスペリエンスセンター」 •「デザイン統括本部」 •「開発1部UX課」 46

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?

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

Sociomedia

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

A particular slide catching your eye?