Webデザインの包括的なガイド

（これは後援された投稿です） 。 Webデザインには注意が必要です。 デザイナーや開発者は、Webサイトを設計する際に、外観（ Webサイトの外観）から機能設計（ Webサイトの動作）まで、多くのことを考慮する必要があります。 タスクを簡素化するために、この小さなガイドを用意しました。

この記事では、Webサイトの優れたユーザーエクスペリエンスを作成するのに役立つ主な原則、ヒューリスティック、およびアプローチに焦点を当てます。 まず、ユーザージャーニー（Webサイトの「スケルトン」を定義する方法）などのグローバルなものから始めて、個々のページ（Webページの設計時に考慮すべきこと）に進みます。 また、モバイルの考慮事項やテストなど、設計の他の重要な側面についても説明します。

ユーザージャーニーのデザイン

情報アーキテクチャ

人々はしばしば「情報アーキテクチャ」（IA）という用語をウェブサイトのメニューを意味するために使用します。 しかし、それは正しくありません。 メニューはIAの一部ですが、それらはその1つの側面にすぎません。

IAとは、明確で論理的な方法で情報を整理することです。 このような組織は、ユーザーが複雑な情報セットをナビゲートするのを支援するという明確な目的に従います。 優れたIAは、ユーザーの期待に沿った階層を作成します。 しかし、優れた階層と直感的なナビゲーションは偶然ではありません。 これらは、適切なユーザー調査とテストの結果です。

ユーザーのニーズを調査する方法はいくつかあります。 多くの場合、情報アーキテクトはユーザーインタビューやカードの並べ替えに積極的に参加し、ユーザーの期待を直接聞いたり、将来のユーザーがさまざまな情報グループをどのように分類するかを確認します。 情報アーキテクトは、ユーザーが効率的にナビゲートできるかどうかを確認するために、ユーザビリティテストの結果にアクセスする必要もあります。

ユーザーインタビューの結果に基づいてメニュー構造が作成され、カードの並べ替えがユーザーのメンタルモデルを満たしているかどうかがテストされます。 UXの研究者は、「ツリーテスト」と呼ばれる手法を使用して、それが機能することを証明します。 これは、実際のインターフェイスを設計する前に発生します。

グローバルナビゲーション

ナビゲーションは使いやすさの要です。 ユーザーが自分の道を見つけることができなくても、あなたのウェブサイトがどれほど優れているかは問題ではありません。 そのため、Webサイトのナビゲーションはいくつかの原則に従う必要があります。

• シンプルナビゲーションは、訪問者ができるだけ少ないクリックで行きたい場所に行くことができるように設計する必要があります。
• 明確さ各ナビゲーションオプションの意味について推測する必要はありません。 すべてのナビゲーションオプションは、訪問者にとって自明である必要があります。
• 一貫性ナビゲーションシステムは、Webサイトのすべてのページで同じである必要があります。

ナビゲーションを設計するときは、次の点を考慮してください。

• ユーザーのニーズに基づいてナビゲーションパターンを選択します。 ナビゲーションは、アプリのユーザーの大多数のニーズに対応する必要があります。 特定のターゲットグループは、Webサイトとの特定のタイプのインタラクションを期待しているため、これらの期待がうまく機能するようにします。 たとえば、ユーザーの大多数がアイコン自体の意味に精通していない場合は、ハンバーガーメニューのナビゲーションを避けてください。
• ナビゲーションオプションを優先します。 ナビゲーションオプションに優先順位を付ける簡単な方法の1つは、一般的なユーザータスクにさまざまな優先度レベル（高、中、低）を割り当て、優先度が高く頻繁に使用されるパスと宛先にレイアウトを目立たせることです。
• 見えるようにします。 ヤコブ・ニールセンが言うように、何かを認識することはそれを覚えるよりも簡単です。 すべての重要なナビゲーションオプションを永続的に表示することにより、ユーザーのメモリ負荷を最小限に抑えます。 最も重要なナビゲーションオプションは、ユーザーが必要になると予想される場合だけでなく、常に利用できる必要があります。
• 現在の場所を伝えます。 "ここはどこ？" は、ユーザーが効果的にナビゲートするために答えが必要な基本的な質問です。 現在の場所を示さないことは、多くのWebサイトで一般的な問題です。 ロケーションインジケーターについて考えてください。

リンクとナビゲーションオプション

リンクとナビゲーションオプションは、ナビゲーションプロセスの重要な要素であり、ユーザージャーニーに直接影響します。 これらのインタラクティブな要素を使用して、いくつかのルールに従います。

• 内部リンクと外部リンクの違いを認識します。 ユーザーは、内部リンクと外部リンクで異なる動作を期待しています。 すべての内部リンクが同じタブで開く必要があります（このようにして、ユーザーが「戻る」ボタンを使用できるようにします）。 新しいウィンドウで外部リンクを開くことにした場合は、新しいウィンドウまたはタブを自動的に開く前に、事前の警告を提供する必要があります。 これは、「（新しいウィンドウで開きます）」というリンクテキストに追加されたテキストの形式をとる場合があります。
• 訪問したリンクの色を変更します。 訪問したリンクの色が変わらない場合、ユーザーは意図せずに同じページに再度アクセスする可能性があります。

