7ユーザーエクスペリエンスクイックウィンでウェブサイトを改善2016年8月30日

デジタルマーケターとして、あなたは常にあなたのウェブサイトの最適化に取り組んでいます。 Web統計を使用して、訪問者がサイトを離れる数と場所に関する洞察を得たいと考えています。 統計は、人々が去る理由についての洞察を常に提供するとは限りません。 オンライン調査、特にリアルタイムのフィードバック収集は、訪問者の動機に関する多くの貴重な情報を提供することができます。

Mopinionでの私の役割から、クライアントが受け取るフィードバックを頻繁に分析します。 これらの分析は、ユーザーエクスペリエンスの観点からまだ多くのことを得ることができることを示しています。 このブログでは、マーケティング担当者がWebサイトのユーザーエクスペリエンスを向上させるためのクイックウィンを達成するために使用できる7つの焦点を提供します。

---

無料トライアルを始めましょう！

今すぐMopinionをお試しください

• 無制限のフィードバックを収集する
• ■■
• 14日間の無料トライアル

---

ヒント1：ページの読み込み時間

これは明らかなポイントのようです。 しかし、私たちがクライアントのために収集したフィードバックから、それはかなり妨害的であるように見えます。 頻繁に言及されるだけでなく（場合によっては、受け取ったフィードバックの約30％）、迷惑メーターで非常に高いスコアを獲得します。 特にプロモーション志向や月次サイクルで活動している企業の場合、訪問者数の特定のピークに対処するのに苦労していることがわかります。 たとえば、月の決まった瞬間に多くの突然変異を処理しなければならない宝くじや住宅ローンの提供者の絵について考えてみてください。

さらに、より複雑なオンラインツール（たとえば、自動車のカーコンフィギュレーター）がインターネット接続に多くの帯域幅を要求しているか、コンピューターやその他のデバイスの画像処理に影響を与えていることもよく示されます。 もちろん、そのようなツールは訪問者に付加価値を提供することができますが、同時に、プロセスが迅速かつスムーズに実行されない場合のリスクも伴います。

ホスティング
あなたは考えるかもしれません：あなたはそれについて何ができますか？ 最初のステップは、十分な帯域幅が利用可能かどうかを確認することです。 AmazonやRackspaceによるクラウドホスティングなど、柔軟でスケーラブルなホスティングソリューションをご覧ください。 訪問者の数が最も多いフィールドをマッピングし、そのエリアでPingdomやGooglePagespeedなどの適切な監視ツールを実行していることを確認します。 IT部門と会うときは、何について話しているのかを確認してください…

資産
自宅に近いソリューションは、使用するアセットにあります。 画像、css、javascriptドキュメントなどのYahooの交通渋滞によると、ページの読み込み時間の80％です。 したがって、不要なジャンクをロードしないようにし、必要なファイルが縮小されて正しく圧縮されていることを確認してください。

また、ウィジェットやプラグインが不要な場所に読み込まれていることがよくあります。 したがって、必要なものと必要な場所を注意深く確認してください。 特定のツールのプラグインが1ページだけ必要な場合は、他の場所にプラグインをロードする必要はありません。

キャッシングも解決策を提供できます。 訪問者が同じアセットを不必要にロードする必要がないことを確認するツールを見てください。 Webサイトが不明なフレームワークまたはCMS（WordPressなど）で実行されている場合、W3 TotalCacheなどのプラグインの形式で利用できるキャッシュオプションがよくあります。

ヒント2：ログイン手順

残念ながら、ログインの問題は今でも日常茶飯事です。 オンラインサービスの提供は、多くの企業にとって、既存および新規の顧客との日常的な接触の重要な部分です。 たとえば、ショッピング環境や私の環境でサービス提供を使用するために定期的にログインするすべてのWebショップ、銀行、エネルギー会社、および通信プロバイダーについて考えてみてください。

私たちが処理するフィードバックの大部分（約5％）は、ログイン手順に関連するページから発信されます。

