Transcript

• 1. 「UX」は投げ捨てろ！ 蜜葉 優
• 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. • 高校 • 文科省ICTスクールで3D • 大学 • 株式会社ソフトディバイスでWeb開発とデザイン • 株式会社フェンリルでストアアプリ開発 • IIJでなんかネットワーク • フリーランスでデザインと開発 • XAML,Unity,Processing,Metasequoia,Ai,Ps etc.. profile
• 4. • 書籍 • Windows 8 UI/UXデザイン入門 • iOSフラットデザインの作法
 
 • 嗜好 • カメラ、ビリヤード、スノーボード、釣り • ウイスキー、ワイン profile
• 5. agenda • UXって？ • [UX]をやめる理由 • UXのいろいろな定義と解釈 • 蜜葉的UX • 使いやすいUIって？ • coloris • まとめ
• 6. 今日はおんな じことを何度 もいいます。
• 7. なんか感じ取って 脱[UX]してもらえ ればうれしいです
• 8. UXって？
• 9. 人々がシステムを利用する中で 得られる経験
• 10. と、ざっくりなら言えますが、きちんと 理解、説明するとなると難しいのがUX
• 11. 「アプリのUXをデザインしました。」 「サービスのUXが向上しました。」 「使いやすいUXに変更しました。」 「UXを検証してレイアウトしました。」
• 12. 「アプリの 「サービスの 「使 「UX わけがわからないよ！！！！
• 13. などなど、 こんなふうに「UX」なんてものに頼っていると、 よいアプリ、よいデザインなんて実現しません。 [UX]
• 14. でもUXってなんか いま大事で必要な ものらしい。
• 15. では、なにをどうして どう考えればいいのか。 そんな蜜葉的プロセスと デザイン思考をご紹介します。
• 16. 一番 言いたい ことは
• 17. ?そのUXってなんなん
• 18. 「アプリのUXをデザインしました。」 「サービスのUXが向上しました。」 「使いやすいUXに変更しました。」 「UXを検証してレイアウトしました。」
• 19. 「UX」は投げ捨てろ！ 蜜葉 優
• 20. UXは投げ捨てろ！ = [UX]なんて言葉に頼らずに、 意図しているデザインを説明 できるようになろう
• 21. UXの甘い罠 • [UX]っていう言葉が流行ってる • [UX]っていうとなんかかっこいい • とりあえずデザインとかユーザーの話をする なら[UX]![UX]!って言っておけばいい。
• 22. UXの甘い罠 • [UX]っていう言葉が流行ってる • [UX]っていうとなんかかっこいい • とりあえずデザインとかユーザーの話をする なら[UX]![UX]!って言っておけばいい。 だいたいあってる
• 23. UXの甘い罠 • [UX]っていう言葉が流行ってる
 　=> 一昔前の[クラウド] • [UX]っていうとなんかかっこいい 　　=> 響きがかっこいい? • とりあえずデザインとかユーザーの話をする なら[UX]![UX]!って言っておけばいい。
 　 => あってる！
• 24. UXの甘い罠 • とりあえずデザインとかユーザーの話をする なら[UX]![UX]!って言っておけばいい。
 　 => あってる！ => から困る！
• 25. 例えば • 「プログラミングのvarっていつ使うの？」
 「え、いっつもつかうよね？」
 「でもvar使うと型がわかんないよね？」
 「型？なんの話してんの？」
• 26. 例えば • 「プログラミングのvarっていつ使うの？」
 「え、いっつもつかうよね？」
 「でもvar使うと型がわかんないよね？」
 「型？なんの話してんの？」 • 「え、C#よね？」
 「あれ、JSじゃないの？」
• 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. 言語いっぱい
• 29. 同じようにUXを
 構成する要素も
 いっぱいあります。
