Interaction Design case coloris

1. 蜜葉 優
Interaction Design case coloris

2. profile
• H.N. :蜜葉 優 [mitsuba yu]
• @mitsuba_tan
• Blendがすきだったきがする
• M+ 2p thin/lightがすき
• Keynoteの表紙はいつも自分で撮影
• http://c-mitsuba.hatenablog.com

5. 近頃こいつが話題なので

6. 今日はiOSの話をする

7. はずでした。。

8. なので今日は
インタラクションの話します。

9. あくまで持論です。

10. ただしいとは限りません。

11. 当たり前のことも言ってます。

12. が、当たり前に行き着く過程
を見てもらえればよいかと。

13. agenda
• Interaction
• coloris
• 1 xaml 3 Layout 2 State
• Meaning of State
• Meaning of Layout and Transition
• まとめ

14. Interaction

15. 定義：Interaction
• 交流(する)、相互作用(する)などの意味を持つ
英単語。形容詞形は「インタラクティブ」
(interactive)。ITの分野では、人間とシステ
ムの間の情報のやりとり、操作や入力とそれ
に対する反応や出力、対話的な操作方法、な
どの意味で用いられることが多い。

16. 学会：インタラクション
• 毎年、日本科学未来館で、まさにいまやって
る学会
• ARとかVRとかビジュアルインタフェースとか
フィジカルコンピューティングとか実世界指
向とかコミュニケーションとかメディア・
アートとか認知科学と認知心理学とか

17. 蜜葉：Interaction
• 自分がなにかしたときに
• 相手がどう振る舞うか
!
• 相手になにかさせるには
• 自分はどう振る舞うべきか
!

18. example

19. 部屋に友達を呼んだ時

20. 好きにしていいよ

21. 友達がなにするか
分からない
!
なにに興味を持つか
分からない

22. そのソファ座っといて

23. まぁ、
ソファに座る

24. テーブルの上が

25. たぶん、
ちょっと読んでみる

26. 蜜葉：Interaction
• 自分がなにかしたときに
• 相手がどう振る舞うか
!
• 相手になにかさせるには
• 自分はどう振る舞うべきか
!

27. 蜜葉：Interaction
• 自分が「ソファに座って」と指示すれば
• 相手は指示したとおりに「ソファに座る」
!
• 相手に「本を読ませる」には
• 自分は「相手が本に注目する」ようにテーブル
に置く

28. 蜜葉：Interaction
• 自分が「ソファに座って」と指示すれば
• 相手は指示したとおりに「ソファに座る」
!
•
•
•
•
自分からアクションを行う（能動的）
意図した結果がきちんと返ってくる
人に強制された挙動、人工的
バーバルコミュニケーション

29. 蜜葉：Interaction
• 相手に「本を読ませる」には
• 自分は「相手が本に注目する」ように置く
!
•
•
•
•
相手にアクションをおこさせる（受動的）
意図した結果が返ってくるとは限らない
人の自然な挙動、作為的
ノンバーバルコミュニケーション

30. UI：Interaction
• ユーザーがなにかした時に、UIがどう振る舞うか
!
!
• UIがなにかした時に、ユーザーがどう思ったりどう
操作するか

31. UI：Interaction
• ユーザーがなにかした時に、UIがどう振る舞うか
• その振る舞いは、ユーザーが意図したものなの
か
!
• UIがなにかした時に、ユーザーがどう思ったりど
う操作するか
• そのユーザーの操作は、UIが意図した操作なのか

32. UI：Interaction
• ユーザーがなにかした時に、UIがどう振る舞うか
• その振る舞いは、ユーザーが意図したものなのか
• ユーザーが意図した操作を、UIから連想させる
ためには、どういうUIにして、どう操作させれ
ばよいか

33. UI：Interaction
• UIがなにかした時に、ユーザーがどう思ったりど
う操作するか
• そのユーザーの操作は、UIが意図した操作なのか
• UIが意図した操作を、ユーザーに体験させるた
めには、どういうUIにして、どう操作させるべ
きか

34. UI：Interaction
• ユーザーが意図した操作を、UIから連想させるためには、
「どういうUIにして、どう操作させればよいか」
!
• UIが意図した操作を、ユーザーに体験させるためには、
「どういうUIにして、どう操作させるべきか」

35. 使いにくいUI =
ユーザーが意図した操作
≠
UIが意図した操作

36. 使いやすいUI その1 =
ユーザーが意図した操作
が
UIが意図した操作

37. 使いやすいUI その2 =
UIが意図した操作
が
ユーザーが意図した操作

38. 使いやすいUI
• ユーザーが意図した操作 が UIが意図した操作
• ユーザーがあれこれ操作すると想定して、UIを作る
• しかも、想定漏れなしに
!
• UIが意図した操作 が ユーザーが意図した操作
• ユーザーにこの操作だけをさせるように、UIを作る
• しかも、自然に

39. 使いやすいUI
• ユーザーが意図した操作 が UIが意図した操作
• ユーザーがあれこれ操作すると想定して、UIを作る
• しかも、想定漏れなしに
!
• 複雑になればなるほど、いろいろな操作をする可能性が
増えて大変。けど便利。
• エクセルつくりましょう！ってかんじ。

