直感的なウェブサイトのデザインでコンバージョン率を上げる方法
私をフープを飛び越えさせるウェブサイトは私を狂わせます。
あなたのことはわかりませんが、特にオンラインで買い物をしているときは、A地点からB地点まで最短経路で移動することを好みます。
前後にクリックしたり、さまざまなページで情報を検索したり、販売者が私の場所に発送されたかどうかを確認したり、上下にスクロールして召喚状を探したりする必要がある場合は、ブラウザを閉じて次に進みます。 。
そして、それは私だけではないと確信しています。
優れたユーザーエクスペリエンスは、高いコンバージョン率と関係があり、ウェブサイトを直感的に使用できるようにすることは、優れたカスタマーエクスペリエンスを作成するための重要な基準です。
貼り付けた画像0384
直感的なウェブサイトのデザインの理由と方法
直感的なウェブサイトは使いやすいです。望ましい結果を達成するためのシームレスなエクスペリエンスを提供します。
訪問者は、必要なものを見つけて、可能な限り最も効率的な方法で目的のアクションを実行できます。彼らは、自分たちがどのようにそれを行っているかを考えることなく、目前のタスクに集中することができます。
直感的なWebサイトは、段階的な改善と根本的なショートカットを通じて、摩擦を最小限に抑えたエクスペリエンスを提供することにより、「注意を節約」します。
一方、直感的でないデザインでは、訪問者は何が機能していないかに気付くようになり、ブランドに不満を感じるようになります。
ニール・パテルとの相談
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
使いやすいウェブサイトのデザインは、コンバージョン率の向上に役立ちます。
直感的なウェブサイトエクスペリエンスを作成するためにできることは次のとおりです。
あなたの訪問者を理解する
ターゲットオーディエンスセグメントが異なれば、コンテンツの解釈や操作方法に影響を与える習慣、期待、文化的条件も異なります。
貼り付けた画像0382
あなたの訪問者はまた、彼らが望む結果を得るためにウェブサイトをナビゲートする方法を含む「物事がどのように機能するか」についての先入観を持ってあなたのウェブサイトに来ます。
あなたのウェブサイトのデザインとコンテンツは、あなたが彼らがいる場所で彼らに会うことができるように、あなたのターゲットオーディエンスが彼らにもたらす期待と行動に対処しなければなりません。
ただし、それが常に可能であるとは限りません。
彼らがいる場所とあなたのウェブサイトがどのように機能するかとの間に「知識のギャップ」がある場合、あなたは彼らがギャップを学び、適応し、そして埋めることができるようにステップを提供する必要があります：
貼り付けた画像0383
ウェブサイトのデザインを始める前に、まず訪問者を定義する必要があります。これは、あるオーディエンスにとって直感的なものが、別のオーディエンスにとってはそうではない場合があるためです。
次に、宿題をすることで、彼らが何を期待し、コピーやページレイアウトにどのように反応するかを知る必要があります。ユーザビリティとA/Bテストを実施し、顧客を調査し、業界の影響力を持つコンテンツを監視します。
彼らの行動、期待、知識のギャップを理解したら、彼らにとって使いやすいWebサイトを設計できます。
脳と協力する
人間の脳は、特定の方法で情報を登録および処理するために何世紀にもわたって調整されています。一夜にして変わることはないので、それと戦うよりも、一緒に作業するほうがよいでしょう。
人々がどのように情報を視覚的に読み、処理するかを理解するために、多くの研究が行われてきました。この知識を使用して、ページ上のコンテンツとグラフィック要素の配置を通知します。
たとえば、西洋文化の人々は、Webコンテンツを読むときにF字型のパターンを示します。
貼り付けた画像0380
ヒートマップでわかるように、私たちが読んだ方法（左から右、上から下）を反映して、左と上に最も近いコンテンツに最も注意が払われています。
さらに、最初の数段落に最も注意が払われています。次に、ページのさらに下に移動します。
ただし、テキストが画像で分割されている場合は、画像のすぐ下で読者の注意が新たになります。これで、このブログに非常に多くの画像がある理由がわかりました。ほら、あなたはまだ読んでいます！
直感的なウェブサイトは、訪問者の頭脳と連携する必要があります。
FパターンまたはZパターンを使用して、自然な眼球運動で機能するように要素の配置をガイドします。
貼り付けた画像0378
最も重要なコンテンツを最初の2つの段落に入れます
大胆な色とコントラストの良い画像を定期的に使用して、読者の注意を引き付けます
リズムを作るために戦略的に空白を使用する
「三分割法」を適用して、召喚状：貼り付けられた画像0385などの重要な要素に注意を向けます。
あなたの訪問者に彼らが望むものをすぐに与えてください
Microsoftが実施した調査では、ほとんどの人が8秒の注意力を持っていることがわかりました（これは金魚よりも1秒短いです！）
貼り付けた画像0375
つまり、訪問者がWebサイトにアクセスして、最初の数秒以内に探しているものが見つからない場合、クリックして離れて、二度と戻ってこない可能性があります。
彼らは狩りやつつくのに時間を費やすことはありません。
あなたが持っている
彼らがあなたのビジネスについて知る必要があることと、彼らがすぐに次に何をする必要があるかを彼らに示すために。
Shopifyのホームページは、他の追随を許しません。プラットフォームが正確に何をするのか、なぜそれが訪問者に関連するのか、そして彼らがほんの数秒で何をする必要があるのかを教えてくれます。
スクリーンショット20170805 at 2.19.45 PM
知識のギャップを埋めるために簡単な説明テキストを使用する
先ほどお話しした「知識のギャップ」を覚えていますか？
訪問者の現在のオンライン習慣とウェブサイトの仕組みの間に1つある場合は、訪問者がギャップを埋めるのを支援する必要があります。
誰もあなたのウェブサイトの使い方に関する説明文の全ページを読みたくありませんが、訪問者は彼らが何をする必要があるかを彼らに示すために説明の断片（しばしばマイクロコピーと呼ばれます）を歓迎します：
貼り付けた画像0373
Webサイト全体に簡単な説明テキスト、ヒント、およびマイクロコピーを組み込むことにより、訪問者がインターフェイスをより直感的にすることで、訪問者のユーザーエクスペリエンスを向上させることができます。
すべての情報を1ページで利用できるようにする
購入を決定する際に訪問者が抱く可能性のあるすべての質問を考慮し、ページ上に便利な場所に回答を配置する必要があります。
訪問者が追加情報を取得する方法について考えるために注意をそらす必要がある場合、あなたのWebサイトでの彼らの経験は混乱します。
他の場所で情報を探すのは不便であるだけでなく、摩擦が増えるとコンバージョン率が低下する可能性があります。
たとえば、買い物客がランニングシューズを探しているとき、特定のモデルがどのようにフィットするのか疑問に思うでしょう。
Amazonは、サイズ選択ドロップダウンのすぐ上に「適切なサイズを見つける」リンクを配置することで、質問を先取りしました。
スクリーンショット20170805 at 2.51.36 PM
訪問者がそのリンクをクリックすると、ライトボックスが表示され、サイズ設定ウィジェットが表示されます。
スクリーンショット20170805 at 2.51.53 PM
一連の質問を通じてウィジェットが理想的なサイズを見つけると、ページが更新され、ドロップダウンにそのサイズが表示されます。
スクリーンショット20170805 at 3.00.46 PM
シームレスなエクスペリエンスは、摩擦を減らし、訪問者を製品ページにとどまらせるだけでなく、顧客エクスペリエンスを向上させ、返品率を下げることでコストを削減します。
訪問者が欲しいものを見つけるのを手伝ってください
消費者の76％が、ウェブサイトのデザインで最も重要な要素は、「ウェブサイトを使用すると、欲しいものを簡単に見つけられるようになる」と述べています。
貼り付けた画像0381
さらに、すべてのユーザーの50％は、探しているものが見つからないために購入していません。
したがって、訪問者が必要なものをできるだけ少ないクリック数と少ない検出作業で簡単に見つけられるようにする必要があります。
明確なナビゲーション
ほとんどの場合、訪問者はWebサイトのメニューバーで特定の製品や情報を探します。
しかし、彼らがそこにあるすべてのリンクを研究することを期待しないでください。
平均的な見込み客は、ナビゲーションバーの操作にわずか6.48秒かかります。
名前付けからナビゲーション構造まで、すべてが訪問者にとって一目で理解できるものである必要があります。
貼り付けた画像0376
一般的に理解され、明白なラベルを使用してください。あなたのメニューバーはかわいくて賢い場所ではありません。
4ページのWebサイトがない限り、すべてをプライマリナビゲーションバーに詰め込むことはできません。ページを分類し、サブカテゴリまたはセカンダリナビゲーションメニューを使用して、サイト上のすべてのページを効果的に整理します。
堅牢な検索機能
検索機能は、Webサイトに多くの製品がある場合、情報配信を通じてサービスを提供する場合、またはフライト、休暇、お得な情報の予約を提供する場合に特に重要です。
訪問者が自分の欲しいものを正確に知ってWebサイトにアクセスした場合（買い物客の30％を占めるシナリオ）、適切に設計された検索機能がコンバージョンへの最速のパスです。
ただし、すべての検索機能が同じように作成されるわけではありません。それらをユーザーフレンドリーにするいくつかの方法を次に示します。
訪問者が検索ボックスを見つけると予想される場所に検索ボックスを配置します。ほとんどの場合、ページの右上隅にあります。貼り付けられた画像0 379
「検索」ボタンをクリック可能に見せ、ユーザーが「Enter」キーを使用して検索を送信できるようにします。
プレースホルダーテキストを使用して、訪問者が検索できるものを示します。
スクリーンショット20170806 at 8.41.49 AM
検索ボックスをすべてのページで一貫した要素にします。
自動提案メカニズムを使用して、データ入力を高速化します。訪問者が探しているものを特定したり、関連するアイテムを見つけたりするのに役立ちます。
スクリーンショット20170806 at 8.44.28 AM
ビジュアルデザインを使用して意思決定を簡素化する
誰もテキストの壁にぶつかりたくなくて、あなたのウェブサイトで彼らが何をすべきかを理解するために次の3分を費やす必要があります。
CEBの調査によると、意思決定プロセスを簡素化することで20％増加すると、特定のブランドを購入、再購入、または推奨する顧客の可能性が96％増加します。
直感的なWebサイトのデザインは、訪問者が目的のアクションをすばやく簡単に実行できるようにすることで、意思決定を簡素化します。
ビジュアルデザインを使用してコンテンツに階層を与え、最も重要なものにする
情報と行動の呼びかけは最前線であり、中心的なものです。
貼り付けた画像0374
慣習を台無しにしないでください
あなたの訪問者はあなたのウェブサイトに彼らの時間のほとんどを費やしません。彼らはほとんどの時間を他のウェブサイトに費やしています。
つまり、Webサイトがどのように機能するかについて、一連の期待、つまり「現在の知識」をもたらすということです。直感的に、彼らは特定の場所で特定の機能や情報を探します。
クリックするとホームページに移動する左上隅のロゴ
フッターに記載されている連絡先情報
スクリーンショット20170806 at 9.15.16 AM
ナビゲーション、検索ボックス、およびその他の重要な要素は、ほとんどのページの同じ場所に配置されます
特定のアクション（チェックアウトプロセスなど）をガイドするための説明的な説明またはヘルプテキストが利用可能です
ライブチャット機能は右下隅にあります
たまに「ルールを破る」ことで、驚きの要素を紹介したり、特定のページ要素に注目を集めたりすることができます。ただし、ブランド上のエクスペリエンスを提供するために、慎重かつ意図的に行う必要があります。
オムニチャネルのパーソナライズを採用する
直感的なウェブサイトが訪問者が欲しいものを手に入れる際の摩擦が最も少ないことを意味する場合、あなたのブランドとの相互作用に基づいて彼らが探している可能性が最も高い製品やコンテンツを提供するよりも良い方法は何ですか？
サイトでパーソナライズされたカスタマーエクスペリエンスを提供すると、顧客が最も関連性の高い製品を見つけやすくなるため、より多くの顧客を引き付けて維持するのに役立ちます。
スクリーンショット20170806 at 10.33.09 AM
パーソナライズは、Webサイトのユーザーエクスペリエンスを強化するためにさまざまな方法で適用できます。
過去の購入に基づいて製品の推奨事項を提供し、訪問者にとって最も関連性の高いアイテムを強調します。これは、製品の選択肢が多いサイトで特に役立ちます。スクリーンショット2017 08 06 at 1.56.01 PM
訪問者の行動に基づいて追加の支援を使用します。 Brooks Runningは、さまざまなサイズの靴をカートに入れて適切なサイズとフィット感を見つけることができる買い物客をサポートすることで、返品率を80％削減しました。
コンテキストに基づいてさまざまな機能を採用します。たとえば、ログインしている顧客にのみ、顧客のみのナレッジベースへのリンクを表示できます。
トラフィックソースに基づいて、さまざまなコンテンツとメッセージングを表示します。コンテンツに関連性がある場合、訪問者はサイトをより直感的にナビゲートできます。
スクリーンショット20170806 at 2.07.00 PM
Webサイトの外部で顧客とやり取りする場合（そしてそうすることを願っています）、すべてのタッチポイントから顧客データを取り込んで、Webサイトに表示されるカスタマイズされたビューを通知できます。
つまり、ソーシャルメディア、電子メール、電話サポート、およびイベントを介して収集したデータを使用して、Webサイトのデザインを通知できます。
これには、Webエクスペリエンス、電子メール、およびターゲットを絞ったコンテンツやオファーをパーソナライズできる統合プラットフォームの実装が必要になります。また、モバイル、店舗、およびコンタクトセンターのエクスペリエンスをパーソナライズすることもできます。
モバイルエクスペリエンスを合理化する
モバイルレスポンシブウェブサイトエクスペリエンスは、すべてを小さな画面に詰め込むだけではありません。直感的なモバイルユーザーエクスペリエンスを作成するには、次のベストプラクティスに従います。
コンテンツに優先順位を付け、最も重要な情報をページの上部に配置します。
訪問者がリンクを探すために永遠にスクロールする必要がないように、召喚状を上部の近くに定期的に配置します。
明確で整頓されたナビゲーションを提供するモバイル固有のメニューを設計します。
訪問者が簡単に連絡できるようにします。連絡先情報を埋めないでください。また、タップツーコールなどのモバイル固有の機能を活用してください。
ユーザーがフォームに入力する必要のある情報の量を最小限に抑えます。
すべてのボタンのサイズが親指に優しいことを確認してください。
場所をミックスに持ち込む
顧客は、チェックアウトプロセスの途中で、特定の製品が地理的な場所で利用できないことを知るためだけに、フープを飛び越える必要はありません。
価格を現地通貨に換算する方法がわからないため、見込み客が消えてほしくないのです。
訪問者の場所に出荷できる製品のみを表示することにより、Webサイトのエクスペリエンスを合理化します。自国に最も関連性のあるコンテンツに優先順位を付けます。
IPアドレスに基づいて顧客の場所を決定します。
さまざまな国のローカライズされたサイトがある場合は、訪問者に続行する国を選択するように依頼してください。
表示する関連製品を決定するために、訪問者に郵便番号を尋ねます。スクリーンショット2017 08 06 at 2.31.26 PM
モバイルデバイスでジオロケーションを使用して、フォームに自動入力します。
リピーターに対応
興奮しすぎてWebサイトのオーバーホールを開始する前に、80/20の法則を覚えておいてください。
あなたの顧客のごく一部があなたの収入の大部分を占めており、これらのトップバイヤーはウェブサイトの再設計によって最も影響を受けます。
これらの忠実な顧客は、現在のWebサイトの動作に慣れており、デザインを大幅に変更すると、
irユーザーエクスペリエンス。
あなたが物事を変えるとき、あなたはあなたの最も価値のある顧客を考慮する必要があります。
新しい「ターゲット知識」に適応するときに、彼らが「現在の知識」を適用できることを確認し、それでも、新しいサイトで必要なものを簡単かつ迅速に見つけることができます。
彼らが慣れているものとあなたがなりたい場所との間に大きなギャップがある場合、そのような移行は簡単ではないかもしれません。劇的に異なるウェブサイトを立ち上げる代わりに、「build-measure-learn」プレイブックからページを取得することができます。
貼り付けた画像0377
簡単に言えば、Webサイトに小さな段階的な変更を加えるだけです。忠実な顧客を新しいユーザーエクスペリエンスに引き込むのに役立つだけでなく、変更が結果を改善しているかどうかを測定して学習する機会を利用することもできます。
もちろん、これはリピーターが多い場合にのみ当てはまります。定期的なトラフィックがほとんどなく、現在の設計が機能していない場合は、完全なオーバーホールが必要になる可能性があります。
結論
新しいテクノロジーと消費者の期待は、オンラインマーケティングが進化するにつれて、「直感的」の意味を絶えず変えています。あなたはあなたの訪問者があなたのウェブサイトとどのように相互作用するかを絶えずテストして測定することによって最新の状態を保つ必要があります。
直感的なWebサイトのデザインの目標は、訪問者が必要なものをすばやく見つけて、次の方法で最小限の摩擦で目的のアクションを実行できるようにすることです。
合理化されたユーザーエクスペリエンスの作成
あなたのウェブサイトの混乱を減らす
各訪問者に表示されるコンテンツと製品の関連性を高める
購入する最短経路の設計
A / Bテストを実施して、顧客が最も気に入っているものを見つけます
顧客がブランドとやり取りする際の混乱の量を減らす
直感的なウェブサイトをデザインするために使用するヒントとコツは何ですか？