• すべてのリンクを再確認してください。 ユーザーは、リンクをクリックして404エラーページを表示することで、簡単にイライラする可能性があります。 訪問者がコンテンツを検索しているとき、彼らはすべてのリンクが、404エラーページや予期していなかった別の場所ではなく、意図した場所にそれらを移動することを期待しています。

ブラウザの「戻る」ボタン

「戻る」ボタンは、おそらくブラウザで2番目に人気のあるUIコントロールです（URL入力フィールドの次に）。 「戻る」ボタンがユーザーの期待どおりに機能することを確認してください。 ユーザーがページ上のリンクをたどってから「戻る」ボタンをクリックすると、元のページの同じ場所に戻ることを期待します。 特にページで、「戻る」をクリックすると、ユーザーが中断した場所ではなく、最初のページの上部に移動するという無効な状況。 スポットを失うと、ユーザーはすでに見たコンテンツをスクロールする必要があります。 適切な「位置に戻る」機能がないと、ユーザーがすぐにイライラするのは当然のことです。

パン粉

ブレッドクラムは、Webサイトのナビゲーション支援として機能する一連のコンテキストリンクです。 これは、通常、Webサイト上のユーザーの場所を表示するセカンダリナビゲーションスキームです。

この要素は多くの説明を必要としませんが、いくつか言及する価値があります。

• プライマリナビゲーションの代わりにブレッドクラムを使用しないでください。 メインナビゲーションはユーザーを導く要素である必要がありますが、ブレッドクラムはユーザーのみをサポートする必要があります。 余分な機能ではなく、ナビゲーションの主要な方法としてパンくずリストに依存することは、通常、ナビゲーションの設計が不十分であることを示しています。
• 区切り文字として、スラッシュではなく矢印を使用します。 各レベルを明確に分離します。 大なり記号（>）または右向き矢印（→）をお勧めします。これらの記号は方向を示すためです。 eコマースWebサイトの区切り文字として、スラッシュ（/）はお勧めしません。 これを使用する場合は、スラッシュを使用する製品カテゴリがないことを確認してください。

検索

一部のユーザーは、特定の1つのアイテムを探してWebサイトにアクセスします。 彼らはナビゲーションオプションを使いたくないのです。 彼らは検索ボックスにテキストを入力し、検索クエリを送信して、探しているページを見つけたいと考えています。

検索ボックスを設計するときは、次のいくつかの基本的なルールを考慮に入れてください。

• ユーザーが検索する予定の場所に検索ボックスを配置します。 以下のチャートは、A。DawnShaikhとKeisiLenzによる調査に基づいて作成されました。 142人の参加者の調査によると、検索フィールドの予想される場所が表示されます。 調査によると、最も便利な場所は、Webサイトのすべてのページの左上または右上です。 ユーザーは、一般的なF字型のスキャンパターンを使用して簡単に見つけることができます。

個々のページのデザイン

コンテンツ戦略

おそらく、コンテンツ戦略で最も重要なことは、ページの目的にデザインを集中させることです。 ページの目的を理解し、目的に応じてコンテンツを作成します。

コンテンツの理解を向上させるためのいくつかの実用的なヒントを次に示します。

• 情報過多を防ぎます。 情報過多は深刻な問題です。 これにより、ユーザーは情報が多すぎて消費できないと感じて、意思決定や行動をとることができなくなります。 情報過多を最小限に抑える簡単な方法がいくつかあります。 一般的な手法の1つは、チャンク化です。コンテンツを小さなチャンクに分割して、ユーザーがコンテンツをよりよく理解して処理できるようにします。 チェックアウトフォームは完璧な例です。 一度に最大5〜7個の入力フィールドを表示し、チェックアウトをページに分割し、必要に応じてフィールドを段階的に開示します。

• 専門用語や業界固有の用語は避けてください。 ページに表示される不明な用語やフレーズはそれぞれ、ユーザーの認知的負荷を増大させます。 安全な方法は、すべてのレベルの読者のために書き、すべてのユーザーグループが明確かつ簡単に理解できる単語を選ぶことです。
• 詳細の多い長いコンテンツセクションを最小限に抑えます。 情報過多に関するポイントに沿って、Webサイトが主要な情報消費に対応していない場合は、長いテキストブロックを避けるようにしてください。 たとえば、サービスや製品に関する詳細を提供する必要がある場合は、詳細を段階的に明らかにしてみてください。 発見を容易にするために、スキャン可能な小さなセグメントに書き込みます。 ロバート・ガンニングの著書「ビジネスライティングから霧を取り除く方法」によると、快適に読むためには、ほとんどの文は20語以下である必要があります。

