インタラクションデザインによるソフトウェア開発

Copyright(c) 2009-2010 Kumiyo Nakakoji

インタラクションデザインによるソフトウェア開発

1

株式会社ＳＲＡ先端技術研究所東京大学先端科学技術研究センター

中小路久美代

KTL Technology Seminar (2010/02/02)

1


2

操作の品質とインタラクションデザイン

2


質の高いソフトウェアシステムということと，質の高いソフトウェアシステムをつくるということとを考えてみたいと思う．

3


そのシステムで何ができるか

機能・functionality

4

4


正当性：仕様の通り動く頑健性：どんなときにも壊れない応答性：十分な早さで動く

8

機能／functionality

5


なんだかちょっとなぁと思うソフトウェアやソフトウェアインテンシブなシステムがたくさんある．これはいぃなぁ，こいつは楽しいなぁと思うソフトウェアやソフトウェアインテンシブなシステムもある．

6


ソフトウェアに関わる話でも，なんだかたいへんだなぁ，というのがたくさんある．

7


使うときに関することが多い．

8


それぞれが，一生懸命つくられているのはなんとなくわかる．

9


でも，どうも，なんか，質が高いなぁとは感じられない．

24

10


使うときの体験の質が高くないと思う．

25

11


「操作性の品質が高い」ことと「使い易い」こととは違うと思う

12


さくさく使えるなぁとかまた使いたくなるとかやる気がでるなぁとか

27

13


何をつくるかどうつくるか

14


何をつくるかは，仕様分析で考えられていたり．どうつくるかは，システム設計とか詳細設計とかコーディングとか．

29

15


何をつくるかどうあるべきかどうつくるか

16


どうあるべきか，を考えるのがデザイン

31

17


使うときのことを考えて，システムをデザインする．

32

18


35

ユーザが使うときの世界システムの中の世界

従来のソフトウェア開発インタラクションデザイン

19


36

ユーザインタフェースデザインとインタラクションデザイン

20


ユーザインタフェースの役割の変化

21

要求仕様をつくって機能を決める

ユーザインタフェース＝機能とユーザとの間に入るインターフェース（境界面）

機能

インターフェース

機能

インタラクション


38

従来のユーザインタフェースの役割

22


39

＝システムの「包装紙」

出来が良くなかったら後から直す

＝色とフォントとレイアウトのセンス

グラフィックデザイン

ユーザインタフェース

23


ユーザインタフェースは，システムを使い易くするためのもの．

24


GUIマルチメディアマルチタッチ音声入力

高度なインタラクティビティ

高機能化

41

25


機能をどのメニューに割り当てるか、検索結果をどの窓に表示するか、といった、単なる見た目の話だけでは済まなくなってきた．

42

26


ユーザインタフェースを介してしか，システムで何ができるかを説明できなくなってきた．

43

27


ユーザインタフェースがシステムそのものに見えてきた．

28


ユーザから見たときはシステムそのもの

システムに対して自分が何をできて，そうしたらシステムが何をしてくれて，というのは，ユーザインタフェースを介してしかわからない．

45


29


システムから見たときはデータのソースとターゲット

システムが計算処理に必要とする，ユーザから入力してもらう情報は，ユーザインタフェースを介してしか得られない．処理結果は，ユーザインタフェースを介してしかユーザに示せない．

46


30


47


システムが処理に必要とするコアな入力情報を得るための要となる部分

そのシステムの品質をユーザが直接体験する唯一の部分

つまり，システムの根幹

31


ユーザインタフェースを介してしか，システムで何ができるかを説明できなくなってきた．

ユーザインタフェースを介して，多くのことがわかるようになってきた．

49

32


ユーザインタフェースを介してわかること

50

使い易い／使いにくいそのシステムを使ってどんなことができるのかどれくらい作業が早くなるのか仕事の仕方がどう変わっていくのか今までできなかったどんなことができるようになるのか今までよりどれくらい嬉しいのかどんなライフスタイルになるのかそのシステムを通じてメーカーはどんなメッセージを伝えようとしているのかそのメーカーのブランドは何を訴えているのかそのメーカーのビジョンは何なのか

33


