プロトタイプを使用してより速くより良い開発を行います

「100回聞くよりも一度見た方がいい」という古い格言は、開発者がインターフェイスのプロトタイプを提供できることを非常に正確に説明しています。ビジュアルプレゼンテーションは、プロジェクト設計と機能開発の問題をより明確に説明します。 ユーザーインターフェイス設計の反復アプローチでは、システムアウトライン（Webサイトまたはアプリケーション）の作成プロセスでの迅速な設計と、顧客代表、利害関係者、開発者、およびデザイナーの広範なグループによる承認を使用します。 このアプローチを順守すれば、フィードバックを早期に（ほとんどの場合、議論の過程で）得ることができます。これにより、最終製品の設計の品質が大幅に向上し、開発プロセスの変更の必要性が減少します。



「プロトタイプ」の概念は非常に広範です-紙にスケッチを作成することから、製品の外観と機能を確認できるインタラクティブなレイアウトまで。 ラピッドプロトタイピングを成功させるための鍵は、迅速なフィードバックベースの評価と柔軟なプロトタイプアプローチです。 ラピッドプロトタイピングにより、ワーキンググループはいくつかのアイデアやアプローチを試すことができ、言葉から視覚的なイメージに移行できるため、プロジェクトの議論が簡素化されます。本当に速い設計。

クイックプロトタイププロセス

ラピッドプロトタイププロセスには、3段階のワークフローの一部として複数の反復が含まれます。



作成

インターフェース設計の分野の標準と最も成功したユーザビリティ技術に基づいて、顧客の言葉をスケッチに翻訳します。



格付け

プロトタイプを顧客に見せ、それが彼らのニーズと期待をどのように満たしているかを見つけます。



改善

フィードバックに基づいて、プロトタイプの改善または修正が必要な領域を特定します。



プロトタイプは、原則として、メインゾーンのみが存在する単純なスケッチから始まりますが、複数回の反復の後、開発から生じる製品に可能な限り近い、はるかに複雑で詳細になります。 このプロセスの速度は非常に重要です-反復間の時間は最小限である必要があります-プロトタイプの複雑さに応じて、オンザフライでの変更から数日のサイクルに変更します。

用語を定義する

「プロトタイプ」という言葉は、多くの場合、アプリケーションまたはWebサイトの完全に機能するバージョンとして認識されます。 高速プロトタイプは、完全に機能する製品を取得するようには設計されていません-顧客や開発者がアイデアを視覚化し、最終製品のユーザーインターフェイスを可能な限り慎重に作成できるようにします。 これを念頭に置いて、プロトタイプの作成を進める前に考慮する必要がある主要なニュアンスに進むことができます。

何を設計する必要がありますか？

プロトタイピングの適切な候補には、複雑な相互作用、新しい機能、ワークフロー、テクノロジー、またはデザインの変更が含まれます。 たとえば、検索結果のデザインは、情報を検索するプロセスへのアプローチを大幅に変更する場合、たとえば、検索ページを離れることなく結果をプレビューする機能を導入する場合に役立ちます。

プロトタイプはいくつ必要ですか？

目安として、80％の時間で使用される機能の20％、つまり、最も頻繁に使用される主要な機能に焦点を当てることです。 クイックデザインのタスクは、製品がどのように機能するか、または後の段階でデザインがどのように見えるかを視覚的に示すことですが、製品全体をシミュレートすることではないことを忘れないでください。

スクリプトを考え出す

設計するサイトを決定したら、それらを1つ以上の実際のシナリオに結合します。エンドユーザーが製品の日常作業で使用するシーケンシャルパスを考えます。 たとえば、オンラインシューズストアの場合、そのようなシナリオは、「オタクVasya」が6か月前に購入した同じスニーカーを購入し、「Curious Vasya」が自分のサイズの10番目のペアを見て自分が本当に好きなものを見つけることです。

反復を計画する

プロトタイプは通常、1回の反復で実行されるわけではありませんが、多くの場合、段階的に実行されます。 優れた設計アプローチでは、共通の概念を作成してから、特定の詳細に深く入り込む必要があります。 Webサイトの場合、これは、最初の反復（「水平プロトタイプ」と呼ばれることもあります）のメインページと内部ページのレイアウトを作成し、レイアウトの詳細と次のステップを検討することを意味します。 その後の反復は、サイトのセクションの1つに深く入り込むことがあります（「垂直プロトタイプ」）。 たとえば、メディアコンテンツを含むサイトの場合、これは、ユーザーがビデオを検索してダウンロードするために実行する手順、またはユーザーがネットワークライブラリのコンテンツを管理する方法です。

優先順位を付ける

優先順位は、プロトタイプが最終製品にどれだけ似ているかを反映する必要があります。 設計段階とプロトタイプの目標に応じて、次の3つの主要な基準に従う必要があります。



視覚的精度（スケッチデザイン）