• すべての文字を大文字にすることは避けてください。 オールキャップスのテキスト（つまり、すべての文字が大文字になっているテキスト）は、頭字語やロゴなどの少量のテキストで問題ありません。 ただし、それより長いもの（段落、フォームラベル、エラー、通知など）のすべての大文字は避けてください。 マイルズ・ティンカーが著書 『 Legibility of Print 』で述べているように、すべて大文字で読むと、読書の速度が劇的に低下します。 また、ほとんどの読者は、すべての大文字が読みにくいと感じています。

ページ構造

適切に構造化されたページにより、各ユーザーインターフェイス要素がレイアウトのどこにあるかが明確になります。 万能のルールはありませんが、堅固な構造を作成するのに役立つガイドラインがいくつかあります。

• 構造を予測可能にします。 デザインをユーザーの期待に合わせます。 同様のカテゴリのWebサイトを検討して、ページで使用する要素と場所を見つけてください。 ターゲットオーディエンスが精通しているパターンを使用します。
• レイアウトグリッドを使用します。 レイアウトグリッドは、ページを主要な領域に分割し、サイズと位置の観点から要素間の関係を定義します。 グリッドの助けを借りて、まとまりのあるレイアウトでページのさまざまな部分を組み合わせることがはるかに簡単になります。

• 忠実度の低いワイヤーフレームを使用して、雑然としたものを切り取ります。 クラッターはインターフェイスを過負荷にし、理解を低下させます。 ボタン、画像、テキスト行を追加するたびに、画面がより複雑になります。 実際の要素を使用してページを作成する前に、ワイヤーフレームを作成して分析し、絶対に必要ではないものをすべて取り除きます。

視覚的階層

人々は、Webページのすべてを読むよりも、Webページをすばやくスキャンする可能性が高くなります。 したがって、訪問者がコンテンツを検索したり、タスクを完了したりする場合は、移動する必要のある場所が見つかるまでスキャンします。 あなたは、デザイナーとして、優れた視覚的階層を設計することにより、それを支援することができます。 視覚的階層とは、重要性を示す方法（つまり、目が最初、2番目などに焦点を合わせる場所）での要素の配置または表示を指します。 適切な視覚的階層により、ページのスキャンが容易になります。

• 自然なスキャンパターンを使用します。 デザイナーとして、私たちは人々がページを見ているときにどこを見るかについて多くのコントロールを持っています。 訪問者の目がたどる正しい経路を設定するために、F字型パターンとZ字型パターンの2つの自然なスキャンパターンを使用できます。 記事や検索結果などのテキストが多いページの場合はFパターンが適していますが、テキスト指向ではないページの場合はZパターンが適しています。

• 重要な要素に視覚的に優先順位を付けます。 画面のタイトル、ログインフォーム、ナビゲーションオプション、およびその他の重要なコンテンツの焦点を作成して、訪問者がすぐにそれらを確認できるようにします。

• 視覚的な階層を明確にするためにモックアップを作成します。 モックアップを使用すると、設計者は、実際のデータがある場合にレイアウトがどのように見えるかを確認できます。 モックアップ内の要素の再配置は、開発者がWebページを構築しているときに行うよりもはるかに簡単です。

スクロール動作

Webデザイナーの間で根強い神話は、人々はスクロールしないというものです。 明確にするために：今日、誰もがスクロールします！

スクロール動作の改善は、いくつかのヒントで可能です。

• ユーザーにスクロールするように促します。 通常、ユーザーはページが読み込まれるとすぐにスクロールを開始しますが、ページ上部のコンテンツは依然として非常に重要です。 上部に表示されるものは、訪問者の品質に対する印象と期待を設定します。 人々はスクロールしますが、折り目の上にあるものが十分に有望である場合に限ります。 したがって、最も説得力のあるコンテンツをページの上部に配置します。
  • 良い紹介を提供します。 優れた紹介は、コンテンツのコンテキストを設定し、「このページは何についてですか？」というユーザーの質問に答えます。
  • 魅力的な画像を使用します。 ユーザーは、関連情報を含む画像に細心の注意を払います。
• ナビゲーションオプションを永続化します。 長いページを作成する場合でも、ユーザーは（現在の場所の）方向感覚とナビゲーション感覚（他の可能なパス）を必要とすることに注意してください。 ページが長いと、ユーザーにとってナビゲーションが問題になる可能性があります。 ユーザーが下にスクロールしたときに上部のナビゲーションバーが表示されなくなった場合、ページの奥深くにいるときに上にスクロールする必要があります。 これに対する明らかな解決策は、現在の場所を表示し、常に一貫した領域で画面に表示されるスティッキーメニューです。

• 新しいコンテンツをロードするときに視覚的なフィードバックを提供します。 これは、コンテンツが動的に読み込まれるWebページ（ニュースフィードなど）にとって特に重要です。 スクロール中のコンテンツの読み込みは高速であると想定されているため（2〜10秒以上かかることはありません）、ループアニメーションを使用して、システムが機能していることを示すことができます。

