UXデザインプロセスを完璧にする–プロトタイプデザインのガイド

単純なワイヤーフレームの作成から完全に機能するモックアップのテストまでのプロトタイピングのプロセスは、デザイナーが習得できる最も強力で強力なスキルのセットの1つです。 また、次の部門に提供するための単純な成果物として「プロトタイプを設計する」だけでなく、プロセスがスキップされる職場でも危険にさらされています。 あなたのビジネスがプロトタイピングにどれほど熱心であっても、実際のプロセスはしばしばあなたの最終製品を作ったり壊したりする可能性があります。

実際にプロトタイプを作成する方法と理由は、多くの場合謎です。 多くのデザイナーに聞いてみると、混乱した子犬のように頭を傾けます。 "どう言う意味ですか？ あなたはそれをするだけです」と彼らは言うでしょう。 そして十分に真実です：私たちは皆、プロトタイプを作成する方法を知っています。 どうやって知っているのかわからない。

これは、プロトタイプが最も価値のある成果物であることが多いことを考えると、特に重要です。 クライアントとマネージャーは、それがWebサイトであろうと物理的な製品であろうと、あなたが何をしたかを見たいと思っています。 彼らはそれを試して、さまざまな要素を調べ、ワークフローを理解したいと思っています。 彼らは「それがどのように機能するか」を見たいと思っています。

プロトタイプを作成するだけでは不十分です。 製品の初期ドラフトの作成に関連するプロセスを理解する必要があります。 この記事では、デザイナーがそれを達成するために知っておく必要のあるすべてのことについて詳しく説明します。

プロトタイプの設計-プロトタイプの目的

人間は非常に視覚的です。 実際、私たちの大脳皮質の30％は純粋に視覚に専念しています。 ですから、プロトタイプを見るとき、それについて最も重要なことはそれを見るということです！ クライアントがそれを表示し、製品に関連するすべてのプロセス、特に将来のテストの競合領域を理解できるようになると、そのプロトタイプが実現します。

では、プロトタイプとは何ですか？ プロトタイプは、インタラクティブなデザイン作業のスモーガスボードを視覚化するためのツールです。 事実上、プロトタイプ（ほぼすべての段階）は、以前に行われたすべての作業を1つの目に見える機能的な部分に統合したものです。 この視覚的表現は、製品が任意の時点で何をしているか、インタラクティブな要素が何であるか、そして製品が現実の世界でどのように機能するかを示しています。

プロトタイプ設計のさまざまな側面（スケッチの作成など）には多くのメカニズムがありますが、物事を見逃したり、間違いを犯したりするのは簡単です。

これにより、プロトタイプの作成方法に関する作業が非常に価値のあるものになります。これは、多くの点で、製品の目的がどのように実現されるかを説明しているためです。 完全ではなく、ほとんどの場合正確ではありませんが、名前が示すように、プロトタイプは最終的なものではありません。

彼らは私たちをスピードアップするために私たちをスローダウンさせます。 時間をかけてアイデアのプロトタイプを作成することで、複雑になりすぎたり、弱いアイデアを長く続けたりするなど、コストのかかるミスを回避できます。

IDEOのCEO兼社長であるTimBrown

プロトタイプを考える簡単な方法は、機能を実証するメカニズムとしてです。

何かがどのように機能するかについてのその実用的な説明には、次のような多くの価値の高い利点があります。

• 現実のものにする–プロトタイプを作成する前は、製品は完全に概念的です。 それはしばらくの間は問題ありませんが、最終的には、利害関係者とユーザーが最終的に理解し、評価するものになる必要があります。 プロトタイプは、概念から実際に移行するための最初のステップです。
• 問題を解決する–時には、解決策のない設計上の課題があります。 スキルとして、プロトタイピングは問題を視覚化し、解決策をすばやく紹介するための優れた方法です。 それが機能しない場合は、プロトタイプを破棄して再試行してください。
• 反復–プロトタイピングは段階的に行われますが、結果は同じです。つまり、アイデアを進化させることです。 スケッチからハイファイまで、新しいイテレーションごとに、テストする動作と機能が多数提供されます。 そして、より多くのデータがあれば、より速く、よりスマートに反復することができます。
• 意図しないシナリオを検出する–何かが表示されると、調査に利用できる製品の制限があります。これにより、そこにあるべきものとすべきでないものについてのより良いコンテキストも提供されます。
• ユーザビリティの問題を検出する–これは多くの設計者が住んでいる場所です。製品に何らかのプロトタイプが含まれると、ユーザビリティの課題を突然見つけて修正することが容易になります。
• プレゼンテーション–どの段階のプロトタイプもプレゼンテーションの標準です。 ページのバージョンをテストする場合でも、クライアントに製品を提示する場合でも、何らかの形のプロトタイプがそこにあるはずです。 そうでない場合は、誰かがそれがどこにあり、なぜ含まれていなかったのかを尋ねるでしょう。

