Design Better And Faster With Rapid Prototyping

ストーリーを見つける

プロトタイプ化する領域を特定したら、それらを 1 つまたは複数のシナリオに織り込み、プロトタイプがシミュレーションするユーザー体験を通して、一貫したパスを識別します。 靴を販売する Web サイトの場合、1 つのシナリオは、「退屈なジョー」が 6 か月前に買ったのとまったく同じナイキのランニング シューズを購入することであり、別のシナリオは、「探検するサム」がサイズ 10 を見て回り、興味のあるオックスフォードとローファーのペアを見つけることである可能性があります。 良いアプローチは、プロトタイピングを広範かつ広範囲に開始し、その後、ソリューションの選択された領域に深く潜り込むことです。 Webサイトの場合、最初の反復でトップページと主要セクションのランディングページを構築し（水平プロトタイプと呼ばれることもある）、その後そのフレームワークをレビューして修正することになる。 メディア ダウンロード Web サイトの場合、これは、ユーザーがビデオを検索してダウンロードするために取る手順、またはオンライン ライブラリでメディアを管理する方法であるかもしれません。 忠実度には複数の次元があり、プロトタイプはこれらの次元のそれぞれのスペクトル上のどこにでも位置することができます。 デザインプロセスの段階とプロトタイプの目標に応じて、以下のそれぞれについて適切な忠実度を選択します。

• ビジュアルフィデリティ（スケッチ↔スタイル）見た目と感触はプロトタイプの忠実度の最も顕著な次元で、適切に選択しなければ、プロトタイプレビューを横取りしてしまうことがあります。 あまりに早くハイファイになりすぎると、ユーザーはビジュアルデザインに注目するようになり、初期段階では適切ではありません。 例えば、1024ピクセルの画面の5分の1を左のナビゲーションエリアが占めなければならない場合、プロトタイプの中で比例して描かれていれば、幅が正確に204ピクセルである必要はないのです。 プロトタイピングがデザイン・サイクルを通じて進むにつれ、スタイル、色、ブランド、グラフィックの要素を導入することによって、必要に応じて視覚的忠実度を高めてください。
• 機能的忠実度（静的↔インタラクティブ） プロトタイプは、ソリューションがどう機能するのか（静的）、あるいは完全に機能してユーザーの入力に応答する（インタラクティブ）ように見えるか。 この次元はユーザーの気を散らすことは少ないですが、その後の反復で双方向性を追加すると、機能的な忠実度が増し、プロトタイプをユーザビリティ テストやトレーニング、コミュニケーションに使用できるようになります。
• コンテンツの忠実度 (lorem ipsum ↔ real content) ユーザーをしばしば気を散らすもう一つの次元は、プロトタイプに表示されているコンテンツです。 プロトタイプの初期段階では、lorem ipsumのような不規則な線やダミーテキストは避けるのが有効です。

The Prototyping Spectrum

Low Fidelity

プロトタイピングを始める最も早い方法は、最も簡単でもあります：紙にペン（cil）を当てることです。 紙にスケッチすることは、特別なツールや経験を必要としない、誰にでもできる低忠実度のアプローチです。 デザインサイクルの初期によく使われるスケッチは、デザインアプローチやコンセプトのラフなモックアップを作成し、ユーザーからフィードバックを得るための素早い方法です。 ペーパー プロトタイピングは、ブレーンストーミングや概念化の際に理想的で、スケッチブックを持って一人部屋で行うことも、フリップ チャート（またはホワイトボード）とマーカーを使ってグループで行うこともできます。 これにより、ユーザーはシステムがどのように見えるかではなく、どのように使用するかに集中することになり、設計者はユーザーからのフィードバックに基づく変更に対してよりオープンになります。 Visio や Omnigraffle などのコンピューター ベースのツールを使ってプロトタイプを作成するようになると、ほとんどの面で忠実度が高まり、中程度の忠実度のプロトタイプができあがります。 これらのツールで作成されたワイヤーフレーム、タスクフロー、およびシナリオは、より多くの時間と労力を要しますが、より正式で洗練されたものに見えます。 ブランディング、カラー、スタイルなどの視覚的な要素を取り入れることはできますが、プロトタイパーはしばしばそれらから離れ、代わりにアプリケーションの動作を示すことに焦点を当てます。 ページやスクリーンをリンクさせることでインタラクティブ性をシミュレートすることができますが、ここでの機能的な忠実度はせいぜい中程度です。 これらのプロトタイプは、ユーザーのニーズが満たされているかどうか、ユーザー体験が最適かどうかを判断するのに最も適しています。

中程度の忠実度のプロトタイプを意図的に中程度の忠実度のプロトタイプのように見えないようにする理由は 2 つあります：