• スクロールを乗っ取らないでください。 ハイジャックされたスクロールは、ユーザーから制御を奪い、スクロールの動作を完全に予測できないものにするため、最も厄介なものの1つです。 Webサイトを設計するときは、ユーザーがWebサイトの閲覧と移動を制御できるようにします。

コンテンツの読み込み

コンテンツの読み込みは、さらに明確にする価値があります。 即時応答が最善ですが、Webサイトが訪問者にコンテンツを配信するためにより多くの時間を必要とする場合があります。 インターネット接続が悪いと、反応が遅くなったり、操作が完了するまでに少し時間がかかる場合があります。 しかし、そのような動作の原因に関係なく、Webサイトは高速で応答性が高いように見える必要があります。

• 通常の読み込みに時間がかからないことを確認してください。 Webユーザーの注意力と忍耐力は非常に低いです。 Nielsen Norman Groupの調査によると、10秒は、ユーザーの注意をタスクに向け続けるためのほぼ限界です。 訪問者がWebサイトのロードを待たなければならない場合、Webサイトのロードが十分に速くないと、訪問者はイライラし、離れてしまう可能性があります。 最も美しく設計されたローディングインジケーターを使用しても、ローディングに時間がかかりすぎると、ユーザーは離れます。
• ロード中にスケルトンスクリーンを使用します。 多くのWebサイトは、進行状況インジケーターを使用して、データが読み込まれていることを示します。 進行状況インジケーターの背後にある意図は良好ですが（視覚的なフィードバックを提供する）、結果は否定的なものになる可能性があります。 Luke Wroblewskiが述べているように、「進行状況インジケーターは、定義上、誰かが待つ必要があるという事実に注意を喚起します。 時計が止まるのを見るようなものです。そうすると、時間が遅くなるようです。」 進行状況インジケーターの優れた代替手段があります。スケルトン画面です。 これらのコンテナは、基本的にページの一時的に空白のバージョンであり、情報が徐々に読み込まれます。 設計者は、負荷インジケーターを表示するのではなく、スケルトン画面を使用して、ユーザーの注意を実際の進行状況に集中させ、今後の見通しを立てることができます。 これは、情報が画面に段階的に表示され、人々が待っている間にWebサイトが動作していることを確認するため、物事がすぐに起こっているという感覚を生み出します。

ボタン

ボタンは、スムーズな会話の流れを作り出すために不可欠です。 ボタンの次の基本的なベストプラクティスに注意を払う価値があります。

• クリック可能な要素が要素のように見えることを確認します。 ボタンやその他のインタラクティブな要素を使用して、デザインがアフォーダンスをどのように伝えるかを考えてください。 ユーザーは要素をボタンとしてどのように理解しますか？ フォームは関数に従う必要があります。オブジェクトの外観は、ユーザーにその使用方法を指示します。 リンクやボタンのように見えるがクリックできない視覚要素（リンクではない下線付きの単語や、背景が長方形でボタンではない要素など）は、ユーザーを簡単に混乱させる可能性があります。

• ボタンの動作に応じてボタンにラベルを付けます。 アクション可能なインターフェイス要素のラベルは、常にユーザーに対して何をするかと結び付けられている必要があります。 ボタンの動作を理解すれば、ユーザーはより快適に感じるでしょう。 「送信」などのあいまいなラベルや、以下の例のような抽象的なラベルは、アクションに関する十分な情報を提供しません。

• ボタンを一貫してデザインします。 ユーザーは、意識しているかどうかにかかわらず、詳細を覚えています。 Webサイトを閲覧するとき、特定の要素の形状をボタンの機能に関連付けます。 したがって、一貫性は見栄えの良いデザインに貢献するだけでなく、ユーザーにとってより親しみやすいエクスペリエンスになります。 下の画像は、この点を完全に示しています。 アプリの一部（システムツールバーなど）で3つの異なる形状を使用すると、混乱するだけでなく、ずさんなことになります。

画像

言われているように、絵は千の言葉の価値があります。 人間は非常に視覚的な生き物であり、視覚情報をほぼ瞬時に処理することができます。 私たちが知覚し、脳に伝達されるすべての情報の90％は視覚的です。 画像は、ユーザーの注意を引き付け、製品を差別化するための強力な方法です。 単一の画像は、精巧に設計されたテキストのブロックよりも多くのことを視聴者に伝えることができます。 さらに、画像は、テキストでは不可能な方法で言語の壁を越えます。

次の原則は、Webデザインに画像を統合するのに役立ちます。

• 画像が関連していることを確認してください。 デザインにおける最大の危険の1つは、間違ったメッセージを伝える画像です。 製品の目標を強力にサポートする画像を選択し、それらがコンテキストに関連していることを確認します。

