advertisement

Interaction Design case coloris

50 %
50 %
advertisement
Information about Interaction Design case coloris
Design

Published on February 28, 2014

Author: mitsuba

Source: slideshare.net

Description

Interaction Design case coloris
advertisement

蜜葉 優 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

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

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