ワイヤーフレームをより伝わりやすくする 10 の方法

私は毎週1つの記事を翻訳していますが、それは簡単な作業ではありません。読むことから、選考、試訳、そして今週の記事を最終的に仕上げて翻訳を完了することまで、主に毎日少しの時間を取って行う必要があります。幸いなことに、それは結局のところ自発的な行動です。私はそれが大好きで、今でも大好きです。これが UX 実践者および翻訳者の誠実さです。静かにして、この記事の本文に入りましょう。

私は、単独で、あるいは他のデザイナー、プロダクトマネージャー、さらにはビジネスアナリストと協力して、多くの製品のワイヤーフレームのプロトタイピングに携わってきました。途中でたくさんの素晴らしいプロジェクトを見ることができたので、とても良かったです。しかし、徐々にいくつかの問題、つまりプロトタイピングのプロセスで見落とされがちな要素も発見しました。これらの問題に注意を払い、解決できれば、インタラクティブなデザインの成果物はより大きな実用的価値を発揮することができます。

下の図は典型的な例です。私たちは通常、ビジュアル デザインやプロトタイプのテストをフォローアップするために、このスタイルのワイヤーフレーム ドラフトを関係する同僚に渡します。

この種のワイヤーフレーム ドラフトでは、ページ要素のレイアウトをより明確に記述できますが、それだけです。欠けているのは、他のデザイナー、開発者、テスト対象のユーザーとコミュニケーションする機能です。次に、この点に関してワイヤーフレーム プロトタイプのパフォーマンスを向上させるのに役立ついくつかの方法を見ていきます。

1. 明暗のコントラストでモジュール間の視覚的な優先順位を説明する

ユーザーがページ上で最初に注目するべきコンテンツは何か? ユーザーの視線をどこに向けるべきか? ユーザーにどのようなアクションを実行してほしいか? これらの質問は、ビジュアル デザイナーだけに任せることはできません。また、上の図に示すワイヤーフレーム プロトタイプは、インタラクション デザイナーがこの情報を伝達するのに役立たないことは明らかです。

まず、製品要件とユーザー調査の実際の状況に応じて、製品担当者またはインタラクション デザイナーとして、上記の情報を十分に認識し、これに基づいて、最も独創的なワイヤーフレーム ドラフトに視覚的な優先順位を追加します。具体的な実装は実は非常に簡単です。暗い「ワイヤーフレーム」をすべて削除し、異なる明るさのグレーを背景色として使用してページとモジュールのエッジを定義し、さまざまな要素間の視覚的な優先順位を表現します。以前の純粋なワイヤーフレームスタイルのデザインと比較すると、下の図では要素とモジュール間の優先順位の関係がはっきりと感じられます。たとえば、右側のホテル情報の推奨と予約フォームの操作ボタンは、非常に短い時間で私たちの注目を集めることができます。

このアプローチは、インタラクション デザイナーがビジュアル デザイナーの役割を果たしているということではありません。「この要素の背景色は、別の要素の背景色よりも暗くする必要があります」と言っているわけではありません。これらの明暗の関係は、どの要素を強調する必要があるか、どの要素を相対的に弱くする必要があるかを反映しているだけであり、最終的な視覚表現は、依然としてビジュアル デザイナーによって制御される必要があります。

2. 実際のデータコンテンツを使用する

ナビゲーション要素のタイトル、フォームのラベル、紹介文、アイコンなど、ワイヤーフレーム プロトタイプのサンプル コンテンツについては、実稼働環境に最も近い実際のデータを使用するようにしてください。このアプローチにより、インターフェース要素のレイアウトをより効果的に計画し、実際の環境で発生する可能性のある極端なデータ状況に対する予防策を策定して、ページ構造の堅牢性を確保することができます。

さらに重要なのは、実際のデータをサンプル コンテンツとして使用するワイヤーフレーム プロトタイプは、その後のユーザビリティ テストでより表現力と説得力を持つことができることです。テスト対象のユーザーは、ホストの説明や自分の推測に頼ることなく、プロトタイプからより正確な情報を得ることができます。さらに、実際のデータにより、実際の製品に近い使用環境を作り出すこともできるため、テスト対象ユーザーのエンゲージメントを高めることができます。テスター（ホスト、オブザーバー）にとっては、よりターゲットを絞ったタスクや質問を設計し、テスト中にテスト対象のユーザーをより詳細に観察することができます。これにより、最終的に収集されるフィードバック情報はより現実的で効果的なものになります。

引き続きホテルのプロトタイプを例に挙げると、「ホテルの特別なサービスに関する情報を見つけることができますか?」などの質問は不適切です。これは、そのような情報がページのどこかに存在することをテスト ユーザーに伝えるのと同じであり、ユーザーはこの手がかりに基づいてのみ情報を探すことになるからです。ほとんどの場合、間違いなく見つかりますが、そのようなフィードバックは私たちにとっては意味がありません。

