Interaction Design case coloris蜜葉 優

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

profile

近頃こいつが話題なので

今日はiOSの話をする

はずでした。。

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

あくまで持論です。

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

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

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

• Interaction • coloris • 1 xaml 3 Layout 2 State • Meaning of State • Meaning of Layout and Transition

• まとめ

agenda

Interaction

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

定義：Interaction

• 毎年、日本科学未来館で、まさにいまやってる学会

• ARとかVRとかビジュアルインタフェースとかフィジカルコンピューティングとか実世界指向とかコミュニケーションとかメディア・アートとか認知科学と認知心理学とか

学会：インタラクション

• 自分がなにかしたときに • 相手がどう振る舞うか !

• 相手になにかさせるには • 自分はどう振る舞うべきか !

蜜葉：Interaction

example

部屋に友達を呼んだ時

好きにしていいよ

友達がなにするか 分からない !

なにに興味を持つか 分からない

そのソファ座っといて

まぁ、 ソファに座る

テーブルの上が

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

• 自分がなにかしたときに • 相手がどう振る舞うか !

• 相手になにかさせるには • 自分はどう振る舞うべきか !

蜜葉：Interaction

• 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 !

• 相手に「本を読ませる」には • 自分は「相手が本に注目する」ようにテーブル

に置く

蜜葉：Interaction

• 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 !

• 自分からアクションを行う（能動的） • 意図した結果がきちんと返ってくる • 人に強制された挙動、人工的 • バーバルコミュニケーション

蜜葉：Interaction

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

蜜葉：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：Interaction

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

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

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

• ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに

!• UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に

使いやすいUI

• ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに

!• 複雑になればなるほど、いろいろな操作をする可能性が

増えて大変。けど便利。 • エクセルつくりましょう！ってかんじ。

使いやすいUI

• UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に !

• シンプルにすればするほど、思った通り実現できる。でもできることはすくない。

• つぶやくだけのウィジェットつくりましょう！ってかんじ

使いやすいUI

どっちがアプリ向き？

• UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に !

• シンプルにすればするほど、思った通り実現できる。でもできることはすくない。

• つぶやくだけのウィジェットつくりましょう！ってかんじ

使いやすいUI

• ユーザーの経験とか体験をもとにして、ユーザーがこう操作するはずだっていうUIを作る

• だから自然に操作できるし、想定外の操作をする可能性が減る !

• UIよりのUX • もちろん、UXってこれだけではないんやけども。 • 詳しくはUI is not UXで

今回のUserExperience

• Store Appsの色をいい感じに

• しかも３タップで • MVP Showcaseで

１位もらいました！

coloris

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

• 画面のどまんなかに大きく１コントロールだけ

• 色相環でまとまりよく • Metroの場合、四角形は

つつける経験則 • タップしない限りなにも

起きない。 • タップさせるレイアウト

Layout

example

• 全面にボタンを１つだけ配置

• 押せば画面が点くし、押せば戻れるし、困ったら押せばいいボタン

• というか押す以外に解決策がない

• 指の位置にもよく馴染む

iPhone

• 扇状に色相環が広がるアニメーションを付加

• 初めてアプリを起動した人の目を、この色相環コントロールに注目させる役割

• イージングの効いた心地いい動きで魅力的

Transition

example

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

Batch

• アニメーションのグラフを作成できるライブラリ

• やっぱりページをスクロールするとグラフに注目する

• http://www.chartjs.org/

Chart.js

• Store Appsの文化圏は右側の情報が新しい

• 選択した色をキーにに画面右側に新しい情報が表示するレイアウト

Layout

example

• Store Appsだったり、横スクロールWebページは左が古く、右が次の情報のレイアウトが多い。

• 横書きの本なんかも、右が次のページだったりする。

Book

• 過去の情報となった色相環を左に追いやる

• 同時に右から新しいパネルがスライドして表示される

• 押しのけて、操作対象が変わって次のステップに進んだことを伝える役割

Transition

example

• 茶道でもお菓子を食べてから、お茶を渡されます。すると１口。ランチでもお茶渡されたら、そのまま置かずに１口飲みます。

• 出し物は右から出すことが多いし、取り敢えず手を付けます。

お茶どうぞ

• 右にあったリストを選択すると、さらに右に新しいコントロールが表れる。

• すでに目的のものが見えている様にレイアウトして、終わりが近い＝手軽さを演出

Layout

example

• 終わりが見えると安心する。終わりが見えないと頑張れない。

• デスマーチとか…

endless

• GridView標準のトランジション。

• データが切り替わったことさえ分かればいい。

Transition

example

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

example

まとめ

• UXとかDesignとかって定義が曖昧。 • 自分がUXとかInteractionとしてこれが大

事って言えればいいと思う。 • それが言えるように、いろんな人がしてる

言葉の定義を見つけて、咀嚼して、自分の

ものにするといいかも

まとめ

• UIとかLayoutとかTransitionとか、なんでそうしたのか理由付けをしよう。 • なんとなく「ふわっ」とか「しゅぱっ」と

か言われたら、なんで「ふわしゅぱっ」なのか聞いてみよう。

まとめ

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

で、そこにはなにかしらのレスポンスがあるはず

まとめ

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

ラムでもいっしょ。

まとめ

• UIは操作するものじゃない • UIはユーザーを操作するもの !

• 自分でデザインしたUIでユーザーを思い通り操作するのたのしい（

まとめ

• Interaction,Animation,UserInterface,HCI,LayoutDesign,UserExperience,Prototyping,Visualization,InformationArchitecture,Typography,InfoGraphics,仕掛学,視線誘導,認知心理学

keyword

• インタフェースデザインの心理学 • インタフェースデザインの実践教室 • 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