熟練デザイナーの経験に学ぶ、実際に役立つプロトタイプの使い方
エクスペリエンスデザインの基礎知識
結局のところ、デザインにおける実践は、やるかやらないかです。プロトタイプを使うデザイナーは、使い勝手を目の前で披露する機会を持ち、言葉による説明では伝えられないギャップを埋めることができます。
「もし、一枚の絵が千の言葉に匹敵するなら、一つのプロトタイプは1万の言葉も超えるでしょう」と、プロジェクト管理ツールPurpleの創設者であるクリス・ギャレッロは言います。「プロトタイプは、それを見た人に、言語での説明では通常起きないような反応、すなわち感情的な反応を促します」
アドビでも、プロトタイプが新しいアイデアを促進しています。Adobe XD製品マネージャーのデミアン・ボルバは、Mediumに次のように書きました。「私達がプロトタイプをつくる目的は、学び、競合するアイデアを解決し、会話のきっかけをつくり、開発プロセスを管理することです。プロトタイプは、チーム内の共通認識を作り、協業し、様々な案や障害に取り組むための助けになります。これは、実際に試用できて、触発される何かをつくり上げたとき、初めて可能になることです」
しかし、集めた情報とアイデアを伝えるための、プロトタイプの最適な使い方を学ぼうとすれば、たとえ経験豊富なデザイナーでも助けが欲しい場面はあるでしょう。ちょうど全ての製品やユーザーがそうであるように、全てのプロトタイプには、新規の箇所や異なる面があるものです。そこで、デザインプロセスを改善し、ビジョンを作り上げ、必要なアイデアを関係者に伝えるための手段（プロトタイプ）について、業界の専門家達が声を大にして言っていることを聞いてみましょう。
優れたプロトタイプは、展望と道のりを示す
アドビWebチームのUX専門家ベン・ジョーダンと彼のチームは、アニメーション付きのロングスクロールのページを関係者に説明しなければなりませんでした。彼らはスマートフォンの中にプロトタイプを作り上げたことで、様々なコンテンツの概要や大まかなページ遷移だけでなく、レスポンシブデザインの振舞いや、モバイル画面用の仕様も示すことができました。それは実際に違いを生みだしたそうです。
「ページ間に複数の遷移をつくるとき、ページ同士の関連や、トランジションの動作を伝える必要がありますが、その点、プロトタイプは静的なカンプよりもずっと役に立ちます。それだけでなく、リンクやボタン、マウスオーバー時の挙動などのインタラクションも、簡単に伝えられます」とジョーダンは言います。
関係者からの反応については以下のように語っています。「彼らは、モバイル上で動作する要素をその場で見て、実際に操作し、アニメーションの動きを確認できました。それはコミュニケーションにとても効果がありました」
ユーザーの感情へと導く共感図
UXデザイナーで指導者でもあるポール・ボーグは次のように書いています。「ユーザー体験の専門家として、我々は2つの大きな課題に直面します。まず、チームの仲間にユーザーのニーズについて考えさせること、そして、彼らがそれを忘れないようにすることです」
何が欲しいか？だけでなく、より重要な、なぜ欲しいのか？という問いの回答を引き出すためには、プロトタイプの制作前、制作中、そして制作後の各段階で、ユーザーに焦点を合わせます。答の鍵となるのは、正しい質問をし、ユーザーが必要とするもの、切望するもの、恐れるもの、日々行うこと、を理解することです。その際、作業のガイドとなって、ユーザーの行為の背景にある感情を理解するのに役に立つのが共感図です。
ボーグは、状況を理解するツールとして共感図を使い始めました。ある状況下で、ユーザーが何を見て、聞いて、考えて、感じているか、それから、何が彼らの恐れ、不満、希望なのかを調査しました。その結果と格闘するにつれて、ボーグは、自身の目的のためには質問が一般的過ぎたことを理解しました。そして、ある時点から、より詳細な質問を尋ねるよう、やり方を修正しました。プロトタイプを使って達成しようとしている具体的なタスクについて、困難な点、達成したいこと、頭の中で思ったことを聞いたのです。彼が発見したのは、質問が明確になるほど、ユーザーが答えやすくなるということでした。質問が曖昧だと、正しい言葉で答えるための根拠が見つかりにくく、会話が混乱するのです。
また、ボーグは、情報が継続して保持されなければ、共感図は時間の無駄だということにも気付きました。調査への参加者がユーザーについての理解を深められたことは確認できても、得られた情報を後の段階に継続して持ち込めないと、長期的には影響が無かったのです。常にユーザーのことを忘れないようにするために、ボーグは、ユーザーへの質問や見解が目に見えるよう、ポスターにして掲げました。
このようにして、共感図から始めてそれを後のプロセスにも引き継ぐことで、プロトタイプに正しい質問と回答が反映され、デザイナーがユーザーを常に意識しながら働けるようになります。ユーザーの必要性や制限を、それがアクセシビリティ上の困難さであれ、Wi-Fi接続の不安定さであれ、いつも認識していれば、役に立たないものや複雑すぎるものをつくらずに済むでしょう。また、こうした全ての情報は、デザイナーではない関係者によいデザインを伝えて説得する際にも有効です。
忠実度の低いプロトタイプをばかにしない
プロトタイプは、手書きのスケッチや、アプリで描いたデジタルの絵から、HTMLで作成したものまで、様々な形をとって実現できます。したがって、機会があるごと必要なだけモデルを構築しない理由はありません。トライ＆エラーの過程の採用です。
もし、ユーザーや関係者を早い段階から巻き込むことが目的なら、見た目が単純なペーパープロトタイプでも、デザインや開発に取り組に始める前に、アイデアを行き渡らせてくれるでしょう。技術に縛られない簡潔さは、知識がない人と働く際には利点になります。
ギャレッロには、粗いプロトタイプが、チームの次の作業を明確にするのに役立った経験があります。「Kitten Cannon VRをデザインしていたとき、実際に、長い枕を偽のキャノンに見立て、フットボールを子猫の代わりにしました。それはずいぶん大雑把なプロトタイプでしたが、でもプロトタイプでした。物理的にキャノンを回して傾ける場面を演じられたことで、何をつくろうとしているのか、アイデアを引き出す役に立ったのです」
一方、ジョーダンの体験では、早い段階で、ごく粗い状態のロングスクロールのプロトタイプを見せたことが、後の工程の作業を楽にしたそうです。「構想が目に見えることで、説得が容易になったことに加えて、早い段階での変更が容易になりました。変更が後になるほど、手戻りが発生して変更コストが高くつきます。（一般論としては）プロトタイプは粗い状態に保ち、ただし最終成果物にできるだけ近い体裁にするのが良いと思います。それは、伝えるべき感覚をもたらし、次の作業について会話を始めるのに役立ちます」
次の作業は全く異なるものかもしれません、とUIデザイナーのオレ・リーはprototyprに書いています。「UIデザインの最も一般的な落とし穴は、最初の案が気に入ってしまい、デザインの早い段階で十分に他の選択肢やコンセプトを追求しないことです。おそらく、こうした状況が起きている理由の一つは、まだ早すぎる段階で更に作り込みたいという気持ちになってしまうことです」
キャスリン・マッケルロイも、同様のアドバイスを書いています。彼女の著書のPrototyping for Designersには次のような記述があります。「最初のアイデアに拘るのではなく、考えられる限り多くの状態を試すべきです。アイデアが洗練されるにつれて、プロトタイプの数が減ることに気がつくでしょう。どの程度作り込むべきかについては、確かめたい仮定に応じた適切な精度を、柔軟に判断することが必要です」
General Assemblyの教員で著者でもあるトッド・ザキ・ウォーフェルも、本物らしく見えることはあまり気にかけていません。彼はPrototyping: A Practitioner’s Guideに次のように書いています。「プロトタイプの本物らしさは状況次第です。必要な忠実度を決める要因は、プロトタイプを試す相手と共に達成したい目的の役に立つかどうかです」
このウォーフェルの信条は、本物らしさに関わる心配から、ユーザーへと焦点を戻します。また、デザイナーやユーザーの目的、そして現在と未来の要求および必要性を確認するための正しい質問をする助けになります。こうした質問は、必要な手順や段階をはっきりさせ、次の発見に導き、成果物の向かう先を変えるでしょう。
ユーザーを理解し、デザインをチームに伝える最良の方法は、プロトタイプでアイデアを目で見て触れられる形にして、調査し検証することです。同時に、新しい選択肢や発見も得ることができるでしょう。
Adobe XDを使おう
Adobe XDは、デジタルプロトタイプの次の波を起こす用意ができています。オンラインやアプリ内でリアルタイムにプロトタイプを共有し、更に、Creative Cloudを経由してフィードバックを共有することで、プロトタイプ作業のスピードが大きく加速します。滑らかに統合されたワークフローにより削減できた時間は、プロトタイプの最も重要な作業である制作にあてることができます。
Adobe XDを使えば、これまでより少ない時間と労力で、プロトタイプの最適な活用が可能になります。
この記事はWhere a Prototype Can Really Take You（著者:Adam Morga）の抄訳です