Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2010年12月5日にアーツ千代田3331で開かれた「心地良さのインタラクションデザイン ワークショップ」でのスライドです。

  • Login to see the comments

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

  1. 1. 心地良さのインタラクションデザイン ワークショップ 2010-12-05 N1N9 / 矢崎裕一
  2. 2. 今日の内容 ・主旨の説明 15分 ・自己紹介 15分 ・リサーチ & 記録 1時間半 ・発表 & まとめる 1時間
  3. 3. 時代状況 1983年 ファミリーコンピュータ 1984年 Macintosh 1985年 Windows 1984年 1994年 2004年 2014年 2010年 PS3 Play 2010年 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年 テレホーダイ (このようなワークショップをやる今日的な意義はあるのでは、という話)
  4. 4. 家電系UIの個人的実績 CEREVO CAMT-navi
  5. 5. ワークショップの内容 1.ある事例を仮定して作ってみる 2.パターン・ランゲージ的な事例収集をやる 二通りありえるとしたら、2のパターン・ランゲージの方が圧倒的によい。
  6. 6. パターン・ランゲージとは パターン…「建築環境に繰り返し現れる課題を解決に導く具体的な方策を記述したもの」 ランゲージ… 集合体の意 出典:パターン、Wiki、XP 1970年後半に、クリストファー・アレグザンダーが提唱した建築・都市計画にかかわる理論。
  7. 7. クリストファー・アレグザンダーの 問題意識 Living & Growing Whole Design under Complexity User-Controlled Design 「生き生き」とし、多様性がありながら、調和がとれている全体を、どうつくることができるのか? デザイン行為にあたり、複雑さにどう対峙すればよいのか? 住人たちが、自分たちでつくり、自分たちで育てることができるためには、どうすればよいか? 出典: SFC 井庭崇先生の講義資料
  8. 8. パターン・ランゲージで実現したこと 個別の問題とその解決方法を記録する=文脈的 ↓ 抽象化して(本質を抽出して)名前をつける=パターンとして定義する ↓ 利用者と建築家の共通言語。 ソフトウェア開発にも転用されている(デザインパターン)
  9. 9. ID、IxDにおけるパターン・ランゲージ デザイニング・インターフェイス Patterns for Effective Interaction Design OS / Application / PC Web 2005年 デザイニング・ウェブインターフェイス Principles and Patterns for Rich Interactions PC Web 2009年 Designing Gestural Interfaces Smartphone / Game 2008年 iOS ヒューマン インターフェイス ガイドライン iPad ヒューマン インターフェイス ガイドライン Mobile http://developer.apple.com/jp/devcenter/ios/library/japanese.html 2007年 ヒューマン インターフェイス ガイドライン Human Interface Guidelines:The Apple Desktop Interface OS / Application 1980年代 ゲームニクス Game 200?年 東芝(菱川勢一氏・非公開) Electronics 2006年 シネスタシア理論(水口哲也氏・非公開) Game 1993年? Robert Penner / Easing Equation Flash http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html 2003年? App / Web Game / Motion Graphic Gesture / Touch UI
  10. 10. 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
  11. 11. 水口哲也さん「快感のデザイン」 60フレーム/秒の映像を見せると人間はリアルだと感じる。それ以上100フレーム/秒ま で、脳波と血圧の値は横ばいらしい。 人間の視野を10%から100%まで広げていくと、60%ぐらいで脳波と血圧の値が上がる実験 結果があるらしい。 コール&レスポンスの繰り返しによって連続的な面白さを感じると、人間はその行為を繰り返 す。そしてレスポンスの際に、ビジュアル/サウンド/バイブレーションといった刺激を強め たり変化させていくと、まるで感情が化学反応を起こすように循環がスパイラル状に上昇しは じめるらしい。 出典: デザイン言語2.0
  12. 12. 優れたインタラクションデザインの 特徴 信頼性…信頼できると感じられること。 妥当性…文化、状況、人が生活する環境にふさわしいか。 賢明さ…ユーザーが間違ったり、必要以上のことをしたりせずに済ませなければならない。 敏速さ…ユーザーのアクションに俊敏に反応する。     ある行為に対する反応にかなりの時間がかかる時にユーザーに知らせる。 巧妙さ…あらかじめユーザーの要求を予測し、その欲求を気持ちよく叶えてくれる。 遊び心…ユーザーが製品やサービスで遊べる環境や手段を与える。 心地良さ…美しい製品の方がうまく機能する。見た目の美しさと機能性の両者が必要。 出典:インタラクションデザインの教科書 →すべてフラットに扱うのではなく、大きく二つに分類できるのではないか。
  13. 13. 完成度の評価軸 - +0 ・左のマイナス軸においてあるものは、使いにくさを減らす、マイナスからゼロへ向かうもの(=評価手法が確立されている) ・右のプラス軸においてあるものは、ゼロからプラスへ向かうもの(=正解は一つではない) ・遊び心、心地良さはすべての状況において必要なものではない。 信頼性、妥当性、賢明さ、敏速さ、巧妙さ 遊び心、心地良さ (数値化できないとして、概念的に見てください)
  14. 14. なぜ心地良さに価値をおくのか? ・情動は人の心が問題を解決する方法を変える。  情動システムは認知システムの動きを変えてしまう。 ・文化的だったり文脈的なものを超えて有効。 ・トレンドに左右されがたい。 出典: エモーショナルデザイン
  15. 15. 「エモーショナルデザイン」における 処理の三レベル 内省…脳の熟慮する部分。 行動…日常の行動を制御する部分。    → ユーザビリティの焦点があたる点。 認知科学的視点で分析できる。 本能…自動的で生来的。→本ワークショップで対象とする。 人間の特性は、脳機能の三つの異なるレベルに起因する。 出典: エモーショナルデザイン
  16. 16. 例えば? ソフト ・iPadのホーム画面でのフリック → 身体能力の拡張 ・Twitter 公式iPhoneアプリのリロード → プッシュよりフリックの方が気持ちいい? ・ゲームにおけるアイテム収集 → 均一のものが集まると楽しい ・ルミナス →ゲームをやっているうちにゲームをしてるのか演奏してるのかわからなくなる ハード ・Appleのプロダクト(iPodのホイール音、MacBookのスリープランプ) R&D ・ピンポンプラス 石井裕
  17. 17. 事例収集 事例 記録者: デバイス名: ソフトウェア名: 再現方法: 心地良いと感じる理由: 文脈(コンテクスト)的である 文脈を離れて、どう成立しうるか 写真
  18. 18. ネーミング&グルーピング グループA グループB グループC グルーピングして、一つひとつに名前をつける name c name b name a name d name e name f name g name h

×