Interaction Design case coloris

67 %
33 %
Information about Interaction Design case coloris
Design

Published on February 28, 2014

Author: mitsuba

Source: slideshare.net

Description

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の色を いい感じに • しかも3タップで • MVP Showcaseで
 1位もらいました!

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

example

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

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

example

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

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

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

example

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

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

example

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

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 !

Add a comment

Related presentations

Related pages

Interaction Design case colorisしゃべってきた ...

freelance user experience designer & interaction developer お仕事ご依頼ご質問雑談その他なんでもなにかあれば、お気軽に ...
Read more

Interaction design - Wikipedia, the free encyclopedia

In design, human–computer interaction, and software development, interaction design, often abbreviated IxD, is defined as "the practice of designing ...
Read more

Interaction Design: Case Studies

The companion website for the book Interaction Design: beyond human-computer interaction, by Preece, Rogers and Sharp. On this site, you'll find a variety ...
Read more

Interaction Design - beyond Human-Computer Interaction

INTERACTION DESIGN. beyond human–computer interaction Includes: • Wiley e-text featuring videos and Q&A • New chapter – Interaction Design in Practice
Read more

Casa Colori Interior Design | Casa Colori

Interior design that adds colour to your home. At Casa Colori, we believe that colour, light and space are the keys to a happy home. We work with our ...
Read more

Binary Vision - Interaction design case study: GPhC

Interaction design case study: GPhC Happy users = happy clients. Our goal is to build websites which make our clients happy, by making their users happy.
Read more

Interaction Design Basics | Usability.gov

Interaction design focuses on creating engaging interfaces with well thought out behaviors. Understanding how users and technology communicate with each ...
Read more

Social Interaction Design Case Study: MySpace

Social Interaction Design Case Study: MySpace Adrian Chan February 14, 2006 Gravity7 415 626 4980 adrian@gravity7.com www.gravity7.com
Read more

Action Research » Interaction Design Foundation

In any case, Action Research projects will often be undertaken by a research team rather than a ... Retrieved 13 July 2010 from Interaction-Design.org: ...
Read more