実際のデータを使用して構築されたプロトタイプをテストに使用すれば、状況ははるかに良くなります。テスト対象のユーザーに「このホテルについてどう思いますか?」と尋ねることができます。これにより、効果的なフィードバックを得られる可能性が大幅に高まります。ユーザーは、このような質問に基づいて、より自律的な情報閲覧行動をとるようになります。「このホテルは良さそうだけど、ファミリープールがある。ホテル内で子供が走り回るのは本当に嫌だ」と答えるかもしれません。

この種のフィードバックは、ユーザーがページの重要な要素に気づいただけでなく、特定のコンテンツについても真剣に考えたことを示しています。実際のデータ コンテンツを含まないワイヤーフレーム プロトタイプのセットを通じて製品のユーザビリティをテストできる一方で、実際のデータをサンプル コンテンツとして使用するワイヤーフレーム プロトタイプは、製品のユーザー エクスペリエンスをより包括的にテストするのに役立つと言えます。プロトタイプ テストの実践的な方法の詳細については、以前の記事「初期の製品プロトタイプ作成とユーザー テスト」を参照してください。

3. 詳細の正確性を確認する

プロトタイプにサンプル コンテンツとして実際のデータを入力した後、インタラクション プロセスに関係する情報の正確性を確認する必要があります。たとえば、ショッピング カート ページのプロトタイプに単価 50 元のアイテムが 2 つ表示されている場合、チェックアウト プロセス中の合計価格は 100 元であり、他の数字にはなりません。不正確な情報は効果的なコミュニケーションを妨げます。開発者は疑問を抱く可能性があり、テスト対象のユーザーは混乱を感じる可能性があります。

デザイナーとして、長い間プロトタイプの制作に集中していると、このような問題の存在を無視しがちです。条件が許せば、プロトタイプの詳細にエラーがないか他の人に確認してもらうこともできます。

4. サンプル写真の自己説明能力を高める

画像はユーザー エクスペリエンスの向上に重要な役割を果たします。ユーザーが Web サイトで製品やサービスを探しているとき、画像は意思決定を導く重要な要素となります (デザインを通じてユーザーの意思決定を支援する方法)。さらに、写真はユーザーがウェブサイト自体のイメージや位置づけを理解するのにも役立ちます。ただし、ワイヤーフレームのプロトタイプでは、通常、画像を表すために灰色のコンテナーと線のみを使用します。

もちろん、ワイヤーフレームのプロトタイプに実際の画像や写真を使用することをお勧めしているわけではありません。必要なのは、画像を表すワイヤーフレーム要素に、実際のページのその位置にどのような種類の画像を配置すべきかを反映させることです。ワイヤーフレームのプロトタイプを作成する前に、この問題について製品またはビジネス担当者とコミュニケーションを取り、製品自体の特性と最終的なユーザー グループに基づいて、画像などの視覚要素の全体的なスタイルを決定することをお勧めします。

たとえば、私はかつてシャツ小売業者のウェブサイトの再設計を手伝ったことがあります。デザインを始める前に、まず古いバージョンの Web サイトを使用してユーザー テストを実施したところ、製品詳細ページのデモ写真が常にユーザーを混乱させていることがわかりました。シャツの見栄えを良くするために、写真を撮る際にわざとネクタイとカフスボタンを合わせ、ユーザーに各シャツがネクタイとカフスボタンを含むスーツであると思わせました。そこで、ワイヤーフレームのプロトタイプ設計を行う際に、ビジュアルデザイナーとその後の担当者が理解しやすく、新しいバージョンの Web サイトで同じ間違いを繰り返さないように、製品写真の代わりにネクタイとカフスボタンのないシャツのスケッチを意図的に描きました。

ワイヤーフレーム内の画像要素を非常に詳細な図でより詳しく説明する必要はありません。ユーザーがここで見たい画像の種類を示すには、シンプルなスケッチで十分です。たとえば、ホテル予約サービスを提供する Web サイトでは、詳細ページでユーザーは通常どのような写真を見たいのでしょうか。部屋ですか? バスルームですか? 風景ですか? これらの質問はすべて、時間をかけて明確に理解し、ワイヤーフレームのプロトタイプに反映させる価値があります。

5. 色は慎重に使う

ワイヤーフレームのプロトタイプでは、注釈に色がよく使用されます。必要に応じて、特別な色を使用して、ユーザーの特別な注意を必要とするインターフェース要素をマークしたり、エラー メッセージなどのステータス コンテンツを表現したりすることもできます。ただし、プロトタイプをテストするときは、色付きの注釈付きバージョンを使用しないように注意してください。理由は明らかです。テスト対象のユーザーがこれらの「目立つ」要素に誘導されたり、気を散らされたりしないようにするためです。

