ペーパー in screenプロトタイピング

2013年9月14日（土）

＜アジャイルUCD研究会＞

～POPでモバイルUXプロトタイピング！～

XP祭り2013 〜 XP 〜

「ユーザビリティエンジニアリング(第２版)」

1章 ユーザ中心設計概論2章 インタビュー法3章 インタビューの実践4章 データ分析法5章 発想法6章 プロトタイプ7章 ユーザビリティ評価法8章 ユーザテスト9章 ユーザテストの準備10章 ユーザテストの実施11章 分析と再設計12章 ユーザ中心設計活動

*無料サンプル版（第2章全文）http://www.slideshare.net/barrelbook/ss‐26183115

全面広告

全面広告

「少しの想像力で、ほとんど何でもシミュレートできる」

ペーパープロトタイピングの教科書曰く「少しの想像力で、ほとんど何でもシミュレートできる」

紙を使ってインタラクション（HCI）をシミュレーションする

Paper in screenprototyping

●ペーパー・イン・スクリーン・プロトタイプ1. シナリオ（画面遷移図）作成2. 写真撮影3. 画像のトリミング4. カメラロールで（“手動”で）閲覧

「インタラクションが欲しい。。。」

ペーパー・イン・スクリーン・プロトタイプの弱点は「操作」できないこと

●インタラクティブ・プロトタイプ• HTMLイメージマップ• リンク付PDF• インタラクティブ・プレゼンテーション（Picture Linkなど）etc…

「ひと手間」加えればインタラクティブにできる

POPを使えば、インタラクティブなペーパー・イン・スクリーン・プロトタイプを手軽に作成できる

●POPの作業手順1. シナリオ（画面遷移図）作成2. プロジェクト作成3. 写真撮影／インポート4. リンク設定5. トランジション設定6. デモ実行7. シェア／フィードバックPOPではリンクに加えてトランジション（画面遷移時のアニメーション効果）が設定できる

●POPのTips デモ実行モードを終了するには、音量下げるボタンを押します。 トランジションは５種類あります。

• Fade:画面が一瞬消えます• Next:右側からスライドインします。• Back: Nextの逆です。• Rise:下側からスライドアップします。• Dismiss: Riseの逆です。

プロジェクト数は５つまでです。 Projects画面でプロジェクトのアイコン（標準ではPOPのロゴ）を

タップすると、任意の画像を設定できます。 プロジェクトは標準では「Public」です。URLを知っている人ならば

誰でもプロジェクトを閲覧できます。公開したくない場合は「Private」に変更してください。

TAP TAP

TAP TAP

TAPデモ実行例

再生ボタンを押してスタート

音量下げるボタンを押して終了

オンライン・プレビューやフィードバック機能も提供されている

●スクリーンショット・プロトタイプ1. スクリーンショット撮影2. プロジェクト作成3. インポート4. リンク設定5. トランジション設定6. デモ実行7. シェア／フィードバック

※スクリーンショットの撮り方iOS:ホームボタン＋電源ボタンAndroid4.0以降：音量下げるボタン＋電源ボタン

参考

樽本徹也 ‐ 利用品質ラボ代表

• UXリサーチャ/ユーザビリティエンジニア• 認定人間中心設計専門家• 認定スクラムプロダクトオーナー（CSPO）• NPO  人間中心設計推進機構 評議員• アジャイルUCD研究会 共同代表

◎人机交互論 ‐ユーザビリティエンジニア的HCI論http://www.usablog.jp/◎アジャイルUCD研究会 ‐リーン/アジャイルUX最新Newshttp://groups.google.com/group/agileucdja?hl=ja◎Facebook ‐樽本徹也https://www.facebook.com/tetsuya.tarumoto

UX/UCDの講演・研修 UX/UCDの社内導入支援 UX/UCDによる製品開発支援

Keep in touch!

簡単・便利なコトづくり応援します。

UX/UCDの講演・研修UX/UCDの社内導入支援UX/UCDによる製品開発支援

東京都台東区下谷1‐11‐15ソレイユ入谷4F