心地良さのインタラクションデザインワークショップ

2010-12-05

N1N9 / 矢崎裕一

今日の内容

・主旨の説明 15分

・自己紹介 15分

・リサーチ & 記録 1時間半

・発表 & まとめる 1時間

時代状況

1983年 ファミリーコンピュータ1984年 Macintosh 1985年 Windows

1984年 1994年 2004年 2014年

2010年 PS3 Play2010年 Xbox Kinect

1998年 日本のインターネット利用者1000万人突破

PC: OS / Application - WIMP (Window, Icon, Menu, Pointing Device)

PC: Web

PC: Web ajax

Mobile: Web / Application

Game: Gesture UI

1994年 PLAY STATION

2006年 Wii 2007年 iPhone

Game: Contoller

近未来の技術1995年テレホーダイ

（このようなワークショップをやる今日的な意義はあるのでは、という話）

家電系UIの個人的実績

CEREVO CAMT-navi

ワークショップの内容

1.ある事例を仮定して作ってみる 2.パターン・ランゲージ的な事例収集をやる

二通りありえるとしたら、2のパターン・ランゲージの方が圧倒的によい。

パターン・ランゲージとは

パターン…「建築環境に繰り返し現れる課題を解決に導く具体的な方策を記述したもの」ランゲージ… 集合体の意

出典：パターン、Wiki、XP

1970年後半に、クリストファー・アレグザンダーが提唱した建築・都市計画にかかわる理論。

クリストファー・アレグザンダーの問題意識

Living & Growing Whole

Design under Complexity

User-Controlled Design

「生き生き」とし、多様性がありながら、調和がとれている全体を、どうつくることができるのか?

デザイン行為にあたり、複雑さにどう対峙すればよいのか?

住人たちが、自分たちでつくり、自分たちで育てることができるためには、どうすればよいか?

出典： SFC 井庭崇先生の講義資料

パターン・ランゲージで実現したこと

個別の問題とその解決方法を記録する＝文脈的↓

抽象化して（本質を抽出して）名前をつける＝パターンとして定義する↓

利用者と建築家の共通言語。

ソフトウェア開発にも転用されている（デザインパターン）

ID、IxDにおけるパターン・ランゲージ

デザイニング・インターフェイスPatterns for Effective Interaction Design

OS / Application / PC Web2005年

デザイニング・ウェブインターフェイスPrinciples and Patterns for Rich Interactions

PC Web200９年

Designing Gestural InterfacesSmartphone / Game

2008年

iOS ヒューマン インターフェイス ガイドラインiPad ヒューマン インターフェイス ガイドライン

Mobilehttp://developer.apple.com/jp/devcenter/ios/library/japanese.html

2007年

ヒューマン インターフェイス ガイドライン Human Interface Guidelines:The Apple Desktop Interface

OS / Application1980年代

ゲームニクスGame200?年

東芝（菱川勢一氏・非公開）Electronics2006年

シネスタシア理論（水口哲也氏・非公開）Game

1993年?

Robert Penner / Easing EquationFlash

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html2003年?

App / Web Game / Motion Graphic Gesture / Touch UI

ID、IxDにおけるパターン・ランゲージ

1984年 1994年 2004年 2014年

PC: Web

PC: Web ajax

Mobile: Web / Application

Game: Gesture UI

ヒューマンインターフェイスガイドライン

デザイニング・インターフェイス

シネスタシア理論

iOS ヒューマン インターフェイス ガイドラインiPad ヒューマン インターフェイス ガイドラインゲームニクス

Designing Gestural Interfacesデザイニング・ウェブインターフェイス

Robert Penner / Easing Equation

パターン・ランゲージ化されてきたのはごく最近のこと（ここ5年くらい）

PC: OS / Application - WIMP (Window, Icon, Menu, Pointing Device)

Game: Contoller

水口哲也さん「快感のデザイン」

60フレーム／秒の映像を見せると人間はリアルだと感じる。それ以上100フレーム／秒まで、脳波と血圧の値は横ばいらしい。

人間の視野を10％から100％まで広げていくと、60％ぐらいで脳波と血圧の値が上がる実験結果があるらしい。

コール＆レスポンスの繰り返しによって連続的な面白さを感じると、人間はその行為を繰り返す。そしてレスポンスの際に、ビジュアル／サウンド／バイブレーションといった刺激を強めたり変化させていくと、まるで感情が化学反応を起こすように循環がスパイラル状に上昇しはじめるらしい。

出典： デザイン言語2.0

優れたインタラクションデザインの特徴

信頼性…信頼できると感じられること。

妥当性…文化、状況、人が生活する環境にふさわしいか。

賢明さ…ユーザーが間違ったり、必要以上のことをしたりせずに済ませなければならない。

敏速さ…ユーザーのアクションに俊敏に反応する。　　　　ある行為に対する反応にかなりの時間がかかる時にユーザーに知らせる。

巧妙さ…あらかじめユーザーの要求を予測し、その欲求を気持ちよく叶えてくれる。

遊び心…ユーザーが製品やサービスで遊べる環境や手段を与える。

心地良さ…美しい製品の方がうまく機能する。見た目の美しさと機能性の両者が必要。出典：インタラクションデザインの教科書

→すべてフラットに扱うのではなく、大きく二つに分類できるのではないか。

完成度の評価軸

- +0

・左のマイナス軸においてあるものは、使いにくさを減らす、マイナスからゼロへ向かうもの（＝評価手法が確立されている）・右のプラス軸においてあるものは、ゼロからプラスへ向かうもの（＝正解は一つではない）・遊び心、心地良さはすべての状況において必要なものではない。

信頼性、妥当性、賢明さ、敏速さ、巧妙さ 遊び心、心地良さ

（数値化できないとして、概念的に見てください）

なぜ心地良さに価値をおくのか？

・情動は人の心が問題を解決する方法を変える。　情動システムは認知システムの動きを変えてしまう。

・文化的だったり文脈的なものを超えて有効。

・トレンドに左右されがたい。

出典： エモーショナルデザイン

「エモーショナルデザイン」における処理の三レベル

内省…脳の熟慮する部分。 行動…日常の行動を制御する部分。 　　　→ ユーザビリティの焦点があたる点。 認知科学的視点で分析できる。本能…自動的で生来的。→本ワークショップで対象とする。

人間の特性は、脳機能の三つの異なるレベルに起因する。

出典： エモーショナルデザイン

例えば？

ソフト・iPadのホーム画面でのフリック → 身体能力の拡張・Twitter 公式iPhoneアプリのリロード → プッシュよりフリックの方が気持ちいい?・ゲームにおけるアイテム収集 → 均一のものが集まると楽しい・ルミナス →ゲームをやっているうちにゲームをしてるのか演奏してるのかわからなくなる

ハード・Appleのプロダクト（iPodのホイール音、MacBookのスリープランプ）

R&D・ピンポンプラス　石井裕

事例収集

事例

記録者：

デバイス名：ソフトウェア名：再現方法：

心地良いと感じる理由：

文脈（コンテクスト）的である

文脈を離れて、どう成立しうるか

写真

ネーミング＆グルーピング

グループA グループB グループC

グルーピングして、一つひとつに名前をつける

name c

name b

name a

name d

name e

name f

name g

name h