プロトタイプとワークフロー

Slide 1

Slide 1 text

プロトタイプとワークフロー＠IT リッチクライアント・カンファレンス V Special Session 2009/09/30 伊原力也

Slide 2

Slide 2 text

2 本日の流れ • プロトタイプの定義 • 誰のためのプロトタイプ？ • プロトタイプの下ごしらえ • 手抜きでおいしいプロトタイプ • プロトタイプの形式 • プロトタイプ作成時のワナ

Slide 3

Slide 3 text

3 自己紹介 • 株式会社ビジネス・アーキテクツ • インフォメーションアーキテクト • マークアップデザインエンジニア

Slide 4

Slide 4 text

4 事例紹介

Slide 5

Slide 5 text

プロトタイプの定義

Slide 6

Slide 6 text

プロトタイプってなに？

Slide 7

Slide 7 text

7 プロトタイプの定義ある時点で誰かに見せて意見を収集するためのある部分では本物っぽい何か何かある部分が本物的誰かに見せる意見を収集ある時点

Slide 8

Slide 8 text

プロトタイプ作ってる？

Slide 9

Slide 9 text

9 私とプロトタイプケータイコンテンツヨスケ

Slide 10

Slide 10 text

誰のためのプロトタイプ？

Slide 11

Slide 11 text

11 誰のためのプロトタイプ？ • 制作者本人 • 制作会社のチーム内 • 発注側の担当者 • 発注会社のチーム内

Slide 12

Slide 12 text

12 VS VS 宗教論争 VS

Slide 13

Slide 13 text

13 我々はユーザーではない User • だがWebユーザーではある → 錯覚と混乱 • 皆が気に入る → 平均的ユーザーはいない

Slide 14

Slide 14 text

14 プロトタイプ＋ユーザビリティテスト User

Slide 15

Slide 15 text

15 そうは言ってもね • 時間がない • お金がない • 人がいない • 場所がない • わからない

Slide 16

Slide 16 text

16 なんとかしてみる • シナリオとタスクの作り方 • ユーザビリティテストの手法 • テスト結果のまとめと解釈 • プロトタイプの作り方推薦図書

Slide 17

Slide 17 text

17 推薦図書

Slide 18

Slide 18 text

プロトタイプの下ごしらえ

Slide 19

Slide 19 text

19 プロトタイプのコンテキスト対象時期目的プロトタイプ

Slide 20

Slide 20 text

20 ボタンのかけちがえ Wireframe Interaction Design Visual Design 1st Usability Test Release Perfect Prototype

Slide 21

Slide 21 text

21 ユーザビリティテストのためのプロトタイプ • テスト目的 – テストで何を確認したいか • テスト対象 – ヒト軸：ユーザー – モノ軸：サイト • テスト時期 – プロジェクト序盤～中盤対象時期目的プロトタイプ

Slide 22

Slide 22 text

22 テスト目的わかるか画面遷移レイアウトナビゲーションラベルコンテンツ入力項目入力形式メッセージできるか

Slide 23

Slide 23 text

23 テスト対象

Slide 24

Slide 24 text

24 テスト時期 • 目的×対象×素材＝マイルストーン調査・分析情報アーキテクチャ設計戦略 1st Usability Test 画面設計

Slide 25

Slide 25 text

手抜きでおいしいプロトタイプ今あるネタのカスタマイズで！テストしたいところだけ作る！

Slide 26

Slide 26 text

26 プロトタイプの忠実度 • 見た目≠忠実度 – 決定稿のラベルが入ったワイヤーフレーム – ラベルがダミーのデザイン済みテンプレート • 作成ツール≠忠実度 – FireworksでもPowerPointでもFlashでも、一定ラインまで同じプロトタイプが作れる • ユーザビリティテストにおける忠実度 – 画面遷移／レイアウト – ナビゲーション／ラベル – 入力項目と書式／メッセージ

Slide 27

Slide 27 text

27 今あるネタのカスタマイズで Prototype • ワイヤーフレームやデザインの流用 • リンク張るだけ／ラベル入れるだけ

Slide 28

Slide 28 text

28 水平と垂直 Proto type Proto type Proto type Proto type Proto type Proto type Proto type Proto type Proto type Proto type Lv1 Lv2 Lv3 Lv4 工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中

Slide 29

Slide 29 text

29 オズの魔法使い

Slide 30

Slide 30 text

30 オズの魔法使い

Slide 31

Slide 31 text

31 まとめ Lv1 Lv2 Lv3 Lv4 工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中工事中

Slide 32

Slide 32 text

プロトタイプの形式

Slide 33

Slide 33 text

33 紙とコンピュータ • ペーパー • ワイヤーフレーム作成ツール＋ハイパーリンク • ヴィジュアルデザイン用ツール＋イメージマップ • プロトタイプ作成特化ツール • HTML • 統合開発環境（Flash Catalyst・Expression Blend 3）