見たり感じたりする能力はプロトタイプの最も重要な特性です。正しく設計されていないと、すべての作業が役に立たない可能性があります。 視覚的な観点から見ると、プロトタイプはあまり美しくないはずですが、比例している必要があります。 たとえば、左側のナビゲーション領域が画面の5分の1を1024ピクセル占有する場合、プロトタイプでは比例して表示されますが、正確に204ピクセルの幅であってはなりません。 設計プロセス中に直接、スタイル、色、アイデンティティ、グラフィックスの要素を導入することにより、必要に応じて視覚的精度を高めます。



機能的精度（静的インタラクティブ）

プロトタイプは、最終製品がどのように機能するか（静的プロトタイプ）のみを示していますか、それとも機能的（対話型プロトタイプ）であり、ユーザーと対話できますか？ この質問は顧客にとってそれほど重要ではありませんが、後続の反復に明確性を大幅に追加し、機能の精度を高め、プロトタイプを使用してユーザビリティをテストすることができます。



コンテンツの正確性（lorem ipsumの実際のコンテンツ）

多くの場合、ユーザーの気を散らすもう1つの重要なコンポーネントは、プロトタイプに表示されるコンテンツです。 抽象行とダミーテキスト（「lorem ipsum」など）は、設計の初期段階の複雑さを回避するのに役立ちます。 しかし、プロトタイプは絶えず改善されているため、ダミーテキストを実際のコンテンツに置き換えて、これがデザイン開発にどのように影響するかを知る必要があります。

設計範囲

低精度

設計を開始する最速の方法も最も簡単です。紙とペンから始めます。 紙にスケッチを描くことは、ほとんど誰でもできる低精度のアプローチです。 特別なツールや経験は必要ありません。 設計サイクルの初期段階で最もよく使用されるスケッチは、設計サンプルの大まかなレイアウトとおおよその製品コンセプトを作成し、顧客からフィードバックを得るための迅速な方法です。 ペーパープロトタイピングは、ブレーンストーミングセッション中に理想的であり、メモ帳で単独で、またはホワイトボードとマーカーを使用した会議中に行うことができます。







紙のプロトタイプは静的であり、通常は製品のおおよその外観のみを反映します。これにより、クライアントはシステムがどのように見えるかを考えるのではなく、システムの使用方法に集中します。 これにより、設計者は顧客のコメントに基づいて変更に対してよりオープンになります。

低精度の設計-迅速な設計。多くの調査は必要ありませんが、簡単かつ迅速に変更を加えることができます。



平均精度

この時点で、VisioやOmnigraffleなどのソフトウェアを使用して、レイアウトのモデル化と精度の向上を開始します。 フレーム、タスク、およびそれらを使用して作成されたシナリオは、より多くの時間と労力を必要としますが、その結果、きちんとした、より良いプロトタイプが得られます。 この段階では、アイデンティティ、色などの視覚要素はすでに使用できますが、設計者はしばしばそれらを避け、代わりにアプリケーション全体の動作を示すことに焦点を合わせます。 インタラクティビティはリンクを作成することで表示できますが、機能の正確さはここに残したほうが良いです。 このようなプロトタイプは、顧客のニーズが満たされているかどうか、レイアウトが使いやすさの観点から最適化されているかどうかを理解するのに最適です。







中精度のプロトタイプのように見えない中精度のプロトタイプを意図的に作成できる理由は2つあります。

-まず、プロトタイプを精度の低いモデルのように見せて、顧客がそれを洗練された完成品ではなくスケッチまたは開発中のモデルと見なすようにします。 これは、BalsamiqまたはVisioの特別なレイアウトを使用して実現できます。

-第二に、プロトタイプに高い視覚的精度（たとえば、Photoshopで作成された美しいレイアウトの形式）を与えると、クライアントは視覚デザインの品質（色、フォント、ロゴ、画像）の評価に集中することができます。

中精度のプロトタイプを作成する速度は、テンプレート、ステンシル、および典型的なグラフィック要素を使用して実現されます。



高精度

高精度のプロトタイプは最も現実的であり、最終製品と間違われることがよくあります。 数年前、高精度のプロトタイプを作成する唯一の方法は、プロトタイプを実際にプログラムすることでした。このためには、2人の専門家がプログラマとデザイナーというプロトタイプの作成に取り組む必要がありました。 幸いなことに、アプリケーションモデリングツールを使用すると、すべてのユーザー（技術に精通していないユーザーでも）がインターフェイスのグラフィックフラグメントをドラッグアンドドロップして、最終製品の機能をシミュレートする高精度のプロトタイプを作成できます。 AxureとiRiseは、高精度のプロトタイプを作成するために使用できるアプリケーションモデリングツールの良い例です。

これらのプロトタイプは、高い視覚的および機能的精度が必要な場合に必要です。 たとえば、新しいテクノロジを導入するとき（たとえば、デスクトップアプリケーションをWebアプリとして動作するように調整するとき）。 これらのプロトタイプのほとんどは、使用可能なコードに変換することはできませんが、開発者やユーザビリティのテストやユーザートレーニングに優れた参照情報を提供します。