• 最初の理由は、Balsamiq または大ざっぱな Visio ステンシルを使用してプロトタイプを低忠実に見せることにより、ユーザーはそれを磨き上げられ完成したものではなくドラフトまたは作業中のものとして見なければならないからです。
• もう 1 つは、プロトタイプに高い視覚的忠実度を与えることにより（たとえば、Photoshop で行われる包括的なレイアウトで）、ユーザーが色、フォント、レイアウト、ロゴ、イメージなどの視覚デザインとルック アンド フィールに集中できるようにすることです。 選択したツールに習熟するにつれ、より速くなります。
  

  高忠実度

  高忠実度のプロトタイプは最もリアルで、しばしば最終製品と間違われますが、通常は時間を要します。 数年前までは、高忠実度のプロトタイプを作成するには、プログラミング言語を使って実際にコーディングするしかなく、デザイナーと開発者が一緒に作業する必要があることがよくありました。 しかし最近では、アプリケーションシミュレーションツールにより、技術者でないユーザーでもUIウィジェットをドラッグ＆ドロップするだけで、ビジネスロジックやデータベースとのインタラクションまで、最終製品の機能をシミュレートした忠実度の高いプロトタイプを作成することができます。 Axure と iRise は、忠実度の高いプロトタイプを作成するために使用できるアプリケーションシミュレーションツールの一例です。 これらのプロトタイプのほとんどは、使用可能なコードに変換することはできませんが、開発者のための優れたリファレンスとして機能します。 これらは、ユーザビリティ・テストの実施やユーザーのトレーニングにも役立ちます。

  

  高忠実度プロトタイピングは、関係する対話性と忠実度のレベルを考慮すると比較的迅速であり、ドラッグ アンド ドロップ シミュレーション ツールを使用することによって加速することができます。 さらに、これらのツールの中には、ユーザー フィードバックの収集や要件の文書化を促進し、設計プロセスをさらに加速するものがあります。 新しいプログラミング言語を学ぶ必要はありませんが、これらのツールには学習曲線があります。

  Selecting a Fidelity Level

  Prototype Fidelity の選択において、正しいアプローチは1つではありません。

  製薬業界のある特定のクライアントとの仕事では、ホワイトボードから、機能およびコンテンツの忠実度は高いが視覚的忠実度が低いインタラクティブ プロトタイプに移行しました。

  別のクライアント（小売業）では、私たちのインタラクティブなプロトタイプは、高い視覚的・機能的忠実度を備えていなければなりませんでした。 コンテンツの忠実度は、彼らがコンテンツを再利用し、すでにそれに精通していたため、重要ではありませんでした。 なぜなら、これは SharePoint の最初の実装であり、ポータルを「非 SharePoint 的」に見せたいと考えていたからです。 Dan Harrelson は、Adaptive Path ブログで人気のあるプロトタイピング ツールのリストをまとめました。

  各ツールには独自の機能セットと強みがあります。 自分のニーズと担当するプロジェクトの要件に基づいて、どのツールが最も適切であるかを評価します。

  ツールを評価する際に考慮すべき質問は以下のとおりです:

  ツールの習得と使用はどのくらい簡単か。

  デスクトップおよびモバイル アプリケーションと同様に、Web、パッケージおよびカスタム ソフトウェア アプリケーションのプロトタイプをサポートする柔軟性はあるか。

• その場で変更を加えたり、フィードバックを取り入れたりするのは簡単ですか。
• 複数の人が同時に作業できるなど、コラボレーション機能はありますか。
• ライセンス条件とコストは？

すべきこととしてはいけないこと

始めるにあたって、効果的なラピッド プロトタイピングについて覚えておくべき点をいくつか挙げておきます。

Do…

• ラピッドプロトタイピング中にユーザー、ビジネス、IT関係者と協調して作業すること。
• 目的、忠実度、範囲、および期間に影響を与えるものを含め、プロセスに対する期待を設定することにより、「プロトタイプクリープ」を回避する。
• インタラクティブな高忠実度プロトタイプおよびシミュレーションを作成する場合、ユーザーが最終製品に即座の応答時間を期待しないように、現実的な遅延 (たとえば、画面の更新やトランザクションのステップを通過するときなど) を組み入れます。 コンピュータベースのプロトタイピングでは、これは、将来のプロジェクトのために再利用可能なテンプレート、ステンシル、パターン、ウィジェットを保存することを意味します。
• 最も重要なことは、すべてのプロトタイプ レビュー セッションで、これは実際のソリューションではなく、単なる試作品、モックアップであるという免責事項で開始することです。 これは、これが進行中の作業であることをユーザーに思い出させ、フィードバックを促し、高忠実度のプロトタイプの場合、ユーザーがそれを実際のソリューションと誤解するのを防ぎます。 疑わしい場合は、開始する前に開発者に確認してください。
• プロトタイプのレビューで出てきたすべての変更または要求を新しい要件と見なさないでください。 ラピッドプロトタイピングは、見逃していた要件を捕らえるのに役立ちますが、これらの新しい要件は慎重に評価する必要があります。
• フィードバックのための明確なガイドラインなしにプロトタイプ レビュー セッションを開始しないでください。 求めているフィードバックの種類を非常に具体的にしてください。 (ヘッダーの青が気に入らない」、「代わりにこのフォントを使用できないか」、「これをもっと大きく、太く、赤く、点滅させることができないか」などです。 ほとんどの場合、ラピッドプロトタイピングは100％完璧である必要はなく、全員に共通の理解を与えるのに十分であればよいのです。 ほとんどの場合、その必要はありません。

その他のリソース

• スケッチを始めるための後押しが必要な場合は、Dan Roam の著書『The Back of the Napkin』を試してみてください。
• スケッチボードは、コンセプトを検討し、洗練するためのテクニックです。
• 紙のスケッチを高忠実度に見せたいですか? ウェブ、iPad、および iPhone 用のステンシルをお試しください。
• Sketching and Prototyping Tools for iPhone Apps
• Pencil アドオンにより、Firefox で簡単にスケッチとプロトタイプが作成できます。
• Free Printable Sketching, Wireframing and Note-Taking PDF Templates
• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

(al)