7 posts tagged “design it”

DAY2: セッション6
インタラクティブジェスチャー
-タップはクリックの新しいかたち
by Dan Saffer, Adaptive Path社（米国）インタラクションデザイナー

We're using bodies evolved for hunting, gathering, and gratuitous violence for information age tasks like word processing and spreadsheet tweaking. - David Liddle.
（狩猟などのために進化してきた身体能力を、今やクリックにしか使ってない）

Gesture:
any physical movement that can be sensed and responded to by a digital system without the aid of a traditional input device such as a mouse or stylus.

Two types of interactive gestures:
- Touchscreen: direct
- Free-form: in-direct

Sensors
common sensors
- Pressure
- Light
- Proximity
- Acoustic
- Tilt
- Motion
- Orientation

sensibility of sensor is crucial
 too reactive VS too dull

Kinesiology & Physiology
Interaction designer has to know the limitation of human body.

Touch events & targets
Remember Fitts' Law
Time it takes to get to a target = distance to target / size of target

Two touch target tricks
-Iceberg tips: touch target is larger than icon
-Adaptive targets: 入力予測により特定のキーのtouch targetをenlargeしておく

Prototyping gestures
Low-fidelity:
Paper prototype, The "man behind the curtain"（黒子による動き）, Environments

High-fidelity:
Exact, Off-the-Shelf（既製品の活用）, Do It Yourself

Communicating interactive gestures

Attraction:
何かなーと思ってみてしまうような誘因性

Observation:
watch people using it to see how it works

Interaction:
very close. これで何ができるのかな、と触ってみる。通常、馴染みがないものは触るのを躊躇する。

Attraction Affordance:
can't help touching.

Determining the appropriate gesture
Three part equation
1. The available sensors and input devices
2. The task that needs to be performed
3. The physiology of the human body

- The more complicated the gesture, the fewer people who will be able to perform it.

- The complexity of the gesture should match the complexity of the task at hand.

The best designs are those that "dissolve into behavior."
- Naoto Fukasawa

DAY2: セッション5
ソシオメディアにおけるインタラクションデザインの実践
-デザイン主導のシステム開発メソッド
by ソシオメディア株式会社 チーフ・デザインオフィサー, インタラクションデザイナー 上野学

デザインとユーザーエクスペリエンス
・定性的な利用品質＝ユーザーエクスペリエンス
　⇒ユーザーの状況全体から相対的に生まれる
・デザイン＝ユーザーが知覚するシステム像
　⇒サービスや製品のデザインの善し悪しは、常にユーザーの視点から判断される。
　⇒どんな仕組みで動くか、どれだけ開発に苦労したかはユーザーには関係ない。

デザイン主導のシステム開発の7つのポイント

1. まずデザインコンセプト
2. すぐにユーザーインターフェース
3. デザイン仕様の検討は少人数で
4. 機能や画面を減らす
5. ユーザーを教育しない
6. 常に動く状態にする（Agile）
7. デザインへのアクセス経路を確保する（Waterfall）

1. のデザインコンセプトは、全ての意思決定基準となる。
2. これは賛否両論あるが、結局ユーザーからみたらインターフェースが全てなので、早い段階から見た目を作るのがイイ。
3. デザイン案を囲んで10人以上の人間で仕様検討するのは望ましくない。会議による合意形成を前提としていては、よいデザインは生まれない。
4. 機能が多いことが便利であるとは限らない。ただしンセプとを実現するために必要な機能まで欠落するのでは意味がないので、慎重に。
5. 周知のデザインパターンの利用。ユーザーを教育するのではなく学習させる。
6. コンセプトの実現に必要不可欠な最低限の機能を初期に実装し、動く状態をキープする。
7. 要件定義、設計、実装、テストのどの段階でも常にデザインの手直しができる体制と仕組み作りが必要。

