web-dev-qa-db-ja.com

ワイヤーフレームやその他のIA成果物をクライアントに提示する効果的な方法は何ですか?

私の代理店は現在、プロジェクト定義ドキュメントにワイヤーフレームを含めています。各主要ページは、ワイヤーフレーム、基本的な相互作用、入力フィールドなどとともに説明されています。

ただし、これがワイヤーフレームを表示する効果的な方法かどうかはわかりません。ワイヤーフレーム間の大量のテキスト情報は、ページ間のフローと相互作用を壊すようです。

ユーザージャーニーなどの他の成果物についてはどうですか?プロジェクト管理に焦点を当てたドキュメントから分離する必要がありますか?

更新:

回答ありがとうございます。質問の文言をもっとよく書いておくべきだったでしょう。

私が尋ねるつもりだったのは、あなたがemailingクライアントの場合、レビューとサインオフのためのプロジェクト定義ドキュメントである場合、ワイヤーフレームとインタラクションを含めますか?その中のメモ?プロジェクト定義ドキュメントには他のプロジェクト関連情報が含まれていることを念頭に置いて、ワイヤーフレームを個別にパッケージ化する方が良いですか?

7
Calvin Chong

代替の視覚的手法は、コミックスタイルのストーリーボードを使用することです。ユーザーがワイヤーフレームをどのように操作するかを示すことができます。クライアントは、これらのストーリーボードを理解しやすいと感じています。それらは、やり取りやユーザーの感情を伝えるのに特に役立ちます。

コミックstripストーリーボードを作成するための無料または手頃な価格のツールがあります。 http://plasq.com/products/comiclife/win (デスクトップツール)および http://bitstrips.com/create/comic/ (オンラインツール)。

ただし、私の推奨するアプローチは、slideshowプレゼンテーションを作成し、各スライドをストーリーのフレームとして機能させることです。

あなたは描画スキルを持っている必要はありません。私はこの缶詰の キャラクターとシーンのセット が便利だとわかりました。

3

静的モックアップとワイヤーフレームから動的プロトタイプの実行へと自分の慣行を変え始めました。これにより、顧客はクリックして周囲の状況がどのように変化するかを確認できる具体的な視覚化を得ることができます。あなたと顧客の両方が同じことについて話していることを知っていて、次のステップについて良い会話をすることができます。

Balsamiq Mockups のようなインタラクティブなプロトタイピング/モックアップツールでかなり遠くまで行くことができます。

私はあなたにそれをさらに進めるように挑戦します...私はUXツールボックスを変更してHTMLプロトタイプを提供し続けています。ここでの利点は、さまざまなプラットフォームでのデザインの変化と変化を示すことができることです。 jQuery、CSS3、および最新のブラウザーを使用すると、いくつかの基本的なプロトタイプを迅速に稼働させることがかなり簡単になります。優れたレスポンシブデザインのラピッドプロトタイピングフレームワークもいくつかあります。

これらのツールにはまともなスタイルとJavaScriptプラグインが含まれており、応答性の高いインタラクティブなプロトタイプをまとめてすばやく簡単に作成できます。

3

単純なワイヤーフレームで記述できるよりも多くの機能があるように思えます。これは、相互作用のメモまたは機能仕様の形式で、上記の優れたux交換器によって記述されたサポートドキュメントが必要であることを示唆しています。

別のアプローチ、そして私が最も効果的に機能するのは、実用的なグレースケールプロトタイプを構築することです。私を信じてください。機能するクリック可能なプロトタイプは、システムやさまざまなコンポーネント、IAなどがどのように機能するかを示すために、はるかに多くのことを行います。多分あなたのために働くかもしれませんが、ワイヤーフレームだけよりもはるかに説明的です。

もちろん、100個のワイヤーフレームを配信する場合は、実際的なアプローチではない可能性があります。その場合、システムのセクションのプロトタイプを作成します。

また、プロトタイプは、ワイヤ/機能仕様では見られない方法で開発と通信します。

c

1
colmcq

Axureプロトタイピングツールと http://share.axure.com/ が最適です。

デスクトップアプリで多くのことを実行し、インタラクティブプロトタイプをAxure共有サーバー(またはその他)にアップロードしたり、コメントを残したりすることができます。また、要素ライブラリが多数あり、それらのほとんどは無料です。そのため、プロトタイピングは非常に高速になります。

例えば。このページは15秒程度で作成されました– https://skitch.com/kisasosisa/8au3g/iride-dashboard

Axure .rpファイルをhtmlに変換する際にいくつかの問題がありますが、これは私が使用した中で最高のものの1つです(ホワイトボードも無料ですが:)

1
meaou

ワイヤーフレームを直接提示する方が常に効果的であることがわかりました。それはあなたが経験を作り上げ、あなたがそれらが「見られる」ように意図したようにこれらを提示することを可能にします。

UCDプロセスに従う場合、ワイヤーフレームの内容をユーザー/目標に結び付けることができます。これは通常、クライアントがすべてを結び付けるのに役立ちます。

ルックアンドフィールのみに関心があるクライアントに役に立たない情報を提供しないように、注釈をUXに焦点を当てたままにしてください。

コンパニオンブリーフやプレゼンテーションを書いて、効果的にステージを設定することをためらわないでください。

1
Mike Hill

このページには、いくつかの良いヒントがあります。

http://viget.com/inspire/how-to-present-wireframes

0
jesses.co.tt

単一のビューで単一のインタラクションを完全に説明するために最善を尽くしてください。つまり、ワイヤーフレームとそれを説明するテキストは、ページ間を前後にめくることなく常に表示されている必要があります。ブック形式で製本している場合は、見開きページを使用できます。片面ホチキス止めの場合は、説明を1つの見開きページにします。相互作用ごとに単一の8.5x11で十分であることはめったにないので、スパイラルバインド形式またはバインダー形式の使用を強くお勧めします。