• 人々の一般的な写真は避けてください。 デザインで人間の顔を使用することは、ユーザーを引き付ける効果的な方法です。 他の人間の顔を見ると、商品を売っているだけでなく、自分とつながっているような気分になります。 ただし、多くの企業Webサイトは、一般的なストックフォトを使用して信頼感を構築することで有名です。 ユーザビリティテストでは、このような写真がデザインに付加価値を与えることはめったになく、ユーザーエクスペリエンスを向上させるのではなく、損なうことが多いことが示されています。

• 歪みのない高品質のアセットを使用してください。 あなたのウェブサイトの資産の質は、あなたのサービスに対するユーザーの印象と期待に多大な影響を及ぼします。 すべてのプラットフォームで表示できるように、画像のサイズが適切であることを確認してください。 画像がピクセル化されて表示されないようにする必要があるため、さまざまな比率とデバイスの解像度サイズをテストします。 写真とグラフィックを元のアスペクト比で表示します。

ビデオ

インターネットの速度が上がるにつれて、特にサイトで過ごす時間が長くなることを考えると、ビデオの人気が高まっています。 今日、ビデオはいたるところにあります。 デスクトップ、タブレット、携帯電話で視聴しています。 ビデオを効果的に使用すると、視聴者を引き付けるために利用できる最も強力なツールの1つになります。ビデオはより多くの感情を伝え、実際に人々に製品やサービスの感触を与えます。

• オーディオをデフォルトでオフに設定し、オプションでオンにします。 ユーザーがページにアクセスしたとき、ユーザーはそのページがサウンドを再生することを期待していません。 ほとんどのユーザーはヘッドホンを使用せず、サウンドをオフにする方法を理解する必要があるため、ストレスを感じるでしょう。 ほとんどの場合、ユーザーはWebサイトが再生されるとすぐにWebサイトを離れます。

• プロモーションビデオはできるだけ短くしてください。 D-Mak Productionsの調査によると、短い動画は大多数のユーザーにとってより魅力的です。 したがって、ビジネスビデオは2〜3分の範囲に収めてください。

• コンテンツにアクセスするための代替方法を提供します。 ビデオがコンテンツを消費する唯一の方法である場合、これにより、コンテンツを表示または聞くことができない人の情報へのアクセスが制限される可能性があります。 アクセシビリティのために、キャプションとビデオの完全なトランスクリプトを含めます。
  

召喚ボタン

召喚状（CTA）は、ユーザーをコンバージョン目標に導くボタンです。 CTAの要点は、訪問者を希望する行動方針に誘導することです。 CTAの一般的な例は次のとおりです。

• 「トライアルを開始する」
• 「本をダウンロードする」
• 「アップデートにサインアップ」
• 「相談を受ける」

CTAボタンを設計するときは、いくつかの点に注意してください。

• サイズCTAは、遠くから見るのに十分な大きさである必要がありますが、ページ上の他のコンテンツから注意をそらすほど大きくてはなりません。 CTAがページ上で最も目立つ要素であることを確認するには、5秒間のテストを試してください。Webページを5秒間表示してから、覚えていることを書き留めます。 CTAがリストに含まれている場合は、おめでとうございます。 適切なサイズです。
• 視覚的な目立ちCTAに選択する色は、目立つかどうかに大きな影響を与えます。 色を使用すると、特定のボタンを他のボタンよりも目立たせることができます。 対照的な色はCTAに最適で、印象的なボタンになります。

• ネガティブスペースCTAの周囲のスペースの量も重要です。 白い（またはネガティブな）スペースは、本質的な呼吸の余地を作り、ボタンをインターフェースの他の要素から分離します。

• アクション指向のテキスト訪問者にアクションを強制するボタンのテキストを記述します。 「開始」、「取得」、「参加」などの動詞で始めます。

ヒント：ぼかし効果を使用して、CTAをすばやくテストできます。 ぼかしテストは、ユーザーの目が目的の場所に移動するかどうかを判断するための簡単な手法です。 ページのスクリーンショットを撮り、Adobe XDでぼかし効果を適用します（下記のチャリティーウォーターの例を参照）。 あなたのページのぼやけたバージョンを見て、どの要素が目立ちますか？ 投影されているものが気に入らない場合は、修正してください。

Webフォーム

フォームへの入力は、依然としてWeb上のユーザーにとって最も重要なタイプのインタラクションの1つです。 実際、フォームは、目標を達成するための最終ステップと見なされることがよくあります。 ユーザーは、混乱することなくすばやくフォームに入力できる必要があります。 フォームは会話のようなものであり、他の会話と同様に、ユーザーとWebサイトの2者間で論理的なコミュニケーションが必要です。

• 必要なものだけを聞いてください。 本当に必要なものだけを求めてください。 フォームに追加するすべてのフィールドは、その変換率に影響します。 ユーザーに特定の情報を要求する理由と、それをどのように使用するかを常に考えてください。
• フォームを論理的に注文します。 質問は、アプリケーションやデータベースの観点からではなく、ユーザーの観点から論理的に行う必要があります。 たとえば、名前の前に誰かの住所を尋ねるのは正しくありません。
• 関連するフィールドをグループ化します。 関連情報を論理ブロックまたはセットにグループ化します。 ある質問セットから次の質問セットへの流れは、会話によく似ています。 関連するフィールドをグループ化すると、ユーザーが情報を理解するのにも役立ちます。