個人的には、3. の少人数でのデザイン仕様検討については、もちろん、利害関係者全員で会議すればいいってものでもないんだけど、かといって、密室的に中心人物で進めてしまうと、納得性が低くなるというか、経緯に関しての合意が取れていないので、後々ひっくり返る可能性があるんではないかと思いました。

DAY2: セッション4
アダプティブ・パスにおけるインタラクションデザインの実践
-ケーススタディ：ニューヨーク交通チケット自動販売機、Googleマップ、Microsoft Office 2007
by Dan Saffer, Adaptive Path社（米国）インタラクションデザイナー

Googleマップ
GoogleMaps以前はMAPQUESTが主流だった。

※さらっと流れたのでどんな話だったか忘れた。。

ニューヨーク交通チケット自動販売機

tokenからmetro cardのリプレイスの際の事例
antenna design was assigned to do it

いくつかのチャレンジ
1. variety of users: man, woman, children, and senior
2. not all of them can understand English: visitors from all over the world, even residents
3. follow the accessibility act:  so the physically challenged can use
4. touch screen: client's requirement: totally new to some people

これに対する対応
1. interface design: large and high contrast design
2. very clear task flow

興味深かったのは、タッチスクリーンの採用について。NYCからの要件としてタッチスクリーンが挙った時、地下鉄利用者のほとんどは銀行カードを持ってい てタッチスクリーンを使ったことがあると考えられていた。しかしsurveyの結果、40% of NY subway user didn't have bank card and had never used ATM. So Touch Screen was totally new to some people, and it was a big challenge.
 

Microsoft Office 2007

MS OfficeはVer.2以降15年も変わっていなかった。その間、ツールバーやメニューアイテムは増える一方で問題を抱えるようになった。それを解決するためのチャレンジ。

product cycleのどこにいるかによって、orderly（秩序）に行くべきかchaotic（カオス）に行くべきか異なる。また、解決の方法としてpuzzleとmysteryがある。Office2003ではtask barsによる解決が図られたものの、それは根本的な解決にならなかったのは、このpuzzleとmysteryの判断を誤ったため。

