デザインパターンを使用してWeb用にデザインする方法

デザインパターンは、優れたWebサイトのユーザビリティの基盤であり、Webサイトが構築されている要素です。 これらは、優れたユーザーエクスペリエンスを確保するために、Webデザイナーが行う戦略的な設計上の決定です。 デザイナーの仕事は、一般的なユーザビリティの問題を解決し、最もユーザー直感的なソリューションを作成することです。パターンは、予測可能で直感的で最適化されたユーザーエクスペリエンスを作成します。 デザインを初めて使用する場合でも、熟練したプロでも、一般的なUIデザインパターンを常に認識し、パターンの進化に対応する必要があります。

デザインパターンの例

あなたはおそらくコンポーネントについて聞いたことがあるでしょう。 ボタン、フォームフィールド、検索バーなどはすべてそれらの例です。 それらを使用するには、デザインにパターンを作成することでそれらを有効に活用できます。

注意すべき点の1つは、「コンポーネント」と「デザインパターン」という用語が同じ意味で使用される場合があることです。 この記事の目的上、コンポーネントはWebサイトの構成要素であり、パターンは、ユーザーがタスクを実行するために使用される確立された方法です。

ご覧のとおり、パターンは単一のコンポーネントよりも「大きく」なっています。 パターンは、個々のコンポーネントで行われることを最適化する方法です。 次のような多くの従来のデザインパターンがあります。

• ウェブサイトのヘッダーでホームページにリンクするロゴ
• モバイルウェブサイトでのハンバーガーナビゲーション
• 「パスワードのリセット」リンクを使用したログインフォーム
• ユーザーがサイト上の自分の場所を追跡できるようにするブレッドクラム
• アイテムカウンターが付いたカート

なぜデザイナーはデザインパターンに焦点を合わせる必要があるのですか？

デザインパターンを使用することには多くの利点があります。 デザイナーとしての作業がより効率的になるだけでなく、さらに重要なことに、パターンによってユーザーのエクスペリエンスが容易になります。

デザインパターンは信頼を確立します

ユーザーは、サイトに到着した瞬間にすばやく推測します。 ほんの一瞬で、コンテンツを操作する価値があるかどうか、または別のオプションを見つける必要があるかどうかを判断します。

WordPressで1ページのビジネスウェブサイトをデザインする方法

あなたの目標とあなたが含める必要があるコンテンツの量に応じて、あなたがあなたのビジネスのためにウェブサイトをデザインすることができる多くの方法があります。 複雑なサイトを作成することは時々理にかなっていますが...

あなたのサイトはナビゲートしやすいですか？ ユーザーが探している情報を見つけるのは簡単ですか？ クリックしてトラブルシューティングする忍耐力はありません。 良い第一印象を与え、ユーザーとの信頼を確立することは絶対に重要です。

ウェブの歴史になった今、特定のパターンが当たり前になっています。 デザイナーはこれらの確立されたユーザーインターフェイス要素を利用してWebサイトをデザインし、ユーザーはこれらのデザインパターンを見ることに慣れてきました。 彼らはサイト間の共通点を認識し、なじみのあるものを信頼します。

eコマースサイトで確立されたデザインパターンの例を見てみましょう。 ユーザーは、小さな商品のプレビューをグリッドで表示し、クリックして個々の商品の詳細を確認することに慣れています。 デザインに確立されたパターンを使用し、使いやすいエクスペリエンスを作成することで、ユーザーとの信頼関係を構築し、さらにユーザーが再訪問者になる可能性が高くなります。

デザインパターンは直感的です

ユーザーがサイトを操作すると、予測可能性の要素が非常に重要になります。 「予測可能なパターンにより、最も直感的なエクスペリエンスが可能になります。 」 使い慣れたパターンを持つことが重要ですが、それらのパターンが一貫して使用されていることを確認することも重要です。

