The ultimate guide to

Prototypingthe best prototyping methods,tools,and processes

BOOK CLUB 2015.3.21

1

本日は宜しくお願いします。

自己紹介&他己紹介

川合 俊輔 ~2014 芝浦工業大学デザイン 工学部吉武研究室出身 2015~ 株式会社ジャストシステム UXデザイナー , WACA上級ウェブ解析士

B2B,B2C問わず ソフトウェア・アプリケーション の UXデザインを行ってます。現在、ウェブ解析からユーザビリティ評価まで定量・定性調査を活用したービスの提案・研究を行う。

CHAPTER

Introduction

0

本日の参考図書

タスクが終わった後・ユーザがどのタスクが難しいか分かる・タスク（目的）ごとに異なった評価ができる

プロトタイピングの目的を学び・考える

最適なプロトタイピングの手法・ツール・プロセスを知る

プロトタイピングツールを運営しているUX-pin が提供したプロトタイピングのガイドブックで IDEO.Google,Appleなどが実践している最適な手法・プロセスを紹介。

ビギナーの方にとっては、プロトタイピングとは何で、なぜ必要なのかプロセスや手法に合わせて説明。

専門の方には、正しくプロトタイピングの手法やツールの選択するための実践的なアドバイス（ただし、プロトタイピングツールを提供している会社というのはお忘れなく）。

読書会の目的

“The ultimate guide to Prototyping”

概要

著者紹介

・UX-pin のコンテンツストラジスト・以前は、アメリカのコンテンツマーケティングエージェントBrafton 社でコンテンツ開発、DDB社でディレクターとして働く。

Jerry Cao

・UX-pin の共同創業者・以前GRUPA Nokaut での UX/ UI デザイナーとして働いていた。・大学はソフトウェアのエンジニアリング専攻であり、デザインと心理学にも勤し

Kamil Zieba

・UX-pin の編集担当・以前はさまざまなデザインの分野やハイテク産業の会社で働いていた。

Matt Ellis

CHAPTER

A Practical Look at Prototypes

1

What is Prototyping ?

Why Prototype ?

http://www.slideshare.net/dlichaw/mobile-prototyping-25431091

Branching Exploration

Getting the right design

Incremental iterative refinement

Getting the design right

Design Prototyping

Why prototype?

Communication & collaboration ( 交流と共同 )Documentation can be misinterpreted, but experiences are shared.ドキュメントは誤解されることがあるが、体験は共有できる。

Gauge feasibility while reducing waste( 実現可能性を判断する )Wireframes, mockups, and requirement documents live in paper, not reality. Prototyping allows teams to experiment, giving them the freedom to fail cheaply while learning more. 失敗することで新しい気づきを得られる。良い悪しを見極め実現可能性を見極める。

Sell your idea( アイデアを売る )Prototypes can be great for pitching if you’ re working with skeptical clients. Experiencing the reallife website or app proves your vision more than a wordy description or mockup bogged down with notes. プロトタイプによって長ったらしい言葉ではなく、体験を共有することでビジョンを伝えられる。

Why prototype?

Test usability earlier( ユーザビリティテストを簡単に )Usertesting a prototype, you’ re able to find problems and fix them earlier in the process, saving yourself a huge hassle of dealing with them when they’ re cemented in code. プロトタイプによって早い段階でユーザビリティの課題をみつけられる。

Set your design priorities( デザインの優先順位を決める )We recommend prototyping early and often because prioritizing interaction design will keep you grounded in reality when you make static design decisions. The visuals must fulfill the experience, not the other way around.プロトタイピングにより、インタラクションデザインの優先度をユーザー中心の考えのもとに決めることができる。

http://www.tamingdata.com/2010/07/08/the-project-management-tree-swing-cartoon-past-and-present/

How Prototypes Improve Collaboration & Communication

Showing is always better than telling, and experience is king.

Different departments use different lingo and jargon, but a prototype shatters all barriers. 専門用語とは無関係にデザイナーと開発者のゴールや目的が共有できる。デザイナーはデザインすること、開発はコーディングをすることがゴールではない。

A prototype is a powerful weapon to bring to any presentation.Boyle’ s Law is simple but effective: never go to a meeting without a prototype. In terms of its communicative and persuasive abilities, this presentational aid often makes the difference between a “yes” or a “no.” プロトタイプはプレゼンの強力な武器になる。自分たちのコンセプトを明確に体験として伝えられる。

How Prototypes Improve Collaboration & Communication

プロトタイプを武器にするプレゼンテーション動画によってプロトタイピングし、疑似体験を作る

https://www.youtube.com/watch?v=eACpkjgJZYw

How Prototypes Add Balance to Design

Decision-making ( 意思決定 ) Important design choices concerning ergonomics, shape, function, production ‒ sometimes all at once ‒ are finalized in the prototyping phase. A working prototype will give you instant feedback so you can make an educated decision.人間工学・形・機能・・デザインを根拠に基づき客観的な意思決定することができる。

For the designer, there are three main benefits of prototyping:

Focus ( フォーカス )With concrete feedback for all senses.prototypes ground you in user reality. UX priorities become apparent when you can experience them right in front of you.すべての感覚を具体的なフィートバックで、ユーザー中心の考えを根付かせる。また、UXの優先順位を明らかにする。

Parallelism( 並行作業 )Gathering feedback, setting requirements, and brainstorming new concepts and interactions can all happen at the same time while prototyping, and when done right will complement each other プロトタイプでは、フィードバックの収集、必要条件の設定、コンセプトやインタラクションのブレインストーミングを同時に行うことができる。また , それぞれを補うことも出来る。

How Prototypes Add Balance to Design

How Prototyping Makes Usability Testing Easier

Prototyping is a way to “sketch with interactions” to create a rough model of usability, then refine and perfect.

Know the product （製品を知る）製品を知らなければ、ユーザビリティテスティングでの振る舞いや目的が不明確になってしまう。

Recruit the right testtakers ( 正しくリクルーティングする）定性で５人以上、定量で２０人が必要です（有名なNielsen の図を参照）また、ターゲットになり得るユーザーを中心にリクルーティングします。

Set up the right test ( 良いテストを設定する）予算・タイミング・プロジェクトのニーズや目的に合わせてテストを設定する。

Analyze results ( 結果の分析）データをインサイトに変えるフェーズです。なるべくすぐに行うことも重要。

How Prototyping Makes Usability Testing Easier

Why Prototyping Is Mandatory for Mobile

MobilePC

環境

場所

インプット

スクリーン

マルチタスク

概ね予測できる

座っている、リラックスしている

主にキーボードとマウス タッチデバイス、ジェスチャー

大きい

キーボード、ROM、マウス、大きな画面・・・

複数のタスクを素早く、並行

小さい

不定で変わりやすい

絶えず変わる

CHAPTER 1

We’ ve found the following to be the most compelling reasons for mobile prototyping.

Flow makes or breaks the mobile experience （フローはモバイル体験を作る）モバイル体験は幾つかのページを遷移するので、フローは優先順位として高い。

Animations make the experience fun & desirable （アニメーションは体験を楽しく魅力的なモノにする）アニメーションはマイクロインタラクションの重要な要素である。

UX mistakes are more expensive （ＵＸのミスは高くつく）プロトタイピングは長い目でみると、時間・お金を節約出来る。

Thanks!!