• 30. 一体なんの 話してんの？
• 31. 実例 http://crowdworks.jp/ public/jobs/190430
• 32. 画面デザインの改善 こそがUXの改善だ！ （キリッ
• 33. 画面デザインは UXなのか
• 34. 画面デザイン • UIレイアウト • プラットフォームにあわせて？ • 人にあわせて？ • スタイル • プラットフォームにあわせて？ • フラットデザイン？ • 主婦向けに手帳っぽく？
• 35. 何を求められてるか わからない 全部！っていうと、 正直「は？」ってなる
• 36. ふわっとUX
• 37. ?そのUXってなんなん
• 38. UXは何で できているの?
• 39. • 1つの定義で全てのUXを言い表せない • UXは、現象、研究分野、実践の３つに分けられる • 現象：UXとは、UXの状況と他の因果関係 • 研究：UXの手法や評価関数の開発 • 実践：UXを可能にするデザイン • 個人的にはUXと時間軸に重きを置いてる印象 • それを使う前、使っている時、やめた時、もう一 度始めた時、全体として、それぞれの体験に着目 UX白書
• 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. この要素がなぜ 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. なぜ、C#で作るのか。 なぜ、メイリオを使うのか。 なぜ、トランジションを使うのか。 設計(デザイン)が話せるようにする
• 43. 言えないことを言えるようにする と、いろいろなものが明確になる。 例えば ・仕様、UIデザイン、デザイン・ス タイル、システムの目的、対象、、
• 44. 仕様、UIデザイン、デザイン・スタイル、 システムの目的、対象、、 システムやサービスを作る上で全部大事。 別に[UX]が大事なわけじゃない。 [UX]は大事なものを明確にする手法でし かない。
• 45. 全部話せるようになるのは、とって も大変。 なので、UXの要素の中から自分の 立場に関係のあるものだけをピック アップしよう。
• 46. まとめると…
• 47. UXとは • その人にはその人のいうUXがある。（立場 • なのでUXの話をするときは、[UX]という言葉 を使わない。 • [UX]がUXの何を指して、何を目指して、どう 使っているか明確にする。（システム • UXを大事なものをハッキリさせる手法とする • すると、あいまいな話になりにくい。
• 48. 蜜葉のUX
• 49. 蜜葉の考えるUX • アプリを作る前にどんなことを考えてるか • アプリとユーザを育てるサイクル • デベロッパーとして考えるデザイン • インタラクションと仕掛け • coloris
• 50. アプリの育て方
• 51. 例えば、Windowsの右下
• 52. Windows 7と8
• 53. UIでのUXサイクル • 最初に多くの機能を作るようなことはしない！ • 機能は小さく、UIは視覚的にわかりやすくする。 • ボタンはボタンらしくとか。 • 形状や位置などUIがユーザーに一般化され
 (≒慣れ)れば、今までのUIを抽象化して、
 シンプルにする。 • それができたら新しい機能に着手する。
• 54. 蜜葉の考えるUX • サービスやシステムが使われる環境よりも
 アプリとしてのデザインやインタフェースを 重要視 • どっちかっていうと現実世界より、画面の中 より。UIより。 • アプリに特化したデザインが好き
• 55. 蜜葉の考えるUX • 画面の中で、ユーザーをどうするか、ユーザーに どうしてほしいか、インタラクションを考える • 目的のインタラクションを自然に行わせる
 インタフェース(レイアウト、トランジション)を 考える
• 56. • 自分がなにかしたときに • 相手がどう振る舞うか • 相手になにかさせるには • 自分はどう振る舞うべきか Interaction
• 57. example
• 58. 好きにしていいよ
• 59. なにをするか、分からない なにに興味を持つか、分からない
• 60. そのソファ座っといて
• 61. まぁ、 ソファに座る
• 62. テーブルの上が
• 63. たぶん、 ちょっと読んでみる
• 64. • 自分がなにかしたときに • 相手がどう振る舞うか • 相手になにかさせるには • 自分はどう振る舞うべきか Interaction
• 65. • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ようにテーブル に置く Interaction
• 66. • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 • 自分からアクションを行う（能動的） • 意図した結果がきちんと返ってくる • 人に強制された挙動、人工的 • バーバルコミュニケーション Interaction
• 67. • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ように置く • 相手にアクションをおこさせる（受動的） • 意図した結果が返ってくるとは限らない • 人の自然な挙動、作為的 • ノンバーバルコミュニケーション Interaction
• 68. • ユーザーがなにかした時に、UIがどう振る舞うか • UIがなにかした時に、ユーザーがどう思ったりどう 操作するか Interaction
• 69. • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものか • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか UI：Interaction
• 70. • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものなのか • ユーザーが意図した操作を、UIから連想させる ためには、どういうUIにして、どう操作させれ ばよいか UI：Interaction
• 71. • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか • UIが意図した操作を、ユーザーに体験させるた めには、どういうUIにして、どう操作させるべ きか UI：Interaction
• 72. • ユーザーが意図した操作を、UIから連想させるためには、
 「どういうUIにして、どう操作させればよいか」 • UIが意図した操作を、ユーザーに体験させるためには、
 「どういうUIにして、どう操作させるべきか」 UI：Interaction
• 73. 使いにくいUI =
 ユーザーが意図した操作
 ≠
 UIが意図した操作
