優れたユーザー体験(UX)を実現するワイヤーフレームの作成には、チームからの的確なフィードバックが必要です。本記事では、ワイヤーフレームの効果を高める7つのフィードバックポイントをお伝えします。
目次
ワイヤーフレームにフィードバックが必要な理由
一貫性があり、全体的にまとまっているワイヤーフレームは、優れたユーザー体験(UX)を生み出します。
より完成度の高いワイヤーフレームを作成するためには、チームレビューや的確なフィードバック(改善提案)が欠かせません。フィードバックをする際の注意点として、ページの各構成要素の目的について考えなければなりません。
さまざまなタイプのワイヤーフレームがありますが、どの場合も果たすべき目的が設定されています。以下で紹介する7つのポイントを押さえ、ワイヤーフレームにより効果的なフィードバックをしましょう。
■ 目標を明確にする
ワイヤーフレームにフィードバックをする前に、プロジェクトの目標を十分に理解する必要があります。
以下のチェックポイントを押さえて、プロジェクトの目標に向かってワイヤーフレームか作成されているか確認しましょう。
- ワイヤーフレームの作成者とステークホルダーの認識が正確にあっているか
- プロジェクトの意図を曇らせる要素、ステークホルダーの意向に反する要素がないか
- カスタマージャーニーに役立つように設計されているか
「目標を明確にする」ということは、作成者とステークホルダーの認識の違いを無くしたり、作成者がクリエイティブなデザインに走ったりという問題を防ぐのに効果的です。
プロジェクトの目標達成のためにシンプルな作りであるか、大きな手戻りが発生しないようにデザインされているかなどを軸にして、フィードバックをしましょう。
■ 最小限のビジュアルとブランディング
ワイヤーフレームの段階では、ビジュアルとブランディングの作り込みは最小限にとどめます。
具体的には以下の3つのチェックポイントを押さえたフィードバックをしましょう。
- 色、フォント、図形といった要素については「何も調整しないこと」を伝える
- ラフデザインが既存のスタイルガイドと大きくずれていないか確認する
- 曖昧ではなく明確なフィードバックをする
この3つのチェックポイントを抑えることで、ユーザー体験(UX)とデザインの不一致を防いだり、ワイヤーフレーム全体の一貫性を保つことができます。
デザインなどのクリエイティブな部分は最小限にして、目的に沿ったフィードバックを心がけましょう。
■ ナビゲーションを意識する
ワイヤーフレームはナビゲーションエラーを事前に解決するために効果的です。
ナビゲーションが不適切だとユーザー体験(UX)やSEOなど、ウェブサイトの重要な構成要素に悪影響を与えるだけでなく、次に控えるデザインチームや開発チームの時間を無駄にしてしまいます。
プログラミングが学べるウェブサイト「Treehouse」はワイヤーフレームについて以下のように書いています:
「ナビゲーションやレイアウトがプロジェクトの進行具合を決定づけます。問題があればスタート段階で取り組むのがベターです。ハイファイ・プロトタイプになってからだと、やり直しが必要な作業が発生します」
ナビゲーションの問題を避けるためには、ユーザーになったつもりで考えましょう。
各ページをユーザー目線で見て、流れるようなナビゲーションを感じられなければ、実際のユーザーも同意見のはずです。
以下のようなポイントを考慮してフィードバックをしましょう:
- ページに到達するまでに必要なクリック数
- コンバージョンまでに何段階のステップがあるか
- 重要なコンテンツがすぐに見つかるか
- 私/ユーザー探しているものが簡単に見つかるか
ナビゲーションが明確になるまで、次のプロセスへ進まないことが肝心です。
■ 各ページの目的を明確にする
「目標を明確にする」と同様、各ページの目的も明確にする必要があります。
各ページがそこにある理由がなければ、目標が達成できません。ここでもユーザーになったつもりで、以下の3点を考慮したフィードバックを考えてみましょう。
- なぜこのページはここにあるのか?
- ページは私/ユーザーに何をしてもらいたいのか?
- 私/ユーザーにとってそれは大切か?
ページに論理的なナビゲーションが欠けている、変更を加えれば目標を達成しやすくなるなど、気付いたことをフィードバックします。すべてのページに目的があることを理解してフィードバックをしましょう。
■ コンテンツを多角的に確認する
ワイヤーフレームはコンテンツのフィードバックにも役立ちます。
以下の3つのチェックポイントを意識してフィードバックをしましょう。
- コンテンツの配置、間隔、グルーピングを確認する
- コンテンツ階層を意識する
- ページの目的に沿っているか確認する
コンテンツまたはプレースホルダを使う場合でも、その配置がどのようなコンテンツ階層を生むか、さらにコンテンツ階層がどのようにページの目標に役立つかを考えます。
コンテンツも他の要素と同様、コンテンツ内容が明確か、ページの目的を伝えるものであるか、プロジェクト全体の目標に役立つか、を重点的に確認します。
■ 明確なコールトゥアクション(CTA)
CTAはワイヤーフレームのなかで、もっともフィードバックが多くなる要素です。
Web Ascenderによると、CTAはデザイン要素に先立って検討すべきポイントでもあります:
「CTAを先走って決定しないように色やスタイルの事はいったん忘れましょう。まず自分自身に以下のような質問をしてください。
・サイトにアクセスしたときにユーザーに何をしてもらいたいか
・どのようなステップをとってもらいたいのか
デザインの要素を取り除くことで、これらの重要な点に集中できます」
訪問者とページの関係性(訪問者に望むアクション)が明確でなければ、ワイヤーフレームに改善の余地があります。
CTAに明確な目標や効果的なメッセージが欠けていると、コンバージョンや他のKPI(重要業績指標)が影響を受けます。
ワイヤーフレームのCTAで起こりがちな以下の課題を探しましょう:
- 画像とCTAがかけ離れている
- CTAのコンテンツやメッセージが多すぎる、または少なすぎる
- 不自然な配置
フィードバックプロセスにはよくあることですが、特にCTAについては、何度も修正とフィードバックを繰り返すことになるかもしれません。ユーザーのアクションを引き起こすために効果的で明確なフレーズが決まるまで、ブレーンストーミングを続けましょう。
■ レイアウトのシンプル性を確認する
ワイヤーフレームのレイアウトが分かりにくいと、実際のデザインでも四苦八苦することになります。
理解しにくかったり情報量に圧倒されたりする部分があれば指摘し、コンテンツの配置やページ順序など、構成要素についてフィードバックしましょう。
リーダビリティに注目しましょう。ワイヤーフレームでよくある失敗は、1ページにあまりにも多くのコンテンツを詰め込もうとしてしまうことです。
レイアウトのフィードバックは、コンテンツが豊富であり、多すぎて負担にならないためにバランスをとることが大切です。
このバランスが達成できていないと感じたら、1つのセクションを丸々ボツにしたり、1ページを2つに分割するなど、少し大胆に思われる修正も遠慮なく提案してください。
まとめ
以上、ワイヤーフレームにフィードバックをするときに押さえておきたい7つのポイントでした。
これらのポイントを参考にして、チームで効果的なワイヤーフレームを作成するためのフィードバックに役立てましょう。
ワイヤーフレームはページの目標を定め、機能性を確保するためのもので、洗練されたデザインを求めるものではありません。
ワイヤーフレームはプロジェクトを成功に導くロードマップとして機能します。チームの拠りどころとなる設計図なので、あなたの的確なフィードバックはプロジェクトの進捗に欠かせないものとなります。