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]は投げ捨てろ!

58,027 views

Published on

[UX]はやめようというお話をしました。

Published in: Design
  • Be the first to comment

[UX]は投げ捨てろ!

  1. 1. 「UX」は投げ捨てろ! 蜜葉 優
  2. 2. • H.N. :蜜葉 優 [@mitsuba yu] • UX Designer / Interaction Developer • M+ 2p thin/lightがすき • Microsoft MVP for 
 Windows Platform Development • 最近はWPFとUnityのお仕事 • Keynoteの表紙はいつも自分で撮影 • http://c-mitsuba.hatenablog.com profile
  3. 3. • 高校 • 文科省ICTスクールで3D • 大学 • 株式会社ソフトディバイスでWeb開発とデザイン • 株式会社フェンリルでストアアプリ開発 • IIJでなんかネットワーク • フリーランスでデザインと開発 • XAML,Unity,Processing,Metasequoia,Ai,Ps etc.. profile
  4. 4. • 書籍 • Windows 8 UI/UXデザイン入門 • iOSフラットデザインの作法
 
 • 嗜好 • カメラ、ビリヤード、スノーボード、釣り • ウイスキー、ワイン profile
  5. 5. agenda • UXって? • [UX]をやめる理由 • UXのいろいろな定義と解釈 • 蜜葉的UX • 使いやすいUIって? • coloris • まとめ
  6. 6. 今日はおんな じことを何度 もいいます。
  7. 7. なんか感じ取って 脱[UX]してもらえ ればうれしいです
  8. 8. UXって?
  9. 9. 人々がシステムを利用する中で 得られる経験
  10. 10. と、ざっくりなら言えますが、きちんと 理解、説明するとなると難しいのがUX
  11. 11. 「アプリのUXをデザインしました。」 「サービスのUXが向上しました。」 「使いやすいUXに変更しました。」 「UXを検証してレイアウトしました。」
  12. 12. 「アプリの 「サービスの 「使 「UX わけがわからないよ!!!!
  13. 13. などなど、 こんなふうに「UX」なんてものに頼っていると、 よいアプリ、よいデザインなんて実現しません。 [UX]
  14. 14. でもUXってなんか いま大事で必要な ものらしい。
  15. 15. では、なにをどうして どう考えればいいのか。 そんな蜜葉的プロセスと デザイン思考をご紹介します。
  16. 16. 一番 言いたい ことは
  17. 17. ?そのUXってなんなん
  18. 18. 「アプリのUXをデザインしました。」 「サービスのUXが向上しました。」 「使いやすいUXに変更しました。」 「UXを検証してレイアウトしました。」
  19. 19. 「UX」は投げ捨てろ! 蜜葉 優
  20. 20. UXは投げ捨てろ! = [UX]なんて言葉に頼らずに、 意図しているデザインを説明 できるようになろう
  21. 21. UXの甘い罠 • [UX]っていう言葉が流行ってる • [UX]っていうとなんかかっこいい • とりあえずデザインとかユーザーの話をする なら[UX]![UX]!って言っておけばいい。
  22. 22. UXの甘い罠 • [UX]っていう言葉が流行ってる • [UX]っていうとなんかかっこいい • とりあえずデザインとかユーザーの話をする なら[UX]![UX]!って言っておけばいい。 だいたいあってる
  23. 23. UXの甘い罠 • [UX]っていう言葉が流行ってる
  => 一昔前の[クラウド] • [UX]っていうとなんかかっこいい   => 響きがかっこいい? • とりあえずデザインとかユーザーの話をする なら[UX]![UX]!って言っておけばいい。
   => あってる!
  24. 24. UXの甘い罠 • とりあえずデザインとかユーザーの話をする なら[UX]![UX]!って言っておけばいい。
   => あってる! => から困る!
  25. 25. 例えば • 「プログラミングのvarっていつ使うの?」
 「え、いっつもつかうよね?」
 「でもvar使うと型がわかんないよね?」
 「型?なんの話してんの?」
  26. 26. 例えば • 「プログラミングのvarっていつ使うの?」
 「え、いっつもつかうよね?」
 「でもvar使うと型がわかんないよね?」
 「型?なんの話してんの?」 • 「え、C#よね?」
 「あれ、JSじゃないの?」
  27. 27. プログラミング言語 AAABAPABCABCLActionScriptActiveBasicAdaAdvanced Boolean ExpressionLanguageAgenaAHDLALGOLAliceashAPLAppleScriptasAtomAutoItAWKBBB ashBASICBCPLBefungeBF-BASIC'nBioeraBLISSBluespecBooBrainCrashBrainfuck CC#C++C@CALCamlCantataCAP- XCASLCecilCFScriptCgChapelChefCHILLClipperClojureCLUCo-array Fortran COBOLCoffeeScriptColdFusionCommon LispComponent PascalConcurrent CleanConcurrent PrologConstraint Handling RulesCPLcshCurlCurry CωDDartDelphiDylanECMAScriptEiffelElixirEnterprise Generation Language ErlangEscapadeEsterelEuclidEuphoriaF#FactorFalse FantomFeriteFiclFlavorsFlowDesignerForth FORTRANFortressGLSLGoGroovyGuarded Horn ClausesHAL/S Hardware Join JavaHaskellHaxeHDCamlHLASMHLSLHMLHOLON HSPHQ9+HQ9F+HydraHyperTalkIconIDIDLInformInScriptINTERCAL
  28. 28. 言語いっぱい
  29. 29. 同じようにUXを
 構成する要素も
 いっぱいあります。
  30. 30. 一体なんの 話してんの?
  31. 31. 実例 http://crowdworks.jp/ public/jobs/190430
  32. 32. 画面デザインの改善 こそがUXの改善だ! (キリッ
  33. 33. 画面デザインは UXなのか
  34. 34. 画面デザイン • UIレイアウト • プラットフォームにあわせて? • 人にあわせて? • スタイル • プラットフォームにあわせて? • フラットデザイン? • 主婦向けに手帳っぽく?
  35. 35. 何を求められてるか わからない 全部!っていうと、 正直「は?」ってなる
  36. 36. ふわっとUX
  37. 37. ?そのUXってなんなん
  38. 38. UXは何で できているの?
  39. 39. • 1つの定義で全てのUXを言い表せない • UXは、現象、研究分野、実践の3つに分けられる • 現象:UXとは、UXの状況と他の因果関係 • 研究:UXの手法や評価関数の開発 • 実践:UXを可能にするデザイン • 個人的にはUXと時間軸に重きを置いてる印象 • それを使う前、使っている時、やめた時、もう一 度始めた時、全体として、それぞれの体験に着目 UX白書
  40. 40. UXの要素
 =>
 UX is not UI UX IS NOT UIUX IS NOT UIWhat does UX actually mean? The various UX roles that a person can fulfill are plentiful. Some are whole jobs, some whole careers; others are tactical roles we all move in and out of. What so many UX designers would like you to remember is that UX is not just UI design. Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism HOW UX WANTS TO BE SEEN HOW UX IS TYPICALLY SEEN “UX is the intangible design of a strategy that brings us to a solution.” Get your print or web copy of this poster at www.uxisnotui.com helloerik.com/ux-is-not-uiAn offshoot of @Erik_UX elisabethhubert.com/2012/12/interaction-design-beyond-the-interface/Inspired by @lishubert
  41. 41. この要素がなぜ UXと呼ばれているか。 アプリを作る上で それぞれがどういう 影響を持つのか
 言えるようになろう。 UX IS NOTUX IS NOT What does UX actually mean? The various UX roles that a p whole jobs, some whole careers; others are tactical r What so many UX designers would like you to remem Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism Field r Face t Creatio Gather Creatin Produc Featur Requir Graph Interac Inform Usabil Protot Interfa Interfa Visual Taxono Termin Copyw Presen Workin Brains Design HOW UX WANTS TO BE SEEN HOW U “UX is the intangible design of a strategy that Get your print or web copy of this poster at w helloerik.com/ux-is-not-uiAn offshoot of elisabethhubert.com/2012/12/interaction-design-beyInspired by
  42. 42. なぜ、C#で作るのか。 なぜ、メイリオを使うのか。 なぜ、トランジションを使うのか。 設計(デザイン)が話せるようにする
  43. 43. 言えないことを言えるようにする と、いろいろなものが明確になる。 例えば ・仕様、UIデザイン、デザイン・ス タイル、システムの目的、対象、、
  44. 44. 仕様、UIデザイン、デザイン・スタイル、 システムの目的、対象、、 システムやサービスを作る上で全部大事。 別に[UX]が大事なわけじゃない。 [UX]は大事なものを明確にする手法でし かない。
  45. 45. 全部話せるようになるのは、とって も大変。 なので、UXの要素の中から自分の 立場に関係のあるものだけをピック アップしよう。
  46. 46. まとめると…
  47. 47. UXとは • その人にはその人のいうUXがある。(立場 • なのでUXの話をするときは、[UX]という言葉 を使わない。 • [UX]がUXの何を指して、何を目指して、どう 使っているか明確にする。(システム • UXを大事なものをハッキリさせる手法とする • すると、あいまいな話になりにくい。
  48. 48. 蜜葉のUX
  49. 49. 蜜葉の考えるUX • アプリを作る前にどんなことを考えてるか • アプリとユーザを育てるサイクル • デベロッパーとして考えるデザイン • インタラクションと仕掛け • coloris
  50. 50. アプリの育て方
  51. 51. 例えば、Windowsの右下
  52. 52. Windows 7と8
  53. 53. UIでのUXサイクル • 最初に多くの機能を作るようなことはしない! • 機能は小さく、UIは視覚的にわかりやすくする。 • ボタンはボタンらしくとか。 • 形状や位置などUIがユーザーに一般化され
 (≒慣れ)れば、今までのUIを抽象化して、
 シンプルにする。 • それができたら新しい機能に着手する。
  54. 54. 蜜葉の考えるUX • サービスやシステムが使われる環境よりも
 アプリとしてのデザインやインタフェースを 重要視 • どっちかっていうと現実世界より、画面の中 より。UIより。 • アプリに特化したデザインが好き
  55. 55. 蜜葉の考えるUX • 画面の中で、ユーザーをどうするか、ユーザーに どうしてほしいか、インタラクションを考える • 目的のインタラクションを自然に行わせる
 インタフェース(レイアウト、トランジション)を 考える
  56. 56. • 自分がなにかしたときに • 相手がどう振る舞うか • 相手になにかさせるには • 自分はどう振る舞うべきか Interaction
  57. 57. example
  58. 58. 好きにしていいよ
  59. 59. なにをするか、分からない なにに興味を持つか、分からない
  60. 60. そのソファ座っといて
  61. 61. まぁ、 ソファに座る
  62. 62. テーブルの上が
  63. 63. たぶん、 ちょっと読んでみる
  64. 64. • 自分がなにかしたときに • 相手がどう振る舞うか • 相手になにかさせるには • 自分はどう振る舞うべきか Interaction
  65. 65. • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ようにテーブル に置く Interaction
  66. 66. • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 • 自分からアクションを行う(能動的) • 意図した結果がきちんと返ってくる • 人に強制された挙動、人工的 • バーバルコミュニケーション Interaction
  67. 67. • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ように置く • 相手にアクションをおこさせる(受動的) • 意図した結果が返ってくるとは限らない • 人の自然な挙動、作為的 • ノンバーバルコミュニケーション Interaction
  68. 68. • ユーザーがなにかした時に、UIがどう振る舞うか • UIがなにかした時に、ユーザーがどう思ったりどう 操作するか Interaction
  69. 69. • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものか • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか UI:Interaction
  70. 70. • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものなのか • ユーザーが意図した操作を、UIから連想させる ためには、どういうUIにして、どう操作させれ ばよいか UI:Interaction
  71. 71. • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか • UIが意図した操作を、ユーザーに体験させるた めには、どういうUIにして、どう操作させるべ きか UI:Interaction
  72. 72. • ユーザーが意図した操作を、UIから連想させるためには、
 「どういうUIにして、どう操作させればよいか」 • UIが意図した操作を、ユーザーに体験させるためには、
 「どういうUIにして、どう操作させるべきか」 UI:Interaction
  73. 73. 使いにくいUI =
 ユーザーが意図した操作
 ≠
 UIが意図した操作
  74. 74. 使いやすいUI その1 =
 ユーザーが意図した操作
 が 
 UIが意図した操作
  75. 75. 使いやすいUI その2 =
 UIが意図した操作 が ユーザーが意図した操作
  76. 76. • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に 使いやすいUI
  77. 77. • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに • 複雑になればなるほど、いろいろな操作をする可能性が 増えて大変。けど便利。 • エクセルつくりましょう!ってかんじ。 使いやすいUI
  78. 78. • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう!
 ってかんじ 使いやすいUI
  79. 79. どっちがアプリ向き?
  80. 80. • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう!
 ってかんじ 使いやすいUI
  81. 81. • ユーザーの経験とか体験をもとにして、ユーザーが
 こう操作するはずだっていうUIを作る • だから自然に操作できるし、想定外の操作をする
 可能性が減る • UIよりのUX • もちろん、UXってこれだけではないんやけども。 • 詳しくはUI is not UXで 今回のUserExperience
  82. 82. • Store Appsの色を いい感じに • しかも3タップで • MVP Showcaseで
 1位もらいました! coloris
  83. 83. demo
  84. 84. 1 xaml 3 Layout 2 State
  85. 85. 3 Layout
  86. 86. 2 State
  87. 87. Meaning of State
  88. 88. first impression
  89. 89. back and forth
  90. 90. goal
  91. 91. Meaning of Layout and Transition
  92. 92. • 画面のどまんなかに大き く1コントロールだけ • 色相環でまとまりよく • Metroの場合、四角形は つつける経験則 • タップしない限りなにも 起きない。 • タップさせるレイアウト Layout
  93. 93. example
  94. 94. • 全面にボタンを1つだけ 配置 • 押せば画面が点くし、押 せば戻れるし、困ったら 押せばいいボタン • というか押す以外に解決 策がない • 指の位置にもよく馴染む iPhone
  95. 95. • 扇状に色相環が広がる
 アニメーションを付加 • 初めてアプリを起動した 人の目を、この色相環
 コントロールに注目させ る役割 Transition
  96. 96. example
  97. 97. • ワンポイントで注目させ て、その先に何かあるこ とを伝える Batch
  98. 98. • アニメーションのグラフ を作成できるライブラリ • やっぱりページをスクロー ルするとグラフに注目す る • http:// www.chartjs.org/ Chart.js
  99. 99. • Store Appsの文化圏は右 側の情報が新しい • 選択した色をキーにに画 面右側に新しい情報が表 示するレイアウト Layout
  100. 100. example
  101. 101. • Store Appsだったり、横 スクロールWebページは 左が古く、右が次の情報 のレイアウトが多い。 • 横書きの本なんかも、右 が次のページだったりす る。 Book
  102. 102. • 過去の情報となった色相 環を左に追いやる • 同時に右から新しいパネ ルがスライドして表示さ れる • 押しのけて、操作対象が 変わって次のステップに 進んだことを伝える役割 Transition
  103. 103. • 右にあったリストを選択 すると、さらに右に新し いコントロールが表れ る。 • すでに目的のものが見え ている様にレイアウトし て、終わりが近い=手軽 さを演出 Layout
  104. 104. example
  105. 105. • 終わりが見えると安心す る。終わりが見えないと 頑張れない。 • デスマーチとか… endless
  106. 106. • GridView標準のトラン ジション。 • データが切り替わったこ とさえ分かればいい。 Transition
  107. 107. example
  108. 108. • 赤が本題で、紫が例え、 みたいに、コンテンツが 変わったことさえ分かれ ばいい。 example
  109. 109. まとめ
  110. 110. • UXとかDesignとかって定義が曖昧。 • つい[UX]って言ってしまうところを、具体的説 明するように心がける • UXの一体なにが大事って言えるように。 • それ言えるように、いろんな人がしてる言葉の定 義を見つけて、咀嚼して、
 自分のものにしていく まとめ
  111. 111. • UIとかLayoutとかTransitionとか、なんで そうしたのか理由付けをしよう。 • なんとなく「ふわっ」とか「しゅぱっ」と か言われたら、なんで「ふわしゅぱっ」な のか聞いてみよう。 まとめ
  112. 112. • 理由付けのために、いろんなアプリを触ったり、 ハードウェアのインタフェースを見なおしたり、 日常の所作とか、風景とかを振り返って見直そ う。 • 目に見えるものすべてがインタフェースで、そこ にはなにかしらのレスポンスがあるはず • 「なんとなく動いた」プログラムと「なんとなく デザインした」画面は同じ まとめ
  113. 113. • Interaction,Animation,UserInterface,HCI, LayoutDesign,UserExperience,Prototypin g,Visualization,InformationArchitecture, Typography,InfoGraphics,仕掛学,視線誘 導,認知心理学 keyword
  114. 114. • インタフェースデザインの心理学 • インタフェースデザインの実践教室 • Seductive INTERACTION DESIGN • THE VISUAL MISCELLANEUM • VISUALIZE THIS • ANDROID DESIGN PATTERNS • Mobile Design Pattern Gallery • 同人誌やイラストの美しいデザイン100 book • IAシンキング • タイポグラフィ 03 • 白井博士のゲームデザイン • Windows 8 UI/UXデザイン入門 • iOS フラットデザインの作法 • カルチュラルコンピューティング • 人工知能学会誌 Vol.28 No.4 2013/7
  115. 115. book

×