高精度の設計は比較的高速で、妥当なレベルの対話性と精度を備えています。 さらに、これらのツールの一部は、ユーザーフィードバックの収集と要件の文書化を促進し、設計と開発プロセスをさらに加速します。 新しいプログラミング言語を習得する必要はありませんが、そのようなツールには学習が必要です。

プロトタイプの精度のレベルを選択してください

プロトタイプの精度を選択するための正しいアプローチはありません。 新製品のほとんどのプロトタイプは、まずスケッチから始めてから、システムの複雑さと精度の要件に応じて、中精度または高精度のプロトタイプに移行します。

製薬業界のクライアントの1人と協力するとき、ホワイトボードでのスケッチから、機能およびコンテンツの精度は高いが視覚的な精度がかなり低いインタラクティブなプロトタイプに移行しました。 彼らは製品の外観についてあまり気にせず、企業標準への準拠に焦点を合わせました。

今度は小売業界の別の顧客の場合、インタラクティブなプロトタイプには高い視覚的および機能的精度が必要でした。 クライアント自身が充填を行いたいと思っており、すでにそれに精通しているため、コンテンツの正確さは重要ではありませんでした。 プロジェクトの視覚的なデザインと双方向性は、SharePointの最初の実装であり、ポータルを「SharePointとは異なる」外観にしたかったため、非常に重要でした。

ツールの選択

アプローチに応じて、さまざまなツールから選択できます。 Dan Harrelsonは、Adaptive Pathブログで人気のある設計ツールのリストをまとめました。

各ツールには、独自の機能セットと独自の長所があります。 ニーズとプロジェクト要件に基づいて、最適なツールを評価および選択できます。 選択を支援するための質問を次に示します。

• プログラムの使い方を学ぶのは簡単ですか？
• ソフトウェアは、インターネット、デスクトップ、およびモバイルアプリケーションのプロトタイプを開発するのに十分な柔軟性がありますか？
• 十分な有用なステンシル、テンプレート、および要素を備えたリポジトリはありますか？
• プロトタイプを他の開発参加者と共有して意見を調べるのはどれくらい簡単ですか？ そのような情報の収集をプログラム自体で自動化することは可能ですか？
• 変更をその場で、または反復のために可能な限り迅速に行うのはどれくらい簡単ですか？
• プロジェクトで一緒に仕事をする機会はありますか？
• ソフトウェアはどのライセンスで配布され、どのくらいの費用がかかりますか？

役に立つヒント

クイックデザインを開始する前に、プロトタイプの効果的な作業に関するいくつかのポイントをお読みください。



良いアプローチ

-迅速な設計中に、クライアント、そのビジネス、およびIT部門の利害関係者と協力します。 貴重なフィードバックを提供することに加えて、最終製品を自分で使用した経験も積んでいます。

-プロトタイプの意味を誤解しないようにします-目的、精度、範囲、期間に影響するものを含め、設計プロセスに必要なものを顧客が期待することを確認します。 ラピッドプロトタイピングは製品を作成するための手段であり、製品自体を作成するものではないことを、自分自身を含む全員に思い出させてください。

-ユーザーが最終製品からの即時応答を期待しないように、インタラクティブな高精度プロトタイプを作成し、製品に現実的な遅延を実装します（たとえば、ページを更新したり、トランザクションのステップを移動したりします）。

-繰り返し使用してください！ コンピューター設計の場合、これはテンプレート、ステンシル、グラフィックフラグメントを将来のプロジェクトで使用するために保存することを意味します。

-最も重要なことは、プロトタイプの各考慮事項を、実際のソリューションではなく、単なるプロトタイプであり、レイアウトであるという警告から始めることです。 これは、これが開発プロセスであることをユーザーに思い出させます。 これによりフィードバックが促進され、高精度のプロトタイプの場合は、ユーザーがこれを決定することができなくなります。



悪いアプローチ

-製品開発中に実装できない機能や機能を設計しないでください。 疑わしい場合は、開始する前に開発者に相談してください。

-プロトタイプの議論から出てくるすべての変更やリクエストを新しい要件として行わないでください。 迅速な設計により、必要な機能を見逃すことはありませんが、新しい機能には慎重にアプローチする必要があります。 一部の機能は実装できますが、他の機能は将来のバージョンに移行する必要があります。

-フィードバックのための明確な推奨事項なしにプロトタイプのディスカッションを開始しないでください。 探しているフィードバックのタイプを明確に定義します（たとえば、「構造は論理的ですか？」、「ナビゲーションは明確で直感的ですか？」）。 そうでない場合は、「タイトルの青い色が気に入らない」、「代わりにこのフォントを使用できない」、「より大きく、より太く、赤く、ちらつく」などのコメントを用意する必要があります。

-完璧主義者にならないでください！ ほとんどの場合、ラピッドプロトタイピングは100％完全ではなく、すべての人に共通の理解を与えるのに十分であるべきです。

-すべてを設計するのではなく、プロトタイプとして本当に必要なものだけを設計します。