puzzle: single solution. 足りないピースを見つければ解決する（if this feature is added, problems can be solved）
mystery: many solutions. not luck of information but much of information is the problem.(what's MS Office, then?)

After all, they collected their users' data.

同じ過ちを犯さないように彼らが行ったことは、

Using data wisely
- Data + Human = Design
- Desirable features with low usage numbers
- Frequently-used features that are hard to get to

Fitt's lawなどを考慮したベストプラクティスを用いることや、同じソフト内でできることであっても、タスクに応じて優先すべきことを考慮すること。When drawing, the work process 's different from typing on WORD/EXCEL. In drawing, TIME<COMFORT.

Q&A session
Q1. そもそも40%のユーザーがバンクカードを持っていないならtouch screenを使う必要があったのか、デザイン背景を知りたい
A1. it was a requirement from NYC in terms of maintenance reason, as far as Dan know. Not designers' reason. Until middle of the project, NYC didn't know 40% people don't have bank card, who don't get used to touch screen. 将来に向けてのデザインという（新しいものにどのように慣れさせるかという）意味では良いチャレンジになったのでは？

Q2. MSがribbon interfaceにたどりつくまでのプロセスについて知りたい
A2. noticed there's problem > getting data > (1.5years) > reached to ribbon idea > (2-3 years in design) > iteration, iteration > finally employed ribbon  > development(1-2 years). Start with WORD then expand to other products.

Q3. IAとの共通性を感じたが、web designからproduct designに移ってきたように感じる。そのコツは？
A3. どんなwebも、structureもdesignも必要。becoming more application-like. Applications on Web >> Applications on Desktop. MS Officeでも構造の枠組みの中にあるが、1つにまとめる理念みたいなものが必要。interaction designではmetaphorがより必要。

Q4. MS Officeのように長くある製品では、ラディカルで新しい考えを持ち込むのは相当ハードルが高かったのではないかと思うが、ブレークスルーは何だったのか？
A4. not sure, but surprisingly easy. 不満が噴出してとにかくやらざるを得ない状況だったからではないか。

DAY1: パネルディスカッション
インタラクションデザインの時代
by Dan Saffer, 横田聡, 宮崎光弘, 篠原稔和（モデレーター）

未来のビジョニングが大事？

宮崎：この技術でこうなる、というリアリティのあるものを積み上げたもののように感じている。
Dan：自分たちがやっていることは遠い未来のもののデザインというより、近未来のもののデザイン。vision prototypeと呼んでいるが、Auroraコンセプトムービーみたいな、ああいうビジョンを見せることがコミュニティを維持するファンクション。

What's Interaction Design?

宮崎：Interactionへの市場とかの反応は感じる。例えば、複合コピー機についている大きな画面。昔はプロダクトデザイナーがついでのように画面のデザインをやっていたわけだけど、商品の差別化などのために今はインタラクションデザイナーがついている。つまり根付いている気がする。とはいえ、別に肩書がインタラクションデザイナーでなくても、ちゃんと分かっている人がやればいいと考えている。
Dan：In US, growing of Interaction design field has been recognized. iPhone is a good news for Interaction design as a comprehensive one in terms of Interface design, Interaction design and Business. iPhoneがでてきたことでmagazineがインタラクションデザインを特集したこともあり、一般にも浸透してきていると言えるかもしれない。

『インタラクションデザインの教科書』を書いたきっかけ？

Dan：ドットコムバブルの時代があり、崩壊して人が減り、最近ではこのフィールドに入ってくる人が増えて来た。大学院生時にundergraduateにインタラクションデザインを教えていたが適当な教材がなかったためテキストブックとして作った。Jesse James Garretは、Information Designの上にInformation Architecture（静的なドキュメント整理）とInteraction（動的でソフトウェア的）なものがあると言っているが、mostly agree with him, but JJGがそこには何かストラクチャーがなければいけないと言っているのに対し、僕は構造よりもInteractionが上であると考えている。

Interaction Designerの役割？
- 誰がやったらよいか？

横田：（クラスメソッドでは）職種としてアップしていったというよりは、クライアントとの話の中で追加されていった感じがする。早いタイミングで後工程のスタッフ達がクライアントやユーザーに話を聞く。プロジェクトの一番最初にデザイナーが入る。
宮崎：（アクシスでは）分業だけど完全な分業じゃないという風にしたい。お互いに何をやっているかは分かるというような。もちろんそれぞれ得意分野はある。
Dan：（Adaptive Pathでは）Project Leadという人がいてそれはつまりCreative Directorなんだけど役割としてはプロジェクトのビジョンを示すこと。その他に、Design Technologist（？）、Visual Designer、Interaction Designerがいる。Interaction DesignerのバックグラウンドはDeveloperだった人もいれば、Writerだった人、Art Schoolを出てる人などさまざま。どんなバックグラウンドであれInteraction Designerであれば何を扱っているかということぐらいは知っている必要がある。

[会場からの質問セッション]
Interaction Designの中でさらにセクションがあるのか？デザイナーとしてのview、エンジニアとしてのviewとか

宮崎：Webで言えばXMLの受け渡しで分岐する（Flashの場合だけど）。アクシスだとXMLの受け手と渡し手でデザイナーとエンジニアが分かれる。本当は1人で通しで見れる方が望ましいので、その傾向が強いため、アクシスの例はあまり参考にならないかもしれない。
横田：お客さんとの空間を埋められるかどうかが分かれ目。クライアントからのヒントを100%真に受けるタイプの人はプログラマーで、ヒントを聞いた上で行間まで読んでさらに提案できる人がインタラクションデザイナーに向いていると言えるのでは？
Dan：チームの規模による。1人ぼっちチームなら当然1人で全部見るし見解も一つである。たくさんの人がチームにいれば、より掘り下げたもの、凝ったものを作れる。インタラクションデザインはインタラクションデザイナーの肩書を持った人でなくてもできる活動である。オープンマインドを持っていれば。Most people can. Not anyone. インタラクションデザイナーとエンジニアのバランスの取れたチームがいいものを作れると思う。Equal respectが必要で、if either interaction designer or engineer is dominant, the project will be fail. エンジニアの方がパワーを持ってるケースが多いが、企業がデザイナーの方もバックアップする姿勢が必要。

一定規模以上のWebで、インタラクションを共通認識として持つためのドキュメンテーションは？

Dan：何を作るべきかが明快に書かれたものが必要。それ以上、それ以下でもダメ。Depends on organization. 膨大なドキュメントの時もあればホワイトボードのメモのみという時もあるし、あるプロジェクトではそれはポスターだった。オフィス中にペルソナが貼ってある時もある。

- タイムラインが加わるようなケースではどうか？

Dan：タイムボックスという概念がある。プロジェクト全体でこれだけの時間があり、その中で各工程にさかのぼって、この工程には何日、この工程には何時間と割り振っていくような。

chibirashka感想
・夢妄想的な想像力も必要だけど、説得力のあるデザインビジョンのためには実現可能性も必要。なので「テクノロジーに紐づくリアリティのあるものの積み上げ」ということに非常に納得。でも、であれば、デザインファームであっても、何か便利な新しいAPI、といったレベルの技術ではなく、もっと基礎研究的なコア技術についての情報を積極的に取り込んでいってもいいのではないかと思った。まぁ、実際にはindependentなdesign firmでは難しいかもしれない。

・宮崎さんの話の中で、1人のデザイナーがPhotoshopもイラレもいじるし、HTMLもプログラムも書くし、一昔前はDirectorというツールでLingoという言語を書いたり・・みたいな話があったんだけど、確かにアメリカの大学ではそういう風な教育だった。デッサンの授業もあったし、Media Writingや広告理論とかもやりつつ、Photoshopも、AdobePremiereでのビデオ編集も、DirectorでLingoとかも確かに書いてたよ。超文系な私が苦労してLingoでへんてこなゲーム作ったり、CD-ROMオーサリングやったりしてたなぁ〜と。関係ないけどそんなことを思い出した。結局それぞれみんな得意分野は分かれて行くんだけど、最低限それぞれの工程にどんな作業が発生するかとかが分かって、作業分担してパーツを作る時にも、次の工程に渡すためにどんな風なフォーマットにしといたらいいかということが分かる風にはなってた気がする。今のWeb業界は分業が進んで来ていると思うけど、それでもそれなりに、各フェーズの担当者がどういうことをするのかぐらいはお互いが理解してカバーしあわないといけないだろうね。

⇒DESIGN IT! FORUM 2008の他のセッションについてのエントリーのインデックス

DAY1: セッション3
デザイニング・エモーショナル・インタラクション
by 株式会社アクシス / 多摩美術大学情報デザイン学科教授 宮崎光弘

AXIS
・ショップ：レジの中からユーザーを観察できるという、場所を持つことの良さ
・雑誌：書籍と違ってリニアにではなくランダムにアクセスされ、そこで心をつかむ必要があるという点でWebとの共通点
・フォント：声質のようなもの。同じことを言っても声のトーン次第で伝わり方が違う。料理においての水と同じ、ベーシックなもののデザインが大事。文字にこだわっているという意識。

Andree Putman:
モノではなく起こるコトをデザインする。
Rue de Bacの例：椅子自体ではなく、運ぶコトのエレガンスさをデザイン。

ゴッドリーブ・エリエル・サーリネン:
より大きな背景を意識してデザインしよう。
椅子＜部屋＜家＜街＜都市計画　みたいな。
Charles Eamesにも影響を与えた。Powers of Ten。

モリサワのコーポレートサイト:
縦書きのメニューはオルセー美術館のサイン計画にinspireされている。
フォントパークの細部に渡る配慮。触ってみたくなる、直感的に分かる。

AXISが考えるinteraction
人、モノ、コト、環境　の相互作用で起こること。

GUIからEUI（Emotional User Interface）へ
カンタン（Simple）、キレイ（Aesthetics）、キモチいい（Emotional）を実現する要素
    - Information Structure
    - Graphic Element
    - Enhancement（音、モーション、光など）

chibirashka感想
・やっぱりリアルな場所（ショップ）を持っているというのは強い！
・より大きな背景を意識してデザインするということ、つまり背後にあることまで含めた本質を見極めることが重要。Pace Layeringという時間経過による変化の概念と同時に、Powers of Tenの感覚。Charles & Ray Eamesの映像作品集を見たばかりだけに、ダイレクトに入ってくる。

・ビジネス視点とか仕事との関係で考えることが多いけど、そんなもん抜きにしてやっぱりデザインって純粋に素敵！

⇒DESIGN IT! FORUM 2008の他のセッションについてのエントリーのインデックス

DAY1: セッション1
「インタラクションデザイン」という新たな分野 -『インタラクションデザインの教科書』の出版を記念して
by Dan Saffer, Adaptive Path社（米国）インタラクションデザイナー


What is design?
    - Graphics?
    - Industrial(Product)?
    - Architecture or Spaces?

People tend to think design is to decorate message.

"Design is not just what it looks like and how it feels like. Design is how it works" - Steve Jobs
This is interaction design!!
  in another words,
Interaction design is the design of behavior:  how a system responds to human action.

プロダクトを構成する3つのレイヤー
1. Aesthetics: looks & feel
2. Behavior: how products behave
3. Mechanics: engineering

Engineers have pursued mechanics, but aesthetics and behavior have been left behind. Aestheticsについてはまぁ、ラッキーならカバーされてきたかもしれないがBehavior has been neglected for long.

interaction design = feedback design
how does, how should this system respond.
このシステムならこう使えるだろうということが分かるようなこと、affordanceとも近い。

It's important to have a balance between business needs and user needs.


Interaction design is interface design?

- Interaction design has to accomplish the goal with BEST, EFFICIENCY and PLEASING way for users.
- Interface design is physical visual design(not only graphics but audio..etc) of interaction.

Interaction design のpast, present and future

PAST: A kind of history of interaction design
人間とコンピュータの関係の変遷
many to one　⇒　one to one　⇒　one to many(thousands)

Relationship between user and computer became complicated, and interaction design was born and needed. In 90's interaction design means a lot more by web.

PRESENT:
Interaction design process
    1. Strategy
    2. Research
        - business requirement
        - user requirement
    3. Concepts
        - bunch of ideas → narrow down
    4. Evaluation
    5. Prototyping
        - synthesize
    6. Iteration, testing and refinement
    7. Overseeing development

Researchの方法
社内やストリートで人々と話すことによって（インタビュー）
（what to ask）
    - what kind of product they want to solve their problems
    - about existing product -pros and cons-

After research,
・Visualization（ビジュアル化）
data → analyze → visualize という一連の流れが必要。ビジュアル化、モデル化したものを指標として持っておくとよい。

・Ideation（アイディア化）
brainstorming better have a structure around user needs.
it comes up with many ideas. QUANTITY > QUALITY

Adaptive Path社ではBrainstorming Spreadという手法を取っている。
Ideas as many as possible in short time.
ex. 360 concepts in 3 hours came up in some brainstorming last year.

・Prototyping
    - Paper prototyping, rough sketch
    - then adding more interface design
    - then putting industrial design
    - specifications are necessary so that developer can mak
    - refinementのステップが発生する
    - paper prototypeでは不十分な時もある。

user needs → test → user needs　このiteration。

FUTURE:
examples of interaction gesture
    - touchless remote control: can be controlled even with messy hands
    - touch wall: just like the movie "Minority Report"
    - robot: composes music when people come closer. it's great area for interaction designer to go into.
    - computer installed mug cup
    - blender: that reacts to voice. in this case, people mimic the sound of blender=speak language of blender.
    -Aurora projects: new browser.

Q&A session
Q1. AURORAのように新しいものは、ユーザーにアフォードさせるのはまだ難しいのではないか？
A1. That's true. We often use "attraction affordance". iPhoneのスライドでロックさせるとか、MS surfaceのように水が流れているような画面で面白そうだからつい手を触れてみたくなる、というような、そういうことを通して慣れるようにしていく。新しいものに慣れていくまでには確かに時間がかかろうだろう。

Q2. Interaction designの7つのprocessはHCDでは10年も前から提唱しているが、いくつかの限られた会社（例えばIDEOやAdaptive Pathや37 signals）でしかうまく行っていないように見える。つまり、天才的な限られたinteraction designerがいるかいないかの問題なのでは？
A2. 天才デザイナーがいないといけないという訳ではない。HCDという言葉だけが一人歩きしていて、やたらリサーチだけをした感がある。リサーチはしたが、プロダクトに反映できたかというとリサーチしっぱなしだった。アイディアを練る時間をけちって1番手になることを望んでしまう企業が多いということかもしれない。組織全体としてユーザー中心デザインを行うという強い意志も必要だろう。

⇒DESIGN IT! FORUM 2008の他のセッションについてのエントリーのインデックス

8月22、23日の2日間にわたって開催されたDESIGN IT! FORUM 2008に行ってきました。
行く予定ではなかったのですが、直前になって金曜日だけ行くことにし、金曜日の会場でひょんなことから土曜日も行くことになり、結局2日間最初から最後まで。今回のテーマは「インタラクションデザインの現在と未来」。

メインゲストはAdaptive Path社のDan Saffer氏で、彼のプレゼンテーションは英語で行われました。（通訳もありました）なので、聞きながら走り書きしたメモが英語と日本語が混ざっている上、英語から日本語へではなく、英語から英語に翻訳していたりして断片的なので、メモとしても微妙ですが・・紙に書いたメモは捨てちゃうかもしれないので、個人的覚え書き用に取ったメモをほぼ全部書いときます（謎）。ほぼ謎の暗号と化してる。。。

長くなるので、エントリーを分けることにします。しかも、ちょっとずつアップしていきます。とりあえずインデックスだけ。

DAY1:

[セッション1]
「インタラクションデザイン」という新たな分野 -『インタラクションデザインの教科書』の出版を記念して
by Dan Saffer, Adaptive Path社（米国）インタラクションデザイナー

[セッション2]
バックエンドシステム設計がRIA成功の第一歩
by クラスメソッド株式会社 代表取締役 横田聡

[セッション3]
デザイニング・エモーショナル・インタラクション
by 株式会社アクシス / 多摩美術大学情報デザイン学科教授 宮崎光弘

[パネルディスカッション]
インタラクションデザインの新時代
by Dan Saffer, 横田聡, 宮崎光弘, 篠原稔和（モデレーター）

DAY2:
 
[セッション4]
アダプティブ・パスにおけるインタラクションデザインの実践
-ケーススタディ：ニューヨーク交通チケット自動販売機、Googleマップ、Microsoft Office 2007
by Dan Saffer, Adaptive Path社（米国）インタラクションデザイナー

[セッション5]
ソシオメディアにおけるインタラクションデザインの実践
-デザイン主導のシステム開発メソッド
by ソシオメディア株式会社 チーフ・デザインオフィサー, インタラクションデザイナー 上野学

[セッション6]
インタラクティブジェスチャー
-タップはクリックの新しいかたち
by Dan Saffer, Adaptive Path社（米国）インタラクションデザイナー

[パネルディスカッション]
iPhone 3GのUIから始まる未来のインタラクションデザイン
by Dan Saffer, 上野学, 長谷川敦士（株式会社コンセント）篠原稔和（モデレーター）
⇒DESIGN IT! Forum 2008報告（コンセント広報ブログ）
⇒DESIGN IT! Forum 2008（underconcept）

[番外編]
IA Cocktail Hour Tokyo (F2F: Dan Saffer氏を囲む会)