機能のためのインタフェースをデザインするのではなくて，ユーザがシステムとどのようにインタラクション（やりとり）をするかをデザインすることによって，インタフェースをつくっていこうという考え方ができてきた．

34

インタラクションデザイン＝ユーザーがどのように機器と関わっていくかに基づいて，機能に関わる部分についてもデザインしていくこと

機能

インターフェース

機能

インタラクション


52

インタフェースからインタラクションへ

35


インタラクションのデザイン

53

36



「どのような情報をどういう順序で見せて」，「ユーザが何をどういう風に操作できるようにしていくか」を決めていくことが必要．

操作の大きな流れや日々繰り返される作業の効率から，画面上のピクセルや50～100ミリ秒オーダーのマウスの動きまで，意味的にも時間的にも非常に細かいレベルから大きなレベルまでを含めたインタラクション（やりとり）をデザインする．

54

37


インタラクションデザインというのは，使うときの世界をつくるということだと考えている．

38


56

ユーザが使うときの世界システムの中の世界

従来のソフトウェア開発インタラクションデザイン

39


デザイン生活に必要な製品を製作するにあたり、その材質・機能および美的造形性などの諸要素と、技術・生産・消費面からの各種の要求を検討・調整する総合的造形計画[株式会社岩波書店広辞苑第五版]

40


インタラクションデザイン

「どのような情報をどういう順序で見せて」，「ユーザが何をどういう風に操作できるようにしていくか」を決めていく．

「どのような情報をどういう順序で見せたいか」vs. 「システムがどのような情報をどのような順序で見せられるか」システムの性能（応答速度や精度，ハードウェアの制約）

これらを，システム全体を網羅する形できめていく．58

41


ある画面のレイアウトや，ある機能の操作の仕方，といったものは，デザインのアイディアであって，デザインとはならない．

59

42


インタラクションデザインでは，すべてのあり得る手順と，すべてのあり得るビジュアルな画面と，コアな機能もそうでない機能もすべてに対して，想定し得るすべてのユーザの場面に対処できるように，すべてを網羅する形でひとつのデザインをつくっていく．

60

43


インタラクションデザインをする役割の人がいないから起こっている問題がたくさんあるように思う．

44


クライアントと開発者の間でのありがちな会話

62

45


インタラクションデザインをちゃんとして決めていないから起こっている問題がたくさんあるように思う．

46


局所的な「改善」を繰り返してどんどん全体が劣化していく

67

47


インタラクションをデザインする

77

48


定義 (www.usabilityfirst.com)

49


the design of how a user communicates, or interacts, with a computer.

ユーザが，コンピュータとどうコミュニケーションをするか，コンピュータとどんな風にやりとりをするか，をデザインすること

79

50


インタラクションデザイナがすること (www.usabilityfirst.com)

51

Interaction designers focus on the flow of interaction, the dialog between person and computer, how input relates to output, stimulus-response compatibility, and feedback mechanisms.

インタラクションデザイナは，(1)インタラクションのフロー，(2)人とコンピュータとの対話，(3)入力と出力とのつながり方，(4)刺激と反応の融和性／適合性，(5)フィードバックのメカニズムを考えながらつくる

52


インタラクションをデザインした仕様書

53


(1) そのシステムに対してユーザがおこなう操作の流れとか，(2) 操作する対象がどんな風に画面に表示されるか（もしくは音声応答では何がどう聞こえるか）とか，(3) 操作した結果がどう表示されるかとか，(4) どんな状況で何に対してどういうアクションをとると何がどうなるかとか，について，＜システム全体を網羅して＞記述したものとなるべきだと考える．

83

54


似ているけれどちょっと違うプラクティス

55


静的な表現をデザイン．表現された内容は変わらない．動かない．時間的変化の要因がない．

85

グラフィックデザイン

56


情報デザイン

情報をどんな粒度でどんな順序で表現していけばよいかをデザインする．ユーザは比較的受動的な立場で情報を受け取ると考えられている．ユーザがどういう風にしたらこうなってといった，ユーザとのやりとりには重点はおかれていない．

86

57


ユニバーサルデザイン