プロトタイピングプロセスを開始する方法

クライアントから50ページの要件ドキュメントを受け取った後、空白のキャンバスを見るのは気が遠くなる可能性があります。 クライアントの会議、ナプキンのスケッチ、汚れたホワイトボードの写真からの整理されていない考えを確認することはめったに役に立ちません。

プロトタイプは他の多くの情報に基づいて構築されているため、紙にペンを置く前に必要な詳細を収集することが重要です。 次のチェックリストを検討し、クライアントまたはマネージャーから提供された詳細を確認してください。

1.プロジェクトの目標は何ですか？

全体像から始めます。 製品は本当のニーズを解決しますか？ そのニーズをどのように解決しますか？ 製品の有用性を理解することは、あらゆる種類の実行可能なソリューションを提供するために重要です。

2.人々は現在どのような競争力のある製品を使用していますか？

強力な競争力のある分析により、製品タイプの市場の状態と、今日のユーザーが期待するものを明確に把握できます。

3.聴衆は誰ですか？ 彼らの目標は何ですか？

人口統計とユーザーのニーズを理解することは、それらの特定のユーザータイプを提供し、それらのニーズを満たすことを目的とした製品を作成するために必要なコンテキストを提供します。

4.それはどのような種類の製品であり、それは何のために（デバイス）ですか？

非常に多くの異なるテクノロジーとソリューションがあるため、UXデザイナーは、製品がどのように使用されるか（Webアプリ、レスポンシブWebサイト、モバイルアプリなど）、どのデバイスでどのように共存するか（あるとしても）を知る必要があります。 ）。

5.従うべき視覚的な前例はありますか？

製品がすでに存在し、プロジェクトが改善または再設計のためのものである場合、製品に対する現在のユーザーの行動を考慮して、いくつかの要件が存在する可能性があります。

6.成果物は何ですか？

成果物とプロセスに関する期待を設定することは、計画とワークフローにとって重要です。 プロジェクトはそれぞれ異なりますが、成果物が明確に定義されている場合、残りのUXデザインプロセスはスムーズに進む可能性が高くなります。

プロトタイプを描く

データが利用可能で整理されたら、次のステップは描画を開始することです。 多くのデザイナーは、レイアウト、構造、さらにはビジュアルデザインの特定の要素がどこに属するかについて、それを描く前にすでに考えているでしょう。 それは問題ありませんが、最初のスケッチの目的は、利用可能なスペースを探索して、可能なこと、さらに重要なことに、不可能なことを強調することです。

鉛筆と紙、ホワイトボードとマーカーなど、選択した筆記具を集めます。 スケッチのプロセスは、作家のフリーライティングやミュージシャンの悩みの種に似ています。 事前に行ったすべての作業に基づいて、以下の部分を考慮して、感じたことを描きます。

01 | ユーザーフロー–ユーザーフローの特定に従います。 ユーザーがどのように目標を達成し、システム内でどのように相互作用するかを確認します。

02 | 情報エンティティ–各ユーザーフローには、いくつかのユーザー入力と出力が表示されます。 それらが何であるか、それらがユーザーの行動や期待にどのように関連しているか、それらがどのような相互作用に関与しているか、そしてそれらがどのように機能するかを特定します。

03 | 最初のスケッチ–誰がシステムを使用するのか、何をするのか、そして何を使用するのかを理解したら、次はその方法を確認します。 ユーザーフローをスケッチします。レイアウトを作成する必要はありません。機能を解決するだけです。

04 | 基本的な構造をスケッチする–ユーザーフローをスケッチすると、製品に最適なレイアウトをよりよく理解できるようになります。 これには、基本的なボックスまたは落書きとして表示されるコンテンツ（テキスト、写真、ビデオなど）が含まれます。 手で書いた場合、サイズに合わないため、すべての構造とコンテンツは視覚化のためだけのものであり、実際に使用するためのものではありません。

もう1つのヒントは、スケッチパッド、特別に作成された紙、またはツールを使用して、スケッチ中にワイヤーフレームをより鮮明にすることです。 これらは、問題のビューポートの基本的なレイアウトを提供し、かなり低コストであり、適切なステンシルを使用すると、スケッチがよりきれいに表示されます。 これらは、スマートフォンやWebブラウザーに正しいアスペクト比とグリッド線を提供するため、散らかった引き出しの場合に非常に役立ちます。