残念ながら、多くの人は大量のユーザー名とパスワードを覚えるのに苦労しています。 人的要因は別として、ログイン手順自体の間に多くの問題が発生します。 電子メールアドレスを使用することは、多くの人にとって、個別のユーザー名よりも覚えやすいです。 複雑なクライアント番号や個人名の使用は避けてください。

リロードを停止します
フロントエンドで検証を使用すると、より使いやすくなる可能性があります（したがって、サーバー/データベースを介してではなく、ブラウザーで直接、たとえばJavascriptやAjaxを介して情報を収集します）。 利点は、ページをリロードする必要がないことです。 例：メールアドレスとして「.com」ではなく「[email protected]」と誤って入力した顧客。

JavascriptまたはAjax検証を使用すると、電子メールアドレスの誤った入力に関するフィードバックをユーザーにすぐに提供できます。 これらの種類のトリックを適用することにより、ユーザーがログインしやすくなります。 さらに大きな問題は、誤ったログイン後にすべてのフィールドが完全に空になり、すべてを再度入力する必要があることです。

また忘れてしまった…？
次の障害は、多くの場合、忘れられたパスワードの収集です。 ユーザーがパスワードをリセットしたり、電子メールで申請したりできるようにすることは、多かれ少なかれ標準になっています。 ユーザーが実際に誤ってログインしようとした後にのみ、そのオプションを表示するのは適切に思えるかもしれません。

最後に、エラーメッセージ。 多くのユーザーにとって、何かがうまくいかなかったのは十分に迷惑です。 「無効なパスワード」などのロボットのようなメッセージは避けてください。 コミュニケーション部門の素敵な同僚を訪ねてください…会社の声のトーンに合った素晴らしい選択肢を受け取るかもしれません。 上記のメッセージの提案：「間違ったパスワードを入力したようです。」 すでにとても親しみやすいですね。

ヒント3：フォーム

おそらく非常に認識しやすいでしょう。選択を行ったり、フィルターを設定したり、フォームにデータを入力したりすると、次のページですべてが消えて、同じ情報をもう一度入力する必要があります。 あなたのサイトの訪問者の間の大きな苛立ち。

プラットフォームが日常的に分析するウェブサイトのフィードバックの9％は、フォームに関連しています。 最大の煩わしさは、すでに1回入力された情報の送信、またはフォームと選択範囲内で同じアクションを複数回実行する必要があることです。 それは時々小さな刺激につながりますが、通常は大きな不快感につながります。

フォームは、訪問者が情報を検索したり、製品を注文したり、リードを生成したりするときに役立ちます。 したがって、フォームが正しく機能することが重要です。 一般に、フォームに入力するように要求しているフィールドが少ないほど、変換率は高くなります（一部のデータが本当に不可欠であるという事実を考慮すると）。 支払いや注文の場合は、単純な潜在顧客のフォームよりも多くのフィールドに入力する必要があることは理にかなっています。

それでもユーザーが多くの情報を提供する必要がある場合は、フォームを途中で保存する可能性も提供します。 このようにして、ユーザーは後でフォームに記入できるようになります。

あなたの旅をマッピングする
Webサイト内の最も重要な旅程をマッピングし、ユーザーに情報を提供してほしいエリア、またはユーザーがデータを入力しなければならないエリアを確認します。 それらのデータをリサイクルします。

あなたはあなたの訪問者が誰であるかを知っていますか、彼/彼女の好みが保存されて再利用できることを確認してください。 また、スマートツールを使用して、フォームの特定のフィールドに自動的に入力または補足します。

まだ顧客ではない訪問者に関係しますか？ また、リピーターと新規ビジターを区別することもできます。 たとえば、製品に関するコンテンツをダウンロードする可能性を提供する場合は、最初に必要な情報のみを要求してください。 訪問者が戻って別のフォームに記入するときは、新しいフィールドに入力するだけで、すでに知っていることをすべて非表示にする必要があることを確認してください。