Slide 34

Slide 34 text

34 ペーパー • 紙を指でクリック、鉛筆で入力 • ブラウザ＝オズの魔法使い • ユーザーがなんだか気楽 • タスクがリアルなら適当にはならない – 被験者は自分がテストされている気持ちがある「人工的な状況であるにも関わらず、ユーザテストは現実的な結果を出す。それはユーザのタスクに対する強い集中力と、ウソ臭さの許容によるものだ。」 Jakob Nielsen

Slide 35

Slide 35 text

35 ワイヤーフレーム作成ツール＋ハイパーリンク • サクッと作れる • 使っている人が多い（PowerPoint） • ページ間にリンクが張れる – ワイヤーフレームの必要部分だけを取り出して、リンクを張るだけでプロトタイプに • 画面数が多くても比較的安定している • スクロールできない（PowerPoint） …がRIA系ならあんまり問題にならない • 変数定義や共有レイヤーなどが使える（OmniGraffle）

Slide 36

Slide 36 text

36 ヴィジュアルデザイン用ツール＋イメージマップ • 視覚表現部分の忠実度を高めるには最適 • Fireworksはプロトタイプを意識 – 複数画面を1ファイルに – 共通のレイヤー保持 – シンボル修正 → 文字保持してインスタンス反映 – ボタンのリンクが有効なまま複数画面を1つのPDFに – マウスオーバーなど保持してDWに吐き出し • 1ファイルに持てる画面数が少ない

Slide 37

Slide 37 text

37 プロトタイプ作成特化ツール • Axure RP／Denim／Pencil／Balsamiq Mockups fluidIA／GUI Design Studio／Protonotes etc... • ワイヤーフレーム用ツールとヴィジュアルデザイン用ツールの間のどこかに収まる – 軽くてシンプルだとそんなに便利じゃない – 便利だと画面数が制限されてる • むしろ良いのがあったら教えてください

Slide 38

Slide 38 text

38 HTML • 静的ページサイトのプロトタイプとしては優秀 – 高忠実度 – CMSやツールでナビ／ページの一括生成 – 初動は遅い • 「プロトタイプありき」の設計や実装でカバー？ ※Adobe MAXでプレゼンしたのでお尋ねください • RIA系（AJAX）の場合、部分適用がよい – IxEditでインタラクションのプロトタイプ作成 • JQueryベース • ブラウザ上からマウスで作成可能

Slide 39

Slide 39 text

39 統合開発環境 • Expression Blend 3 – SketchFlow に期待大 • Flash Catalyst – プロジェクト序盤～中盤のラピッドプロトタイピングに向いているか？ – インタラクションデザインツールとして、中盤以降のワークフロー改善効果に期待 • Flash単体で考えた場合 – 忠実度と実装コスト共に高い – AJAX系と同じく、部分適用がよい

Slide 40

Slide 40 text

プロトタイプ作成時のワナ

Slide 41

Slide 41 text

41 ハイブリッドでも可 • 水平と垂直で形式を使い分ける – 例：水平はペーパー、垂直はPowerPointで条件分岐 – 例：水平はPowerPoint、垂直はFlash、 PowerPointにFlashを張り込む • PowerPoint で Macromedia Flash アニメーションを再生する http://office.microsoft.com/ja-jp/powerpoint/HA010348071041.aspx • Using Flash movies in PowerPoint http://kb2.adobe.com/cps/142/tn_14235.html ＋

Slide 42

Slide 42 text

42 ひとりで作らない • ひとりでプロトタイプを作ると – テスト後に立ち直れないかも – 上手くいかなかった部分で犯人探しが始まる • みんなの意見を聞きながら作ろう – そもそもUIはいろんな視点の集合体であるべき – 主担当者は決めつつも、議論を重ねて作ろう ※プロトタイプを作った人はテスト進行をやらないほうが良い説もあり

Slide 43

Slide 43 text

43 作ってテストしたら捨てる • 高忠実度プロトタイプは捨てるのがおしい • しかしそれはあくまでテスト用 • 潔く捨てましょう • テスト目的ではないプロトタイプはまた別 – 使い回しを意識しすぎると最終成果物が縛られる – コンペ時のプロトタイプを育てるのは避ける – 中盤までのプロトタイプは一律捨てると思っていたほうがよいかも

Slide 44

Slide 44 text

まとめ

Slide 45

Slide 45 text

45 テスト対象テスト時期テスト目的プロトタイプ何かある部分が本物的誰かに見せる意見を収集ある時点わかるかできるか User 工事中工事中

Slide 46

Slide 46 text

46 いかがでしたか？ • 今日話せなかったこと – ダメなテストの例 – ユーザビリティテスト被験者＝真のユーザー？ – UIを変えないほうがいい場合 – UCD vs 才能のデザイン • またどこかで

Slide 47

Slide 47 text

ありがとうございました