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.

ITエンジニアに易しいUI/UXデザイン

164,972 views

Published on

Published in: Design
  • Be the first to comment

ITエンジニアに易しいUI/UXデザイン

  1. 1. ITエンジニアに易しい実践的UI/UXデザイン NCデザイン&コンサルティング株式会社 金 成哲 @Roy_S_Kim ハッシュタグ:#webcat 1
  2. 2. 自己紹介 金 成哲 / @Roy_S_Kim kim@nextconceptdc.com K ソリューションディレクター NCデザイン&コンサルティング株式会社 http://nextconceptdc.com 2
  3. 3. やっていること‣ スマートフォン/タブレットPCの 企業向けソリューション開発&コンサルティング‣ UXコンサルティング‣ 企業システム構築コンサルティング 3
  4. 4. 職歴グランスフィア(株)...................................エンジニアデロイト・トーマツコンサルティング......コンサルタント日本BEAシステムズ(株)............シニアコンサルタント日本オラクル(株)............プリンシパルコンサルタントEMCジャパン(株)..................................アーキテクトエージェンテック(株).............プロダクトマネージャーNCデザイン&コンサルティング(株).....................................................................ソリューションディレクター 4
  5. 5. どちらかと言うと、 エンジニア コンサルタント技術職が長い シニアコンサルタント プリンシパルコンサルタント アーキテクト プロダクトマネージャー ソリューションディレクター 5
  6. 6. なので、ITエンジニアに易しい実践的UI/UXデザインあるいは、UI/UXデザインへの最初の一歩 6
  7. 7. 今日のアジェンダ‣ UI/UXデザインの概要‣ UIデザインの基礎‣ UXデザインの方法論‣ ベストプラクティスの紹介 7
  8. 8. ところで、今日はどのような方々がいらっしゃってますか? ‣ エンジニア ‣ 企業向けシステム開発 ‣ 消費者向けサービス開発 ‣ デザイナー? ‣ その他? 8
  9. 9. 今日のアジェンダITエンジニアに易しい 実践的UI/UXデザイン 9
  10. 10. 非エンジニアの方に「エンジニアの視点ではUI/UXデザインがあのように見えるのか?」と言う、参考に。 10
  11. 11. デザイナーの方に「エンジニアの視点を理解し、今後の仕事で彼らとどう接するか?」と言う、参考に。 11
  12. 12. エンジニアの方に「あの人(会社)はこう理解し、実践しているな。自分の仕事ではどう活用すべきか?」ただし、一例であり、正解はないことをくれぐれも 12
  13. 13. もう一つ、「学問としての深堀はしません。あくまでも 実践的であることを目指します。」深い学習は他の専門書を参考にしてください。 13
  14. 14. 始める前に、これは何でしょうか? 14
  15. 15. 始める前に、これは何でしょうか? 15
  16. 16. 始める前に、この2枚の差は何でしょうか? 16
  17. 17. 始める前に、再び、これは何でしょうか? 17
  18. 18. 始める前に、これは何でしょうか? 18
  19. 19. 始める前に、これは何でしょうか? 19
  20. 20. 始める前に、この3枚の差は何でしょうか? 20
  21. 21. 始める前に、この3枚の差は何でしょうか? 答えは後で 21
  22. 22. My Story「なぜ元エンジニアがUI/UXデザインのことを 語っているんだ?」 22
  23. 23. 元上司の鈴木さん コンサルティングファーム時代の上司 元アップルジャパン社員の熱狂的なアップルファン Windogs なんか使ってどうする? ※ Macを使え! スズキ 「WebObjectsはすごいぞ! 絶対勉強した方がいい!」※「Windogs」は「鈴木語」の一つであり、誤字ではありません。また、実在する似た名前の製品との関連は確認されておりません。 23
  24. 24. 元上司の鈴木さん結構しつこい! 仕事では使えなさそうだし、 デザイナーが使う物でしょう? Kスズキ されたと思って使ってみなよ。 エンジニアとしても勉強になる! 24
  25. 25. 人生初のMac購入 Powerbook G4 13” (中古) 25
  26. 26. OS X GUIが きれいだね! 26
  27. 27. WebObjects 今はJava でも似たようなことが できる。 27
  28. 28. ただし、 仕事では全然 使えない! 28
  29. 29. Back to the Windows + 29
  30. 30. 数年後、Macとの再会Intel Mac + Bootcamp or Parallelsの登場 仕事でも使えるように なった!! 30
  31. 31. どんどんMacの世界に Mac Windows2006 2010 Now 30% 30% 100%70% 70% 31
  32. 32. ものも増えてきた出費も増えてきた もはや第2の 鈴木さん状態に 32
  33. 33. ある日の疑問‣ 自分はなぜ高いにも関わらずAppleの製品を 使っているのか?‣ Appleの製品の良さを伝えるためには どうすればいいのか?‣ 自分が作るソフトウェアもファンを作れるか? 33
  34. 34. ある日の疑問 自分はなぜ高いにも関わらずAppleの製品を 使っているのか? 使っていて気持ちいいから 34
  35. 35. ある日の疑問 Appleの製品の良さを伝えるためには どうすればいいのか? 「使っていて気持ちいいから」では、 伝わらないでしょう 35
  36. 36. でも、見れば分かる! = 36
  37. 37. でも、見れば分かる! この2つの画面は同じ機能を提 供するが、どっちを使いたい? = 37
  38. 38. デザインとの出会い あの気持ち良さの原因はどうやら デザインと言う要素にあったらしい!確かに、Windowsと比べるとできること(機能) は同じか、逆にMacが少ない。 でも使っていて気持ちいい。 38
  39. 39. デザインとの出会い「自分が作るソフトウェアもファンを作れるか?」いいデザインをすれば同じことができるのではないか? 39
  40. 40. いいデザインとは? 「いいデザインとは?」 その前に先ず、デザインって何? 何を勉強すればいいデザインができる? 40
  41. 41. デザインとは? 著作権に抵触する恐れがあるので非表示 ごめんなさい! m(_ _);mデザイン 『フリー百科事典 ウィキペディア日本語版』。 2012年10月31日 (水) 13:27 http://ja.wikipedia.org/wiki/デザイン 41
  42. 42. デザインとは?「よく分かんないけど、まあ、目的達成のため、対象(手段)をより気持ちよく、使いやすく、魅力的にすることだね。」 ‣ 衣装のデザイン:おしゃれで季節感を出すか、人をより魅力的に見せる ‣ グラフィックデザイン:伝えたいメッセージをより分かりやすく表現する ‣ インテリアデザイン:空間に特徴と個性をもたらす等 42
  43. 43. デザインとアートの違い アート デザイン‣自分の表現が大事 ‣商品や企業の表現が大事‣作家の自己表現 ‣使用者の自己表現を支援‣自分がやりたいこと ‣使用者がやりたいこと‣多数の理解を求めない ‣多数の理解を求める 43
  44. 44. デザインとアートの違い 焦点は常に ユーザーにある アート デザイン‣自分の表現が大事 ‣商品や企業の表現が大事‣作家の自己表現 ‣使用者の自己表現を支援‣自分がやりたいこと ‣使用者がやりたいこと‣多数の理解を求めない ‣多数の理解を求める 44
  45. 45. デザインとは? 本当はもっと複雑だけど、ここでは 「デザイン=使用者に対する心遣い」 としておこう。 45
  46. 46. いいデザインの前提デザインの例:高級温泉旅館のもてなし‣ 露天風呂、おいしい食事、きれいな庭、女将さんの接し方等、‣ 全てはお客様のくつろぎのひと時のためにデザインされたもの 46
  47. 47. いいデザインの前提課題:全ての人にいいデザインは存在しない。 あの高級温泉旅館にある子供が来たら? ‣ 好物はカレーライスとハンバーガー ‣ プールは好きだけど、お湯はきらい ‣ 元気ハツラツ。3分以上じっとするのは無理 ‣ サッカー命! 47
  48. 48. いいデザインの前提 先ず、使用者を正しく定義し、使用者のニーズを詳しく理解しないといけない。 そうでないと正しい心遣いができない! 48
  49. 49. 新しい疑問どうすれば使用者を正しく定義し、理解できるか? 49
  50. 50. UXデザインとの遭遇 UX = User Experienceつまり、使用者の経験をデザインするってことだよね?これを勉強すればユーザーを正しく理解できるのでは? 50
  51. 51. UXデザインとは 著作権に抵触する恐れがあるので非表示 ごめんなさい! m(_ _);m ユーザーエクスペリエンス設計  『フリー百科事典 ウィキペディア日本語版』。2012年11月25日 (日) 08:16 UTC http://ja.wikipedia.org/wiki/ 51
  52. 52. UXとは UX白書の UXの定義http://site.hcdvalue.org/docs 52
  53. 53. UXとはUXという分野は、システムの利用(あるいはシステムとの出会い)を通じて人々が持つ経験について研究すること、その経験のためにデザインすること、そしてその経験を評価すること。この利用は、UXに影響を与えたり寄与したりする、ある特定の文脈(context)において行われるもの。 53
  54. 54. UXの期間は思ったより長い? UX白書から 54
  55. 55. UXの期間利用前、予期的UX Now鈴木さんの Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 推奨 動画 Powerbook Intel Mac Mac iPhone iPad 購入/使用 購入/使用 買替え 購入/使用 購入/使用 中古 製品の Apple Store Apple Online Apple 販売店 パッケージ Shibuya/Ginza Store Genius bar 55
  56. 56. UXの期間利用中/一時的UX Now鈴木さんの Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 推奨 動画 Powerbook Intel Mac Mac iPhone iPad 購入/使用 購入/使用 買替え 購入/使用 購入/使用 中古 製品の Apple Store Apple Online Apple 販売店 パッケージ Shibuya/Ginza Store Genius bar 56
  57. 57. UXの期間利用後/エピソード的UX Now鈴木さんの Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 推奨 動画 Powerbook Intel Mac Mac iPhone iPad 購入/使用 購入/使用 買替え 購入/使用 購入/使用 中古 製品の Apple Store Apple Online Apple 販売店 パッケージ Shibuya/Ginza Store Genius bar 57
  58. 58. UXの期間利用期間全体/累積的UX Now鈴木さんの Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 推奨 動画 Powerbook Intel Mac Mac iPhone iPad 購入/使用 購入/使用 買替え 購入/使用 購入/使用 中古 製品の Apple Store Apple Online Apple 販売店 パッケージ Shibuya/Ginza Store Genius bar 58
  59. 59. UXの定義あるシステムと接する前から使用中、使用後における ユーザーの全ての経験いい経験は何で判断するか?:ユーザーの満足度 59
  60. 60. UXの定義あるシステムと接する前から使用中、使用後における ユーザーの全ての経験 ビジネスゴールの達成で 判断したりもするいい経験は何で判断するか?:ユーザーの満足度 60
  61. 61. いいUXを提供するためには?システムとユーザーとの全ての接点でいい経験を提供 できるように心掛ける 61
  62. 62. UIの登場システムとユーザーとの全ての接点でいい経験を提供 できるように心掛けるシステムとユーザーとの接点 = User Interface 62
  63. 63. どのUIをデザインすべきか? UXの範囲が結構広かったので、 ユーザーとシステム間の接点も多くなる 63
  64. 64. 企業活動における多様なUser Interface スズキ K 64
  65. 65. 企業が制御できるUI 直接的UI ストア パッケージ HW & SW ジーニアスバー(購入時のUI) (製品受領時のUI) ( 使用中のUI) (トラブル時のUI) + + +企業がデザインできるUIは企業活動の各シーンで異なる個々のシーンでいいUIを提供することがいいUXに繋がる 65
  66. 66. 企業を取り巻く環境が提供するUI 間接的UI 雑誌など 他のユーザー セレブとMac 競争製品 (情報) (口コミ) (イメージ) (比較) + スズキ + +企業はマーケティングやPRを通してUXの向上を目指す 66
  67. 67. UXは多様なUIデザインの総和 + = 67
  68. 68. UXは多様なUIデザインの総和 + = 68
  69. 69. あなたの考慮すべきUIあなたがマーケティングやPRの担当なら、 ※GUIではない Youtubeの鈴木さんの推奨 ネット/外信/広告・宣伝/口コミ/雑誌など 動画 アップルのアプ 3rd partyのアプリ OS X App Storeの利用 リケーション ケーション バッテリー HWデザイン メモリ増設 重さ 速度 持ち時価 Powerbook Intel Mac Mac Mac iPhone iPad iPad 購入/使用 購入 買替え 故障 購入 購入 故障 アップルオンラ 中古 製品の受領と開 アップルストア訪 アップルジーニア インストアでの買 販売店 封 問 スバー訪問 い物 69
  70. 70. あなたの考慮すべきUIあなたがソフトウェアエンジニアなら、 ※GUIではない鈴木さんの推 Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 奨 動画 アップルのアプ 3rd partyのアプリ OS X App Storeの利用 リケーション ケーション バッテリー HWデザイン メモリ増設 重さ 速度 持ち時価 Powerbook Intel Mac Mac Mac iPhone iPad iPad 購入/使用 購入 買替え 故障 購入 購入 故障 アップルオンラ 中古 製品の受領と開 アップルストア訪 アップルジーニア インストアでの買 販売店 封 問 スバー訪問 い物 70
  71. 71. あなたの考慮すべきUIあなたがハードウェアエンジニアなら、 ※GUIではない鈴木さんの推 Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 奨 動画 アップルのアプ 3rd partyのアプリ OS X App Storeの利用 リケーション ケーション バッテリー HWデザイン メモリ増設 重さ 速度 持ち時価 Powerbook Intel Mac Mac Mac iPhone iPad iPad 購入/使用 購入 買替え 故障 購入 購入 故障 アップルオンラ 中古 製品の受領と開 アップルストア訪 アップルジーニア インストアでの買 販売店 封 問 スバー訪問 い物 71
  72. 72. あなたの考慮すべきUIあなたが販売担当者なら、 ※GUIではない鈴木さんの推 Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 奨 動画 アップルのアプ 3rd partyのアプリ OS X App Storeの利用 リケーション ケーション バッテリー HWデザイン メモリ増設 重さ 速度 持ち時価 Powerbook Intel Mac Mac Mac iPhone iPad iPad 購入/使用 購入 買替え 故障 購入 購入 故障 アップルオンラ 中古 製品の受領と開 アップルストア訪 アップルジーニア インストアでの買 販売店 封 問 スバー訪問 い物 72
  73. 73. あなたの考慮すべきUIあなたがCS担当者なら、 ※GUIではない鈴木さんの推 Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 奨 動画 アップルのアプ 3rd partyのアプリ OS X App Storeの利用 リケーション ケーション バッテリー HWデザイン メモリ増設 重さ 速度 持ち時価 Powerbook Intel Mac Mac Mac iPhone iPad iPad 購入/使用 購入 買替え 故障 購入 購入 故障 アップルオンラ 中古 製品の受領と開 アップルストア訪 アップルジーニア インストアでの買 販売店 封 問 スバー訪問 い物 73
  74. 74. あなたの考慮すべきUIあなたが経営者なら、 ※GUIではない鈴木さんの推 Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 奨 動画 アップルのアプ 3rd partyのアプリ OS X App Storeの利用 リケーション ケーション バッテリー HWデザイン メモリ増設 重さ 速度 持ち時価 Powerbook Intel Mac Mac Mac iPhone iPad iPad 購入/使用 購入 買替え 故障 購入 購入 故障 アップルオンラ 中古 製品の受領と開 アップルストア訪 アップルジーニア インストアでの買 販売店 封 問 スバー訪問 い物 74
  75. 75. あなたの考慮すべきUIあなたが経営者なら、 ※GUIではない鈴木さんの推 Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 奨 動画 アップルのアプ 3rd partyのアプリ OS X App Storeの利用 リケーション ケーション バッテリー HWデザイン メモリ増設 重さ 速度 これをデザイン経営とか言うらしい 持ち時価 Powerbook Intel Mac Mac Mac iPhone (他の定義もあるけど) iPad iPad 購入/使用 購入 買替え 故障 購入 購入 故障 アップルオンラ 中古 製品の受領と開 アップルストア訪 アップルジーニア インストアでの買 販売店 封 問 スバー訪問 い物 75
  76. 76. あなたの考慮すべきUI今日はITエンジニア向けセミナーなので、 ※GUIではない鈴木さんの推 Youtubeの ネット/外信/広告・宣伝/口コミ/雑誌など 奨 動画 アップルのアプ 3rd partyのアプリ OS X App Storeの利用 リケーション ケーション バッテリー HWデザイン メモリ増設 重さ 速度 持ち時価 Powerbook Intel Mac 今日のUIはソフト Mac Mac iPhone iPad iPad 購入/使用 購入 買替え 故障 購入 購入 故障 ウェアに限定する アップルオンラ 中古 製品の受領と開 アップルストア訪 アップルジーニア インストアでの買 販売店 封 問 スバー訪問 い物 76
  77. 77. ここまでのまとめ用語 勝手な理解 評価基準 相手に対する 効率、シンプル、デザイン 心遣い きれい等 UX 使用者の経験 満足度 UI 使用者との接点 UXへの貢献度 77
  78. 78. UXとUIの関係 UIはUXのために存在する UI = 手段、UX = 結果 いいUXを提供するためにはいいUIが必須 78
  79. 79. UXとUIの関係目指す 実現手段と 結果としての UX してのUI UX UXはUIデザインの理由であり、結果でもある 「なぜこのようなUIデザインをしたの?」 と言う問いに対する答えがUX 79
  80. 80. UI/UXデザインに必要なスキル 目指す 実現手段と 結果としての UX してのUI UX‣ 人に対する理解(認知心理学)‣ 共感力(なりすまし力)‣ 分析力‣ コミュニケーションスキル(インタビュー、 ファシリテーション、プレゼンテーション) 80
  81. 81. UI/UXデザインに必要なスキル 目指す 実現手段と 結果としての UX してのUI UXUIの種類によって異なる ‣ 販売:店の立地、インテリア、BGM、店員の服装と態度、製品の陳列等 ‣ ソフトウェア:機能性、安全性、安定性、ヴィジュアルの美的要素等 81
  82. 82. UI/UXデザインに必要なスキル目指す 実現手段と 結果としての UX してのUI UX 基本は「目指すUX」と同じ。 現実的には、追加であきらめな い根性が必要 82
  83. 83. 目指すUXとは ユーザーの満足度が高い=いいUX 83
  84. 84. いいUXをデザインする方法次のセクションでUX方法論として説明します。 少々お待ちを! 84
  85. 85. その前に、いいUXを提供するには目指す 実現手段と 結果としての UX してのUI UX 「ITエンジニアとして意識すべUIデザイン」 について考える 85
  86. 86. 自分に必要なデザインは? 多様なデザインの区分から自分に必要なものを選ぶ ことから始める User In Web Design CI Desig terface n De Designsign face I nter U ser Interaction Design Font DesignInformation Architecture User eXperience Design Graph ic Des ign Informat ion Design Communication Design Unive rsal Design 86
  87. 87. 既に定義されているものがある多様なデザインの区分から自分に必要なものを選ぶことから始める 87
  88. 88. Webもアプリもこれだけあればいい 新しい領域( ソフトウェアのUX デザイン)既に慣れている領域 88
  89. 89. 各デザインの説明インタラクションデザイン‣ ユーザーのゴールを達成するた めのソフトウェアの操作フロー を定義‣ ユーザーの操作に対するソフト ウェアの反応を定義 89
  90. 90. 各デザインの説明 インフォメーション アーキテクチャ‣ ユーザーが直感的に分かり易い情報構造の定義 90
  91. 91. 各デザインの説明 インフォメーション デザイン‣ ユーザーに分かり易い情報の表 現を考えること‣ 文書にするか、グラフにする か、或は他のフォーマット? 91
  92. 92. 各デザインの説明 インタフェース デザイン‣ ユーザーに分かり易く、使い易 いインタフェースを考えること‣ メニュー、ボタン、画像の配置 とサイズ等UIの構成を考える 92
  93. 93. 各デザインの説明 ナビゲーション デザイン‣ ユーザーが必要な情報にアクセ スし易いメニューの構成/配置 を考える‣ 必要な処理と情報を如何に簡単 に見つけ出し、利用できるかを 考慮 93
  94. 94. 各デザインの説明 ヴィジュアル デザイン‣ GUIの美的表現で雰囲気を演出‣ 色、サイズ、形等の変化で各要 素の意味とモードの変化等を表 現‣ ユーザーの使用性の向上を考慮 する 94
  95. 95. システムアーキテクチャとのマッピング コンテキスト 企業 UX Design Standards / Guidelines Visual Design Biz Domain Interface DesignCI Design IT Policy Navigation Design Presentation Layer Information Design Biz Logic Layer Interaction Design Data Layer Information Architecture 95
  96. 96. 各デザインに必要な素養 美的センス 論理的思考‣ 全ての部分に論理的思考が必要‣ 美的センス/グラフィックデザインの専門スキルが必要がのはごく一部 96
  97. 97. 何が言いたいか?‣ ヴィジュアルデザインはUIのごく一部に過ぎない‣ いいUI作成に必須素養は論理的思考‣ つまり、エンジニアだけでも、それなりにいいUIを作ることは不可能ではない! 97
  98. 98. ヴィジュアルデザインもものにする?‣ ヴィジュアルデザインにも論理的思考は存在する‣ これをデザインの理論と呼ぶ‣ デザインの基本的な要素とその背景にある理論を知るとそれなりのUIデザインはできる。(美的センスがなくても最悪のUIにはならない) 98
  99. 99. ヴィジュアルデザインの基本要素‣ 近接 各要素の特性を理解して‣ 整列 適切に使えばそれなりの デザインはできる!‣ 反復‣ コントラスト‣ フォント 99
  100. 100. 近接‣ 関連が強いものを近くに配置する‣ 要素間の距離を持って各要素間の関係の強さを表現する‣ 情報を視覚的に構造化、組織化することによってユーザーの理解を助ける‣ 空間(スペース)は近接の大事な要素 100
  101. 101. 近接 UI要素間の論理的な グルーピング 101
  102. 102. 近接 スペースの重要性を 見せましょう!‣ 関連が強いものを近くに配置する‣ 要素間の距離を持って各要素間の関係の強さを表現する‣ 情報を視覚的に構造化、組織化することによってユーザーの理解を助ける‣ 空間(スペース)は近接の大事な要素 102
  103. 103. スペースを排除す近接 るとこうなる!!‣関連が強いものを近くに配置する‣要素間の距離を持って各要素間の 関係の強さを表現する‣情報を視覚的に構造化、組織化す ることに よってユーザーの理解を助ける‣空間(スペース)は整列の大事な 要素 103
  104. 104. 近接 情報量は増えるが 適切なスペースで 窮屈な感じになる 余裕と高級感を出す 104
  105. 105. 近接の悪い適用例 105
  106. 106. 整列‣ 画面内の全ての要素を意図をもって配置する‣ 内容が明快に伝わり、洗練されたイメージを与える 106
  107. 107. 整列 107
  108. 108. 反復‣ 画面内の要素を統一してそれを繰り返して使う事でパターン化すること‣ ユーザーの学習コストを減らし、誤操作を防ぐ‣ ブランドや世界観を作り出す 108
  109. 109. 反復の例 109
  110. 110. 反復の誤用例 Cancel OK OK Cancel 位置と色の誤用 110
  111. 111. コントラスト‣ 画面の要素に特徴を与えて他の要素と区別し易くすること‣ ユーザーの注意を意図した方向に向かせるに有効‣ 多様な要素を活用してコントラストを生成 ‣ 色、サイズ、形、スペース、フォント等 111
  112. 112. コントラスト コントラストの強い コントラストの弱い デザイン デザイン 112
  113. 113. コントラスト生成の例向き 色 113
  114. 114. コントラスト生成の例サイズ 形 114
  115. 115. フォント‣ 画面に表示する書体で各要素の意味と要素間の関係を表現する‣ フォントのイメージを理解し適切に使うことが大事‣ 各環境で使用可能なフォントは異なるので注意 115
  116. 116. フォント日本語のふぉんと 日本語のふぉんと日本語のふぉんと 日本語のふぉんと日本語のふぉんと 日本語のふぉんと 116
  117. 117. フォント: Hiragino Maru Gothic ProNITエンジニアに易しい実践的UI/UXデザイン NCデザイン&コンサルティング株式会社 金 成哲 (Roy S. Kim) @Roy_S_Kim 117
  118. 118. フォント: Hiragino Gaku Gothic StdNITエンジニアに易しい実践的UI/UXデザイン NCデザイン&コンサルティング株式会社 金 成哲 (Roy S. Kim) @Roy_S_Kim 118
  119. 119. さらに使い易いUIにするには、‣ 近接‣ 整列 ‣ メタファー‣ 反復‣ コントラスト + ‣ アフォーダンス ‣ 既存デザイン言語‣ フォント 119
  120. 120. メタファー‣ 現実のもの等、ユーザーがその使用方法に慣れているものを真似てUIを作成する‣ ユーザーが分かり易い。(やり過ぎには注意) 120
  121. 121. アフォーダンス‣ 環境に対する人間の反応を利用する‣ 「ボタンっぽいのがあれば押したくなる∼」 121
  122. 122. 既存デザイン言語‣ ユーザーが既に慣れているUI要素を利用する 今は多くの人が 知っている「スライドして削除」 これはリンクではありません。 でも、リンクに見える 122
  123. 123. これさえ覚えれば、できる ような気がする‣ 近接‣ 整列 ‣ メタファー‣ 反復‣ コントラスト + ‣ アフォーダンス ‣ 既存デザイン言語‣ フォント 123
  124. 124. One More ThingSome more things 124
  125. 125. ユーザーの特徴を考慮する あなたのユーザー 125
  126. 126. デバイスの特徴を考慮する 126
  127. 127. 使われる環境を考慮する 127
  128. 128. やってはいけないこと 映画Monsters vs Aliensから※映画の宣伝にもなるので画像の利用にはご理解を! 128
  129. 129. やってはいけないこと アメリカ大統領: 「コーヒー飲みたい」 129
  130. 130. やってはいけないこと 閣僚達:Oh My God!! 「やめて下さい!!」 130
  131. 131. やってはいけないこと 131
  132. 132. やってはいけないこと 実は、この人がUIデザイナー: 「このボタンの何が問題なんだ?」 132
  133. 133. やってはいけないこと近い!似てる!意味が分からない!寄りかかりたくなる!押し易い!押したくなる!取り返しがつかない! 133
  134. 134. ユーザーは絶対やっちゃう!! 134
  135. 135. 推奨の本 エンジニアにも易しい 135
  136. 136. 最後に、この3枚の差は何でしょうか? 136
  137. 137. 最後に、この3枚の差は何でしょうか? 答えは自分で 今までの説明の中に答えはあります。 137
  138. 138. 休み 138
  139. 139. UXデザインの方法論 139
  140. 140. 復習目指すUXとは ユーザーの満足度が高い=いいUX 140
  141. 141. いいUXとは いいUXが持つべ き特徴http://semanticstudios.com/publications/semantics/000029.php 141
  142. 142. いいUXは機能以上の価値を提供する 満足度の向上(UXデザインで目指 価値がある すところ) 楽しい・共有したい 思いのまま使える 機能の提供 使いやすい(エンジニアの慣れ 信頼できる ている世界) 機能する http://www.artificialindustry.com/inspiratie/81/human+centered+design 142
  143. 143. いいUXは機能以上の価値を提供する UXデザインの 方法論が必要 価値がある 楽しい・共有したい 思いのまま使える 使いやすい 既存の方法論でもカーバーできる 信頼できる 機能する http://www.artificialindustry.com/inspiratie/81/human+centered+design 143
  144. 144. 既存のITプロジェクトの開発プロセスWaterfall Process 要件定義 設計 実装 テスト リリースAgile Process 要件定義 設計と実装 テスト リリース リリース リリース 144
  145. 145. これ以降の話のスコープWaterfall Process 要件定義 設計 実装 テスト リリースAgile Process 規模は異なるが、プロセスとしては類似 要件定義 設計と実装 テスト リリース リリース リリース 145
  146. 146. ITとUXデザインプロセスのマッピング 目指す 実現手段 結果としての UX としてのUI UX ユーザビリティ  UXデザイン UIデザイン テスト 要件定義 設計 実装 機能テスト リリース 146
  147. 147. プロセスの反復による改善が望ましい 目指す 実現手段 結果としての 目指す 実現手段 としてのUI 結果としての UX 目指す 実現手段 としてのUI UX 結果としての UX UX UX としてのUI UX ユーザビリティ  UXデザイン UIデザイン ユーザビリティ テスト   UXデザイン UIデザイン ユーザビリティ   UXデザイン テスト UIデザイン 要件定義 設計 実装 機能テスト テスト 要件定義 設計 実装 機能テスト 要件定義 設計 実装 機能テスト リリース リリース リリース 147
  148. 148. UXデザインのタスク 目指す 実現手段 結果としての UX としてのUI UX ユーザビリティ  UXデザイン UIデザイン テスト 要件定義 設計 実装 機能テスト リリース 148
  149. 149. UXデザインのタスク UXデザイン ユーザー調査 ペルソナ定義 機能一覧作成 UIスケッチ ストーリーボード データコンテキスト調査 画面フロー作成 作成 モデリング メンタルモデル作成 UIプロトタイプ作成 時間軸 149
  150. 150. UXデザインのタスク UXデザイン ユーザー調査 ペルソナ定義 機能一覧作成 UIスケッチ ストーリーボード データコンテキスト調査 画面フロー作成 作成 モデリング メンタルモデル作成 UIプロトタイプ作成 ユーザーのゴールとユーザと環境の調査 機能とデータの定義 UI作成 対象範囲確定 150
  151. 151. UXデザインユーザー調査ユーザーは誰か?‣ 目的 : 製品やサービスのユーザーを正しく定義し、 理解する‣ 手法 ‣ マーケット調査、サーベイ ‣ ユーザーインタビュー、ユーザーの行動観察‣ 成果物:ペルソナ + 補足資料 151
  152. 152. UXデザインユーザー調査ユーザーは誰か?‣ 目的 : 製品やサービスのユーザーを正しく定義し、 理解する ‣ 多くの場合、ITプロセスの要件定義タス‣ 手法 クの一環として行うのが現実的 ‣ マーケット調査、サーベイ ‣ ユーザー企業のIT部門の担当の話だけを 聞いてはだめ。必ず直接使用者に会う事 ‣ ユーザーインタビュー、ユーザーの行動観察 ‣ 既存システム分析(あれば)‣ ユーザーインタビューの参考:「ユーザー に弟子入り」‣ 成果物:ペルソナ + 補足資料  http://opencu.tv/media/ux-research-20121010 152
  153. 153. UXデザインコンテキスト調査ユーザーはどのような環境/状況にあるか?‣ 目的 : 製品やサービスを囲む環境を理解する‣ 手法 ‣ マーケット調査、サーベイ、ユーザーインタビュー ‣ 製品/サービスが使われる現場訪問、ユーザーとの同行、作業の体験 ‣ 画像/動画の入手 ‣ 既存システム分析及び競合製品の分析(あれば)‣ 成果物:ストーリーボード、メンタルモデル 153
  154. 154. UXデザインコンテキスト調査ユーザーはどのような環境/状況にあるか?‣ 目的 : 製品やサービスを囲む環境を理解する ‣ ITプロセスのプロジェクト立ち上げ及び‣ 手法 スコープ確定と連携 ‣ マーケット調査、サーベイ、ユーザーインタビュー ‣ プロジェクトの全てのステークホルダー と会ってプロジェクトに対する意図を確 ‣ 製品/サービスが使われる現場訪問、ユーザーとの同行、作業の体験 認。ビジネスのゴールを確認 ‣ 画像/動画の入手 ‣ 製品/サービスが実際に使用される環境 ‣ 既存システム分析及び競合製品の分析(あれば) を確認することが大事‣ 成果物:ストーリーボード、メンタルモデル ‣ 関連するシステム、業務、ニーズを確認 154
  155. 155. UXデザインペルソナ定義ユーザー像をできるだけ具体的に‣ 目的 : 対象ユーザーをより具体的に定義し、 理解する‣ 手法‣ ユーザー調査から得た情報を元に代表的なユーザー像を決定‣ 対象製品/サービスと関係するユーザーの特徴/環境/欲求を具体的に 記述‣ 必要に応じて写真、小物、道具を追加する 155
  156. 156. UXデザインペルソナ定義ユーザー像をできるだけ具体的に ‣ ペルソナはユーザーの思考/行動を想像するた めのツール ‣ 凝りすぎる必要はない。製品/サービスと関係 ある属性だけでもいい ‣ 固定の属性を持たず、必要に応じて属性を定 義する ‣ 俳優の写真やウェブで拾った写真よりは手書き の絵が有効 ‣ 目的から考えれば当たり前 ‣ 実ユーザーの写真が使えたらベスト ‣ 複数のペルソナがある場合は優先順位をつける ‣ 主役ペルソナ、脇役ペルソナ 156
  157. 157. UXデザインストーリーボード作成ユーザーは何をやっているか?‣ 目的 : ユーザーの行動を具体的に定義し、 理解する‣ 手法 ‣ 製品/サービスと関わるユーザーを行動を具体的に描写する ‣ その行動の前提条件、目的、結果の評価基準を具体的に記述する ‣ 必要に応じて写真、動画、既存システムの資料を追加する ‣ 複数のペルソナがある場合はどのペルソナのストーリーかを明確に 157
  158. 158. UXデザインストーリーボード作成ユーザーは何をやっているか?やりたいか? ‣ ユースケース作成タスクと並行、あるいは ユースケース作成の代わりに実施 ‣ ユーザーを囲む環境を描写する(時間、騒 音、明るさ、室内/外等) ‣ システムではなく、ユーザーの視点で作成 する ‣ 既存のストーリーボードと理想的なストー リーボードを書いて比較する ‣ 目標とするストーリーボードを作成する際 には技術的制約などは考慮しない ‣ システムは魔法使いだと想定する 158
  159. 159. UXデザインメンタルモデル作成ユーザーは何を考えているか?‣ 目的 : ユーザーの認識を理解してデザインの 正しい方向性を決める‣ 手法‣ ストーリーボードの行動をする時のユーザーの心理状態、欲求、 目的、認識を描写する‣ ユーザーの行動の原因を把握する事でユーザーの真のニーズを把握 する‣ ユーザーに本当に価値があるのは何かを理解する 159
  160. 160. UXデザイン メンタルモデル作成 ユーザーは何をやりたいか?何を考えているか? ショップに行く事にする ‣ ユーザーの行動に対して「なぜ?」を確認す る 新しい商品 待ち合わせ ‣ 多くの場合、ユーザーは自分の行動の動機 を買うため 友達と会うこ を理解していない 既存の商品を 使い切った とにした ‣ 5Whyの手法を使い、真の動機を確認する暇つぶし 年を取った ショップが見 つけやすい ‣ ビジネスの目的からくる動機も確認する仕事の間で空き時間ができ 給料をもらっ 座っていられ ‣ ユーザーが使っている既存の道具、システム た た るから について他の代案を考える近くのショッ 購入時期のリ 地域のショッ ‣ 既存の状況を前提にしない プ検索 マインド プ検索 ‣ コンテキストを変えられるかを検討する 誕生日お祝い 通知 ‣ ストーリーボードからは「改善」ができるが メンタルモデルからは「改革(イノベーショ ン)」ができる(可能性がある) 160
  161. 161. UXデザイン メンタルモデル作成 ユーザーは何をやりたいか?何を考えているか? ショップに行く事にする ‣ ユーザーの行動に対して「なぜ?」を確認す る 新しい商品 待ち合わせ ‣ 多くの場合、ユーザーは自分の行動の動機 を買うため 友達と会うこ を理解していない 既存の商品を 使い切った とにした ‣ 5Whyの手法を使い、真の動機を確認する暇つぶし 年を取った ショップが見 つけやすい ‣ ビジネスの目的からくる動機も確認する仕事の間で空き時間ができ 給料をもらっ 座っていられ ‣ ユーザーが使っている既存の道具、システム た た るから について他の代案を考える近くのショッ 購入時期のリ 地域のショッ ‣ 既存の状況を前提にしない プ検索 マインド プ検索 ‣ コンテキストを変えられるかを検討する 誕生日お祝い 弊社独自の手法: 通知 ‣ ストーリーボードからは「改善」ができるが 一般的なメンタルモデル メンタルモデルからは「改革(イノベーショ ン)」ができる(可能性がある) の使い方とは若干異なる 161
  162. 162. UXデザイン機能一覧/データモデル作成各ストーリーを実現するのに必要な機能とデータは何か?‣ 目的 : ストーリーボードの各ストーリを実現す るために必要な機能とデータを洗い出す‣ 手法 ‣ ストーリーボードの各ストーリーに対して必要な機能を定義する ‣ 各機能で必要なデータを定義する ‣ 複数のストーリーから抽出された機能とデータの一覧を作成し、重複 がなく、かつ汎用的な機能一覧とデータモデルを作成する 162
  163. 163. UXデザイン機能一覧/データモデル作成各ストーリーを実現するのに必要な機能とデータは何か? ‣ この後のUIスケッチ、画面フロー、プ ロトタイプ作成時の基礎資料となる ‣ ユーザーの視点での機能とデータの定 義を行う ‣ ユーザーに価値を提供する単位とし て機能とデータを定義する ‣ システムの実装方式を記述しない ‣ データモデルは以下のレベルで検討す る ‣ インフォメーションアーキテクチャ 163
  164. 164. UXデザインUIスケッチ/画面フロー作成やっと画面を書く時が来た!‣ 目的 : 各ストーリを実現するために必要な画面 と処理フローを構想する‣ 手法 ‣ 紙とペン等、できるだけ手軽く多量のアイデアを短時間で出せる道具 を使う ‣ トライ&エラーの費用を最小化することで複数回反復する ‣ ユーザビリティテストはこの段階から始める 164
  165. 165. UXデザインUIスケッチ/画面フロー作成アナログツールは未だ健在!! 収 束 散 拡 スケッチの数時間軸 最終案のスケッチ 165
  166. 166. UXデザインUIスケッチ/画面フロー作成しかし、デジタルも負けない 166
  167. 167. UXデザインUIスケッチ/画面フロー作成しかし、デジタルも負けない 自由に描く&コピー可能=Good! アイデアを制限するので推奨しない 167
  168. 168. UXデザインUIプロトタイプ作成動きをつけて検証して見よう!‣ 目的 : 作成した画面スケッチと画面フローでス トーリーを実現できるかを確認する‣ 手法‣ ユーザー或は被験者が実際に触りながら画面操作と画面の処理フローを 確認できるようにする‣ 最初はペーパープロトタイプも可能であるが、ある程度アイデアが 固まったら動きが表現できるツールを利用する‣ ユーザビリティテストを行い、改善作業を行う‣ 費用をあまりかけずにできる方法を探す 168
  169. 169. UXデザインUIプロトタイプ作成動きをつけて検証して見よう! ‣ ペーパープロトタイプでも ある程度のテストは可能 ‣ ただし、動きをテストする には効果が落ちる ‣ 想像力が貧弱な人には テストが難しい ‣ 最近はプロトタイプ作成用 ソフトが無料か小額で利用 可能なのでそれらを利用す ることを推奨 169
  170. 170. UXデザインUIプロトタイプ作成動きをつけて検証して見よう! Balsamiq 170
  171. 171. UXデザインUIプロトタイプ作成動きをつけて検証して見よう! http://keynotopia.com PowerpointやKeynoteでユーザーの操作に 反応するUIを作成可能 優れたUIデザインが可能 171
  172. 172. ユーザビリティテスト 目指す 実現手段 結果としての UX としてのUI UX ユーザビリティ  UXデザイン UIデザイン テスト 要件定義 設計 実装 機能テスト リリース 172
  173. 173. ユーザビリティテストどこまでやる?‣ 目的 : 作成したプログラムが目的した価値をユ ーザーに提供しているか確認、改善点を探す‣ 手法 ‣ ユーザーテストおよび専門家によるヒューリスティックテスト ‣ 定量的に評価可能なKPIの定義と測定 ‣ 初期テスト及びある程度期間を置いてのテストを行う ‣ できるだけ実環境と類似した状況でテストを行う 173
  174. 174. ユーザビリティテストどこまでやる? ‣ 専門的な期間にユーザーテストを依頼するとそれなりのコストが 発生する‣ 目的 : 作成したプログラムが目的した価値をユ ‣ 期間:1ヶ月∼ ‣ 費用:100万円∼ ーザーに提供しているか確認、改善点を探す ‣ 近くのユーザーを見つけ、テストする ‣ 実際使用する部署の人‣ 手法 ‣ 友達、紹介、隣の部署の人 ‣ 「5人テスト」を行う ‣ ユーザーテストおよび専門家によるヒューリスティックテスト ‣ 5人までテストすると全ての問題のほとんどが検出できる ‣ ただし、現実的には3人でも十分価値がある ‣ 定量的に評価可能なKPIの定義と測定 ‣ ヒューリスティックテストを行う ‣ 「5人テスト」から得られる情報の80%は得られる ‣ 初期テスト及びある程度期間を置いてのテストを行う ‣ データの収集はできるだけ早期から行う ‣ 比較できるデータがないと判断ができない ‣ できるだけ実環境と類似な状況でテストを行う 174
  175. 175. そして、これらの反復 目指す 実現手段 結果としての 目指す 実現手段 としてのUI 結果としての UX 目指す 実現手段 としてのUI UX 結果としての UX UX UX としてのUI UX ユーザビリティ  UXデザイン UIデザイン ユーザビリティ テスト   UXデザイン UIデザイン ユーザビリティ   UXデザイン テスト UIデザイン 要件定義 設計 実装 機能テスト テスト 要件定義 設計 実装 機能テスト 要件定義 設計 実装 機能テスト リリース リリース リリース 175
  176. 176. 参考:弊社(NCDC)の方法論 プロトタイプ開発 サーバーと連携 最終改善 176
  177. 177. ベストプラクティス (ささやかな経験則) 177
  178. 178. UI/UXデザインに正解はない‣ 全ての面において最高なデザインは存在しない‣ ある部分を改善すると他の部分が悪くなる‣ 適切に定義されたペルソナとUXデザイナーの判断でトレードオフを検討するしかない 178
  179. 179. みんなを幸せにはできない VS‣ 人によってニーズは異なる Windows8 for Smartphone, Tablet, and Desktop!!??‣ 対象を広げると質が落ちる‣ 製品やサービスのペルソナを定義し、そのペルソナの満足だけに集中する 179
  180. 180. 既成概念を捨てて、常識を疑う‣ 一般的にいいものが必ずいいとは限らない‣ コンテキストとユーザー、ユーザーのゴールによっていいものが変わる‣ 例:タブレットPC vs ハンディターミナル‣ 例:ダムターミナル vs RIA  VS 180
  181. 181. 部分だけでなく、全体に注目する‣ エンジニアは部分に注目する傾向がある‣ 一つの場面での最適解がUX全体の一貫性を壊す場合がある‣ 常に全体としての一貫性を意識するように気をつける‣  核心機能でない限り、そこだけの解は避ける 181
  182. 182. 顧客から製品やサービスを守る‣ 顧客とユーザーを区分する‣ そして、ユーザーのためにデザインする‣ 顧客のためデザインしたものは結果的にうまく行かない‣ 顧客のエゴや思い込みから製品を守る‣ ペルソナ定義とメンタルモデルの作成に顧客を参加させる‣ ペルソナとメンタルモデルを活用して説得‣ 最悪の場合、ユーザーテストの結果で説得 182
  183. 183. ユーザーになりきる!‣ UI/UXについて考えたり議論したりする時には必ずユーザーの視点で考える‣ ユーザーのメンタルモデルとエンジニアの実装モデルは異なる‣ 必要であれば、ユーザーになりきるための小道具を用意する‣ 例:帽子、眼鏡、マスク等 183
  184. 184. 誰でも準専門家にする‣ ヒューリスティックテストに 必要な専門家の経験則を 形式知として組織で共有する‣ 専門家の評価基準をガイドラインとして作成 し、作業中に参考にする‣ アップルやグーグル、MS等、プラットフォー ムベンダーが提供するデザインガイドライン を参考にチェックシートを作成して共有する 184
  185. 185. ユーザーテストは逃げ道ではない‣ ユーザーテストは仮説検証の場‣ よく分からなかった時に早速 「じゃあ、ユーザーテストして見よう」は望ましくない‣ 正しい仮説を持たずにはユーザーテストをしても無駄‣ 先ずはベストの案を出す、その後に検証するためにユーザーテストを行う‣ ユーザーテストは複数の案が対立した時に有効‣ でもその信頼性を確保するのは難しい←サンプリングの限界 185
  186. 186. UI/UXを導入するには今がチャンス‣ スマートフォン/タブレットの普及が大きな原因‣ ユーザーの要求水準が高くなっている‣ 既存SIerの危機感‣ 大手ソフトウェアベンダーもキーワードとして取り上げている‣ Customer eXperienceと呼んでいたり‣ 社内向けの説得資料は十分! 186
  187. 187. できることから徐々にやってもいい‣ UI/UXデザインの全てのタスクを一挙に導入する必然性はない‣ 各プロジェクトの特性を考慮し、導入するタスクの優先順位を検討する‣ コスパは大事!UXデザインが不要なケースもある‣ 個々のタスクも100%行わなくてもいい。先ずは意識し、始めることが大事‣ 成果を見せて、賛同者を増やし、効果を認めてもらう 187
  188. 188. 既存プロセス/見積もりとマージする‣ 要件定義と設計のフェーズにUXデザインのタスクをマージする‣ 現実的にはUXデザインの費用を別途見積もるのが難しい場合がある‣ 事前に顧客に必要性を説明し、タスクの内容と成果物が変わることを理解 してもらう‣ 既存タスクにUXデザインのタスクを若干上乗せする‣ 顧客の説得にはヴィジュアルイメージをうまく利用する‣ 百聞が一見に如かず 188
  189. 189. 推奨の本 189
  190. 190. 最後に 190
  191. 191. デザインは相手に対する心遣いUI/UXデザインは結局のところ、ユーザーに対する「もてなし」のこと意外と日本人には向いているかも? 191
  192. 192. 資料の在処:‣ 弊社サイトに後日アップロードします ‣ http://nextconceptdc.com/「itエンジニアに易しい実践的uiuxデザイン勉強会」/‣ 公開したら@ncdc_jpからつぶやきます次のセミナー日程:2013年1月 「エンタプライズアプリの今と未来」   企業におけるスマートフォン/タブレットアプリの導入と活用 192

×