一般的な予測可能なパターンの例の1つは、フォームにあります。 具体的には、すべてのフォームが検証メッセージとエラーメッセージを提供します。 あなたのサイトのすべてのフォームはこれを一貫して行っていますか？ すべてのメッセージが同じ場所にありますか？ 送信ボタンはどうですか？ フォームが送信されたことを示すメッセージはありますか？

設計の観点から、ユーザーはこれまで何度もこれらのパターンに遭遇しました。 役立つメッセージを使用してフォームの検証を提供すると、問題がどこにあるかがユーザーに示され、フォームが送信されたことを示すメッセージが表示されることは、アクションが発生したことを示す有用な指標です。

優れたユーザーエクスペリエンスにはパターンと予測可能性が必要であると聞くと、常識のように思えるかもしれません。 ただし、一般的なパターンを破るサイトに出くわすのはそれほど難しくありません。これは、フラストレーションや混乱を引き起こす可能性があります。 そのことを念頭に置いて、役立つUIパターンを使用して設計を続けてください。 より多くのユーザーがそれらに精通しているほど、彼らはどのような振る舞いを期待するかをよりよく知っています。 パターンと規則は、ユーザーが混乱するのを防ぎ、パターンに固執することで予測可能なエクスペリエンスを作成します。

デザインパターンは、デザイナー間で共通の言語を提供します

「素晴らしい体験は効果的なデザインから始まります。 」

多くの場合、デザイナーはチームで作業しています。 確立されたデザインパターンがある場合、チームがより効率的に作業するのに役立ちます。 問題がすでに解決されている場合は、車輪の再発明を行う必要はありません。

すべてのパターンを1つの中央フロントエンドスタイルガイドに保持することは、在庫を保持するのに最適な場所です。 グローバルリソースとして、すべてのチームメンバーが各パターンのユースケースを理解するためのクイックガイドです。 ソロで作業している場合でも、使用しているデザインパターンを追跡することで、より効率的に作業し、将来それらを振り返ることができます。

計画段階

デザインパターンを利用する必要がある理由は明らかですが、Webデザイナーは、Web用にデザインするときに、実際にこれらをどのように配置するのでしょうか。 ここでは、設計プロセスを簡単にするためのヒントをいくつか紹介します。

すでに知っていることを使って始めましょう

完全な再設計またはサイトの「拡張」を設計している場合は、インベントリを作成して、すでに知っていることを確認すると便利です。 良い出発点を得ることが重要です。 まったく新しいプロジェクトの場合は、これらのことを考えて、最初は不明な質問があることを期待することが重要です。 このような状況では、過去の設計経験を使用して開始することは、良い最初のステップです。 彼らは他のプロジェクトに取り組んできたので、これは最初の決定を知らせます。

研究を始める

研究は強力なプロジェクト基盤の鍵です。 ご存知のとおり、ユーザーは常にWebサイトで特定のアクションを実行するための最も簡単な方法を探します。 手元にある問題とタスクを理解することで、正しいものを設計していることが保証されます。 まず、次の項目について考えてください。

• 現在のユーザーは誰ですか？ （彼らの目標、人口統計など）
• これらのユーザーについて他に何を知りたいですか？
• 彼らはどのようなパターンと最も相互作用しますか？
• これらのユーザーが問題を抱えているパターンはありますか？
• どのような改善が可能ですか？
• どのような新機能が設計されていますか？
• 現在確立されているパターンは機能しますか？

調査フェーズは、ユーザーがWebサイトを操作するときに何を達成する必要があるかを特定する時期です。 たとえば、コンテンツの検索、ニュースレターの登録、購入などです。慣れ親しんだ要素に直面すると、ユーザーは考える時間が少なくなり、変換する理由が増えます。 Webでの経験から得られた既存の知識に基づいて、ユーザーが慣れ親しんだ方法でパターンを作成することに重点を置いた設計を維持します。

