次の方法で共有


ユーザー インターフェイスのプロトタイプ作成

このトピックでは、ユーザー インターフェイスのプロトタイプを作成することで、設計上の欠陥を最小限に抑え、ユーザー エクスペリエンスを成功させる方法について説明します。

はじめに

場合によっては、プロジェクトが進むにつれて、小さな想定や善意ではあるが不適切な意思決定が蓄積され、作業時間が厄介なユーザー エクスペリエンスに変わる場合があります。 スマート チームは、UI プロトタイプ作成と呼ばれる手法を使用して、出荷前のミスを排除します。 ユーザビリティ調査と組み合わせることで、プロトタイプはチームを正しい方向に進めます。

プロトタイプを作成する理由

プロトタイプ作成は、アイデアに投資する前にアイデアを探索する手段です。 経験豊富な職人やエンジニアは、何かを構築する前に、作業のプロトタイプを作成します。建築家は、紙や段ボールから、または仮想現実ツールを使用してモデルを作成します。 航空エンジニアは風洞を使用します。 橋の建設者は応力モデルを作成します。 ソフトウェア設計者と Web デザイナーは、ユーザーが自分のデザインとどのように相互作用するかのモックアップを作成します。

プロトタイプを作成する最善の理由は、時間とリソースを節約です。 プロトタイプの価値は、建物の正面だけが構築されているハリウッド セットのようなファサードであるということです。 実際の製品に比べて、プロトタイプは簡単かつ安価に作成できます。 そのため、最小限の投資のために、ユーザビリティと設計上の問題が見つかり、最終的な設計とテクノロジに多額の投資が行われる前に UI が調整されます。

特定のプロジェクトのニーズを調べると、コスト削減以外のプロトタイプを作成する理由が見つかる可能性があります。 新しいインターフェイス モデルを探索することが目標ですか? 既存の設計の 1 つの部分に変更を加えますか? 新しいテクノロジを調査しますか? 開始する前に、今構築しているものの理由を明確にすることが重要です。 明確な目標を持って始めることは、直接的かつ効果的に取り組むのに役立ちます。 プロトタイプを作成する理由は、次の 3 つの基本的なカテゴリに分類されます。

  • 概念実証。

    一部のチームの中では、プロジェクトの将来の方向性に関する意見の相違もあります。 プロトタイプを使用して、アイデアや新しいアプローチにメリットや価値があることを証明できます。 プロトタイプは、アイデアが機能することを示したり、視覚的でインタラクティブな方法でその品質を表現したり、チーム メンバーが別の観点から問題について考える動機付けを行ったりするのに役立ちます。

  • 設計の探索。

    インタラクティブなソフトウェアを設計する場合、何かがどのように使用されるかを調べる唯一の方法は、モックアップを作成して操作することです。 モックアップがユーザビリティの研究に結びついている場合があり、プロトタイプの一部を構造化した方法で評価できます。 場合によっては、開発者に対して、ただ何かがどのように動作するか、またはどのように見えるかを明確に表現する方法となります。 多くの場合、設計者は、どのようなアプローチが機能するかについて理解を得るために、単に実験を行っているだけかもしれません。 チームの誰もがプロトタイプを使用して設計の問題を調べることができますが、設計者は一般的に最も熟練しています。 設計の探索は、製品で認識される特定の問題を解決するように指示する必要があります。

  • 技術的な探索。

    多くの場合、問題に対する実装アプローチを調査している開発者は、さまざまなコーディング手法を試して、適切に動作するかどうかを確認します。 COM+、ダイナミック HTML (DHTML)、Microsoft Win32、または各テクノロジ内の特定のコーディング アプローチを使用すると、トレードオフが異なります。 プロトタイプは、特定の UI 機能をサポートするために適切に機能するテクノロジの探索を表す場合があります。

これらの理由を組み合わせてプロトタイプが作成される場合があります。 チームが十分な計画を立てれば、開発者と設計者またはプロジェクト マネージャーがプロトタイプで共同作業を行う時間を割り当てることができます。 このような場合は、目標と各チーム メンバーが行う必要がある貢献を明確に定義することが非常に重要です。 誰もが目標が何であり、何が危機に置かれているか、そして潜在的な結果が何であるかを明確にする必要があります。

誰が関与していますか?

プロトタイプ作成は、プロジェクトの背景や役割に関係なく、誰でも非公式に行うことができます。 Adobe Photoshop からビットマップを取得し、Microsoft FrontPage Web サイトの作成と管理ツールにビットマップを配置し、有効なボタンやリンクを追加することで、簡単で効果的なプロトタイプを簡単に作成できます。 これらの軽量プロトタイプはここまでしかできず、複雑な相互作用には扱いにくい場合があります。