40. 使いやすいUI
• UIが意図した操作 が ユーザーが意図した操作
• ユーザーにこの操作だけをさせるように、UIを作る
• しかも、自然に
!
• シンプルにすればするほど、思った通り実現できる。
でもできることはすくない。
• つぶやくだけのウィジェットつくりましょう！
ってかんじ

41. どっちがアプリ向き？

42. 使いやすいUI
• UIが意図した操作 が ユーザーが意図した操作
• ユーザーにこの操作だけをさせるように、UIを作る
• しかも、自然に
!
• シンプルにすればするほど、思った通り実現できる。
でもできることはすくない。
• つぶやくだけのウィジェットつくりましょう！
ってかんじ

43. 今回のUserExperience
• ユーザーの経験とか体験をもとにして、ユーザーが
こう操作するはずだっていうUIを作る
• だから自然に操作できるし、想定外の操作をする
可能性が減る
!
• UIよりのUX
• もちろん、UXってこれだけではないんやけども。
• 詳しくはUI is not UXで

45. coloris
• Store Appsの色を
いい感じに
• しかも３タップで
• MVP Showcaseで
１位もらいました！

46. demo

47. 1 xaml 3 Layout 2 State

51. 3
Layout

52. 2 State

54. Meaning of State

55. first
impression

56. back
and forth

57. goal

58. Meaning of
Layout and Transition

59. Layout
• 画面のどまんなかに大き
く１コントロールだけ
• 色相環でまとまりよく
• Metroの場合、四角形は
つつける経験則
• タップしない限りなにも
起きない。
• タップさせるレイアウト

60. example

61. iPhone
• 全面にボタンを１つだけ
配置
• 押せば画面が点くし、押
せば戻れるし、困ったら
押せばいいボタン
• というか押す以外に解決
策がない
• 指の位置にもよく馴染む

62. Transition
• 扇状に色相環が広がる
アニメーションを付加
• 初めてアプリを起動した
人の目を、この色相環
コントロールに注目させ
る役割
• イージングの効いた心地
いい動きで魅力的

63. example

64. Batch
• ワンポイントで注目させ
て、その先に何かあるこ
とを伝える

65. Chart.js
• アニメーションのグラフ
を作成できるライブラリ
• やっぱりページをスクロー
ルするとグラフに注目す
る
• http://
www.chartjs.org/

66. Layout
• Store Appsの文化圏は右
側の情報が新しい
• 選択した色をキーにに画
面右側に新しい情報が表
示するレイアウト

67. example

68. Book
• Store Appsだったり、横
スクロールWebページは
左が古く、右が次の情報
のレイアウトが多い。
• 横書きの本なんかも、右
が次のページだったりす
る。

69. Transition
• 過去の情報となった色相
環を左に追いやる
• 同時に右から新しいパネ
ルがスライドして表示さ
れる
• 押しのけて、操作対象が
変わって次のステップに
進んだことを伝える役割

70. example

71. お茶どうぞ
• 茶道でもお菓子を食べてか
ら、お茶を渡されます。す
ると１口。ランチでもお茶
渡されたら、そのまま置か
ずに１口飲みます。
• 出し物は右から出すことが
多いし、取り敢えず手を付
けます。

72. Layout
• 右にあったリストを選択
すると、さらに右に新し
いコントロールが表れ
る。
• すでに目的のものが見え
ている様にレイアウトし
て、終わりが近い＝手軽
さを演出

73. example

74. endless
• 終わりが見えると安心す
る。終わりが見えないと
頑張れない。
• デスマーチとか…

75. Transition
• GridView標準のトラン
ジション。
• データが切り替わったこ
とさえ分かればいい。

76. example

77. example
• 赤が本題で、紫が例え、
みたいに、コンテンツが
変わったことさえ分かれ
ばいい。

79. まとめ

80. まとめ
• UXとかDesignとかって定義が曖昧。
• 自分がUXとかInteractionとしてこれが大
事って言えればいいと思う。
• それが言えるように、いろんな人がしてる
言葉の定義を見つけて、咀嚼して、自分の
ものにするといいかも

81. まとめ
• UIとかLayoutとかTransitionとか、なんで
そうしたのか理由付けをしよう。
• なんとなく「ふわっ」とか「しゅぱっ」と
か言われたら、なんで「ふわしゅぱっ」な
のか聞いてみよう。

82. まとめ
• 理由付けのために、いろんなアプリを触っ
たり、ハードウェアのインタフェースを見
なおしたり、日常の所作とか、風景とかを
振り返って見直そう。
• 目に見えるものすべてがインタフェース
で、そこにはなにかしらのレスポンスがあ
るはず

83. まとめ
• 大事なことは、インプットからアウトプット
が生まれる過程をとデザインの思想を言葉に
できること。
• 「なんとなく動いた」とかダメなんはプログ
ラムでもいっしょ。

84. まとめ
• UIは操作するものじゃない
• UIはユーザーを操作するもの
!
• 自分でデザインしたUIでユーザーを思い通
り操作するのたのしい（

85. keyword
• Interaction,Animation,UserInterface,HCI,
LayoutDesign,UserExperience,Prototypin
g,Visualization,InformationArchitecture,
Typography,InfoGraphics,仕掛学,視線誘
導,認知心理学

86. 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
!