レスポンシブフォーム
モバイルの使用がオンラインで最も人気があり、2014年にはモバイルの使用がデスクトップを上回ったという事実を考えると、訪問者がスマートフォンやタブレットを使用する可能性は大いにあります。 したがって、使用可能なスペース、タッチインターフェイス、およびフォームの長さを慎重に検討してください。 マルチステップフォームは、実際にはフォームを細かく分割し、画面ごとに1つまたは2つのフィールドしか表示しないため、解決策を提供します。 Optimizelyなどのツールを使用して複数のバリアントをテストすると便利な場合があります。

ヒント4：適切なページまたは情報を見つける

当社のソフトウェアがクライアントに対して分析するフィードバックの22％は、訪問者が正しい情報を見つけることができないという事実に関係しています。 最悪の場合、必要な情報がまったく利用できず、訪問者は完全に脱落します。

多くの大企業やウェブショップは、製品の範囲が広いという理由だけで、単に大量の情報を提供しているだけです。 この問題は簡単には解決できません。 それでも、ユーザーエクスペリエンスをさらに向上させるために、以前の経験に基づいていくつかのヒントがあります。

この一般的な問題に対処するための最初のステップは、オンラインの旅をマッピングすることです。 彼らがあなたのウェブサイトに来るとき、訪問者がどの目標を念頭に置いているかをあなた自身でチェックしてください。 多くの場合、訪問者は目標を達成するためにいくつかの手順を実行する必要があります。 旅の「マッピング」は、訪問者が経験する問題と、特定の情報を必要としている場所についての洞察を得るのに役立ちます。

クリック動作
さらに、クリック動作を使用して、ユーザーが離れる場所を分析できます。 これらの点で、定量的なフィードバックを取得することも役立ちます。 これにより、クリック動作の背後にある理由が明らかになります。 たとえば、特定のフロー内を行ったり来たりするなどの反復的な動作を通知するときに、フィードバックフォームをアクティブに表示させることができます。 ここで質問する論理的な指標は、目標完了率（GCR）です。 多くの場合、質問は「目標を達成できましたか？」のようなもので、「はい」、「いいえ」、または「部分的に」のオプションがあります。 「はい」のパーセンテージをGCRとして報告します。 GCRの質問に続いて、オープンな説明を求めることをお勧めします。

ヒント5：不明瞭なテキスト

私たちが毎日分析するフィードバックの約7％は、不明瞭なWebコンテンツに関連しています。 これには、製品情報だけでなく、注文フローやFAQなどのセルフサービスページのコンテンツも含まれる場合があります。

人々は特定の目標を念頭に置いてあなたのウェブサイトで情報を探しています。 その目標は通常、質問に対する答えを見つけることです。

訪問者と顧客は、情報を読んだり、テーブルで何かを調べたり、ビデオを見たりします。 たとえば、製品が要望を満たしているかどうか、価格設定モデルが適切かどうか、またはサポート関連の問題を解決するためかどうかを確認します。

情報は明確で長すぎないようにする必要があるという事実とは別に、訪問者は情報をすぐに見つけられるようにしたいとも考えています。 そのため、コンテンツを簡単にスキャンし、不要な情報を除外して、人々が重要な問題を理解できるようにします。
画像や動画を追加して、全体を簡単に吸収できるようにします。

あなたの質問に答えますか？
多くの、またはより複雑な情報を提供する必要があるページでは、訪問者が情報をどのように体験するかを知ることを常にお勧めします。 これは、質問をする簡単な埋め込みフィードバックフォームを使用して行うことができます。この情報は満足のいくものですか。 応答オプションは「はい」または「いいえ」であり、オープンコメントを残す可能性があります。 訪問者はここで、たとえば、どの情報が不足しているか、または何が正確に不明であるかを示すことができます。

このフィードバックを使用して、訪問者がコンテンツをどの程度評価しているか、コンテンツが適切かどうか、コンテンツの品質を向上させるために何ができるかについて、アクセス可能な洞察を収集できます。

ヒント6：いたるところにバグ