見えにくいとか，聞こえにくいとか，手が高いところに届きにくいとか，そういった，「アベレージ」でない状況もあり得ると考えてデザインしていきましょう，という考え方や取り組み．そう考えることで，アベレージな人が使い易くなることも少なくない．

87

58


ユーザビリティデザイン

「使い易さ」を中心に考えてUIデザインをしていきましょう，という考え方や，取り組み．人間中心設計や，ユーザ中心設計といった風に，ユーザがから見た使い易さをベースとしてUIデザインを進める．「使い易い」こと以外の操作品質（たとえば使っていて楽しくなる，といったこと）についてはあまりフォーカスされていない．

88

59


「画面レイアウト」と「画面遷移」ではなくて，「ユーザの状態」と「ユーザの操作手順」で考えてみる．

60


90

「画面構成」と「画面遷移」

61


91

62


92

63


93

64


94

リストの中の一つを選ぶ

さっき見た「やつ」を選ぶ

"foo"が含まれたコードがないかな，と

ほぉ，たくさんあるなぁ

これかな，これかな，

これはどうかなぁ

ちょっと違うなぁ．もっとあるかな

これはさっきのやつとどう違うのかな

やっぱこれがいちばん欲しいのに近いなぁ

これと似たのはほかのところにないかな

これってどの結果だっけ？

"foo"とタイプする

検索結果が表示される

１個ずつ検索結果リストをブラウズしていくそのコードの検索結果のリストの箇所に戻る

コードを見る

二つのコードを比べて見る

これはいいかもなぁ．もっとあるかな

さっき見ていた検索結果のリストの箇所に戻る

「ユーザの状態」と「ユーザの操作手順」

65


95

リストの中の一つを選ぶ

さっき見た「やつ」を選ぶ

"foo"が含まれたコードがないかな，と

ほぉ，たくさんあるなぁ

これかな，これかな，

これはどうかなぁ

ちょっと違うなぁ．もっとあるかな

これはさっきのやつとどう違うのかな

やっぱこれがいちばん欲しいのに近いなぁ

これと似たのはほかのところにないかな

これってどの結果だっけ？

"foo"とタイプする

検索結果が表示される

１個ずつ検索結果リストをブラウズしていくそのコードの検索結果のリストの箇所に戻る

コードを見る

二つのコードを比べて見る

これはいいかもなぁ．もっとあるかな

さっき見ていた検索結果のリストの箇所に戻る

このレベルでの検証

66


96

必要となるスキルや能力

どんな粒度でユーザの状態を書き出していけばよいかを決める使うべき言葉やフレーズを選ぶ使うべきでない言葉やフレーズに気づくどんなフローがいいかを作り出していくこのレベルで使っている状況を想像してみる詳細なレベルまでシミュレーションしてみる

67


インタラクションデザインの事例ARTware プロジェクト

68


研究プロトタイプARTware

デザイン原則: ARTAmplifying Representational Talkback（表現からの語りかけの増幅）

98

69


ARTwareのソフトウェア開発プロセス

インタラクションデザイナとプログラマとの共創インタラクションデザイナ：スケッチ，ジェスチャプログラマ：体験用コーディング，プロトタイプ

インタラクションデザイン駆動型ソフトウェア開発

106

70


共創における役割分担

Programmer: Possibility技術的，数学的，論理的に可能なこと

Designer: Desirabilityコンセプト，望ましい機能や振る舞い

両者のコラボレーション:相談，将来の方向性の予見と共有，妥協

131

71


「デザイン」という言葉

132

72


何をつくるかどうあるべきか，を考えるのがデザインどうつくるか

73


Sciences of the Artificial [Hebert Simon] 人工物の科学

How things are （ものごとはどうなっているのか）vsHow things ought to be （ものごとはどうなっているべきか）

134

デザイン

74


「デザイン」という言葉の多義性

75


「夕べはずっとデザインしていた」といった感じの，アクティビティを指す動詞としてのデザイン

「デザインに注力した」といった感じの，そういう＜こと＞やプロセスのフェーズを指す名詞としてのデザイン

「サイズはいいけどデザインがちょっと」という感じの，モノの側面を指し示す名詞としてのデザイン