大規模なチームによる正式なプロトタイプの場合、開発者またはプロジェクト マネージャーは、多くの場合、デザイナーやユーザビリティ エンジニアと共同作業を行います。 一緒にアイデアを生成し、最適なアイデアを表すプロトタイプを構築、ラボに移動してユーザーの問題の解決にどれだけ効果的かを確認します。 時間を割くことができる場合や、技術的な専門知識が必要な場合は、開発者が関与する可能性があります。 多くの場合、デザイナーまたはプロジェクト マネージャーは、プロトタイプを構築するためのスクリプトまたはコーディングのほとんどを行います。

プロトタイプはいつ構築する必要がありますか?

プロトタイプのスコープと必要な詳細レベルに応じて、プロトタイプはプロジェクト中にいつでも構築できます。 ほとんどの場合、開発者が運用コードを記述する前に、計画と仕様の段階で、プロジェクトの早い段階で作成されます。 これは、探索の必要性が最も高く、必要な時間投資が最も有効な時期です。 プログラム マネージャーやデザイナーの代わりに開発者がプロトタイプを作成する場合、プロトタイプに投資する作業が開発スケジュールに含まれていることを確認する必要があるため、スケジュール時間がさらに重要になります。 UI リリースの計画には、いくつかのレベルのプロトタイプ作成が含まれている必要があります。

プロジェクトの後半では、小さなプロトタイプが大変な設計と技術的な問題を解決するのに役立ちます。 ダイアログ ボックスまたは Web ページの動作を簡単に HTML でモックアップすると、開発者の質問に答えたり、他のチームメイトに目的のエクスペリエンスを感じさせたりするのに役立ちます。 場合によっては、強力なプログラム マネージャーまたは設計者が Microsoft JScript 開発ソフトウェアで動作を実装し、開発者が検討する必要があるプログラミング ロジックの大部分を概算できます。

プロトタイプの作成にかかる時間は、最終的な結果の外観の範囲と精度によって大きく異なる場合があります。 非公式のプロトタイプは、1 人の人が数時間の作業を意味する可能性があります。より計画的な取り組みには、チーム全体の数週間の労力が必要になる場合があります。

フォーカスすべき点。

プロトタイプでは、必要なだけ多くの設計を構築します。 機能しないボタンや、更新されないテキストを使用しても問題ありません。 必要な相互作用を経験できる限り、残りの部分にはごまかしを使用しても問題ありません。 取り組みに慎重に焦点を当てる必要がある理由をいくつか次に示します。

  • プロトタイプを構築するコスト。

    プロトタイプの構築にかかるコストを最小限に抑える必要があります。 プロトタイプ作成の課題は、設計に関する質問に効果的に答えるために必要な最小限の投資を認識することです。 ここでは、最も多くの作業を必要とする UI の部分を明確に識別するため、ユーザビリティの調査が重要です。 ユーザビリティの調査がなくても、プロトタイプの設計を使用して、解決するユーザーの問題や改善されるタスクを明確に定義します。

  • 有効期間が制限されています。

  • プロトタイプには、明確に定義された有効期間が必要です。 最終目標はチーム会議でのプレゼンテーションですか? エグゼクティブ レビュー会議ですか? 仕様のレビューですか? ユーザビリティの研究? 設計によってユーザーの問題が解決されることを特定すること。 これらの特定の目標のニーズが満たされたら、プロトタイプを確保する必要があります。 基本的な考え方は、プロトタイプで生成されたコードまたはビットマップが取り残されることです。 製品内でコードやビジュアルが動作する場合は例外が存在する可能性がありますが、そうならないことが予測されるはずです。。

  • チームを圧倒するリスク。

    開発者やチームメイトにプロトタイプを表示するのは難しい場合があります。 驚くべきビジュアルとアニメーションを使用する、過度に複雑または精巧なプロトタイプは、人々を圧倒することができます。 どの程度まで進み、プロトタイプをどれだけ真剣に捉えるべきかを常に把握します。

スコープとは?

プロトタイプ作成作業の焦点が決まるので、次のことを検討してください。

  • 顧客ニーズ。

    ユーザーの主要な問題やニーズ (おそらくユーザビリティ エンジニアが提供したもの) を理解することから始めることで、UI デザインのどの部分が最も探索を保証するかを理解できます。

  • ユーザビリティの学習タスク。

    ユーザビリティ学習用のプロトタイプを作成する場合は、ユーザビリティ エンジニアと、調査の一部となる特定のタスクについて話し合い、それらの要素を中心に設計します。

  • チームの入力。

    プロトタイプのアイデアがまとまりつつある場合、チームの主要な開発者と話します。 妥当なもの、可能なもの、次のリリースで考慮すべき点について基本的な勘を得ます。 場合によっては、それが重要なポイントであり、チームに挑戦が必要な場合は、設計の 1 つの側面で可能であると言うことを超えて、その上に行くことを検討してください。 ただし、制限を押し付けることとチームを圧倒させることは紙一重なため、プロトタイプのすべての側面でこれを行わないでください。 チームに複数のバージョンのビジョンを示すことでチームにインスピレーションを与えたい場合は、そうしてください。 ただし、次のリリースの特定の変更を定義する必要がある場合は、それらの変更に焦点を当てます。 モジュール方式で特定の変更を呼び出し、開発者に設計を構築するためのパスを示してください。

  • 幅と奥行き。

    より大きなプロトタイプの場合、幅と深さの追加の考慮事項があります。 設計の各機能は少しだけ機能する必要がありますか、それともほぼすべての部分とオプションを使用してプロトタイプを作成するために 1 つの機能を選択する必要がありますか? 変更が難しく、捨てるのが難しい、扱いにくい大きなプロトタイプになる可能性があるため、両方を行わないでください。