• 74. 使いやすいUI その1 =
 ユーザーが意図した操作
 が 
 UIが意図した操作
• 75. 使いやすいUI その2 =
 UIが意図した操作 が ユーザーが意図した操作
• 76. • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に 使いやすいUI
• 77. • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに • 複雑になればなるほど、いろいろな操作をする可能性が 増えて大変。けど便利。 • エクセルつくりましょう！ってかんじ。 使いやすいUI
• 78. • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう！
 ってかんじ 使いやすいUI
• 79. どっちがアプリ向き？
• 80. • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう！
 ってかんじ 使いやすいUI
• 81. • ユーザーの経験とか体験をもとにして、ユーザーが
 こう操作するはずだっていうUIを作る • だから自然に操作できるし、想定外の操作をする
 可能性が減る • UIよりのUX • もちろん、UXってこれだけではないんやけども。 • 詳しくはUI is not UXで 今回のUserExperience
• 82. • Store Appsの色を いい感じに • しかも３タップで • MVP Showcaseで
 １位もらいました！ coloris
• 83. demo
• 84. 1 xaml 3 Layout 2 State
• 85. 3 Layout
• 86. 2 State
• 87. Meaning of State
• 88. first impression
• 89. back and forth
• 90. goal
• 91. Meaning of Layout and Transition
• 92. • 画面のどまんなかに大き く１コントロールだけ • 色相環でまとまりよく • Metroの場合、四角形は つつける経験則 • タップしない限りなにも 起きない。 • タップさせるレイアウト Layout
• 93. example
• 94. • 全面にボタンを１つだけ 配置 • 押せば画面が点くし、押 せば戻れるし、困ったら 押せばいいボタン • というか押す以外に解決 策がない • 指の位置にもよく馴染む iPhone
• 95. • 扇状に色相環が広がる
 アニメーションを付加 • 初めてアプリを起動した 人の目を、この色相環
 コントロールに注目させ る役割 Transition
• 96. example
• 97. • ワンポイントで注目させ て、その先に何かあるこ とを伝える Batch
• 98. • アニメーションのグラフ を作成できるライブラリ • やっぱりページをスクロー ルするとグラフに注目す る • http:// www.chartjs.org/ Chart.js
• 99. • Store Appsの文化圏は右 側の情報が新しい • 選択した色をキーにに画 面右側に新しい情報が表 示するレイアウト Layout
• 100. example
• 101. • Store Appsだったり、横 スクロールWebページは 左が古く、右が次の情報 のレイアウトが多い。 • 横書きの本なんかも、右 が次のページだったりす る。 Book
• 102. • 過去の情報となった色相 環を左に追いやる • 同時に右から新しいパネ ルがスライドして表示さ れる • 押しのけて、操作対象が 変わって次のステップに 進んだことを伝える役割 Transition
• 103. • 右にあったリストを選択 すると、さらに右に新し いコントロールが表れ る。 • すでに目的のものが見え ている様にレイアウトし て、終わりが近い＝手軽 さを演出 Layout
• 104. example
• 105. • 終わりが見えると安心す る。終わりが見えないと 頑張れない。 • デスマーチとか… endless
• 106. • GridView標準のトラン ジション。 • データが切り替わったこ とさえ分かればいい。 Transition
• 107. example
• 108. • 赤が本題で、紫が例え、 みたいに、コンテンツが 変わったことさえ分かれ ばいい。 example
• 109. まとめ
• 110. • UXとかDesignとかって定義が曖昧。 • つい[UX]って言ってしまうところを、具体的説 明するように心がける • UXの一体なにが大事って言えるように。 • それ言えるように、いろんな人がしてる言葉の定 義を見つけて、咀嚼して、
 自分のものにしていく まとめ
• 111. • UIとかLayoutとかTransitionとか、なんで そうしたのか理由付けをしよう。 • なんとなく「ふわっ」とか「しゅぱっ」と か言われたら、なんで「ふわしゅぱっ」な のか聞いてみよう。 まとめ
• 112. • 理由付けのために、いろんなアプリを触ったり、 ハードウェアのインタフェースを見なおしたり、 日常の所作とか、風景とかを振り返って見直そ う。 • 目に見えるものすべてがインタフェースで、そこ にはなにかしらのレスポンスがあるはず • 「なんとなく動いた」プログラムと「なんとなく デザインした」画面は同じ まとめ
• 113. • Interaction,Animation,UserInterface,HCI, LayoutDesign,UserExperience,Prototypin g,Visualization,InformationArchitecture, Typography,InfoGraphics,仕掛学,視線誘 導,認知心理学 keyword
• 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. book