「あのデザインが良いと思う」といった感じの，デザインされたものを指す名詞としてのデザイン

136

76


アクティビティ

プロセスのフェーズ

モノの側面

デザインされたもの

137

77


アクティビティ

プロセスのフェーズ

モノの側面

デザインされたもの

138


78


as an appearanceas a structureas an action as a design[Mark Gross, 山本恭裕, ソフトウェアのデザインとデザインのためのソフトウェア, ヒューマンインタフェース学会誌, Vol.5 No.3, pp.173-178, August, 2003]

79


デザインとappearance

表面スタイルモノの外観ファッション魅力的に美しくエレガントに

140

80


デザインとstructure

構造複雑なアーティファクトの各部分の構成どのようにモノを作用させるか機能美

141

81


デザインとaction

行動デザインするプロセス何らかのアーティファクトをつくるための一連の行動を企てる

142

82


デザインとa design

モノデザインプロセスの結果としてのアーティファクト

143

83


UIの操作の流れやフローといったstructureと，表面を決める appearance との両方を，デザインaction として一連の行動を企てて実行して，結果として，良くデザインされた「インタラクティビティ」を擁するシステムをつくりたいと考えている．

144

84


デザイン vs. エンジニアリング

85


エンジニアリング「問題解決」困ったことや問題が生じて，それをなんとかしよう，と考える．

デザイン「シミュレーション」「物語／ストーリーテリング」こんなこととこんなこととがあり得て，こういう風になったときはこうして，こんな風になったときはこうして，と，先回りして考える．

146

86


現状のUIの開発の仕方をみていると，エンジニアリング的になっているように思う．

87


インタラクションのデザイン →実装 → ユーザビリティテスト → 問題点の指摘 → 改善→ ユーザビリティテスト → 問題点の指摘 → 改善→ ユーザビリティテスト → 問題点の指摘 → 改善→ ユーザビリティテスト → 問題点の指摘 → 改善→ ユーザビリティテスト → 問題点の指摘 → 改善

148

88


インタラクションのデザイン →実装 → ユーザビリティテスト → 問題点の指摘 → 改善→ ユーザビリティテスト → 問題点の指摘 → 改善→ ユーザビリティテスト → 問題点の指摘 → 改善→ ユーザビリティテスト → 問題点の指摘 → 改善→ ユーザビリティテスト → 問題点の指摘 → 改善

150

89


インタラクティビティとソフトウェア

151

90


応答速度によってすべきことは変わる

91


体験してみないとわからないこともある

92


タッチパネルの精確さ

93


158

実際の指の接地点をいかに精確にとっているか，が目指すところではない．

目指すところは，ユーザが思っているところをとっているかどうか指のどの部分がどんな風に触れていたらどの点を接地点とするか手腕の動きがどれくらい推測できるか画面上に表示されているものとどのような関係で指が触れるとそれをどう操作したと思っているのか

スタイラスじゃなくて，指だから

94


160

ユーザがしていると思っている操作

ユーザが実際にしている物理的な操作

＝ソフトウェアががんばって合わせないといけないのはこっち

95


センサーではなくユーザのおこなう動作で考える

96


ソフトウェアとして「実現」するために

163

97


ソフトウェア開発のプロセスやプラクティスの中にインタラクションのデザインがどういう風に位置づけられるのかどういうところでどういう風に取り入れられるべきだと考えているのか

98


インタラクションデザインは，ソフトウェア開発に先立って，仕様策定とともにおこなわれるのが望ましいと考えている．

機能仕様書があるように，インタラクションデザイン仕様書があると良いと思う．

165

99


たとえば，機能を追加するという場合に，どの画面のどこに足そうか，と考えるのではなくて，どの場面のどの部分でそれをすることにしようか，といった，ユーザの操作のフローのレベルで考えるべきだと思う．

166

100


ソフトウェアの開発をする人がどういうことをすべきだと考えているのかソフトウェアを開発する人はどういう人とコラボレーションすべきだと考えているのか

101


現状，ソフトウェア開発者に，インタフェースに関する多くのデシジョンが任されているように思う．そこを決めないと実装を進められないから，といった理由も少なくないと思う．それは，ソフトウェア開発者の役割ではないと思う．最も得意なところでもないと思う．ソフトウェアを開発する上では，インタラクションをデザインする役割の人が必要だと考える．

