デザイン思考とアプリケーション開発の実際

岡山大学:情報化における職業
デザイン思考とアプリケーション
開発の実際
加藤洋一
NTT Cyber Solutions Labs
岡山大学:情報化における職業
自己紹介
• 現職は、NTTサイバーソリューション研究所ヒューマンインタラクションプ
ロジェクトプロジェクトマネージャ(研究者50人ほどの研究部の指導)
– 阿部教授は電電公社同期入社の同僚でした。
• ひとつ前の職場は、NTT-IT MeetingPlaza事業部(事業部長)。
MeetingPlazaは国内で最も導入数が多いWeb会議システム・サービス。
• その前は、NTT-MCL Director。InterSpaceというマルチユーザー仮想3次
元共有システムの開発と販売(カリフォルニア)。
• その前は、NTT人事部で衛星を使ったディジタルマルチメディア研修シス
テムの計画とプロトタイプ
• その前は、NTT画像通信事業本部でマルチメディアDBの開発と販売。
• その前は、NTT ヒューマンインタフェース研究所 ビデオ圧縮符号化アル
ゴリズムの研究と標準化
• 学歴:千葉大 学士、修士
• 学位:東大に論文を提出して博士(工学)を頂く
岡山大学:情報化における職業
On Web
• ICTデザインセンター
– http://www.waza.jp/idec/index.html
• 千葉大学非常勤講師(情報通信システム)
– http://www10.plala.or.jp/katofmly/chiba-u/
• ITU-T Workshop
– http://www.itu.int/ITUT/worksem/h325/200605/bios.html
岡山大学:情報化における職業
デザイン = Design = 設計(?)
• 身の回りは人工物だらけ
• 人工物は、設計され、製造されます
• どんどん複雑化する人工物
• より良いものを作る=設計の重要性
岡山大学:情報化における職業
人工物=設計、製造されたもの
• この部屋の人工物
• 朝起きてから今までに利用した人工物
岡山大学:情報化における職業
設計=Design=デザイン?
• 「デザイン」とは何でしょうか?
本講義でのデザインの定義
「資源を、人間の要求や欲求に対応
しうる製品やシステムに作り替えたり、
問題を解決するために、計画を作成・
実施するプロセスである」
岡山大学:情報化における職業
どんどん複雑化する人工物…
• TVの明るさを変えられない….
– 昔のアナログテレビには専用のつまみが
あった。。。
岡山大学:情報化における職業
• ホームボタン > 左ボタンを4回 > 決定 右ボ
タンを1回 > 決定 > 下ボタンを3回 > 決定
> 左右ボタンを必要なだけ押してで調整 >
決定 > 終了 (やれやれ)
岡山大学:情報化における職業
良いデザインとは?
• 目的が達成できる
– 衣食住、エンターテイメント、仕事、コミュニケーショ
ン、、、
• 使いやすい、迷わない、疲れさせない、、、
– 人間特性とのマッチング
• その他の制約
– コスト、安全、
岡山大学:情報化における職業
人間特性
• 知覚
– 視覚、聴覚、触覚、味覚、臭覚
• 認知
– 脳の働き、情報処理、感情
• 行動
– 骨格、筋肉、神経機構
• 人間特性は個人ごとに異なる
– 年齢、障がい、性別、文化背景、、、
岡山大学:情報化における職業
錐体細胞(S,M,L)と桿体細胞(R)が含
む視物質の吸収スペクトル
http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Cone-response.png
岡山大学:情報化における職業
情報取得の範囲
• 1回ではっきり見える範囲はかなり限定される
• そのため、目は絶えず動いている(サッカード)
解像度高(視野角1.2度)
注視点
この位
解像度中(視野角5度)
視野角1.2度 = 14.7mm (70cm先) = 50pixel (18.1inch)
視野角5.0度 = 61.0mm (70cm先) = 208pixel
岡山大学:情報化における職業
視覚
• 20Hzから20KHzの間の音を聞くことができる
– 加齢により高い音がだんだん聞こえなくなる
• 周波数領域に変換して認識しているらしい
– 簡単な実験
岡山大学:情報化における職業
認知
• 脳のメカニズム?
– 信号伝達メカニズム (それなりに分かっている)
– 高次機能(いろいろな研究があるがまだ良く分か
らない)
岡山大学:情報化における職業
神経細胞の情報伝達
• ニューロン=軸索+樹状突起
• ニューロン内は電気信号、シナプスでは脳内物
質による伝達
15
岡山大学:情報化における職業
この漢字書けますか?
名誉きそん
岡山大学:情報化における職業
毀損
岡山大学:情報化における職業
これは読めますか?
情報が漏洩した
では、これが書ける、という人は?
岡山大学:情報化における職業
5個の数字が順に表示されます。合計はいくつ?
合計は?
合計は「35」でした
岡山大学:情報化における職業
5個の数字が順に表示されます。合計はいくつ?
合計は?
合計は「73」でした
岡山大学:情報化における職業
書いてあれば。。
(あるいは特徴を見つけて工夫すれば。。。)
5 + 8 + 9 + 6 + 7 = 35
3 + 14 + 27 + 16 + 13 = 73
人間の作業用のメモリーは小さい(7±2項目)
岡山大学:情報化における職業
テレビを見たい
テレビを認識
テレビはついていない
スイッチがあるはず(*)
スイッチはリモコンにある(*)
リモコンはどこだ?(サブゴール設定)
捜索-リモコンを認識
スイッチはどこだ?(サブゴール設定)
電源スイッチは目立つはずだ(*)
捜索-発見-確認-赤いボタンを押す
テレビがつく
岡山大学:情報化における職業
知識・経験=メンタルモデル
岡山大学:情報化における職業
どうすれば水が出る?
岡山大学:情報化における職業
複雑な例
「ホーム」から始める、とい
のはすぐには分からなかっ
たが、「設定」の文字が見え
てからは、それほど迷うこと
なく明るさ調整まで進めた。
ナビゲーションは4つの方
向キーだが、そのキーと画
面は対応している
岡山大学:情報化における職業
どのように隔たりを埋めるか
実行の橋
インタフェースの
仕組み
システム
行動
方法
意図
解釈
ゴール
評価
表示
評価の橋
(Norman,1986)
• マウスオーバー、ツールチップ、、、
26
岡山大学:情報化における職業
人間の行動の仕組み(構造)
人
長期記憶
外
界
宣言的知識
知覚
作業記憶
運動
手続的知識
岡山大学:情報化における職業
人間の行動の仕組み(プロセス)
• 全ステップを必ずしも実行しているわけではない
ゴール
意図
評価
行動系列
解釈
実行
知覚
システム(外界)
岡山大学:情報化における職業
構造としての人間
• 基本的な人間特性のデータベース
– http://www.tech.nite.go.jp/human/index.html
最大発揮力の測定
上肢操作力の測定
http://www.tech.nite.go.jp/human/jp/contents/cdata/index-g.html
岡山大学:情報化における職業
指の太さと鍵盤の幅
岡山大学:情報化における職業
どのスイッチがどのバーナー?
岡山大学:情報化における職業
便利な機能の在り処
岡山大学:情報化における職業
デザインの法則(D.A. ノーマン)
• 外界にある知識と頭の中にある知識の両方を利用す
る
• 作業の構造を単純化する
• 対象を目に見えるようにして、実行のへだたりと評価
のへだたりに橋をかける
• 対応付けを正しくする
• 自然の制約や人工的な制約などの制約の力を活用
する
• エラーに備えたデザインをする
• 以上のすべてがうまくいかないときには標準化する
岡山大学:情報化における職業
ユニバーサルデザイン
岡山大学:情報化における職業
デザインを探しに行こう
• 休憩を含んで30分後に講義を再開します。そ
の間に、学内の人工物から設計者の意図が
感じられるようなものの写真を撮ってきてくだ
さい。
• パケ放題の人は、 に送ってください。
岡山大学:情報化における職業
どんなデザインを見つけてきましたか?
• パケ放題の人は、@gmail.com に送ってくださ
い。
人間中心設計
人間中心設
計の必要性
要求事項に対す
る設計の評価
岡山大学:情報化における職業
利用状況の理
解と明確化
ユーザの要求
事項を満足
ユーザの要求
事項の明確化
ユーザの要求事
項を満足する解決
策の設計
※ISO9241-210(旧ISO13407)を和訳
岡山大学:情報化における職業
ユーザビリティ評価
• なるべくシステム開発の初期段階から評価を実施し、
システムに反映することが重要
(Human-Centered Design)
設計
試作
製造
評価
…
設計
評価
改良
試作
製造
38
岡山大学:情報化における職業
ユーザビリティ評価実験
NTTがお客様に提供しているIP機器の使用感を被験者で評価する実験を行い、
幅広いユーザにとって「使いやすい」機器やサービスの提供につなげる
家庭を模した実験環境で、開梱・設定
IP機器
体験
ユーザに送られてきた
IP機器
反映
書斎
観察・評価・分析
リビング
評価
• ユーザが迷った箇所、
つまづいた箇所の抽出
• 原因の分析
• 改良案の提案
カメラ映像
モニタルーム
39
岡山大学:情報化における職業
関係者限り(開示先:)
実験室
Copyright(C) 2011 日本電信電話株式会社
ハーフミラー
観察者室
40
岡山大学:情報化における職業
事例:ブロードバンドルータの設置・設定
実験による問題の抽出
自分で設定する気にならない
対策と評価
親しみやすい印象の
デザインを採用
アンケート結果:
「自分で出来そう」
「自分でやってみようと思う」
何からやり始めたら良いか
わからない
使用する順番に梱包※2
配線が出来ない
大きな一枚紙で配線を説明
Step1
改善により、
ガイド発見時間
平均8分→数十秒※1
改善により、
配線成功率
60%→100%※1
※1 数値は、被験者24名による実験室実験の結果
※2 詳細は、中谷,片桐,宮本「ユーザを迷わせないパッケージの構造に関する研究:視線と資料の場所の時間的推移の分析」,信学技法HIP107(553), pp.37-42 (2008)
41
岡山大学:情報化における職業
ヒューリスティクス評価法 (Nielsen,1993)
• チェックリストによる評価法。3~5人の
専門家が独立に実施
• 実システムがなくても評価可能
–
–
–
–
–
–
–
–
–
Visibility of system status(システムの状態を見せよ)
Match between system and the real world(実世界との調和)
User control and freedom(自在な操作)
Nielsen
Consistency and standards(一貫性、標準性)
Error prevention(エラーを出すな)
Recognition rather than recall(再生より再認)
Flexibility and efficiency of use(柔軟かつ効率的に)
Aesthetic and minimalist design(シンプルは美しい)
Help users recognize, diagnose, and recover from error
(ちゃんと理解できたりエラーから復帰できるように)
– Help and documentation (適切なヘルプを出せ)
42
岡山大学:情報化における職業
Cognitive Walkthrough (Polson,1992)
• システムの各段階を専門家が評価する手法
• 実システムがなくても評価可能
• 想定ユーザを設定
– 経験、技術力など
• 分析タスクを設定
– 標準的な手順を評価対象とする(エラーは含めない)
• 操作手順と画面を定義
– 設定したタスクにおける操作手順、それぞれの画面を
明示
– システムがまだない場合に、画面イメージが必要
43
岡山大学:情報化における職業
Cognitive Walkthrough
• 操作手順を、質問に回答する形で評価する
– 問題がクリティカルか否か
– 問題が発生する確率
• none = 0, some = 1, more than half = 2, most = 3
– 評価理由
• できるだけ詳しく、具体的に書く
44
岡山大学:情報化における職業
質問項目
• 1. ユーザは自分のステップのゴールを把握できているか。
• 2. 最初 / 次にすべきアクションは
– 2a. 実行できることが明らかになっているか?
– 2b. ゴールに適切に向かうものであることが明らかか?
•
•
•
•
•
•
3. ユーザはアクションに関する記述を発見できるか?
4. ユーザは記述とアクションを適切に結びつけられるか?
5. 他に実行可能なアクションはユーザの選択したものに劣るか?
6. 適切にアクションを実行できるか?
7. 操作にタイムアウトがある場合、ユーザは時間内に適切な選択が可能か?
8. アクション実行後:
– 8a. アクションの実行によってゴールに近づいたか?
– 8b. システムのレスポンスからユーザは必要な情報を得られるか。 Why/why not?
• 9. 適切にアクションが終了し、次のゴールが設定されるとき
– 9a. ゴールが変化したことが明示されるか?
– 9b. もしタスクを完了した場合、それは明示されるか?
45
岡山大学:情報化における職業
Cognitive Walkthrough
• 予測率は専門家が実施して50%程度・・・
– 複数人による予測+予測結果のすり合わせがある
事が
– 望ましい
– モデルに対する適切かつ体系的な知識を得る必要
性有
– フォーマルなプロトタイプ手法には全く劣る予測精
度である
• 非常に安価で実施が可能
– インタフェース一つ当り(1タスク?)を一時間程度で
評価可
– コストが極端に限られている時に便利
46
岡山大学:情報化における職業
ペーパープロトタイピングと評価
• 紙で作った画面デザインを利用して、システム
を実装せずに評価を行う手法。課題の早期発
見および修正が可能となる。
ブレインストーミングによる
デザイン案の作成
ペーパープロトタイピング評価中
47
岡山大学:情報化における職業
ユーザビリティ評価 演習
• タスク: スポーツ技術向上のため、専用プロ
グラムを使ってバドミントン練習のビデオから
スマッシュシーンを抜き出す。
• 異例ではありますが、皆さんには被験者と実
験者の両方を経験していただきます。
– 実験1: 観察とインタビュー
– 実験2: 思考発話法
岡山大学:情報化における職業
実験1(観察とインタビュー)
• 教示
– タスクと実験方法について説明します
– 今回は講師が行います
• 観察
– 実験者の指示に従い、被験者はタスクを開始します
– 実験者は、被験者の行動を観察し、気がついた点をメモします
• インタビュー
– タスク終了後、実験者は、被験者が取った行動についてインタ
ビューし、行動の背景にある被験者の思考を追い、被験者を
混乱させたり惑わせたものは具体的に何であるのかを探りま
す
岡山大学:情報化における職業
実験2(思考発話法)
• 教示
– タスクと実験方法について説明します
– 今回は講師が行います
• 発話の促し
– 実験者は、被験者からの発話が滞ったときなどは、「今何
を考えていますか?」などと聞いて発話を促します
• 分析
– タスク終了後、実験者は、被験者の発話を解析します。
岡山大学:情報化における職業
タスク
• スマッシュシーンをあるだけ「シーン」として定義
する
– スマッシュ動作の始めは、ラケットが最も背中側に
いったとき
– キーフレームは、シャトルを捉えた瞬間
– スマッシュ動作の終わりは、ラケットの振り終わり
– シーンのタイトルは、シーン(即ちスマッシュ)のカウン
ト数(最初を1)
• 定義が終了したら、全シーンを順にビデオで確
認し、保存する
岡山大学:情報化における職業
ブレーンストーミングとプレゼン
• 2つの実験から、利用したプログラムの使い
にくいところを特定し、改善案を考案します
• 改善案と期待する効果を簡単にプレゼンテー
ションして頂きます
岡山大学:情報化における職業
ブレインストーミング
• 出された意見についてよしあしの批判をしな
い
• 意見は自由奔放であるほどよい
• できるだけ多くの意見を出す
• 他人の意見を改良したり、二つの意見を組み
合わせたりすることも考える
岡山大学:情報化における職業
「デザイン思考」
• 「課題の理解」、「フィールドワーク(観察)」、
「ブレーンストーミング」、「可視化(プロトタイ
プ)」、「評価(ユーザーテスト)」、というステッ
プを反復的に用いることで、より良いデザイン
(イノベーティブなデザイン)を行う、という考
え方。
• 米国のビジネススクール流の「優れた計画」
「完璧な実行」という考え方へのアンチテーゼ
• もののデザインだけでなく、何にでも適用でき
る考え方。
岡山大学:情報化における職業
デザイン思考の応用
• 業務手順の設計
• 都市計画
• ショッピングモール設計
• …
岡山大学:情報化における職業
差は「有意」か?
頻度
A B
C D
値
統計学が答えを出してくれます。
岡山大学:情報化における職業
デザイン思考周辺の知識
• ユーザビリティ評価実験では、結果を統計処理するこ
とが行われます。
– ハンバーガーショップで学ぶ楽しい統計学──平均から分
散分析まで──
• http://dl.dropbox.com/u/2982832/elearn/hamburger/index.html
– アイスクリーム屋さんで学ぶ楽しい統計学──相関から因
子分析まで──
• http://dl.dropbox.com/u/2982832/elearn/icecream/index.html
• インタビュー結果などの解析では、概念を抽出するた
めの手法が用いられます
– KJ法 (http://www.ritsumei.ac.jp/~yamai/kj.htm)
– GTA (http://www2.rikkyo.ac.jp/web/MGTA/)
岡山大学:情報化における職業
• 視覚や聴覚を中心
にさまざまな研究
から明らかになった
特性を説明してい
ます
岡山大学:情報化における職業
• さまざまな実験を通
じて推察される人
間の記憶の機構に
ついて解説してい
ます
岡山大学:情報化における職業
• 実は講師もまだよく
読んでいないので
すが、3部作の最終
編ということで紹介
します。
• 言語に関しては英
語中心です。
岡山大学:情報化における職業
• 古典だが十分今でも
通用する
• 説明には実例が必
ずついており、読み
やすい
岡山大学:情報化における職業
• 人間特性評価のた
めの実験方法を具
体的に詳しく記述し
ている
• NTT研究所の研究員
も参考にしています
岡山大学:情報化における職業
• 人間中心設計技
法の教科書
岡山大学:情報化における職業
• 人間中心設計の日
本の第一人者によ
る著作
• 家電製品の開発に
人間中心を応用す
る具体的な方法を
記述している
岡山大学:情報化における職業
• デザイン思考実践
の第一人者による
著作
• 読みやすく、かつ、
デザイン思考の方
法について具体的
に示している。
岡山大学:情報化における職業
本日の講義は以上です
• 身の回りのデザインに常に注意を払うことで、
ユーザビリティに対する理解を深めることが
できます
• ユーザビリティは実践の学問です。機会を見
つけ本やWebを参考に、自ら取り組んでみま
しょう