アニメーション

ますます多くのデザイナーが、ユーザーエクスペリエンスを向上させるための機能要素としてアニメーションを組み込んでいます。 アニメーションはもはや喜びのためだけのものではありません。 これは、効果的な相互作用のための最も重要なツールの1つです。 ただし、デザインのアニメーションは、適切なタイミングと場所に組み込まれている場合にのみ、ユーザーエクスペリエンスを向上させることができます。 優れたUIアニメーションには目的があります。 それは意味があり、機能的です。

アニメーションがエクスペリエンスを向上させることができるいくつかのケースを次に示します。

• ユーザーアクションに関する視覚的なフィードバック優れたインタラクションデザインはフィードバックを提供します。 操作の結果についてユーザーに通知する必要がある場合は、視覚的なフィードバックが役立ちます。 操作が正常に実行されなかった場合、機能アニメーションは問題に関する情報をすばやく簡単に提供できます。 たとえば、間違ったパスワードが入力された場合にシェイクアニメーションを使用できます。 単純な頭の揺れが対人コミュニケーションで非常に一般的であるため、揺れが「いいえ」を伝えるためのかなり普遍的なジェスチャーである理由を理解するのは簡単です。

• システムステータスの可視性JakobNielsenの使いやすさに関する10のヒューリスティックの1つであるシステムステータスの可視性は、ユーザーインターフェイス設計の最も重要な原則の1つです。 ユーザーはいつでもシステム内の現在のコンテキストを知りたいので、アプリは推測を続けるべきではありません。適切な視覚的フィードバックを介して何が起こっているかをユーザーに伝える必要があります。 データのアップロードとダウンロードの操作は、機能的なアニメーションの絶好の機会です。 たとえば、アニメーション化された読み込みバーは、プロセスの進行速度を示し、アクションが処理される速度の期待値を設定します。

• ナビゲーション遷移ナビゲーション遷移は、Webサイト上の状態間の移動です。たとえば、高レベルのビューから詳細なビューへの移動です。 状態の変化には、デフォルトでハードカットが含まれることが多く、追跡が困難になる可能性があります。 機能的なアニメーションは、これらの変化の瞬間を通じてユーザーを容易にし、ナビゲーションコンテキスト間でユーザーをスムーズに移動し、状態間の視覚的な接続を作成することで画面上の変化を説明します。

• ブランディングまったく同じ機能を備え、ユーザーが同じタスクを実行するのに役立つWebサイトが数十あるとします。 それらはすべて優れたユーザーエクスペリエンスを提供する可能性がありますが、人々が本当に愛しているものは、単なる優れたユーザーエクスペリエンス以上のものを提供します。 それはユーザーとの感情的なつながりを確立します。 ブランディングアニメーションは、ユーザーを引き付ける上で重要な役割を果たします。 これは、企業のブランド価値をサポートし、製品の長所を強調し、ユーザーエクスペリエンスを本当に楽しく思い出深いものにすることができます。

モバイルに関する考慮事項

現在、ユーザーのほぼ50％がモバイルデバイスからWebにアクセスしています。 これは私たちのWebデザイナーにとって何を意味しますか？ これは、デザインするすべてのWebサイトにモバイル戦略が必要であることを意味します。

レスポンシブウェブデザインの実践

それぞれが異なる画面解像度、サポートされているテクノロジー、およびユーザーベースを備えているデスクトップおよびモバイルブラウザーの広大な風景に合わせてWebサイトを最適化することが不可欠です。

• 単一列のレイアウトを目指します。 通常、単一列のレイアウトはモバイル画面で最適に機能します。 単一の列は、小さな画面で限られたスペースを管理するのに役立つだけでなく、さまざまなデバイス解像度間や縦向きモードと横向きモードの間で簡単にスケーリングできます。
• Priority +パターンを使用して、ブレークポイント間のナビゲーションに優先順位を付けます。 Priority +は、Michael Scharnaglによって造られた用語で、最も重要な要素と見なされるものを公開し、重要度の低いアイテムを「詳細」ボタンの後ろに隠すナビゲーションを表します。 利用可能な画面スペースを利用します。 スペースが増えると、表示されるナビゲーションオプションの数も増え、視認性とエンゲージメントが向上します。 このパターンは、さまざまなセクションやページが多数あるコンテンツの多いWebサイト（ニュースWebサイトや大規模な小売店など）に特に適しています。 Guardianは、セクションナビゲーションにPriority +パターンを使用します。 ユーザーが「すべて」ボタンを押すと、重要度の低い項目が表示されます。

