プロトタイピングからはじめよう

basecamp NAGOYA 2012年9月21日

長谷川恭久

ハセガワヤスヒサ

長谷川恭久
@yhassy

‣ 予測がしやすい利用者環境

‣ 共有しているノウハウが多い

‣ スクリーンが大きい

‣ キーボードとマウスによるインプット

by Martino Sabia

‣ 利用環境が大幅に異なる

‣ まだ新しい分野

‣ スクリーンが小さい

‣ 指を使ったインタラクション

by Ed Yourdon

‣ 静的

‣ 線ではなく点になりがち

‣ 完成品の設計図と見られることも

‣ 見て触れることができる

‣ 問題定義や、解決への糸口

‣ 全体を見渡して考慮できる

‣ デザインプロセスのオープン化

アイデア文章カンプ/モックプロトタイプビデオ

抽象的具体的

プレゼン
紙
ツール

Flash
Flex HTML

ペーパープロトタイプの

目的

1 アイデアの共有

2 簡易ユーザビリティテスト

‣ 様々な人が参加できる

‣ 特別な機材がなくても始めることができる

‣ 専門知識を必要としない

‣ コストがかからない

‣ 作った即時に評価ができる

‣ 無駄のない資料制作につながる

‣ インタラクションが分かり難い

‣ リモートでの共有ができない

‣ ビジュアルの影響を評価できない

‣ 白紙・テンプレート紙

‣ ウィジェット・マグネット

‣ Post-it ノート

‣ 鉛筆・ペン

‣ テープ・のり

http://konigi.com/tools/graph-paper

http://www.webresourcesdepot.com/wireframe-
magnets-for-easy-prototyping-diy-kit/

http://www.raincreativelab.com/paperbrowser/

http://www.henkwijnholds.com/mbti-sketching-paper-ideation/

http://erikloehfelm.blogspot.jp/2009/05/iphone-ux-sketch-templates.html

http://www.ﬂickr.com/photos/owaters/3846053408/

http://www.creativesoutﬁtter.com/product/34/dot-grid-book

http://incompetech.com/graphpaper/

‣ 見た目ではなく全体の流れ

‣ 取捨選択・プライオリティを決める

‣ UIとコンテンツのバランス

‣ タッチとジェスチャーを活用

画像受け取り予測

タイトル欲しいものリスト

値段こんな商品

カートに入れる一緒に購入

1-Click購入製品説明

プライム購入仕様

中古品購入レビュー

中身を見るタグ

キャンペーン関連カテゴリ

‣ 最も重要なタスクは何かを検討

‣ タスクを補助する要素を残す

‣ 利用シナリオを想定

‣ 個々の見た目ではなく利用フローを考慮

‣ 最も重要なタスク

‣ タスクを補助する要素

‣ 利用シナリオ

‣ 利用フローを考慮

‣ インスピレーションの宝庫

‣ アウトプットで見つかる改善の糸口

‣ ユーザビリティテストにも挑戦

‣ 適材適所でペーパープロトタイプ

http://www.youtube.com/prototyprs

長谷川恭久

@yhassy

mail@yasuhisa.com

www.yasuhisa.com

Recommandé