残念な。 バグは避けられません。 彼らは常に忍び込む方法を見つけるでしょう…。

怖がらないでください。1000を超えるブラウザとプラットフォームの組み合わせが流通しています。 したがって、サイトのどこかにバグが発生するリスクは大きくなります。 Browserstackなどのツールは、ほぼすべての可能な組み合わせでWebサイトをテストする可能性を提供します。 その後、通常、フロントエンドのバグが発生します。 バックエンドソフトウェア自体では、あらゆる種類の問題が発生する可能性があります（たとえば、フォームの検証、権利に関連する問題、データベースの出力に関する問題などを考えてみてください）。

最も広範なテストを行ったとしても、ライブに移行した後もバグが発生する可能性があります。 あなたの顧客は通常それらを最初に発見するものです。 したがって、自分で組織するすべてのテスト委員会に加えて、訪問者にバグを簡単に報告する機会を与えることをお勧めします。

フィードバックフォームを通じてこれを報告する可能性を提供すると、関連する洞察をすばやく得ることができます。 クライアントに対して分析するフィードバックの約20％は、バグ通知に関連しています。 したがって、未使用のバグの通知を顧客に支援させる機会を残さないでください。

ヒント7：モバイルファースト？

また、ヒント3で、フォームを「モバイル」用に最適化する例を示しました。 オンライン体験の全幅にわたって、モバイルはまだいくらか無視されていることが当てはまります。 オンライン訪問の平均半分以上がモバイルデバイスを使用して行われているという事実を考えると、これは奇妙なことです。

プラットフォームで受け取るフィードバックの約6％は、モバイルデバイスの問題に関連しています。 いくつかのブログでは、モバイルは検索エンジン最適化（SEO）などの問題に関係する場合の重要な注意点として言及されています。 したがって、これはユーザーエクスペリエンスだけでなく、サイトの検索可能性にとっても非常に重要です。

重要なポイントは画像の使用です。 最小の「ビューポート」から始めて、次に大きな画面に進みます。 コンテンツがより高いdpiのRetina画面にもきちんと適応することを確認してください。

このブログで前述したように、読み込み時間が長いとユーザーエクスペリエンスに悪影響が及ぶため、ファイルが大きくなりすぎないようにし、正しいサイズのみを読み込むようにしてください。 イラストやアイコンを頻繁に使用する場合は、SVG（Scalable Vector Graphics）の使用法も確認できます。 これらは実際、デザインに合わせて簡単に拡張できるラインファイルです。

テキストとフォント
また、テキストとフォントの使用にも細心の注意を払ってください。 これは、フィードバックを分析するときに問題が発生することがよくある領域の1つでもあります。 細すぎて複雑なフォントには近づかないでください。 スマートフォンを使用するときは、小さな画面から読む必要があることがよくあります。 文字と行の間のスペースをスマートに処理することで、読みやすさを向上させます。 また、さまざまなビューポートでテキストのレイアウトを確認してください。 ここでは、テキストとコンテナの理想的な比例構成に関する詳細情報を見つけることができます。

モバイルナビゲーション
最後に、モバイルナビゲーションに関しては、かなりの障害に気付くことがよくあります。 幸いなことに、多くのモバイルメニューは、たとえばWordPressなどのシステムの既知のテンプレートにすでに埋め込まれています。 ただし、これらのシステムを使用したくない場合は、必ず小さな画面から開始してください。 スペースには限りがあり、タッチで使用することを想定しています。 Appleのガイドラインでは、平均して44ピクセルの「指」が示されています。

最も重要なページにすばやくアクセスできるようにし、オプションの数を制限します。
たとえば、モバイルナビゲーションの設計の詳細については、こちらをご覧ください。

最後のヒントとして：モバイルブラウザは、前述のBrowserstackを使用して完全にテストすることもできます。

注：分析したフィードバックの量のパーセンテージは、2015年に独自のフィードバックデータで実施した調査に属しています。すべての調査結果を確認するには、このブログ投稿をお読みください。