Interaction Design case coloris

1,376 views

Published on

Interaction Design case coloris

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,376
On SlideShare
0
From Embeds
0
Number of Embeds
270
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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 !

×