6. インタラクティブな要素が明確で理解しやすいことを確認する

インタラクティブな要素は、目的に合った方法で提示する必要があります。たとえば、ボタンはクリック可能であるように見える必要があります。これらの詳細の視覚的表現の正確さは、ビジュアル デザイナーと開発者のプロトタイプの理解に直接影響します。また、説明が不要なインタラクティブ要素によって生じる潜在的なエクスペリエンスの問題も、ユーザビリティ テストで明らかになります。

7. 実際のピクセル数

スタイル コードを含む HTML を使用してプロトタイプを作成する場合 (フロントエンド開発フレームワークを使用してページ プロトタイプをすばやく作成する場合)、通常はコンテナーの幅または高さの属性をピクセル単位で設定する必要があるため、この問題は基本的に発生しません。しかし、ほとんどの場合、純粋なワイヤーフレームを作成します。ページ レイアウトと要素のサイズを実際のピクセルで計画して指定すると、私たち自身とビジュアル デザイナーは、その後の作業で多くの「推測」と「見積もり」を省くことができます。以前は、ワイヤーフレームのプロトタイプを作成するために PowerPoint を使用していましたが、要素間のおおよそのサイズと位置関係しか表示できませんでした。プロジェクトがビジュアル デザイン プロセスに入ったとき、デザイナーとのコミュニケーションを効果的にサポートできず、多くの問題が発生しました。

8. 変更ログを作成する

反復が続くと、各ワイヤーフレーム プロトタイプの変更は通常、ページ構造からモジュールやコントロールまで、ますます詳細になり、後続の作業を担当するデザイナーや開発者がすべての変更を発見することがますます困難になります。インタラクション デザイナーとして、変更ログを作成し、プロジェクトの進化に合わせて継続的に更新することが私たちの責任です。ログ内の各レコードには、日付、バージョン番号、実行者、変更の説明が含まれている必要があります。この情報交換方法は、時間がかかりすぎず、労力は半分で結果は2倍になります。製品担当者、デザイナー、開発者など、誰でもプロトタイプのバージョン変更を一目で追跡できます。

9. 暗いワイヤーフレームを避ける

暗いワイヤーフレームをページ全体に表示すると、プロトタイプの見た目が深みに欠け、粗雑で乱雑なものになってしまいます。最初のポイントで述べたように、ページとモジュールの端を定義するには、背景色としてさまざまな明度のグレーを使用してみてください。これにより、インターフェース要素の視覚的な優先順位が示されるだけでなく、プロトタイプ全体の見た目もすっきりします。場所によっては線を使用する必要がある場合は、細い実線または点線の灰色の線を使用するようにしてください。ワイヤーフレームのプロトタイプをビジュアル ドラフトのように完璧にする必要はありませんが、これらの詳細を把握することで、より簡潔で美しいものにすることができます。実際の作業では、これによりプロトタイプの受け入れ率が向上することがよくあります。

10. 追いつく

これは、設計スキルよりも配信プロセスに関するものです。ワイヤーフレームのプロトタイプが完成したら、それを後続の作業を担当する同僚にそのまま渡すだけではいけません。時間をかけて、最終的にデザインコンセプトを実現できるビジュアル デザイナーや開発者の仕事をサポートしてください。通常、インタラクティブ プロトタイプに含まれるアイデア、操作ロジック、その他の情報は、すべての人が完全かつ正確に理解することが難しく、暗黙の問題は後続の段階でのみ反映される可能性があります。プロトタイプを納品した後も、フォローアップして全員で協力して作業する必要があります。

上記は、ワイヤーフレーム プロトタイプのコミュニケーション スキルを向上させるための 10 の提案です。ワイヤーフレーム プロトタイプの基本的な概念と適用方法の詳細については、以前の記事「ワイヤーフレーム プロトタイプの本質と実際の適用の概要」を参照してください。

この記事はもともとこのサイトでまとめられたものです。転載する場合は、次のことを明記してください: この記事はBe For Webから提供されています

オリジナルの英語:

http://www.netmagazine.com/features/10-simple-ways...翻訳者情報: c7210 - ユーザー エクスペリエンス デザインおよびコード プレーヤー。現在、Dianping.com の UED 部門で働いています。

元のタイトル: ワイヤーフレームのプロトタイプをより伝わりやすくする 10 の方法

キーワード: 10 の方法、ワイヤーフレーム、プロトタイプ、コミュニケーション スキルの向上、週 1 回の翻訳、ウェブマスター、Web サイト、Web サイトのプロモーション、収益化