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

公開: 2023-03-02

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

デザインパターンの例

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

「コンポーネント」と「設計パターン」という用語は、同じ意味で使用されることがあります。この記事では、コンポーネントは Web サイトのビルディングブロックであり、パターンはユーザーがタスクを実行するために使用される確立された方法です。

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

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

なぜデザイナーはデザインパターンに注目すべきなのか?

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

デザインパターンが信頼を確立する

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

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

Web の歴史の中で、特定のパターンが一般的になってきました。デザイナーは、これらの確立されたユーザーインターフェイス要素に依存して Web サイトをデザインしてきました。ユーザーは、これらのデザインパターンを目にすることに慣れてきました。サイト間の共通点を認識し、よく知っているものを信頼します。

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

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

ユーザーがサイトを操作するとき、予測可能性の要素が非常に重要になります。 [twitter_link]予測可能なパターンは、最も直感的な体験を可能にします。[/twitter_link]慣れ親しんだパターンを持つことが重要ですが、それらのパターンが一貫して使用されていることを確認することも重要です。

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

デザインの観点から、ユーザーはこれらのパターンに何度も遭遇しています。役立つメッセージでフォームの検証を提供することで、ユーザーに問題があることを示し、フォームが送信されたことを示すメッセージを表示することで、アクションが実行されたことを示すのに役立ちます。

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

設計パターンは、設計者間の共通言語を提供します

[twitter_link]優れた体験は効果的なデザインから始まります。[/twitter_link]

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

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

計画フェーズ

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

すでに知っていることを使って始める

完全な再設計またはサイトの「拡張」を設計している場合は、目録を作成して、既に知っていることを調べると役に立ちます。良い出発点を得ることが重要です。まったく新しいプロジェクトの場合は、これらのことについて考え、最初は不明な点があることを想定することが重要です。このような状況では、過去の設計経験を利用して始めることが最初のステップとして適切です。彼らは他のプロジェクトに取り組んでいるため、これは最初の決定を通知します。

研究を始める

研究は、強力なプロジェクト基盤の鍵です。ご存じのとおり、ユーザーは常に、Web サイトで特定のアクションを実行するための最も簡単な方法を探します。目の前の問題とタスクを理解することで、正しいものを設計していることを確認できます。まず、次の項目について考えてみましょう。

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

調査フェーズは、ユーザーが Web サイトを操作するときに何を達成する必要があるかを特定する時期です。例としては、コンテンツの検索、ニュースレターへのサインアップ、購入などがあります。慣れ親しんだ要素に直面すると、ユーザーは考える時間が減り、コンバージョンする理由が増えます。 Web での経験からの既存の知識に基づいて、ユーザーが親しみやすい方法でパターンを作成することに焦点を当てたデザインを維持してください。

設計上の問題を解決する場合、時間と予算は常に重要な要素ですが、できる限り多くの調査を行います。ユーザーの主な問題点を明らかにし、既存の設計パターンを調査するときが来ました。ウェブ上で一般的なことは何ですか？過去にうまく利用したパターンは何ですか? 解決する必要がある問題を定義したら、同じユーザーの目標を対象とするパターンを持つサイトを調査します。それはプロジェクトの良いインスピレーションになります。それらを「コピー」する必要はありませんが、そこにあるものを書き留めておくと役に立ちます。

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

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

プロトタイプとテスト

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

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

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

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

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

ユーザーテストの主題は、それ自体が全体のトピックです。時間と予算に基づいて、最も理にかなった方法を選択してください。常に十分な時間を確保できれば素晴らしいことですが、これが常に可能であるとは限りません。いざという時には、「廊下」や「カフェテリアスタイル」のユーザビリティテストが役に立ちます (製品をテストするために通りかかった人を利用して、人通りの多いエリアに設定されたユーザビリティテスト)。何人かの同僚が参加する場合でも、テストを行わないよりは常に優れています。

おそらく、あなたのデザインパターンは最初から完璧ではないでしょう。変更を加える必要があり、更新された設計を検証するためにさらにテストが必要になります。ただし、各テスト段階からより多くの洞察を得ることができ、学んだことを取り入れて、設計が最適化されるまで反復とテストを続けることができます。

デスクトップシーンの Adobe Illustrator のパターンを使用したデザインパターンチュートリアルの例

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

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

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