Advertisement
![[UX]は投げ捨てろ！](https://cdn.slidesharecdn.com/ss_thumbnails/sendai-150131020702-conversion-gate01-thumbnail.jpg?width=600&height=600&fit=bounds)
Interaction Design case coloris
Feb. 28, 2014•0 likes•1,849 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Design
Interaction Design case coloris
c-mitsubaFollow
c-mitsubaAdvertisement
Interaction Design case coloris
- 蜜葉 優 Interaction Design case coloris
- profile • H.N. :蜜葉 優 [mitsuba yu] • @mitsuba_tan • Blendがすきだったきがする • M+ 2p thin/lightがすき • Keynoteの表紙はいつも自分で撮影 • http://c-mitsuba.hatenablog.com
- 近頃こいつが話題なので
- 今日はiOSの話をする
- はずでした。。
- なので今日は インタラクションの話します。
- あくまで持論です。
- ただしいとは限りません。
- 当たり前のことも言ってます。
- が、当たり前に行き着く過程 を見てもらえればよいかと。
- agenda • Interaction • coloris • 1 xaml 3 Layout 2 State • Meaning of State • Meaning of Layout and Transition • まとめ
- Interaction
- 定義：Interaction • 交流(する)、相互作用(する)などの意味を持つ 英単語。形容詞形は「インタラクティブ」 (interactive)。ITの分野では、人間とシステ ムの間の情報のやりとり、操作や入力とそれ に対する反応や出力、対話的な操作方法、な どの意味で用いられることが多い。
- 学会：インタラクション • 毎年、日本科学未来館で、まさにいまやって る学会 • ARとかVRとかビジュアルインタフェースとか フィジカルコンピューティングとか実世界指 向とかコミュニケーションとかメディア・ アートとか認知科学と認知心理学とか
- 蜜葉：Interaction • 自分がなにかしたときに • 相手がどう振る舞うか ! • 相手になにかさせるには • 自分はどう振る舞うべきか !
- example
- 部屋に友達を呼んだ時
- 好きにしていいよ
- 友達がなにするか 分からない ! なにに興味を持つか 分からない
- そのソファ座っといて
- まぁ、 ソファに座る
- テーブルの上が
- たぶん、 ちょっと読んでみる
- 蜜葉：Interaction • 自分がなにかしたときに • 相手がどう振る舞うか ! • 相手になにかさせるには • 自分はどう振る舞うべきか !
- 蜜葉：Interaction • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 ! • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ようにテーブル に置く
- 蜜葉：Interaction • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 ! • • • • 自分からアクションを行う（能動的） 意図した結果がきちんと返ってくる 人に強制された挙動、人工的 バーバルコミュニケーション
- 蜜葉：Interaction • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ように置く ! • • • • 相手にアクションをおこさせる（受動的） 意図した結果が返ってくるとは限らない 人の自然な挙動、作為的 ノンバーバルコミュニケーション
- UI：Interaction • ユーザーがなにかした時に、UIがどう振る舞うか ! ! • UIがなにかした時に、ユーザーがどう思ったりどう 操作するか
- UI：Interaction • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものなの か ! • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか
- UI：Interaction • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものなのか • ユーザーが意図した操作を、UIから連想させる ためには、どういうUIにして、どう操作させれ ばよいか
- UI：Interaction • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか • UIが意図した操作を、ユーザーに体験させるた めには、どういうUIにして、どう操作させるべ きか
- UI：Interaction • ユーザーが意図した操作を、UIから連想させるためには、 「どういうUIにして、どう操作させればよいか」 ! • UIが意図した操作を、ユーザーに体験させるためには、 「どういうUIにして、どう操作させるべきか」
- 使いにくいUI = ユーザーが意図した操作 ≠ UIが意図した操作
- 使いやすいUI その1 = ユーザーが意図した操作 が UIが意図した操作
- 使いやすいUI その2 = UIが意図した操作 が ユーザーが意図した操作
- 使いやすいUI • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに ! • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に
- 使いやすいUI • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに ! • 複雑になればなるほど、いろいろな操作をする可能性が 増えて大変。けど便利。 • エクセルつくりましょう！ってかんじ。
- 使いやすいUI • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に ! • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう！ ってかんじ
- どっちがアプリ向き？
- 使いやすいUI • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に ! • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう！ ってかんじ
- 今回のUserExperience • ユーザーの経験とか体験をもとにして、ユーザーが こう操作するはずだっていうUIを作る • だから自然に操作できるし、想定外の操作をする 可能性が減る ! • UIよりのUX • もちろん、UXってこれだけではないんやけども。 • 詳しくはUI is not UXで
- coloris • Store Appsの色を いい感じに • しかも３タップで • MVP Showcaseで １位もらいました！
- demo
- 1 xaml 3 Layout 2 State
- 3 Layout
- 2 State
- Meaning of State
- first impression
- back and forth
- goal
- Meaning of Layout and Transition
- Layout • 画面のどまんなかに大き く１コントロールだけ • 色相環でまとまりよく • Metroの場合、四角形は つつける経験則 • タップしない限りなにも 起きない。 • タップさせるレイアウト
- example
- iPhone • 全面にボタンを１つだけ 配置 • 押せば画面が点くし、押 せば戻れるし、困ったら 押せばいいボタン • というか押す以外に解決 策がない • 指の位置にもよく馴染む
- Transition • 扇状に色相環が広がる アニメーションを付加 • 初めてアプリを起動した 人の目を、この色相環 コントロールに注目させ る役割 • イージングの効いた心地 いい動きで魅力的
- example
- Batch • ワンポイントで注目させ て、その先に何かあるこ とを伝える
- Chart.js • アニメーションのグラフ を作成できるライブラリ • やっぱりページをスクロー ルするとグラフに注目す る • http:// www.chartjs.org/
- Layout • Store Appsの文化圏は右 側の情報が新しい • 選択した色をキーにに画 面右側に新しい情報が表 示するレイアウト
- example
- Book • Store Appsだったり、横 スクロールWebページは 左が古く、右が次の情報 のレイアウトが多い。 • 横書きの本なんかも、右 が次のページだったりす る。
- Transition • 過去の情報となった色相 環を左に追いやる • 同時に右から新しいパネ ルがスライドして表示さ れる • 押しのけて、操作対象が 変わって次のステップに 進んだことを伝える役割
- example
- お茶どうぞ • 茶道でもお菓子を食べてか ら、お茶を渡されます。す ると１口。ランチでもお茶 渡されたら、そのまま置か ずに１口飲みます。 • 出し物は右から出すことが 多いし、取り敢えず手を付 けます。
- Layout • 右にあったリストを選択 すると、さらに右に新し いコントロールが表れ る。 • すでに目的のものが見え ている様にレイアウトし て、終わりが近い＝手軽 さを演出
- example
- endless • 終わりが見えると安心す る。終わりが見えないと 頑張れない。 • デスマーチとか…
- Transition • GridView標準のトラン ジション。 • データが切り替わったこ とさえ分かればいい。
- example
- example • 赤が本題で、紫が例え、 みたいに、コンテンツが 変わったことさえ分かれ ばいい。
- まとめ
- まとめ • UXとかDesignとかって定義が曖昧。 • 自分がUXとかInteractionとしてこれが大 事って言えればいいと思う。 • それが言えるように、いろんな人がしてる 言葉の定義を見つけて、咀嚼して、自分の ものにするといいかも
- まとめ • UIとかLayoutとかTransitionとか、なんで そうしたのか理由付けをしよう。 • なんとなく「ふわっ」とか「しゅぱっ」と か言われたら、なんで「ふわしゅぱっ」な のか聞いてみよう。
- まとめ • 理由付けのために、いろんなアプリを触っ たり、ハードウェアのインタフェースを見 なおしたり、日常の所作とか、風景とかを 振り返って見直そう。 • 目に見えるものすべてがインタフェース で、そこにはなにかしらのレスポンスがあ るはず
- まとめ • 大事なことは、インプットからアウトプット が生まれる過程をとデザインの思想を言葉に できること。 • 「なんとなく動いた」とかダメなんはプログ ラムでもいっしょ。
- まとめ • UIは操作するものじゃない • UIはユーザーを操作するもの ! • 自分でデザインしたUIでユーザーを思い通 り操作するのたのしい（
- keyword • Interaction,Animation,UserInterface,HCI, LayoutDesign,UserExperience,Prototypin g,Visualization,InformationArchitecture, Typography,InfoGraphics,仕掛学,視線誘 導,認知心理学
- 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 !
Advertisement