このプロセスは必要な限り継続できますが、ユーザーフローが完了し、そのフローを完了するプロセスが明確になったら、次のステップに進みます。 主にプロセスの創造性を維持するために、デジタルワイヤーフレームのスケッチと構築の間を行き来することをお勧めします。 より多くのフローを進めるにつれて、製品はより具体的に感じられ、スケッチから自然にシフトします。

デジタルへの移行（低忠実度から高忠実度のプロトタイプ）

前進するのに十分な完全なスケッチができたら、それらをデジタル化する時が来ました。 Adobe XD、Sketch、Framer、Flinto、またはその他の完全なものであるかどうかにかかわらず、スケッチのデジタルバージョンを作成することは、それらを形式化するための最初のステップです。 したがって、焦点は、必要な要素を創造的に追加することから、設計内の資産と構造を整理することに移ります。

プロトタイプがより実用的になり、要素がより構造化されるにつれて、製品は形になります。 デジタルプロトタイプに移行する場合、忠実度は、インタラクティブ性、ビジュアルデザイン、およびコンテンツのレベルによって決まります。 プロトタイプは、これらの領域で個別に低忠実度または高忠実度にすることができますが、hi-fiには3つすべてが最高レベルで組み込まれています。

ユーザーのニーズに対応することに関して、階層を検討してください。 各スケッチはユーザーフローとストーリーにつながり、スケッチは製品のレイアウトと構造を決定するための最初のステップです。 今日のデジタルツールは、これの多くをスピードアップできます。たとえば、すべてのページに適用されるマスター要素とページタイプのテンプレートを設定します。

新しいワイヤとイテレーションごとに、2つの主要な質問をします。このページは、より大規模なユーザーフローでの目的を説明していますか？ そして、相互作用は意味がありますか（つまり、ユーザーはアクションを完了する方法を理解しましたか）？ 私たちはこれらの質問をたくさんします。 実行すればするほど、新しいイテレーションごとにプロトタイプを最終ドラフトに近づける可能性が高くなります。

デジタルプロトタイプは、読みやすくなるだけでなく、大量に再現および反復するのが高速であるため、テストもはるかに簡単です。 ここで、InVisionやProto.ioなどのUXプロトタイピングツールがクリック可能なプロトタイプを作成するのに非常に便利です。 クリック可能になると、個々のボタンからフロー全体に至るまで、さまざまな側面の使いやすさを簡単にテストできるようになります。

クリック可能なプロトタイピングは、InVisionのようなプログラムの使いやすさのおかげで、過去数年間で特に人気がありました。 これはモバイルデバイスにとってさらに価値があり、現在ではすべての主要なプロトタイピングツールが、テストデバイス上でモバイルワイヤを直接確認またはテストするための手段を提供しています。

エンジニアリングのノウハウや、JustinmindやAxureなどのより強力なツールを使用すると、クリックするだけでなくインタラクティブな機能的なプロトタイプを作成することもできます。 ユーザーは、実際にビルドしなくても、フォームへの入力、単純または複雑なタスクの実行、使用目的のアプリケーションの実際の使用などをテストできます。 多くのToptal設計者を含む、ヒューマンコンピュータインタラクション（HCI）設計のトレーニングを受けた設計者は、機能的なプロトタイプを定期的に作成してテストします。

インタラクティブなプロトタイプは、アニメーション、アプリ内のユーザー操作、および機能的なアクションなしではテストできないことがある高レベルの機能をテストするのに最適です。

目的のあるプロトタイプ

プロトタイピングの美しさ、そして挑戦は現在進行中です。 ほとんどすべてについて同じことが言えますが、プロトタイプは目的を持って開始および終了します。 特定の画面が特定の方法で動作する必要がある理由、機能の動作方法、またはユーザーが目標到達プロセスを必要とするかどうかを知らなければ、作成されたプロトタイプは開発されません。 描画されてから、その場で作成されます。

それでも、構築されたすべてのワイヤーフレームが非常にインテリジェントに行われている場合でも、関連するすべてのユーザーストーリーを考慮し、情報アーキテクチャをマップとして使用して、質問が途中で行われる場合でも、物事を見逃す可能性があります。 それがプロトタイプ設計の課題です。クライアント、マネージャー、さらには設計者でさえ、プロトタイプが最終的なものではないことを忘れています。 これらは単なるドラフトであり、次のバージョンまでの反復です。 それはすべてUXデザインプロセスの一部です。

したがって、次のプロトタイプセットを作成するときは、少なくとも1つの非常に重要な質問をすることを忘れないでください。これにより、望ましい結果が得られますか？ そうでない場合は、新しいバージョンをドラフトする別の機会です。

•••

Toptal Designブログでさらに読む：

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法