WordPressサイトのユーザーエクスペリエンス（UX）を改善するためのガイド

公開: 2017-04-22

ユーザーエクスペリエンスを向上させるためにWebサイトを最適化することは、簡単なことではありません。これは主に、必要なツールやコーディングの知識が1ダースに満たないためです。しかし、Webサイトが、その使いやすさで実際に知られ、愛されているプラットフォームで作成されている場合、UXO（ユーザーエクスペリエンスの最適化）はそれほど苦痛ではありません。

WordPressには何千ものツールがあり、その多くは無料でも利用できます。これらのツールは、視聴者の理解を深め（追跡と分析）、パフォーマンスを向上させ（キャッシングと画像最適化プラグイン）、テストと改善（A / B）を行うのに役立ちます。 Nelio、OptimizePressなどのテストソフトウェア）。このガイドはそれらについてではありません。

このガイドでは、WordPress Webサイトで見落とされがちなユーザビリティのいくつかの側面と、それらの見落としを修正するための最良の方法について詳しく説明します。まず始めます：

カルーセル

それが美しい中庸であるという理由だけで、すべてのビジネスのすべての部門がカルーセル/スライダーを望んでいます。誰もが自分の製品/キャンペーン/メッセージをページ上の最も目立つ単一のスペース（折り目の上）に配置します。

これが、最も望ましいWordPressテーマが少なくとも1つのスライダープラグイン（通常はRevolution Slider）をパックする理由です。そのアプローチの長所と短所を見てみましょう。

長所：

最も重要なメッセージを1か所に表示します。
メッセージに優先順位を付けることができます（最も重要なのは最初のスライドを取得する）
訪問者のすべてのセグメントにアピールすることになっています（「すべての人のための何か」）

短所：

ユーザーは通常、スライドが回転するのを待たずに、現在表示されているフレームを一目見た後、カルーセルをスキップします。
スライドのコンテンツは検索ボットによって簡単にクロールされません。これはSEOにとって悪いニュースです。

これらの短所を回避し、カルーセルUXを改善する方法があります。

スライド/フレームの数は5以下にしてください。
カルーセルナビゲーション制御をユーザーに提供
自動転送しないでください。

場合によっては、最も単純なソリューションが最適です。派手なプレミアムスライダープラグインに頼る代わりに、Slickのような軽量のJavaScript（jQuery）プラグインを使用して、WordPressでユーザーフレンドリーなカルーセルを作成できます。

高度なナビゲーション

ヘッダーのメインメニューとサイドバーのセカンダリナビゲーションを組み合わせることで、ナビゲーションが完全で使用可能であることを確認できます。しかし、何千ものページがある巨大なWebサイト（特にeコマースやコンテンツの多い大規模なブログ）の場合、セカンダリナビゲーションだけではうまくいきません。

これがメガメニューが必要な理由です。しかし、このコインには2つの側面もあります。

長所：

均一な可視性：下位レベルのコンテンツ/ページがメガメニューに含まれます
余分な手順を節約します。ユーザーは、よりリモートで不明瞭なコンテンツにすばやくアクセスできます。

短所：

グラフィック/アイコンなどのUI要素を追加すると、パフォーマンスに問題が発生することが知られています。
コンテンツ階層が悪いWebサイトでは多かれ少なかれ効果がありません
メガメニューを完全にレスポンシブにするのは難しい場合があります

長所と短所（およびWebサイトにメガメニューが必要かどうか）について議論する前に、コンテンツを完全に分類する必要があります。 WordPressの分類法には理由があります。これを使って。

コンテンツ階層を十分に調整して整理したら、Max Mega Menu、uberMenuなどのWordPressプラグインを使用して、Webサイトにメガドロップダウンメニューを追加できます。 Ajax Layered NavigationなどのWooCommerce拡張機能は、ストアにフィルタリングインターフェイスを追加します。

パフォーマンス

あなたが何を信じたいと思っても：あなたは排他的ではありません。

ユーザーはコンテンツを待ちたくないので、コンテンツを待たせないでください。そうしないと、他の場所でコンテンツを探しに行きます。あなたの階級でさえ遅いウェブサイトに苦しんでいます。これは、ユーザーエクスペリエンスにおけるパフォーマンスの最適化の必要性の合計です。

WordPress Webサイトを最適化して、パフォーマンスを向上させます。

CDN：世界中のオーディエンスを受け入れ、トラフィックが中から高のWebサイトにとって実行可能なオプション。 MaxCDNとW3Total Cacheプラグインは、クイックロードの天国で作られたマッチです。

キャッシュ：前述のように、W3 Total Cacheは（CDNサポートがなくても）必要な唯一のキャッシュプラグインです。また、RedisやMemcachedなどのサーバー側ソリューションについて開発者に質問してください

フロントエンドの最適化： EWWW Image Optimizerのようなプラグインは（品質を損なうことなく）画像を圧縮します。また、テーマファイルにインラインCSSとJSができるだけ少ないことを確認してください。スタイルシートとJavaScriptファイルも圧縮して縮小します。

外部の依存関係を減らし、CSSスプライトを使用し、プラグインをダウンロードする際は非常に慎重になります（少ないほど良い）。あなたもあなたのウェブホスティングプロバイダーに連絡して助けを求めることができます。時々、あなたのウェブホストはパフォーマンス関連の問題を引き起こします。

モーダルポップアップ

双方向性とコンバージョンの名の下に不快にならないでください。

はい、モーダルポップアップ（インタラプションマーケティング）は優れた変換ツールです。文字通り何千ものプラグインがあり（ほとんどのソーシャルメディアプラグインには現在この機能があります）、ユーザーにメッセージを貼り付けて、ソーシャルメディアのコンテンツを共有/フォロー/いいね、サブスクライブまたはサインアップするようにユーザーに「丁寧に」思い出させることができます。割引などを利用できます。

それには非常に多くの問題があります…しかし、私たちはすぐにそれに到達します。

長所：

コンバージョン率の向上が証明されています

短所：

気が散る：訪問者はコンテンツのためにここにいて、ポップアップは邪魔です。
ポップアップは、ユーザージャーニーに適切に適合しない限り、（多くの広告と同様に）ホワイトノイズとして扱われます。
アクセシビリティに悪い

コンテキストでうまく使用されているポップアップの例があります。 BrainPickings.orgはそのオーディエンスを理解し、ユーザーがサイトに繰り返しアクセスし、コンテンツを読み終えたときにのみ、「寄付」リンクを宣伝します。 Reebok Crossfitポップアップのタイミングは悪いですが、製品ページのサブスクリプションの割引でわずかに補います。

出典：REEBOK

時間とトリガーの遅延は問題ありませんが、全体像に焦点を合わせ、それを必要とするユーザーに関連する方法でポップアップを結び付けることも必要です。

これまでのところ、コンバージョンの増加は単純な鈍的力によるものですが、スマートに行うと、コンバージョンとそれに続くリードの品質を向上させることができます。初めての訪問者にウェブサイトの購読を依頼しても、99/100回の質の高いリードは得られません。

ポップアップ用にWordPressプラグインをインテリジェントに使用してみてください。良いものがいくつかあります（Supsysticによるポップアップのように）。単一のページでのインタラクションだけに焦点を合わせるのではなく、それらを操作します。

巻末注

ユーザーエクスペリエンスを向上させるために、このアドバイスを一粒の塩で受け止め、すべてをテストすることを期待してください（GoogleAnalyticsまたはNelioA / Bテスト、またはその他のツールを使用してください。それはあなた次第です）。

そして、改善を続けることを約束します。

続きを読むWordPressプラグイン| WordPressサイトの5つのクイックフィックス