More Related Content
What's hot (20)
Similar to 08_良いユーザー体験のためのデザイン (20)
08_良いユーザー体験のためのデザイン
- 5. 今回のゴールは・・・ ・プロトタイプの原則を知る ・ペーパープロトタイプ（＋アプリ）でどれくらいのプ ロトタイプを作ることができるのか体感する
- 6. プロセス③企画・設計 プロトタイプ プロトタイプとは プロトタイプ ＝ 試用品 ユーザに試しに使ってもらうもの 建築模型： 設計の妥当性を検証するととともに、クライアントに見せて、さらに具体的な要望を引き出 すために用いられる。 工事を始めてから、設計ミスが明らかになったり、 クライアントが一部屋増やしてほしいと言い出したら、 費用も期間も大幅に超過してしまう・・・。
- 7. プロセス③企画・設計 プロトタイプ 反復デザインのためのプロトタイプ 「評価と改善の繰り返し」 ＝ 「反復デザイン」 ＝ UCDの中核 アイディアをなるべく早い段階からユーザに提示して、 彼らからのフィードバックを反映させ、これを繰り返しながらＵＸの質を高めていく。 そのためのプロトタイプ（試用品）。
- 8. プロセス③企画・設計 プロトタイプ 反復デザインのためのプロトタイプ ヨアヴのためのピタパンホルダー Pita holder for Yoav 片手が不自由なパラリンピック選手のヨアヴ。 １日に6つのピタパンを食べる。 Fixpertsというグループが、観察とプロトタイプを 繰り返して、最適なピタパンホルダーを完成させた。 h:p://vimeo.com/83916509
- 9. プロセス③企画・設計 プロトタイプ ローファイとハイファイ ローファイ Low-‐Fidelity ハイファイ High-‐Fidelity 大雑把 本物そっくり ・プロトタイプとは、全体を大雑把に作ることではなく、 必要最低限に絞って作ること ・プロトタイプの完成度が上がると、作る価値は下がる デザインの比較検討なら、 「見た目」の品質を本番並みに。 使い勝手の検証なら、 「対話」のシュミレーションを完全に
- 11. プロセス③企画・設計 プロトタイプ オズの魔法使い ・製品のバックエンドで動くシステムを人力 で代替する （音声入力タイプライター、モーダルを遷移で見せる） ・利用体験を人力でシミュレーションする （Food on the Table） システムを実装しなくても、シミュレーション することは可能
- 12. プロセス③企画・設計 プロトタイプ プロトタイプ制作のポイント：ダミーページ Ｔプロトタイプで、作成するページを 絞るが、 すべてのボタンにリンクを設定し、 作成しないページへのリンクは、 すべて1枚のダミーページにつなげる。 ⇒ユーザが「失敗できる」 ようにする
- 13. プロセス③企画・設計 プロトタイプ プロトタイプ制作のポイント：ハイファイとローファイ ローファイで構わない内容 ・コンテンツの質・内容 ・システムの動作に関しては、 「一見するとそう見える」程度の忠実度で ＯＫ ・既存システムの変更であれば、変更す る部分だけのプロトタイプでＯＫ ・最初は動作している既存システムを 使ってもらい、変更部分に達したら、プロ トタイプに切り替えて操作してもらう ＝「ハイブリット」 ハイファイにすべき内容 ・画面遷移（順番・数） ・画面要素の相対的な位置関係 ・リンクやボタンに表示するラベルテキス ト ・画面に表示する指示文（エラーメッセー ジ含む）の内容 ・データ入力項目と入力書式 ・操作に関係したアイコンのデザイン
- 14. プロセス③企画・設計 プロトタイプ プロトタイプ制作のポイント：みんなで制作する 開発者・制作者が完璧を目指して作りこむと、 ↓ テストで問題点が発見されると、「犯人探し」を始めてしまう プロトタイプ制作で必要なスキルは、「ユーザニーズに対する深い理解、実験を計画 できる論理性、既成概念にとらわれない自由な発想」 職種に依存する能力でもなく、一人で兼ね備えている必要もない。 プロトタイプの制作は、なるべく設計チーム全員参加で行うことにより、問題点の責任 追及ではなく、解決に向かって動ける。 （手を動かすのは開発者・制作者が「代理で」やってもＯＫ） そこの動きは議論し てないし、私の責任 じゃない ドロップダウン微妙 だね
- 15. 分析⇒設計⇒プロトタイプ プロセス③企画・設計 プロトタイプ ①分析：カスタマージャーニーマップで、ペルソナのサービス利用の動きを分析 ②設計：シナリオ作成で、ペルソナのサービス利用を想定し、UIに落としこむ ③プロトタイプ：全体的な遷移や、検証したいUIをプロトタイプに反映する。 ※どのレベルのプロトタイプが必要なのか検討する。以下、参考 h:p://www.standardinc.jp/reflecOon/arOcle/prototyping-‐for-‐app-‐design/
- 16. プロセス③企画・設計 プロトタイプ ペーパープロトタイプ h:ps://www.youtube.com/watch? v=GrV2SZuRPv0&list=PL17FBC771B783EB03
- 17. プロセス③企画・設計 プロトタイプ ペーパープロトタイプ メリット ・何よりも素早くできる。試作コストが少ない。 ・やり直しが簡単。早めに的確な失敗ができる。 ・技術に依存せずに作成できる。 ・出来上がった感じがしない。重要なことだけに集中できる。 ・細かいところまで複数の人で議論できる。 ・使いにくさ、使いやすさが体感できる。
- 18. プロセス③企画・設計 プロトタイプ ペーパープロトタイプ デメリット ・完成していないので、いろいろ想像しながら試すことになる （ユーザーテストする場合には、ユーザー側の想像力が求められる・・） ・一般的に理解が得られにくい （こんなメモ書きみたいなものでテストしてどうするの？） クオリティを上げるほど、本番に近づき、ユーザーが直観的にテストするこ とができる一方で、手間がかかる。 「何を」「誰に」テストしたいから、「どのレベルで」プロトタイプを作るのか、 決めることが必要。
- 20. プロセス③企画・設計 プロトタイプ ペーパープロトタイプの補助アプリ POP ・モバイル画面サイズのみ ・２プロジェクトまで無料 ・WEBサービス、ihoneアプリ、Andoroidアプリ、 Windowsアプリあり ・長い画面のスクロールができる （Pro:はiphoneアプリではできないよう） ・ヘッダー、フッター固定できない （Pro:はできる） ・特定の場所のみのスクロールできない （Pro:はできるらしい）
- 21. プロセス③企画・設計 プロトタイプ ペーパープロトタイプの補助アプリ Pro, ・モバイル画面サイズのみ ・１プロジェクトのみ無料 ・WEBサービス、ihoneアプリあり ・長い画面のスクロールは、WEBサービスのみ でできる？ ・ヘッダー、フッター固定できる ・特定の場所のみのスクロールできるらしい ・トランジションの設定が豊富
- 22. プロセス③企画・設計 プロトタイプ ペーパープロトタイプに便利な道具 ・紙（A4、方眼紙、クロッキー帳など） ・鉛筆、消しゴム ・黒マジックインキ（なまえペン 極細・細など。書くのを躊躇しないようにある程度太めで。） ・グレーペン（影をつけるため） ・貼ってはがせるテープ（チェックボックスの中身など） ・ポストイット（キーボードやポップアップなど） ・はさみ ・定規
- 24. 【参考URL】 ▼ハサミとペンで作る手動のソフトウェア：ペーパープロトタイピング h:p://enterprisezine.jp/iO/detail/2744 ▼美しいモバイルUXの理解と実践〜10の法則：試作・プロトタイピング編 h:p://schoo.jp/class/346/room?ref=capp ▼アプリ制作でプロトタイピングを導入する前に知っておきたいこと h:p://www.standardinc.jp/reflecOon/arOcle/prototyping-‐for-‐app-‐design/ ▼Web担が知っておきたいプロトタイプ活用講座 h:p://www.lodwork.jp/event/2012/20120925_paperprototyping/report.aspx ▼POP h:ps://popapp.in/jp ▼Pro: h:ps://pro:app.com/ja/ プロセス③企画・設計 プロトタイプ