168

102


インタラクションデザイナは，開発者とクライアントの間の通訳としての役割を果たすことにもなると思う．クライアントの要望のメリットとデメリットを，システムが実現するユーザの体験や，ユーザの視点で説明することができる．

169

103


デザイン寄りの人がどういうことをすべきだと考えているのかデザイン寄りの人がどういう風にソフトウェア開発の人とコラボレーションすべきだと考えているのか

104


インタラクションデザインは，製品のコンセプトに関わる部分にもなる．先行企画やマーケティングといった，将来のための製品を考える際にもインタラクションデザインをおこなうべきだと思う．

171

105


アイコンデザインや画面の色といった，ビジュアルなところを決めていく人は，ビジュアルデザイナとして必要だと思う．インタラクションデザインとは別の作業だと思う．

172

106


アイコンの詳細までインタラクションデザイナが決める必要はないと考えるが，ピクセルレベルのサイズを考えた上で操作のフローを考える必要がある場面もある．ハードウェアスペックやセンサの精度まで踏まえてインタラクションをデザインしていく必要がある場面もある．それを見極めるスキルと経験とが育っていけばよいと思う．

173

107


システムの操作品質の向上には，システムのユーザインタフェースのみでなく，製品をとりまくさらに長いスパンでのユーザ体験を考えることも必要だと思う．

108


たとえば，CMを見て，webページを見て，パンフレットを見て，そのシステムを購入して，マニュアルを見て，コミュニティサイトで語り合って，というひとりのユーザに対して，一貫した体験を提供するようなインタラクションを提供するものとなるのが望ましいと思う．

そのためには，CMやwebページ，パンフレットといった情報媒体やマニュアルが，システムのユーザインタフェースと，用語や色を同じ使い方に，説明を同じ順番にすることなどが重要となると考える．

175

109


具体的なシナリオ

110


この箇所での問い合わせが多いのでここを良くしたい．手探りで試行錯誤でつくっている気がする．何かガイドラインみたいなものはない？他製品と比べて使いにくいと言われている．もうちょっと使い易くしたい．ヘルプデスクへの問い合わせを減らしたい．マニュアルへの苦情が多くて困っている．ユーザがマニュアルを見てくれなくて困っている．UI開発のコストを減らしたい．今度新しいバージョンを出すのでちょっとGUIを新しくしようと思う．リモコンだけ変えることになった．ボタンをどうやって減らしていけばよいか．

177

111


今までキーボード操作だったのをタッチスクリーンに変えたい．次期製品は画期的にUIを変えたいと思っている．iPhone とか iPad用のアプリとしてマルチタッチのやつを考えてるんだが．ユーザプロファイルを使った仕様分析をしようかと思っている．こういうテクノロジを開発した．これを使って何か面白いものを考えたい．まだない次世代の製品を作りたい．

178

112


179

使いにくい

ヘルプデスクへの問い合わせ

マニュアルへの苦情

ユーザ体験

ユーザプロファイル

ユースケースシナリオ

音声UI

マルチタッチ

3Dインタフェース

可視化

機能追加新規開発

ブランディング

作業効率

工数削減

ユーザイノベーション

113


それぞれのレベルやフェーズ，目的に合わせたインタラクションデザインが必要になると考えている．

114


考えるべきこと．気をつけなければいけないこと．考えを進めるためにつくるもの．考えた結果をコミュニケーションするためにつくるもの．見るべき情報．知らない方がいい情報．

181

115


インタラクションデザイン＝ Creative Knowledge Work／知的創造活動

手順に従って処理してできるようなルーチン作業でないところが大部分．

必要となる場面で必要となる状態に開発者の思考がなるような表現形態と作業の順序

プロセスを駆動するために作成するドキュメントアイディア生成時の考えの進め方成果物として生成するドキュメント

182

116


183

知識や経験，ノウハウとして育てていくようなもの用語集や問題事例など

クリエイティブにデザインを進めていくためのものアイディアやストーリー，スケッチなど

