仕事に最適なツール：プロジェクトに最適なプロトタイピングソフトウェアを選択する
公開: 2022-03-10プロトタイピングツールは、私たちデザイナーにとって重要なリソースになりました。静的なドキュメントでは表現が難しいアニメーション、トランジション、マイクロインタラクションなど、単一の画面の複数の状態をドキュメント化できます。
この傾向に注意を払う企業は、このニーズに対応するためのプロトタイピングツールの構築を開始しました。 そして今日、私たちは定期的にたくさんのツールが出現しているのを見ています。 しかし、どちらを選ぶべきですか？ さらに重要なことは、正しい質問を確実に選択するために、自分自身とチームにどのような質問をする必要があるかということです。
SmashingMagの詳細：
- モバイルプロトタイピングツールを選択する際の12の要素
- 低忠実度プロトタイピングへの懐疑論者のガイド
- レスポンシブWebデザインにSketchを使用する
- スケッチワークフローを正しくする：スケッチハンドブック
「どのツールを使用すればよいですか？」 オンラインフォーラム、デザイン交流会、ブログで最もよくある質問の1つになっています。 それは非常に熱心な議論になりました—そして設計者は特定のツールやアプリケーションについてすぐに議論する傾向があります。
真実は、 1つのサイズですべてに対応できるソリューションはないということです。 設計者は、さまざまなツールを自由に使用できるようにし、それぞれの長所と短所を理解し、特定のコンテキストに最適なワークフローをすばやく決定できるようにする必要があります。
評価プロセスにはいくつかのステップがあります。 経験豊富な専門家とチームマネージャーは、新しいプロジェクトについて説明を受け、プロトタイプがどこで使用されるかを理解するとすぐに、その仕事に適したツールをかなり迅速に選択できます。
以下では、プロジェクトに適したプロトタイピングツールを決定するための5つのステップを検討します。目標の定義から、要件とコンテキストの理解、利用可能なオプションの評価までです。 目的は、初めてその決定を行う設計者、または独自の要件と制約のあるプロジェクトに直面する設計者をガイドすることです。
プロトタイプを作成する際に手を汚す前に、なぜそれを行うのかを考える必要があります。 プロトタイプはどのような問題を解決しようとしていますか？ なぜそれがその特定の瞬間にプロジェクトに役立つと信じているのですか？
1.プロトタイピングツールが本当に必要ですか？
製品がまだ設計されている間に製品がどのように機能するかを明確に示すことができることは、プロジェクトに疑いの余地のない利点があり、設計者は可能な限り最も動的で現実的な方法で相互作用について考えることができます。 私たちは、ライブ環境の外で複製するのが難しい、鮮やかでインタラクティブなインターフェースの世界に住んでいます。インタラクティブなプロトタイプは、その体験をエミュレートするという非常に優れた仕事をします。
しかし、場合によっては、プロトタイピングツールは実際には必要ありません。 プロジェクトが初期段階にあり、コンセプトを検証するだけの場合、製品がどのように機能するかを表すのにペーパープロトタイプの方が効果的です。 ペーパープロトタイプは、ソフトウェアに時間を費やす必要をなくし（場合によっては、ソフトウェアの使用方法を学ぶ）、特定のユーザビリティの問題の検証よりも概念のテストに重点を置いた、設計の迅速で忠実度の低い反復を可能にします。 。
それ以外の場合は、専用のソフトウェアを使用してスタンドアロンのプロトタイプを作成するのではなく、最終的なプログラミング言語で製品の構築を開始するのが最善の方法です。 Webサイトを構築するとき、すぐにHTMLプロトタイプから始める人もいます。 Bootstrapなどのフレームワークは、レスポンシブWebサイトを非常に迅速に作成するのに役立ち、場合によっては、高度な技術的知識を必要としません。 HTMLプロトタイプ用に記述されたコードのタイプは、ほとんどの場合破棄されることに注意してください。これは、HTMLプロトタイプが迅速に、場合によっては非専門家によって記述されるためです。
仕事に適したソフトウェアを選択するためにエネルギーを費やす前に、インタラクティブプロトタイプが本当に最適なソリューションであるかどうか、およびそのプロジェクトの特定のニーズに最適なプロトタイプのタイプをチームと話し合ってください。
2.目的を定義する
プロトタイプの目標を定義すると、必要な忠実度と機能のレベルを検討するのに役立ちます。これにより、プロトタイピングツールの選択が直接わかります。
次のグラフは、設計段階でプロトタイプを作成する一般的な理由の概要を示しています。 これらのカテゴリは網羅的ではなく、同じプロトタイプが異なる領域に役立つ場合もありますが、フレームワークは、プロトタイプの目標に優先順位を付けるための開始点として使用できます。
次のうち、あなたの主な目的はどれですか？
- クライアントのプレゼンテーションでアイデアを販売する。 プロトタイプは、概念を実現するのに非常に役立ちます。 また、クライアントや重要な利害関係者にアイデアを売り込むための優れた販売ツールでもあります。 インタラクティブな形でアイデアを視覚化することは、彼らが「大きな夢を見る」のに役立ちます。 このような場合、プロトタイプの機能は浅くなる傾向があり、アイデアの販売に役立つコア機能とユーザーフローのみを表します。 製品の範囲をプロトタイプで完全に表現する必要はありませんが、視覚的な洗練が大きな影響を与えます。 実際のユーザー中心設計フェーズの開始時に、販売指向のプロトタイプを破棄する必要がある場合が多いことに注意してください。
- ユーザーとのエクスペリエンスをテストします。 プロトタイプをユーザーの前に置くことは、可能な限り最高のユーザーエクスペリエンスを提唱する際に、デザイナーとして私たちが行うことの重要な部分です。 コースを修正するためのフィードバックを収集するのが早ければ早いほどよいでしょう。 ユーザーテストのプロトタイプはもう少し洗練されている傾向がありますが、ペーパープロトタイプは、製品が初期段階にあるときにもうまく機能します。 プロトタイプは、テストセッション中にユーザーに割り当てるタスクの複雑さと同じくらい堅牢である必要があります。
- 内部で概念を証明するため。 プロトタイプは、概念の内部証明としてのみ使用される場合があります。アイデアがあり、それが実際に機能するか、正しく感じられるかを確認したい場合があります。 簡単なプロトタイプは、製品または機能全体の設計に時間と労力を費やす前に、複数の利害関係者と一緒にアイデアを検討するのに役立ちます。
- ロジックと実現可能性をテストします。 場合によっては、チームは開発に移行する前に、機能が実行可能かどうかを実際にテストする必要があります。 プロトタイプは、設計者と開発者の間のディスカッションで使用される生きたドキュメントとして機能するだけでなく、アイデアをテストして機能を統合するためのサンドボックス環境としても機能します。
上の図は、プロトタイプの目標を定義する上で有利なスタートを切ることができます。 ただし、忠実度のレベルはコンテキストによって異なることに注意してください。 忠実度の低いプロトタイプをユーザーやクライアントの前に置くことは、特にコンセプトに関する早期のフィードバックを探している場合は、まったく正常です。
3.要件を理解する
プロトタイプの高レベルの目標が定義されたら、ソフトウェア、ハードウェア、タイミング、リソースに関連する問題など、決定に役立つより具体的な問題を検討します。
プロジェクトの開始時に設計者が犯すよくある間違いは、チームと会い、そのプロトタイプが構築、共有、視覚化されるコンテキストについて話し合う時間をとらずに、お気に入りのプロトタイピングツールにすぐに飛び込むことです。 プロトタイプの最初のバージョンの作成に多くの時間を費やした場合、考えを変えるのは難しいでしょう。
チームと会い、以下の質問のいくつかを実行してください。 プロジェクトマネージャー、デザイナー、開発者をディスカッションに参加させます。グループ全体で、タイムライン、予算、スキルセット、技術的な互換性などの要件を考慮して、リスト内のほとんどの質問に答える必要があります。
さまざまな要素がどのように構成されているかに応じて、プロトタイプはさまざまな形をとることができます。 たとえば、手のスケッチやワイヤーフレームで逃げることができるかもしれません。 場合によっては、洗練されていない、ハッキングされたHTMLとCSSの組み合わせで十分です。 それ以外の場合は、特定のインタラクションが機能するかどうか、およびどのように機能するかを実際に理解するために、よりリッチで洗練されたプロトタイプを作成する必要があります。
範囲：プロトタイピングフローと相互作用
よくある質問：
- 一連のステップでフローをデモンストレーションしようとしていますか、それともより封じ込められた相互作用を表していますか？
- アイデアを広めるためにプロトタイプを作成する必要があるフローまたはインタラクションの最も重要な部分は何ですか？ その体験が行われる画面のサイズはどれくらいですか？
プロトタイピングツールの世界は、ユーザーフローをエミュレートできるツールと、特定のインタラクションの表現に重点を置いたツールの2つのグループに簡単に分けることができます。
製品やユーザーが製品をどのように体験するかについて話をしようとしている場合は、フローのプロトタイピングがより良いアプローチかもしれません。 その場合、InVision、Axure、Keynoteなどのツールは、効率を高め、プロトタイプを伝えようとしているストーリーに関連していると感じさせるのに非常に強力です。
独自の詳細な相互作用を表現しようとしていて、プロトタイプを利害関係者やチームメンバーにその動作を説明する具体的な方法として使用したい場合は、別のツールグループに焦点を当てることができます。 フレーマー、プリンシパル、ピクセート、折り紙がそのリストの上位にあります。
考慮事項：
- フローをエミュレートする機能
- ツールによって許可される忠実度と双方向性のレベル
- サポートされているデバイス
忠実度：ワークフローとビジュアルポリッシュの定義
よくある質問：
- 出発点としてワイヤーフレームまたはビジュアルモックアップを使用することを計画していますか？
- 画面はまだ設計する必要がありますか？
- 同じ人が設計とプロトタイピングを担当していますか？
- あなたのチームは、ある時点でプロトタイプを別のチームに渡す必要がありますか？
- 最終的なプロトタイプに期待されるルックアンドフィールは何ですか？
一部のプロトタイピングツールでは、デザインとビルドを同時に行うことができますが、ワイヤーフレームやビジュアルボードなどの既存のアセットをキャンバスにインポートすることに重点を置いているツールもあります。
時間をかけて、予想される設計プロセスについてチームと話し合ってください。 場合によっては、プロトタイプを既存のアセットに基づいて構築する必要があります（たとえば、チームがUIのビジュアルコンプをすでにモックアップしている場合があります）。設計者が行う必要があるのは、モックアップを一貫したフローにリンクすることだけです。または物語。 そこにあるいくつかのツールは、画面のリンクと、ユーザーがフローを通過する際のインタラクションのエミュレートに重点を置いています。 InVisionとKeynoteはその良い例です。
それ以外の場合、同じチームメンバーがUIの設計とプロトタイプの作成を同時に行う必要があります。 設計のこれら2つの側面を同時に繰り返すことができるため、プロトタイピングフェーズの最後に、より洗練されたインタラクティブな成果物が可能になります。 その場合は、リンクだけでなく、UIのデザインもできるツールを探してください。
また、必要な視覚的洗練のレベルを考慮してください。 AxureやUXPinのようなツールは、成果物のルックアンドフィールをワイヤーフレームのようにする可能性がありますが、他のツールは、よりピクセルパーフェクトで視覚的に洗練された最終製品を可能にします。 一部の設計チームは、シームレスに連携して同じ結果を達成するツールをペアにすることを選択します（たとえば、設計用のSketchとプロトタイピング用のInVision）。 プロトタイプを更新する必要があるたびに時間と労力を節約するために、選択したツールが自動統合を提供していることを確認してください。
考慮事項：
- コラボレーション機能（共有、ライブ共有、コメント、フィードバック）
- ワークフロー内の他のソフトウェア（Photoshop、Sketchなど）との統合
- 必要な忠実度のレベル（ワイヤーフレームとピクセルパーフェクトなデザイン）
リソース：必要なスキルセットのマッピング
よくある質問：
- 誰がプロトタイプを作成しますか？
- その人のソフトウェアスキルは何ですか、そして彼らはどれくらい速く働くことができますか？
- 彼らが特定のツールの使い方を知らない場合、彼らはどれくらい早く学ぶことができますか？ 彼らはそうする気がありますか？
- 何人のデザイナーがプロトタイプでコラボレーションしますか？
チームのソフトウェアスキルを活用することで多くの時間を節約できますが、組織が新しいツールをテストして設計プロセスに組み込むことを妨げないようにしてください。 プロトタイピングツールは、習得と操作がますます簡単になっています。 設計者は、学習曲線ではなく、ツールが仕事に適しているかどうかに関心を持つことができます。
チームがすでに使用方法を知っているツールをチームでマッピングし、オンライン調査を行って、どのツールを最も簡単に習得できるかを確認します。 チームにできるだけ多くのプロトタイピングツールを学び、遊んでもらうように促します。次のプロジェクトに最適なツールを選択する必要がある場合は、チームのスキルセットの多様性と柔軟性が役立ちます。
考慮事項：
- 学習曲線
- 使いやすさ
- 速度
コンテキスト：対象者と使用法の定義
よくある質問：
- あなたのプロトタイプの聴衆は誰ですか？ 誰がそれと対話し、フィードバックを与えることができる必要がありますか？
- プロトタイプはどの媒体で視覚化する必要がありますか？ どのデバイスで？ どのような状況で？
- 試作品を聴衆に説明するのか、それとも単にリンクをメールで送るのか。 前者の場合、ウォークスルーは直接行われるのでしょうか、それとも画面共有を介してオンラインで行われるのでしょうか、それとも自主的に行われるのでしょうか。
モバイルプロトタイプをまとめて、会議で利害関係者の隣に座ってアイデアを説明する場合は、ソフトウェア（モバイルプロトタイプを可能にするツール）とハードウェア（電話あなたの仕様を満たしています）。 このようなより制御された環境では、フロー全体を具体化する必要がなく、時間と労力を節約できます。
ただし、同じプロトタイプを使用して、製品の機能や外観がわからない全国のユーザーに対してリモートの非同期ユーザビリティテストを実行することを計画している場合は、組み合わせが完全に異なる可能性があります。 この場合、セルフガイドエクスペリエンスを可能にする、より機能的で防弾のプロトタイプが必要になる場合があります。
考慮事項：
- サポートされているデバイス
- セルフガイドクリックスルーエクスペリエンス
- フィードバックの共有とキャプチャのしやすさ
上記の質問に答えることは、使用状況を理解し、プロトタイプのいくつかの基本的な要件を定義するのに役立ちます。 リストを作成し、上記で特定した4つのグループすべて（スコープ、忠実度、リソース、コンテキスト）の要件を必ず含めます。 次に実行したいのは、検討しているツールが必要な機能を提供しているかどうかを確認することです。
4.ツールを評価する
新しいアプリケーションが毎月出てきて、それぞれが以前のアプリケーションでは解決できなかったすべての問題を解決することを約束しています。 現実には、この業界で10年以上働いていると、その話は繰り返され、これらの発表のパターンが見え始めます。
チームで最初の質問リストを確認したら、次に、潜在的なツールを調べます。 手順3の質問に答えるだけで、いくつかのオプションをすばやく削除し、より詳細な分析のための候補リストを作成できます。
候補リストの各ツールについて、以下を評価します。
- プラットフォームとチャネル。 ウェブサイトまたはアプリのプロトタイプを作成していますか？ デスクトップまたはモバイルエクスペリエンスですか？ レスポンシブインターフェイスが必要ですか？画面サイズ全体でどのように動作しますか？ 一部のツールは、チャネル間でエクスペリエンスを提供する際の柔軟性を高めますが、他のツールはより焦点を絞っています。
- 忠実度。 ツールはどのレベルの研磨を可能にしますか？ このツールを使用すると、研磨されていないワイヤーフレームベースのプロトタイプをすばやく作成できますか？ ビジュアルモックアップをインポートしてアニメーション化できますか？
- 共有とコラボレーション。 このツールは、必要なレベルのコラボレーションを提供しますか？ チームが使用する他の設計およびコミュニケーションツールとシームレスに統合されていますか？ 進行中の作業をオンラインで簡単に共有できますか？
- 学習曲線。 チームの誰かがツールの操作方法を知っていますか？ 必要なプロトタイプを作成するには、どれだけ熟練している必要がありますか？ ツールはどのくらい直感的ですか？ プログラミングの知識やコーディングは必要ですか？
- 価格。 ソフトウェアのライセンスをお持ちですか？ いくら支払う準備ができていますか？ ツールが段階的な計画で販売されている場合、プロジェクトに適しているのはどれですか？
5.これをやろう！
この時点で、おそらくオプションを1つまたは2つに絞り込んでいます。 次のステップは、チームと再グループ化し、最終決定を下し、作業を開始することです。 通常、最終的な呼び出しはタイムラインとコストに基づいて行われますが、ここにリストされているプロセスを実行することで、すべての基準が考慮されるようになります。
最高のプロトタイピングツールについてチームが話し合うことで、ワークフロー、プロセス、役割、責任など、成果物自体をはるかに超えたトピックに取り組むことができます。
また、プロジェクトの後に簡単な事後演習を実行します。 選択したツールで何が機能し、何が機能しなかったかをチームと話し合います。 次のプロジェクトでは、適切なツールを選択するプロセスのいくつかのステップを確実にスキップできます。
「U」をUXに戻しましょう
最後のアドバイス：最新で最高のプロトタイピングツールをすべて学ぶという罠にはまらないでください。 選択肢が多すぎます。 あなたが選ぶものについてよく考えてください、そしてあなたがそれらを使う方法を学ぶことにあなたの時間をどのように投資するかについて賢くしてください。
製品がユーザーのニーズにどれだけ近いかによって評価される時代では、プロトタイピングツール自体に多くの時間とエネルギーを費やすと、仕事で本当に重要なことから気が散る可能性があります。 結局のところ、構築しようとしている機能が正当で研究で証明されたユーザーのニーズを解決しない場合、特定のインタラクションの作成と洗練に何時間も費やしても意味がありません。
プロトタイピングツールの包括的なリストについては、UXデザインのUXツールセクションをご覧ください。
この記事への入力をしてくれたGregSiegal、Eugene Ahn、CaioBragaに感謝します。