私はWebアプリプロジェクトのユーザーエクスペリエンスのプロトタイプを作成し、週に2回ユーザーと繰り返します。私は、ユーザーを運転席に置き、ユーザーの反応を観察してフィードバックを収集することにより、さまざまなアプローチ(モーダルと新しいページ、編集ボタンとホバー効果など)をテストしてきました。これまで、jQuery、Backbone.js、Expressを使用して、さまざまなワークフローとUI要素をテストし、単純なデータ永続化レイヤーを提供してきました。しかし、現実世界の抽出に対するソリューションを迅速にプロトタイプ化するための私の探求において、私の直感は、より良い方法があるはずだと私に告げています。
暇な時間があれば、Stack UXコミュニティの他のメンバーが同じ目標にどのように取り組むかを聞いてみたいと思います。具体的には、質の高いユーザーエクスペリエンスのプロトタイピングに効果的なツールとプロセスは何ですか。
機能の反復のためにJavaScriptを使用してHTMLプロトタイピングを行っているようです(Backbone.js wheee!)。そのため、その観点からアプローチします。
まず、HTMLで物事を行うと、ユーザーエクスペリエンスの適切な詳細に焦点を当てることができますが、Axureや紙のプロトタイピングなどのツールでは、概念レベルにズームアウトしすぎます。それは、何かがどのように機能するかの詳細を反復するための適切な詳細レベルではありません。また、これらのアプローチ(データの永続性など)で今やろうとしていることを行うことはできませんが、HTMLとJavascriptでは簡単です。
ユーザーとのイタレーションと、フィードバックに基づいて物事を変更するために簡単なHTML/JSプロトタイプを使用するという点で、あなたはスイートスポットにぴったりだと思います。それは素晴らしいことです。しかし、更新されたプロトタイプをテストグループの前にすばやく簡単に取得する方法など、生産性の問題にも直面していると思います。
私たちは同じ問題に直面したので、それを解決するためのツールを開発しました。ローカルで作業してGitリポジトリなどにコミットしてどこかに公開する代わりに、私たちのツールはWebベースであり、ブラウザーにHTML/CSS/JSエディターが含まれています。その結果、私たちは今そこから作業するだけで、保存するものはすべて即座にライブになります。
これは、プロトタイピングへのアプローチをどのように変更したかという点で非常に重要です。これで、電話でクライアントと話し、何かを変更し、保存をクリックして、何が起こったかを確認するためにブラウザを更新するように依頼することができます。また、ユーザビリティテストを、数日にわたって参加者を招待するのではなく、数回の反復にまたがる数時間にグループ化できます。効率が大幅に向上します。
これは非常に製品のピッチーに聞こえると思いますが、HTMLプロトタイピングを実行しているとき、私たちのアプローチが進むべき道であると本当に信じています。 Handcraft と呼ばれます。それがあなたのために働くかどうか私に知らせてください。
今の段階では、大変な作業のようですね。さまざまなやり取りやワークフローのワイヤフレーム化やプロトタイピングのために、紙と鉛筆に持ち帰りたいと思います。
次に、何かを balsamiq または inkscape (私のお気に入りのツール)でモックアップし、画面サイズの画像とイメージマップを備えたブラウザでHTMLページを使用していくつかの基本的なインタラクションをつなぎ合わせますボタンなどをクリッカブルにします。これは迅速かつ柔軟なプロセスであり、必要に応じて忠実度を低くまたは高くすることができます。
それはたまたま私にとってはうまくいく方法であり、クライアントが本当に気に入っている方法です。あなたはおそらく多くの人が彼らのために働く彼ら自身の方法を持っているのを見つけるでしょう。
これは間違いなく、ラピッドプロトタイピングを行うための最良の方法です。紙ベースのプロトタイプは、分類法を評価し、消費者が製品が何をすることになっているのか、それがどのように機能するのかを理解するかどうかを評価するのに適しています。機能的なプロトタイピングでは、実行の詳細をじっくりと考え、エクスペリエンスパスを洗練させることができます。
このアプローチの唯一の欠点は、a)修正を行うには費用と時間がかかる可能性があること、b)テクノロジーではなくデザイナーによって駆動されているUIデザインにロックされる可能性があることです。
私は最近、忠実度のレベルが異なる人気のプロトタイピングアプリをレビューした興味深い記事を読みました。ユーザーのコメントには、iRise、Keynote、Archetype、Fireworksなどの優れた提案も含まれています。
http://id8.com/2011/08/15/comparing-digital-prototyping-tools/
PowerPointまたはハイパーリンクをサポートするプレゼンテーションツールを使用してみてください。インタラクティブなプロトタイピングとアニメーションについては、私の表現はMS Expression BlendまたはFlashです。