プログラマやマーケター，ユーザビリティテスターなどに，デザインしたこと／ものを伝えるためのものデザイン仕様ドキュメント

Type1知識構築と共有のための

ドキュメント

Type3コミュニケーションのためのプロジェクトのアウトプット

Type2デザインを駆動するための

ドキュメント

117


185

使いにくい



ユーザ体験



音声UI

マルチタッチ


可視化



作業効率

工数削減


118


今あるシステムのユーザインタフェースをもうちょっと良くしたい

119


これくらいの期間で．．．これくらいの影響範囲で．．．これくらいのメンバーのスキルと人数で．．．


120


どれだけの画面がどんな風に出てくるのか全部キャプチャして並べてみましょう．どんな種類の言葉が出てきているか見てみましょう．どんな種類の部品やフォント，色，レイアウトのパターンといったビジュアルな要素があるか見てみましょう．典型的なユーザの利用フローをシナリオで考えてみて，どの部分で混乱しがちかを探していきましょう．


121


スクリーンショット系列ユーザの思考のフローシステムの操作のフローテーブルの形状パターン色遣いパターンレイアウトパターン文字の色使いパターンリンク／ボタンの形状のパターン画面に対するテーブル／ボタンのレイアウトフォントの種類／サイズ人の表示方法のパターン用語の抜き出し用語の分類ユーザ／状況／立場各要素のマッチング


122



今のプロダクトではどんな機能があってというのを正確に理解する．今のプロダクトではどんな言葉が使われていてというのをすべて把握する．今想定している作業のフローがどんな感じになっていてという全体を正確に理解する．変更できるところ，変更したくても変更できないだろうと思っているところ，変更したくてもできないところ，を正確に把握する．なぜ現状がこうなっているのかの分析はあまり役に立たないように思う．むしろ引きずられてしまう弊害の方が大きいかもしれない．インタラクションデザイナが見れば自明のことも多い．現バージョンもその時点でのベストなソリューションだったはず．普通に考えると以前と変わらなくなるのは当たり前．

123


192

使いにくい



ユーザ体験



音声UI

マルチタッチ


可視化



作業効率

工数削減


124


今度，この機能を足そうと思うので，ついでにユーザインタフェースもやり直したい．

125


こういった開発部署を巻き込んで．．．これくらいのハードウェアの変更で．．．こんなマイルストンで．．．既存製品をこれくらい考慮して／考慮せずに．．．これくらいのメンバーのスキルと人数で．．．


126


システムの機能と機能実現のためにシステムが必要とする情報の種類を整理しましょう．ユーザがどういう順序でおこなうかのシーンを列挙しましょう．ユーザの操作フローをつくりましょう．全操作がちゃんとおこなえるか，検証しましょう．画面割当を考えましょう．画面内で表示する情報を考えましょう．画面内のレイアウトを考えましょう．画面内の部品として必要なものを考えましょう．


127


こういう順序でこういうドキュメントをつくっていったらいいんじゃないかな，を一緒に考えていきましょう．


128



どういう言葉を使って，どういう手順のフローを書いて，ここでこういう切り分けにしていくとあそこでこうなってを考えながら，そのレベルでユーザの利用シーンを想像できるくらいのシミュレーションをする．画面単位ではなく，ユーザにとっての操作のひと区切り，といった単位で遷移を考えていければ良いと思う．現バージョンがいちばん良いと思いがちなので，そこはフリーに考えていくことが重要．特に以前のバージョンの構築に関わったことのあるメンバーは，そのときの思考過程にひきずられがちなので，自分でそうならないような注意が必要．

129


200

使いにくい



ユーザ体験



音声UI

マルチタッチ


可視化



作業効率

工数削減


130


はやりのマルチタッチを取り入れたい．

131


こういったデバイスの候補があって．．．こういったこともできるようにしようかなと思っていて．．．これくらいのGUIの変更はしてもいいかなと思っていて．．．


132


デバイスとおこなえる操作と操作感とを整理しましょう．システムでしたいことと，GUIと，デバイスの関係を理解しましょう．どんな場面でどう使うかのシーンを列挙していきましょう．ユーザの操作フローを考えていきましょう．


133