これは、複数のページで特定のワイヤーフレームを繰り返すことを意味し、おそらく毎回異なる部分に焦点を当てます。複雑なダイアログの場合は、それを複数の領域(ヘッダー、メニュー、タブ、フォームなど)に分け、議論している現在の領域の拡大された例を示します。

プロセスとトランジションについては、1つのページ(可能な場合)にすべてのステップを示し、簡単に説明した概要を説明します。次にページごとに1つのステップを実行するので、ページングを進めると、1回の操作でステップが実行されます。

分岐して複数のパスを処理することになると、私はあなた自身の冒険本を選んでエミュレートします。 「オプションAを選択した場合は、34ページに進みます。オプションBを選択した場合は、40ページに進みます。」顧客は通常それを楽しんでいますが、ユーモアを見つけられなくても、分岐した選択を線形のブック形式で表現する最良の方法の1つのままです。

プロジェクト管理をUXのプレゼンテーションから分離する必要があるかどうかに関しては、それは話題外です。個人的には、どちらの方法でも問題ないと思います。私はプロジェクト管理のドキュメントを作成したのは私ではなかったので、別でした。

0
Myrddin Emrys

ワイヤーフレームはまれにクライアントに提示する必要があります。ワイヤーフレームは、UXが製品を構築するための重要な内部ツールですが、クライアントと詳細を通信するための有用な方法ではありません。

はい、それは広い一般化ですが、私はそれが真実であることが多いと思います。アイデア/探査プロセスを完全に理解しているクライアントがいる場合もありますが、ワイヤーフレームが目には「本物」であり、突然、プロセス全体が行き詰まり、フォントについて心配していることがあります。

類推:建築家は大量の設計図を作成します。そしてクライアントはある程度それらを解釈することができますが、青写真は製品を構築するチームのためのものです。クライアントが望んでいる/必要としているのは、実際のプロトタイプです。モデルでも、3Dレンダリング/ウォークスルーでもかまいません。ポイントは、ワイヤーフレームは実際の青写真であり、一部のクライアントはそれらに基づいて製品を構想することができますが、ほとんどのクライアントはダイジェストにより具体的なものを提供することによって最善のサービスを提供されます。

0
DA01

全体の概念を上位レベルのサイトマップで提示することを好みます。サイトマップでは、ウェブサイトまたはアプリケーションの主要な概念(たとえば、「ショップ」、「ブログ」、「メンバーのみ」など)を視覚化します。この段階では、それは一種のインフォグラフィック、または変換の最も重要なポイントを示すいくつかの小さなストーリーボードを含むスケッチです。

プレゼンテーションにはhtml-mockup(balsamiqまたはAzure rp)を使用します。モックアップは、灰色で、時にはスケッチスタイルの「クリック可能なワイヤーフレーム」(プロジェクトスペースからダウンロード可能)です。プレゼンテーション中に、最も重要なクリックパスを明確にするのに役立ちます。

サインオフには、注釈付きのドキュメントを使用します(indesignまたはaxure rpをpdfに変換)。ワイヤーフレームは、最終的なコンテンツ、コード、メディアアセットにアイデアを実行するためのデザイナーや開発者にとって本当に便利です。そして、はい-開発プロセスによっては、これは長いドキュメントになる場合があります。

0
Rene

私のワイヤーフレーミングインベントリは、Balsamiq、Invision App( http://www.invisionapp.com/ )、およびAxure RPで構成されています。

私たちは独自のサーバーを持っているため、Axureを使用してhtmlベースのモックアップを作成し、サーバーでホストして、クライアントにhtmlリンクを送信します。それはほとんどの場合うまくいきます。

ただし、モバイルアプリケーションの場合は、インビジョンアプリを使用することがあります。ウェブアプリケーションでワイヤーフレームをアップロードするのは非常に簡単です。正確なインターフェースを必要とするクライアントがいる場合、モバイルにインストールして使用して、 UX。

0
steve

この質問にはすでにいくつかの素晴らしい回答がありますが、私はあまり聞こえませんが、コミュニケーションの際に非常に効果的であることがわかったもう1つの方法があります(ほとんどの場合、内部では外部クライアントを扱っていません)。

モックアップを実行しているあなたのスクリーンキャスト/スクリーン録画の作成を検討しましたか? Snagitのようなプログラムを使用して、確実に伝えられるようにしたい主要なポイントについて話します。私は脚本を書くか、少なくともあなたが言いたいことの概要を説明して、ビデオがターゲットを絞ったままになり、動き回らないようにします。ただし、画面上でテキストを使用する代わりに、あなたの声を録音してください。情報コミュニケーションの世界では、ビデオのテキスト+ビジュアルが悪い考えである理由を示す優れた調査があります。

派手になりたい場合は、Camtasiaなどを使用してハイライトやアニメーションなどを追加できます。

数分の焦点を絞ったビデオは、多くの完全ではない理解を回避できることがわかりました。

0
conan

この問題を解決するために最近見た例として、ビデオを使用してユーザージャーニーを示すことが挙げられます。元のドキュメントにメモとコンテキストを付けたまま、追加のビデオファイルが役立つ場合があります。画面を記録します。

他のアイデア?番号システム(ページへのボタン)がナビゲーションのガイドに役立つ機能レベルによっては、ワイヤーフレームのみのファイルの追加セットを提供し、クライアントがドキュメントを印刷することを提案すると便利な場合があります。結局、UXの多くは紙ベースです。

0
Gareth