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.

Interaction Design case coloris

1,464 views

Published on

Interaction Design case coloris

Published in: Design
  • Be the first to comment

Interaction Design case coloris

  1. 1. 蜜葉 優 Interaction Design case coloris
  2. 2. profile • H.N. :蜜葉 優 [mitsuba yu] • @mitsuba_tan • Blendがすきだったきがする • M+ 2p thin/lightがすき • Keynoteの表紙はいつも自分で撮影 • http://c-mitsuba.hatenablog.com
  3. 3. 近頃こいつが話題なので
  4. 4. 今日はiOSの話をする
  5. 5. はずでした。。
  6. 6. なので今日は インタラクションの話します。
  7. 7. あくまで持論です。
  8. 8. ただしいとは限りません。
  9. 9. 当たり前のことも言ってます。
  10. 10. が、当たり前に行き着く過程 を見てもらえればよいかと。
  11. 11. agenda • Interaction • coloris • 1 xaml 3 Layout 2 State • Meaning of State • Meaning of Layout and Transition • まとめ
  12. 12. Interaction
  13. 13. 定義:Interaction • 交流(する)、相互作用(する)などの意味を持つ 英単語。形容詞形は「インタラクティブ」 (interactive)。ITの分野では、人間とシステ ムの間の情報のやりとり、操作や入力とそれ に対する反応や出力、対話的な操作方法、な どの意味で用いられることが多い。
  14. 14. 学会:インタラクション • 毎年、日本科学未来館で、まさにいまやって る学会 • ARとかVRとかビジュアルインタフェースとか フィジカルコンピューティングとか実世界指 向とかコミュニケーションとかメディア・ アートとか認知科学と認知心理学とか
  15. 15. 蜜葉:Interaction • 自分がなにかしたときに • 相手がどう振る舞うか ! • 相手になにかさせるには • 自分はどう振る舞うべきか !
  16. 16. example
  17. 17. 部屋に友達を呼んだ時
  18. 18. 好きにしていいよ
  19. 19. 友達がなにするか 分からない ! なにに興味を持つか 分からない
  20. 20. そのソファ座っといて
  21. 21. まぁ、 ソファに座る
  22. 22. テーブルの上が
  23. 23. たぶん、 ちょっと読んでみる
  24. 24. 蜜葉:Interaction • 自分がなにかしたときに • 相手がどう振る舞うか ! • 相手になにかさせるには • 自分はどう振る舞うべきか !
  25. 25. 蜜葉:Interaction • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 ! • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ようにテーブル に置く
  26. 26. 蜜葉:Interaction • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 ! • • • • 自分からアクションを行う(能動的) 意図した結果がきちんと返ってくる 人に強制された挙動、人工的 バーバルコミュニケーション
  27. 27. 蜜葉:Interaction • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ように置く ! • • • • 相手にアクションをおこさせる(受動的) 意図した結果が返ってくるとは限らない 人の自然な挙動、作為的 ノンバーバルコミュニケーション
  28. 28. UI:Interaction • ユーザーがなにかした時に、UIがどう振る舞うか ! ! • UIがなにかした時に、ユーザーがどう思ったりどう 操作するか
  29. 29. UI:Interaction • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものなの か ! • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか
  30. 30. UI:Interaction • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものなのか • ユーザーが意図した操作を、UIから連想させる ためには、どういうUIにして、どう操作させれ ばよいか
  31. 31. UI:Interaction • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか • UIが意図した操作を、ユーザーに体験させるた めには、どういうUIにして、どう操作させるべ きか
  32. 32. UI:Interaction • ユーザーが意図した操作を、UIから連想させるためには、
 「どういうUIにして、どう操作させればよいか」 ! • UIが意図した操作を、ユーザーに体験させるためには、
 「どういうUIにして、どう操作させるべきか」
  33. 33. 使いにくいUI =
 ユーザーが意図した操作
 ≠
 UIが意図した操作
  34. 34. 使いやすいUI その1 =
 ユーザーが意図した操作
 が
 UIが意図した操作
  35. 35. 使いやすいUI その2 =
 UIが意図した操作 が ユーザーが意図した操作
  36. 36. 使いやすいUI • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに ! • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に
  37. 37. 使いやすいUI • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに ! • 複雑になればなるほど、いろいろな操作をする可能性が 増えて大変。けど便利。 • エクセルつくりましょう!ってかんじ。
  38. 38. 使いやすいUI • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に ! • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう!
 ってかんじ
  39. 39. どっちがアプリ向き?
  40. 40. 使いやすいUI • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に ! • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう!
 ってかんじ
  41. 41. 今回のUserExperience • ユーザーの経験とか体験をもとにして、ユーザーが
 こう操作するはずだっていうUIを作る • だから自然に操作できるし、想定外の操作をする
 可能性が減る ! • UIよりのUX • もちろん、UXってこれだけではないんやけども。 • 詳しくはUI is not UXで
  42. 42. coloris • Store Appsの色を いい感じに • しかも3タップで • MVP Showcaseで
 1位もらいました!
  43. 43. demo
  44. 44. 1 xaml 3 Layout 2 State
  45. 45. 3 Layout
  46. 46. 2 State
  47. 47. Meaning of State
  48. 48. first impression
  49. 49. back and forth
  50. 50. goal
  51. 51. Meaning of Layout and Transition
  52. 52. Layout • 画面のどまんなかに大き く1コントロールだけ • 色相環でまとまりよく • Metroの場合、四角形は つつける経験則 • タップしない限りなにも 起きない。 • タップさせるレイアウト
  53. 53. example
  54. 54. iPhone • 全面にボタンを1つだけ 配置 • 押せば画面が点くし、押 せば戻れるし、困ったら 押せばいいボタン • というか押す以外に解決 策がない • 指の位置にもよく馴染む
  55. 55. Transition • 扇状に色相環が広がる
 アニメーションを付加 • 初めてアプリを起動した 人の目を、この色相環
 コントロールに注目させ る役割 • イージングの効いた心地 いい動きで魅力的
  56. 56. example
  57. 57. Batch • ワンポイントで注目させ て、その先に何かあるこ とを伝える
  58. 58. Chart.js • アニメーションのグラフ を作成できるライブラリ • やっぱりページをスクロー ルするとグラフに注目す る • http:// www.chartjs.org/
  59. 59. Layout • Store Appsの文化圏は右 側の情報が新しい • 選択した色をキーにに画 面右側に新しい情報が表 示するレイアウト
  60. 60. example
  61. 61. Book • Store Appsだったり、横 スクロールWebページは 左が古く、右が次の情報 のレイアウトが多い。 • 横書きの本なんかも、右 が次のページだったりす る。
  62. 62. Transition • 過去の情報となった色相 環を左に追いやる • 同時に右から新しいパネ ルがスライドして表示さ れる • 押しのけて、操作対象が 変わって次のステップに 進んだことを伝える役割
  63. 63. example
  64. 64. お茶どうぞ • 茶道でもお菓子を食べてか ら、お茶を渡されます。す ると1口。ランチでもお茶 渡されたら、そのまま置か ずに1口飲みます。 • 出し物は右から出すことが 多いし、取り敢えず手を付 けます。
  65. 65. Layout • 右にあったリストを選択 すると、さらに右に新し いコントロールが表れ る。 • すでに目的のものが見え ている様にレイアウトし て、終わりが近い=手軽 さを演出
  66. 66. example
  67. 67. endless • 終わりが見えると安心す る。終わりが見えないと 頑張れない。 • デスマーチとか…
  68. 68. Transition • GridView標準のトラン ジション。 • データが切り替わったこ とさえ分かればいい。
  69. 69. example
  70. 70. example • 赤が本題で、紫が例え、 みたいに、コンテンツが 変わったことさえ分かれ ばいい。
  71. 71. まとめ
  72. 72. まとめ • UXとかDesignとかって定義が曖昧。 • 自分がUXとかInteractionとしてこれが大 事って言えればいいと思う。 • それが言えるように、いろんな人がしてる 言葉の定義を見つけて、咀嚼して、自分の ものにするといいかも
  73. 73. まとめ • UIとかLayoutとかTransitionとか、なんで そうしたのか理由付けをしよう。 • なんとなく「ふわっ」とか「しゅぱっ」と か言われたら、なんで「ふわしゅぱっ」な のか聞いてみよう。
  74. 74. まとめ • 理由付けのために、いろんなアプリを触っ たり、ハードウェアのインタフェースを見 なおしたり、日常の所作とか、風景とかを 振り返って見直そう。 • 目に見えるものすべてがインタフェース で、そこにはなにかしらのレスポンスがあ るはず
  75. 75. まとめ • 大事なことは、インプットからアウトプット が生まれる過程をとデザインの思想を言葉に できること。 • 「なんとなく動いた」とかダメなんはプログ ラムでもいっしょ。
  76. 76. まとめ • UIは操作するものじゃない • UIはユーザーを操作するもの ! • 自分でデザインしたUIでユーザーを思い通 り操作するのたのしい(
  77. 77. keyword • Interaction,Animation,UserInterface,HCI, LayoutDesign,UserExperience,Prototypin g,Visualization,InformationArchitecture, Typography,InfoGraphics,仕掛学,視線誘 導,認知心理学
  78. 78. book • • • • • • • インタフェースデザインの心理学 インタフェースデザインの実践教室 Seductive INTERACTION DESIGN THE VISUAL MISCELLANEUM VISUALIZE THIS ANDROID DESIGN PATTERNS Mobile Design Pattern Gallery • • • • • • • IAシンキング タイポグラフィ 03 白井博士のゲームデザイン Windows 8 UI/UXデザイン入門 iOS フラットデザインの作法 カルチュラルコンピューティング 人工知能学会誌 Vol.28 No.4 2013/7 • 同人誌やイラストの美しいデザイン100 !

×