物理的なデバイスの操作と，扱う情報の種類と，画面表示のタイプとのマッチングを考える．デバイスでなくユーザの操作を考える．ユーザの体勢感覚を考える．ユーザが置かれるであろう物理的な環境も考える．物理的な操作における直感は誤りがちなことも多い．実験やテストやプロトタイピングを豊富におこなう．「はやり」なことは，つい「ベスト」で「イノベーティブ」に見えがち，ということを自分でわかっておく．

134


207

使いにくい



ユーザ体験



音声UI

マルチタッチ


可視化



作業効率

工数削減


135


ユーザの意見を取り入れて先行開発をしたい．

136


こんな感じのことができるシステムを対象としていて．．．こういった開発部署を巻き込んで．．．これくらいのハードウェアの制約で．．．これくらいの期間で．．．このひとたちにまずはアピールしたくて．．．これくらいのメンバーのスキルと人数で．．．


137


どういう風にそのシステムを使いたいか，のシーンを考えてみましょう．それに出てくる情報の優先順位づけを考えましょう．どのようなデバイスで操作したいのかのスケッチをしてみましょうどんな画面で操作したいのかのGUIアイディアスケッチをしてみましょう．それらを組み合わせてどんなことをどんな体験のフローとしたいかを考えていきましょう．


138

Copyright(c) 2009-2010 Kumiyo Nakakoji日本経済新聞 2008年7月6日


ユーザシナリオやストーリーを使いながら，まだないモノとのインタラクションをデザインする．どういう言葉（単語，語尾，文章，．．．）の表現を使うのが良いかを真剣に考える．良くわからないときは「良くわからない」感が出るような言葉にしておく．おとぎ話やないものねだりにならないように自分で気をつける．たいがいのものは既にある．既に考えられている．まだないということにはその理由がある．既にあるものをどうバランス良く組み合わせて，まだないモノを形にしていくかが最も重要なところ．それを，ユーザの体験から考えていく．その上でどのような既存の技術が使えて，あるいはどのような技術が必要となるか，を考える．自分が欲しいか，欲しいと思う人の気持ちが理解できないと，作れない．

139


インタラクションのデザインから駆動される理想的なソフトウェア開発のプロセスとしては，次のようなことを考えている．

140


<1> コンセプトのデザイン（企画の人とかマーケティングの人とかで）をおこなう．<2> インタラクションデザイン（ちょっとソフトウェア開発の人も，グラフィックデザインの人も，できればマニュアル担当の人もはいる）を進める．<3> 操作系列のレベルで矛盾や抜けがないか検証する．<4> 次に，画面遷移のレベルで，システムの応答速度なども含めて実装可能かどうかも含めて検証する<5> これと並行して，ユーザビリティテストの人が，ボタンの押下度の実験など，ユーザテストを通して生理的，認知的要因のパラメータを決めていく．<6> デザインスペックをつくる．<7> デザインスペックを受けたソフトウェア開発者が設計したりコーディングをはじめる<8> デザインスペックを受けたグラフィックデザインチームが，UI画面のデザインのディーテールやデバイスのフォームデザインを開始する．

141


以下のような考え方をもった現場でのプラクティスが実現できればよいと考える．

142


組込機器のUIのデザインは，ビジュアルなデザイン，ロジカルなデザイン，フィジカルなデザインという三つの要因の組み合わせと考える．それぞれを徐々に形にしていきつつ，欲しいものに至ることが必要．

自分たちが欲しいと思うようなものをデザインしていく．作りたいと思うものを作っていくのは自己満足に陥りがちでよくないことが多いように思う．

必要となる場面で必要となる状態に自分たちの思考がなるような，表現形態と作業の順序を考える．

締切が近づくとそれに合わせたものを作るようになりがちである．いかに時間的プレッシャーに振り回されずに，一貫性があり，欲しいと思うものを作るか，が決め手になる．

現場の思考は，外部からの情報に否応無しに左右されてしまう．マネージメントは，その情報の流入を押さえる必要がある．

143


ユーザインタフェースには，誰でも，何かいえる．言いたいことがあったりする．．

144


クライアントエンドユーザ上司マーケティング企画会社のトップ