• 画像がディスプレイやプラットフォームに適したサイズになっていることを確認してください。 Webサイトは、さまざまなデバイスのすべてで、さまざまな解像度、ピクセル密度、および向きのすべてで完璧に見えるように適応する必要があります。 画像の管理、操作、配信は、レスポンシブWebサイトを構築するときにWebデザイナーが直面する主な課題の1つです。 このタスクを簡素化するために、レスポンシブ画像ブレークポイントジェネレーターなどのツールを使用して、画像のブレークポイントをインタラクティブに生成できます。

クリック可能からタップ可能への移行

モバイルウェブでは、インタラクションはマウスクリックではなく指タップで行われます。 これは、タッチターゲットとインタラクションを設計するときに異なるルールが適用されることを意味します。

• 適切なサイズのタッチターゲット。 すべてのインタラクティブ要素（リンク、ボタン、メニューなど）はタップ可能である必要があります。 デスクトップWebは、アクティブな（つまりクリック可能な）領域が小さく正確なリンクに適していますが、モバイルWebには、親指で簡単に押すことができる、大きくて分厚いボタンが必要です。 When a tap is used as a primary input method for your website, refer to the MIT Touch Lab's study to choose a proper size for your buttons. The study found that the average size of finger pads are between 10 and 14 millimeters and that fingertips range from 8 to 10, making 10 × 10 millimeters a good minimum touch target size.

• Stronger visual signifiers of interactivity. On the mobile web, there is no hover state. While on a desktop, it's possible to provide additional visual feedback when a user hovers the mouse over an element (for example, revealing a dropdown menu), a mobile user would have to tap to see that response. Thus, users should be able to correctly predict how an interface element will behave just by looking at it.

アクセシビリティ

Today's products must be accessible to everyone, regardless of a person's abilities. Designing for users with impairments is one way that designers can practice empathy and learn to experience the world from someone else's perspective.

Users With Poor Eyesight

A lot of websites use low contrast for text copy. While low-contrast text may be trendy, it's also illegible and inaccessible. Low contrast is especially problematic for users with low vision and who struggle with contrast sensitivity.

Low-contrast text is hard to read on a desktop, but it becomes even more difficult on mobile. Imagine trying to read low-contrast text on a mobile device while walking in bright sunlight. This is a good reminder that accessible visual design is better visual design for all users.

Never sacrifice usability for beauty. The most important characteristic of text and other vital elements on a website is readability. Readability requires sufficient contrast between text and background. To ensure that text is readable by people with visual impairments, the W3C's Web Content Accessibility Guidelines (WCAG) has a contrast-ratio recommendation. The following contrast ratios are recommended for body text and image text:

• Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio of 7:1 is preferable.
• Large text (at 14-point bold and 18-point regular and up) should have a contrast ratio of at least 3:1 against its background.

You can use WebAIM's Color Contrast Checker to quickly find out whether you're within the optimal range.

Color Blind Users

It's estimated that 4.5% of the global population experience color blindness (that's 1 in 12 men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind (1 in 188 people). It's easy to forget that we design for this group of users because most designers don't experience such problems.

To make design accessible for these users, avoid using color alone to convey meaning. As the W3C states, color shouldn't be used “as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

One common example where color is used as the sole means of conveying information is alerts in forms. Success and error messages are often colored green and red, respectively. But red and green are the colors most affected by color-vision deficiency — these colors can be difficult to distinguish for people with deuteranopia or protanopia. Most probably, you've seen error messages like, “The fields marked in red are required.” While it might not seem like a big deal, this error message appearing in a form like the one below can be extremely frustrating for people with a color-vision deficiency. Designers should use color to highlight or complement what is already visible.

In the form above, the designer should give more specific instruction, like, “The email address you entered is not valid.” Or at least display an icon near the field that requires attention.

Blind Users

Images and illustrations are a significant part of the web experience. Blind people use assistive technologies such as screen readers to interpret websites. Screen readers “read” images by relying on alternative text attributed to the image. If that text is not present or is not descriptive enough, they won't be able to get the information as intended.

Consider two examples — first, Threadless, a popular t-shirt store. This page doesn't say much about the item being sold. The only text information available is a combination of price and size.

The second example is from ASOS. This page, selling a similar shirt, provides accurate alternative text for the item. This helps people who use screen readers to envision what the item looks like.

When creating text alternatives for images, follow this guideline:

• すべての「意味のある」画像には、説明的な代替テキストが必要です。 （「意味のある」写真は、伝達される情報にコンテキストを追加します。）
• 画像が純粋に装飾的であり、ページのコンテンツを理解するのに役立つ情報をユーザーに提供しない場合は、代替テキストは必要ありません。

キーボードフレンドリーな体験

特定のユーザーは、マウスではなくキーボードを使用してインターネットをナビゲートします。 たとえば、運動障害のある人は、マウスを使用するために必要な細かい運動に苦労しています。 Tabキーでインタラクティブ要素にフォーカスできるようにし、キーボードフォーカスインジケーターを表示することで、このユーザーグループがインタラクティブ要素とナビゲーション要素に簡単にアクセスできるようにします。