設計上の問題を解決するとき、時間と予算は常に要因ですが、できる限り多くの調査を行います。 今こそ、ユーザーの主な問題点を明らかにし、既存のデザインパターンを研究するときです。 ウェブ上で一般的なことは何ですか？ 過去にどのようなパターンをうまく利用しましたか？ 解決する必要のある問題を定義したら、同じユーザー目標をターゲットとするパターンを持つサイトを探索します。 それはプロジェクトの良いインスピレーションとして役立ちます。 それらを「コピー」する必要はありませんが、そこにあるものに注意することは役に立ちます。

この時点まで、一貫性と予測可能性を維持することをお勧めします。 既存のパターンを変更することができ、何か新しいことをする場合があることは言及する価値があります。 新しいパターンを導入する場合は、それがユーザーデータによって正当化され、十分にテストされていることを確認してください。

デザインパターンを使用したWebのデザイン

プロトタイプとテスト

研究段階が終わったら、学んだことを有効に活用し始めましょう。 ここで、プロトタイピングによってデザインが実現します。 プロセスに応じて、プロトタイプは単純な低忠実度のワイヤーフレームまたはより複雑な高忠実度の設計にすることができます。

ベースラインとしてあなたの研究からの既存のパターンから始めてください。 プロセスを進めるときは、プロトタイプが必要なすべての機能をカバーし、すべてのユーザーの目標を考慮していることを確認してください。 良い出発点に到達するには、少し修正と微調整が必​​要になる場合があります。

ウェブデザインにおける空白の効果的な使用へのガイド

デザイナーはそれを気に入っていますが、ウェブサイトの所有者はそれを埋めたいと思っています。 ホワイトスペースは、貴重な画面スペースの無駄と見なされることがよくあります。 それでも、それはスペースの無駄ではありません！ それは本質的なデザイン要素であり、力です...

すべての要件がプロトタイプに含まれていることを確認したら、設計の使いやすさについての洞察を得るために、いくつかのテストを実行します。 ここで、全体的な機能とともにデザインパターンの有効性を検証します。

プロトタイプ段階でテストが非常に重要である理由は、場合によっては、クライアントが自分の考えやニーズを明確に表現したり、完全に予測したりできないためです。 ユーザーテストでは、伝える代わりに表示することができます。 参加者は、実際にサイトをどのように使用するかを実演し、その行動を観察して学びます。 これは、参加者とデザイナーとしてのあなたの両方に役立ちます。

テストに入るときは、集中力を維持するために、コアユーザーの目標をメモしておくことが重要です。 テスト参加者を招待したら、できるだけ多くのユーザーの前にデザインを配置します。 時間の制約が厳しい場合は、少なくとも5人のユーザーでテストするようにしてください。

ユーザーテストの主題は、それ自体がトピック全体です。 時間と予算に基づいて、最も適切な方法を選択してください。 常に十分な時間をとることは素晴らしいことですが、これが常に可能であるとは限りません。 ピンチでは、「廊下」または「カフェテリアスタイル」のユーザビリティテストが役立つ場合があります（交通量の多いエリアに設置されたユーザビリティテストで、通りかかった人を利用して製品をテストします）。 数人の同僚が関与する場合でも、テストを行わないよりも常に優れています。

たぶん、あなたのデザインパターンは門の外では完璧ではないでしょう。 変更を加える必要があり、更新された設計を検証するためにさらにテストが必要になります。 ただし、各テストフェーズからより多くの洞察を得ることができ、設計が最適化されるまで反復とテストを継続するために学んだことを組み込むことができます。

Webデザインパターンは、一貫したユーザーエクスペリエンスを保証します。 以下は、開始するための詳細情報を提供する役立つリンクです。

• ユーザーテストの包括的なガイド
• スティーブ・クリュッグのロケット手術が簡単に
• スタイルガイドの例

何か新しいことを学ぶ準備はできましたか？ 次のチュートリアルのいずれかを試してください。

• Photoshopでネオングロー効果を作成する方法
• WordPressで1ページのビジネスウェブサイトをデザインする方法
• WordPressサイトをモバイルフレンドリーにする方法
• CSS変数を追加してWordPressの子テーマをカスタマイズする方法