デザインプロセスでワイヤーフレームが重要な理由
公開: 2017-01-29ワイヤーフレームは、設計プロセスの早い段階でユーザビリティの問題を迅速かつ効果的に特定する方法です。
あなたが Web デザイナーであれば、ワイヤーフレームに精通していると思います。また、私のようなユーザー エクスペリエンス (UX) デザイナーであれば、紙と鉛筆を使って手作業で、またはProto.ioのようなデジタル ツール。
この記事は、この用語を聞いたことがあり、デザイン プロセスでワイヤーフレームが重要な役割を果たす理由について詳しく知りたい方を対象としています。 また、関連する利害関係者やクライアントとの会話でそれらを最大限に活用する方法についても説明します。
「ワイヤーフレームとは？」という質問に答えるところから始めましょう。
ページの骨格のようなワイヤーフレームを考えるのが好きです。 このスケルトンは、ページ上の要素の間隔、コンテンツの優先順位、使用可能な機能、およびユーザーがサイトと対話する方法を示す、ページのインターフェイスの 2 次元の描写です。 また、さまざまなページ間の経路を示すことで、情報アーキテクチャをデザインの視覚的側面に結び付ける上で重要な役割を果たします。 ワイヤーフレームには、意図的に色、グラフィック、定型化されたフォントが含まれていません。
強力な骨格がなければ、機能性やスタイルなど、その上に配置するものはすべてうまくいきません。
新しい家を建てるプロセスについて考えてみましょう。 家の構造の設計図ではなく、壁の色やソファの生地など、インテリア デザインに全力を注いだ場合、それは目的を達成すると思いますか? おそらくそうではありません。 家の基本的な構造ではなく、インテリアデザインから始めるのは直感に反します。
ワイヤーフレームに含めてはいけないものは?
ワイヤーフレームをシンプルに保つことは非常に重要です。 これは、前述のように、ワイヤーフレームのポイントは、要素がページ上でどのようにレイアウトされ、サイト ナビゲーションがどのように機能するかを示すことだからです。 色や画像が多すぎると、読者がレイアウトやナビゲーション要素に集中できなくなる可能性があります。 スケルトンの単純な視覚的表現を描写するという目標を達成するために、色、画像、グラフィックス、および様式化されたフォントの使用を排除または削減してください。
次の点に注意してください。
あなたにおすすめ:
メタバースがインドの自動車産業をどのように変革するか
反営利条項はインドのスタートアップ企業にとって何を意味するのか?
Edtech スタートアップがインドの労働力のスキルアップと将来への準備をどのように支援しているか...
今週の新時代のテック株：Zomatoのトラブルは続き、EaseMyTripはスト...
インドの新興企業は資金調達を求めて近道をする
デジタル マーケティング プラットフォームの Logicserve が 80 億ルピーの資金を調達し、LS Dig...
- 色をグレー、白、黒に保ちます。
- 一般的なフォントを使用します。 これにより、ユーザーがタイポグラフィのスタイルに気を取られるのを防ぐことができます。 ただし、フォントで情報の階層を示すことは依然として重要であり、フォントのサイズを変更し、「通常」、「イタリック」、または「太字」にするだけで表示できます。
- 高度に様式化されたグラフィックや画像は避けてください。 代わりに、長方形と正方形をプレースホルダーとして使用し、ボックスの中央に「x」を追加して、画像が配置される場所を示すことをお勧めします. ボックスの中央にある再生ボタンとしての三角形を使用して、ビデオが配置される場所を示すために同じことを行うこともできます.
ワイヤーフレームを使用する 5 つの主な理由
ワイヤーフレームは、デザイン プロセスの早い段階でクライアントに考えてもらいたいことに集中させるための優れたツールです。
ワイヤーフレームは、クライアントや利害関係者が色や画像に気を取られることなく、デザインの構造を説明できる優れた方法です。 ミーティングの目的が、ページにどの要素を配置するか、およびそれらの要素がサイトでどのように機能するかについてクライアントに考えてもらうことである場合、色、画像、および様式化されたページを取り除くだけで、はるかに簡単になります. その後、サイトのナビゲーションやページ上の要素の割り当てについて、クライアントや利害関係者からフィードバックを簡単に収集できます。 行動喚起ボタンとして、赤色が「自分には合わない」ことに注目するのではなく。 おかしく聞こえるかもしれませんが、それはよく起こります。
ワイヤーフレームを使用すると、ページの機能をマッピングし、問題を早期に発見して、後で修正する時間を節約できます。
多くのデザイン要素を含む忠実度の高いモックアップに変更を加えるよりも、ワイヤーフレームに変更を加える方がはるかに簡単です。 忠実度の高いモックアップを作り直す必要があると、変更を加えるのにさらに多くの時間がかかります。 デザイン プロセスの早い段階で、ワイヤーフレームを使用してページの機能を検討することに時間を費やすと、満足のいく結果が得られます。 それは間違いなく、よく費やされた非常に効率的な時間です。
言い換えれば、機能を早期に計画することで、開発段階でしばしば発生するやり取りの量を減らすことができます。 Web アプリケーションに比べて、ワイヤーフレームで関数を書き直す方が断然簡単です。
ワイヤーフレームを使用すると、クライアントをよりよく知ることができます。
クライアントと過ごす時間が長くなればなるほど、行動や動機のパターンが見え始めます。 時間が経つにつれて、彼らのフィードバックから得た知識は、将来彼らとどのように仕事をするのが最善であるか、そして彼らとの時間を最も生産的にする方法に影響を与えるだけです. ワイヤーフレームは、クライアントを集中させる優れた方法でもあります。 最終製品について考え始めるのはワクワクするので、クライアントは 5 歩先を行くのが好きです。 しかし、クライアントがデザインの機能性や構造について考えるのに気を取られる機会をなくすことは、あなたにとって大きなやりがいになるでしょう。
ワイヤーフレームは、フィードバックを収集し、欠陥を早期に発見するための優れたツールです。
効率があなたの目標である場合 (ほとんどの場合そうです)、ワイヤーフレーム作成から始めるべきです。 時間やお金の制約により、忠実度の高いモックアップの設計をすぐに始めなければならないというプレッシャーを感じる場合があります。 質の高いフィードバックを早い段階で収集しないと、後でより骨の折れる時間のかかる改訂プロセスを作成し、すべての効率が大幅に低下する可能性があることを覚えておいてください。
ワイヤーフレームは、スペースの制約を明らかにし、ページ上の要素の階層を設計するのに役立つため、コンテンツに優先順位を付ける優れた方法です。
早い段階でページの階層を視覚化し、スペースの制約を視覚的に表示し始める機会を持つことで、後でページのスタイルを設定し、コンテンツで埋め始めるときに多くの時間を節約できます。 利害関係者からワイヤーフレームに関するフィードバックを収集し、受け取ったフィードバックに基づいてワイヤーフレーム上で物事をすばやく動かし、再びフィードバックを収集し、意図した目標に到達するまで繰り返します。
結論
ワイヤーフレームは使いやすさを前面に押し出し、ページのレイアウトやページ上の要素の機能を説明する強力な方法です。
デザイン プロセスの早い段階でワイヤーフレームを使用することで、あなたとあなたのクライアントは、使いやすさ、コンバージョン パス、要素の配置を客観的に見ることができ、欠陥を早期に指摘するのに役立ちます。 これらはすべて、直感的で機能的で楽しい製品につながるものです。
[この投稿は Proto.io ブログに最初に掲載されたもので、許可を得て転載しています。]