ペーパー・イン・スクリーン・プロトタイピング

2,936 views
2,798 views

Published on

XP祭り2013で行った「 ペーパー in Screen プロトタイピング・ワークショップ」のスライドです。なお、関連記事は以下のURLでご覧いただけます。
◆人机交互論:ペーパー・イン・スクリーン・プロトタイピング
http://www.usablog.jp/2013/09/paper-in-screen-prototyping.html

ペーパー・イン・スクリーン・プロトタイピング

  1. 1. XP祭り2013 〜 XP 〜 2013年9月14日(土) ペーパー in screen プロトタイピング ~POPでモバイルUXプロトタイピング!~ <アジャイルUCD研究会>
  2. 2. 全面広告 「ユーザビリティ エンジニアリング(第2版)」 1章 ユーザ中心設計概論 2章 インタビュー法 3章 インタビューの実践 4章 データ分析法 5章 発想法 6章 プロトタイプ 7章 ユーザビリティ評価法 8章 ユーザテスト 9章 ユーザテストの準備 10章 ユーザテストの実施 11章 分析と再設計 12章 ユーザ中心設計活動 *無料サンプル版(第2章全文) http://www.slideshare.net/barrelbook/ss‐26183115 全面広告
  3. 3. 「少しの想像力で、 ほとんど何でも シミュレートできる」 ペーパープロトタイピングの教科書曰く 「少しの想像力で、ほとんど何でもシミュレートできる」
  4. 4. 紙を使ってインタラクション(HCI) をシミュレーションする
  5. 5. Paper in screen prototyping
  6. 6. ●ペーパー・イン・スクリーン・プロト タイプ 1. シナリオ(画面遷移図)作成 2. 写真撮影 3. 画像のトリミング 4. カメラロールで(“手動”で)閲覧
  7. 7. 「インタラクションが 欲しい。。。」 ペーパー・イン・スクリーン・プロトタイプの弱点は「操作」できないこと
  8. 8. ●インタラクティブ・プロトタイプ • HTMLイメージマップ • リンク付PDF • インタラクティブ・プレゼンテーショ ン(Picture Linkなど) etc… 「ひと手間」加えればインタラクティブにできる
  9. 9. POPを使えば、インタラクティブなペーパー・イン・ スクリーン・プロトタイプを手軽に作成できる
  10. 10. ●POPの作業手順 1. シナリオ(画面遷移図)作成 2. プロジェクト作成 3. 写真撮影/インポート 4. リンク設定 5. トランジション設定 6. デモ実行 7. シェア/フィードバック POPではリンクに加えてトランジション(画面遷移時のアニメーション効果)が設定できる
  11. 11. ●POPのTips  デモ実行モードを終了するには、音量下げるボタンを押します。  トランジションは5種類あります。 • Fade: 画面が一瞬消えます • Next: 右側からスライドインします。 • Back: Nextの逆です。 • Rise: 下側からスライドアップします。 • Dismiss: Riseの逆です。  プロジェクト数は5つまでです。  Projects画面でプロジェクトのアイコン(標準ではPOPのロゴ)を タップすると、任意の画像を設定できます。  プロジェクトは標準では「Public」です。URLを知っている人ならば 誰でもプロジェクトを閲覧できます。公開したくない場合は 「Private」に変更してください。
  12. 12. デモ実行例 TAP TAP 音量下げ るボタンを 押して終了 TAP 再生ボタン を押してス タート TAP TAP
  13. 13. オンライン・プレビューやフィードバック機能も提供されている
  14. 14. 参考 ●スクリーンショット・プロトタイプ 1. スクリーンショット撮影 2. プロジェクト作成 ※スクリーンショットの撮 り方 3. インポート iOS: ホームボタン+電源 ボタン Android4.0以降:音量下 4. リンク設定 げるボタン+電源ボタン 5. トランジション設定 6. デモ実行 7. シェア/フィードバック
  15. 15. 樽本 徹也 ‐ 利用品質ラボ代表 • • • • • UXリサーチャ/ユーザビリティエンジニア 認定 人間中心設計専門家 認定 スクラムプロダクトオーナー(CSPO) NPO  人間中心設計推進機構 評議員 アジャイルUCD研究会 共同代表  UX/UCDの講演・研修  UX/UCDの社内導入支援  UX/UCDによる製品開発支援 Keep in touch! ◎人机交互論 ‐ ユーザビリティエンジニア的HCI論 http://www.usablog.jp/ ◎アジャイルUCD研究会 ‐ リーン/アジャイルUX最新News http://groups.google.com/group/agileucdja?hl=ja ◎Facebook ‐ 樽本徹也 https://www.facebook.com/tetsuya.tarumoto
  16. 16. 簡単・便利なコトづくり応援します。  UX/UCDの講演・研修  UX/UCDの社内導入支援  UX/UCDによる製品開発支援 東京都台東区下谷1‐11‐15 ソレイユ入谷4F

×