柔軟なプロトタイプ

プロトタイプ作成リソースにフォーカスする方法は、スマート設計に集中することです。 1 つのプロトタイプ コードでさまざまなアイデアを実行できるようにすることで、より効果的なプロトタイプを作成できます。 5 つの異なるプロトタイプを用意する代わりに、プロトタイプの異なる属性を切り替えるオプションを持つ 1 つのプロトタイプを作成することを検討してください。

ツール バーは左側または上部に配置する必要がありますか? ホーム ページに 10 個のアイテムまたは 20 個のアイテムを表示する必要がありますか? 適切なプロトタイプには、プロトタイプの外観や動作のパラメーターを変更できる、何らかの組み込みオプション パネルがあります。 これらのオプション パネルはプロトタイプで非表示のままにして、ユーザビリティの参加者がテスト中に誤って見つけないようにします。

課題は、プロトタイプをシンプルに保つことですが、それでも十分に有用であり、チームメイトに表示でき、さまざまなオプションを示し、フィードバックを得ることができます。

ベータとプロトタイプ

ベータ リリースは完全なエンジニアリング作業であるため、プロトタイプとして適格ではありません。 ベータ版リリースの機能で重大なミスが見つかった場合、製品の最善の利益である可能性がある場合でも破棄される可能性は低いです。 開発者、テスト担当者、設計者は既に多くの時間を費やしており、悪い決定と耐えなければならないプレッシャーは非常に高くなっています。 ベータは確かにバグや欠陥を見つけるのに役立ちますが、特定の設計指示の値を制御的に調査するのにはほとんど役立つことはありません。

ツールとテクノロジ

プロトタイプの作成に使用できるさまざまなツールとテクノロジがあり、それぞれに長所と短所があります。 適切なツールまたはテクノロジを決定する前に、プロトタイプを作成する設計作業の種類とプロトタイプ作成作業の目標を検討してください。

  • Microsoft Visual Basic または C#。

    これは、Windows スタイルの UI プロトタイプを作成するための最速のテクノロジです。 Web ブラウザー オブジェクトを使用すると、HTMLUI を標準の Windows スタイルのコンポーネントと簡単に統合できます。 Microsoft Visual Studio の使用経験がある開発者が C/C++ で UI をより速く生成できる可能性は確かですが、これにより、運用コードで UI プロトタイプのコードを再利用したくなります。 間に合わせの UI プロトタイプの目標が、高品質のエンジニアリングとは大きく異なっていると認識するには、規範が必要です。 記述されているコードの種類が明確であり、チームまたはマネージャーがカード内容を理解していることを確認します。

  • Microsoft Expression Blend + SketchFlow。

    SketchFlow は、Windows Presentation Foundation (WPF) および Microsoft Silverlight デスクトップおよび Web アプリケーション用の高度なユーザー インターフェイスを設計したり、プロトタイプ作成するためのビジュアル ツールです。 図形、ボタンやリスト ボックスなどのコントロールを描画し、アプリケーションの部分をマウス クリックやその他のユーザー入力に応答させ、すべてをスタイル設定してユニークなの外観にすることで、アプリケーションを構築します。

  • Adobe Director または Adobe Flash。

    ディレクターは、設計者の間で人気のある UI プロトタイプ作成ツールです。 これは、マルチメディアや非標準の GUI デザイン、または重要なアニメーションを必要とするプロトタイプに最も役立ちます。 柔軟性が高いため、Visual Basic と比較して UI スタイルの UI では煩雑になります。 ただし、熟練したディレクター ユーザーは、Windows または Web UI を簡単に生成できます。

  • HTML.

    FrontPage やその他の HTML エディターを使用すると、簡単なプロトタイプをすばやく作成できます。 アイデアを表現するために、多くの場合、ユーザー操作のシーケンスを示すビットマップを作成し、FrontPage に配置することができます。 これらのイメージを使用して、設計とのインタラクション方法をシミュレートできます。 JScript と DHTML は別のレベルに物事を取り込み、非常に高度なロジックとインタラクションを可能にします。 HTML を使用して Web サイトのプロトタイプを作成する場合、ここでも C/C++ に関して説明した警告が適用されます。これは、高速プロトタイプ コードと実稼働品質のエンジニアリングを混同するトラップには該当しません。