プロレベルのウェブサイト最適化のための7つの実績のあるUXのヒント
公開: 2022-01-02ウェブサイトデザイン内のユーザーエクスペリエンスデザイン（UXDまたはUX）は、ウェブサイト内でのユーザーインタラクションの使いやすさ、見つけやすさ、効率を高めることで、ユーザーの満足度を向上させる方法です。 今日は、1人のWebデザイナーが知って、自分のWebサイトのUXを強化するために利用する必要がある、私が蓄積した実証済みのヒントをリストします。
ヒント1：フローを操作する
あなたのウェブサイトをあなたのユーザーのためにナビゲートしやすくするために、あなたは彼らの立場に身を置き、あなたのペルソナの目的を理解する必要があります。 あなたのペルソナの考え方、あなたがあなたのウェブサイトを使用する人のタイプを表すためにあなたが作成した架空の人物について考えてください。 彼らはあなたのウェブサイトのどの部分に最初に気付くでしょうか？
これに対するかなり明白な答えはページの上部であり、情報をレイアウトする方法は、最も重要なページを、Webサイトにアクセスする人が最初に見る可能性が高い上部に配置することです。 目的の情報を見つけるために、スクロールして無限に掘り下げる必要はありません。そのため、情報を一番上に配置すると非常に役立ちます。
Webサイトのフローを改善するために含めるべきもう一つの重要な要素は、一貫性があり便利で理解しやすいユーザーインターフェイスを使用して、ペルソナが必要なコンテンツに集中し、妨げられることなく通過できるようにすることです。
混乱を避け、ユーザーに不要な作業を追加しないようにするには、Webサイトに行き止まりのページを作成しないようにします。 このような混乱をさらに回避するために、一般的でないWebサイトのパターンとインターフェイスの使用を控え、ユーザーに新しいことを学ばせる必要はありません。一般的なパターンとインターフェイスを使用することはまったく問題ありません。
ヒント2：スクロール
ユーザーに関連する情報がスクロールしなければ見えない位置にあることがユーザーに明らかである限り、ユーザーはスクロールし続けます。 Webサイトには、スクロールする方向を常に明確に視覚的に示し、利用可能な資料が他にあるかどうかをユーザーに通知する必要があることを覚えておくことが重要です。
かなり明白ですが、忘れられがちな点は、Webページが長いほど、ページの一番下までスクロールして必要なものを見つけるのに苦労する可能性が低くなるということです。 Webページが長すぎない限り、クリックすることでスクロールがはるかに高速になるため、Webページの実行は快適です。
ヒント3：コントラストと色
あらゆる種類の人々があなたのウェブサイトを訪れるので、色覚異常の人々を考慮に入れてください–すべてのユーザーが貴重な情報を読むことができるように、あなたのウェブサイトのデザインがグレースケールであることを確認してください。 Webサイトでの色の別の指針は、リンクを除いてテキストの他の部分で青色を使用しないことです。これは、背景とひどく衝突するか、単に消えてほとんど読めなくなるため、すべてのWebデザイナーが知っておくべきことです。 モバイルWebサイトのコントラストに気づかないと、画面のまぶしさがWebサイトのユーザビリティ要素を台無しにする可能性があることに注意してください。
CTAが効率的に機能するようにするには、CTAに1つの色を使用し、他の色には使用しないでください。 テキストを背景に前面に出したい場合は、暖かくて明るい色を使用してください。これは、冷たくて暗い色が背景に残る傾向があるためです。
ヒント4：読み込み速度を改善する
ウェブサイトの読み込み速度は、SEOの重要な要素の1つです。 プロのSEOサービスプロバイダーとして、私たちは常にウェブサイトの速度の向上に注力しています。ウェブサイトが読み込まれるまで3秒以上待つことを楽しむユーザーはいないため、3秒を超える遅延が発生しないようにしてください。 ウェブサイトが読み込まれたら、ウェブサイトのユーザーが問題なくすばやく目的を達成できるようにします。
Webサイトの速度の認識は、読み込み時間、読み込み動作、待機時間、アニメーションの滑らかさなどの要因に基づいています。 これらの要因の理解を深めるために、Webサイトの要素のスケルトンを表示して、ロード中のレイアウトをユーザーに表示します。 ユーザーが写真の前にテキストを見ることができる場合、ユーザーは画像が読み込まれる前にテキストを読むことができるため、テキストが最初に読み込まれることを確認してください。
関連記事： WordPressウェブサイトを高速化する5つの方法
ヒント5：モバイルおよびタブレットユーザーにとって天国にする
モバイルインターフェイス要素が小さいか、近くに配置されている場合、正確に選択することは困難です。したがって、モバイルのタッチターゲットの最小サイズは、適切なパディングを使用して1cm x 1cmにする必要があります。 ユーザーが小指を使用してアクセスする必要がある場合は、ウェブサイトまたはアプリのインターフェースターゲットが小さすぎることがわかります。
タブレットを使用してサイトにアクセスする人は、画面の側面と下部に親指で最もアクセスしやすいことに気付くでしょう。そのため、Webページを作成するときはそのことに注意してください。 モバイルレイアウトの作成を開始するときは、ユーザーがデバイスで片手または両手を使用するかどうかを決定する必要があります。
ヒント＃6：クリーンなナビゲーション
あなたのウェブサイトは、原則として、見つけやすいナビゲーションメニューを持っているべきです。 Webサイトの階層が3〜4レベルよりも大きいことに気付いた場合は、おそらくWebサイトのデザインを再考する必要があります。
Webサイトに長いページがある場合、またはユーザーがWebサイトの特定の部分にすぐにアクセスする必要がある場合、スティッキーメニューは、アクセスをすばやく簡単にするための優れた方法です。 ナビゲーションラベルは正確である必要があり、2〜3語以内で構成され、最も有益な単語が先頭にあることを確認してください。
ブレッドクラムは、ユーザーにWebページのどこにいるかを知らせるための優れた方法です。 ナビゲーションメニューが消えて、途中に表示されたり、Webサイト内で変更されたりしないようにする必要があります。 モバイルナビゲーションを設計するときは、頻繁に使用するオプションが上部にあることを確認し、あまり人気のないオプションをすべてハンバーガーメニューの下に非表示にします。
これらのメニューはあまり一般的ではなく、デスクトップでは目立たないだけでなく、インタラクションコストの上昇と情報の香りの低下を引き起こします。 モバイルウェブサイトでセカンダリナビゲーションが必要な場合は、カテゴリのランディングページ、サブメニュー、またはページはめ込みメニューがすべて適しています。 Webサイトにメガメニューがある場合は、リンクをグループに並べ替えて、クリック可能なアイテムとクリックできないアイテムを区別します。 Webサイトメニュー内のログインおよび検索機能を非表示にしないでください。
ヒント＃7：フォーム
ユーザーに高速スキャンを提供するには、フォームのラベルとフィールドが1本の垂直線に配置されていることを確認してください。 ユーザーはフィールドラベルを見失うことに対処する必要がないので、テキストフィールドの外に配置します。 Webフォームをわかりやすくする必要があるため、セクションを区切り文字で分割します。
フォームエラーは、すべてのWebフォーム内のエラーの原因となる領域の横に配置する必要があります。 提供されるエラーメッセージは、理解しやすく、短く、ユーザーに役立つものでなければなりません。 すべてのエラーを表示すると、問題のあるファイルの横にあるフィールドがすぐに発生し、モバイルユーザーは警告を見逃す可能性が低くなります。
関連記事： Webフォームスパムを効果的に防止する方法
これらのヒントがあなたのウェブサイトの作成に役立つことを願っています。 あなたのアイデアを上手く売る素晴らしいウェブサイトを作ることは常に苦労です。 これらのヒントを覚えておいてください、そうすればあなたはあなたのウェブサイトのユーザーが満足しているのを見つけるでしょう。
著者は、LogoOrbitのブランディングエキスパートであるDanielShaneです。