キーボードナビゲーションの最も基本的なルールは次のとおりです。

• キーボードのフォーカスが表示され、はっきりしていることを確認します。 一部のWebデザイナーは、キーボードフォーカスインジケーターを目障りだと思って削除します。 これにより、キーボードユーザーがWebサイトを適切に操作できなくなります。 ブラウザが提供するデフォルトのインジケータが気に入らない場合は、完全に削除しないでください。 代わりに、あなたの好みを満たすようにそれを設計してください。
• すべてのインタラクティブ要素にアクセスできる必要があります。 キーボードユーザーは、メインのナビゲーションオプションや主要な行動の呼びかけだけでなく、すべてのインタラクティブな要素にアクセスできる必要があります。

キーボード操作の詳細な要件は、W3Cの「WAI-ARIAオーサリングプラクティス」ドキュメントの「デザインパターンとウィジェット」セクションにあります。

テスト

反復テスト

テストは、UXデザインプロセスの重要な部分です。 そして、設計サイクルの他の部分と同様に、それは反復プロセスです。 設計プロセスの早い段階でフィードバックを収集し、全体を繰り返します。

テストページ-読み込み時間

ユーザーは読み込みの遅いWebページを嫌います。 そのため、最新のWebサイトでは応答時間が重要な要素になっています。 Nielsen Norman Groupによると、応答時間には3つの制限があります。

• 0.1秒これはユーザーにとって瞬時に感じられます。
• 1秒これにより、ユーザーの思考の流れはシームレスに保たれますが、ユーザーはわずかな遅延を感じます。
• 10秒これは、ユーザーの注意を操作に集中させるための限界です。 多くの場合、10秒の遅延により、ユーザーはすぐにWebサイトを離れます。

明らかに、私たちはユーザーに私たちのウェブサイトで何かを10秒待たせるべきではありません。 しかし、定期的に発生する数秒の遅延でさえ、経験を不快にします。 ユーザーは操作を待たなければならないことに悩まされます。

通常、読み込み時間が遅くなる原因は何ですか？

• 重いコンテンツオブジェクト（埋め込みビデオやスライドショーウィジェットなど）、
• 最適化されていないバックエンドコード、
• ハードウェア関連の問題（高速操作を可能にしないインフラストラクチャ）。

PageSpeed Insightsのようなツールは、遅い時間の原因を見つけるのに役立ちます。

A / Bテスト

A / Bテストは、デザインの2つのバージョン（既存のバージョンとページの再設計されたバージョンなど）のどちらかを選択するのに苦労している場合に理想的です。 このテスト方法は、2つのバージョンのいずれかを同数のユーザーにランダムに表示し、分析を確認して、どちらのバージョンがより効果的に目標を達成したかを確認することで構成されます。

開発者ハンドオフ

UXデザインプロセスには、デザインのプロトタイピングと実用的なソリューションの開発という2つの重要なステップがあります。 2つを接続するステップはハンドオフと呼ばれます。 設計が完成し、開発に移行する準備ができたらすぐに、設計者は仕様を準備します。これは、設計のコーディング方法を説明するドキュメントです。 仕様は、設計が本来の意図に従って実装されることを保証します。

仕様が不正確な場合、開発者はWebサイトを構築する際に当て推量に頼るか、設計者に戻って質問に対する回答を得る必要があるため、仕様の精度は非常に重要です。 ただし、仕様を手動で組み立てることは頭痛の種になる可能性があり、設計の複雑さによっては通常、かなりの時間がかかります。

Adobe XDの設計仕様機能（ベータ版）を使用すると、設計者は、開発者がフローを検査し、測定値を取得し、スタイルをコピーするためのパブリックURLを公開できます。 設計者は、配置、テキストスタイル、またはフォントを開発者に伝えるために仕様の作成に時間を費やす必要がなくなりました。

結論

デザインのあらゆる側面と同様に、ここで共有されるヒントはほんの始まりにすぎません。 最良の結果を得るには、これらのアイデアを自分のアイデアと組み合わせてください。 Webサイトを継続的に進化するプロジェクトとして扱い、分析とユーザーフィードバックを使用して、エクスペリエンスを継続的に改善します。 また、デザインはデザイナーだけのものではなく、ユーザーのためのものであることを忘れないでください。

この記事は、アドビが後援するUXデザインシリーズの一部です。 Adobe XDツールは、アイデアからプロトタイプへの移行を高速化できるため、高速で流動的なUXデザインプロセス向けに作成されています。 設計、プロトタイプ作成、共有—すべてを1つのアプリで。 Adobe XD on Behanceで作成されたより刺激的なプロジェクトをチェックしたり、Adobeエクスペリエンスデザインニュースレターにサインアップして、UX / UIデザインの最新のトレンドや洞察に関する最新情報を入手したりできます。