221

145


224

色んな人がいう言いたい事に振り回されてはいけない色んな人がいう言いたい事に対処しないといけない色んな人に言いたい事を言われないようにしないといけない色んな人がいう言いたいことを全部取り入れてはいけない．

インタラクションデザイナ

146


225

デザインを否定するエンジニアデザインを理解しない認知心理学者デザインを誤用するマーケティングのひと論理的でなく表面的なデザイナデザインの善し悪しの分からない消費者実験だけが好きなユーザビリティ専門家デザインに偶発的に反応する会社の上の方のひと

[山本恭裕氏（東京大学先端研）]

インタラクションデザイナと七人の敵

147


研究分野で頼れそうなところ．．．

226

148


227

ソフトウェア工学

知識マネジメント

ヒューマンコンピュータインタラクション

ソフトウェア開発におけるコミュニケーション，コラボレーション支援

新しいインタラクション技術の開発と応用

ユーザの知的創造作業を促すインタラクションデザイン

149


ソフトウェア工学（SE: Software Engineering）

150


1970年代から

ソフトウェア開発を工学的に支援しよう．

ツール：CVS, test generation 環境：CASE, IDE (Integrated Design Environment)開発プロセス：ウォーターフォール，スパイラル，アジャイルメソッド：オブジェクト指向，アスペクト指向，XP 組織的要因：プロジェクトマネジメント，プロセスプログラミング人的要因：プログラミングスキル，コミュニケーション課題

アーキテクチャ，サービスコンポーネント，自動プログラミング，自動テスティング，オープンソース，．．．

229

151


ヒューマンコンピュータインタラクション(HCI: Human-Computer Interaction)

152


1980年代から

人間のモデルタスクのモデルユーザビリティ：cognitive walkthrough （認知的ウォークスルー）実験手法ツールや環境のデザイン手法

認知科学，教育学，社会学，デザインなどをベースとした理論構築

人工知能やユビキタスコンピューティング／フィジカルコンピューティングなどをベースとしたテクノロジ

231

153


CHI: Human Factors in Computing Systems AVI: Advanced Visual Interfaces UIST: User Interface Systems and Technologies TEI: Tangible, Embedded, and Embodied Interaction VL-HCC: Visual Languages and Human-Centered Computing HRI: Human-Robot Interaction CSCW: Computer-Supported Cooperative Work Group: DIS: Design of Interactive Systems Ubicomp: MobileHCI: NIME: New Interfaces for Musical ExpressionUX: User eXperience

232

154


鍵となりそうな考え方・モデル・理論・データ

155


Representation and Interaction

234

156


externalization [Zhang][Miyake] 表現の選び方で問題の難しさが変わる

externalizing [Nakakoji, Yamamoto] 思考における外在化する行為そのものの重要性

visual/interaction gestalt [Arnheim][Svanes] 適切な「単位」と「粒度」

expressiveness [Hallnaes, Redstroem] 表現力

interactivity [Svanaes] インタラクションのおこないやすさ

235

157


Affection, Emotion, Feeling

236

158


persuasive computing [Foggs] システムの説得性 macrosuation/microsuation

aesthetics [Hallnaes, Redstroem] 表現の美しさはその意味的一貫性にある

affection [Norman] 気持ちのよい道具を使うとうまく仕事ができる

237

159


おわりに

238

160


tradition and transcendence

161


現状に沿った技術としてのソフトウェアシステム現状を変える技術としてのソフトウェアシステム現状を維持する技術としてのソフトウェアシステム

240

162


driving

school TV

!"#$%&'"()!"

260

163


そもそも何を，どうしたいのか？インタフェースの問題ではない．

バックエンドは共通．フロントエンドが異なる

人間（道具を使う主体者）を中心とした視点

261

164


ユーザがどうシステムとインタラクションしていくか，という，インタラクティビティをデザインしていくことで，質の高いソフトウェアシステムができると思う

165


Thank You.インタラクションデザインによるソフトウェア開発

KTL Technology Seminar (2010/02/02)

263

中小路久美代[email protected]

株式会社ＳＲＡ先端技術研究所／東京大学先端科学技術研究センター

166