B2B Webサイトの7つのユーザーエクスペリエンスデザインのベストプラクティス(+例)

公開: 2022-01-20

説得力のあるB2BWebサイトを作成するには、見栄えを良くして何をしているのかを説明するだけでは不十分です。 適切なオーディエンスを念頭に置いてコンテンツを作成するために、バイヤーペルソナを開発する必要があります。 あなたは、言われた聴衆があなたを見つけることを確実にするためにキーワード研究を行いたいです。 そして、はい、あなたは間違いなくそれを魅力的に見せたいので、人々はあなたのウェブページをナビゲートして最終的にクライアントになりたいと思うでしょう。

このプロセス全体の北のスタートは、ユーザーエクスペリエンス(またはクールな子供たちがそれを呼ぶようにUX)です。 これを正しく行うと、戦いの半分が勝ちます。 しかし、正確には、それは何を伴うのでしょうか? 既存のウェブサイトに優れたUXがあるかどうかをどうやって知ることができますか?

ユーザーエクスペリエンスとは何ですか?

ユーザーエクスペリエンスとは、訪問者がWebサイトを操作したときにどのように感じるかです。 目標は、直感的でナビゲートしやすく、読者に価値を提供するサイトを設計することです。 イライラして競合他社のサイトにアクセスするのではなく、すべてのコンポーネントがサイトにとどまるようにするために、すべてのコンポーネントが存在する必要があります。

理論的には、それはかなり単純に聞こえます。 実際には、多くの計画、テスト、および変更が必要です。 あなたがあなたのウェブサイトをデザインするときにあなたのリストをチェックすることはただの別の項目ではないほどです。 実際には、より良いUXを実装するためのアイデアを考え出すために、全営業日を費やすユーザーエクスペリエンスの専門家がいます。

Webサイトを最初から設計するか、テンプレートを使用するかに関係なく、すべてがユーザーエクスペリエンスを念頭に置いて設計する必要があります。

GIPHY経由

UXがB2BWebサイトに与える影響

ユーザーエクスペリエンスは、Webサイトの最も重要な要素の1つです。 効果的に行われた場合、プラスの影響はいくつかあります。

バウンス率を下げる

かなりの数のウェブサイト訪問者が到着後すぐにそれを離れるとき、それは彼ら全員が急いでいるということではありません。 それは、ウェブサイトが望まれることがたくさん残っていることを意味します。 これは、読み込み時間を短縮したり、アクションの呼び出しを改善したり、ナビゲートするのが難しい場合があります。 UXの専門家にウェブサイトの監査を実施させ、問題がどこにあるかを特定し、それらに対処することで、これらすべての問題を解決できます。

効果的なバイヤーズジャーニー

すべての見込み客が購入者の旅の同じ場所にいるわけではありません。 初めてのウェブサイト訪問者は、リピーターとはまったく異なる何かを探しています。 では、ウェブサイトのデザイナーは何をするのでしょうか? 彼らを導きなさい、それが何です。 優れたUXとは、認識、検討、決定の段階にある訪問者に合わせたコンテンツがあることを意味します。 これを行うには、スマートコンテンツを提供し、調査を行うときに検索エンジンに入力される可能性のあるキーワードを使用します。

より高いコンバージョン率

コンバージョン率は売上だけではありません。 確かに、はい、それらは最も重要です。 しかし、すべてのWebサイトのインタラクションが販売で終わると期待するのは非現実的です。 効果的なUXは、ユーザーの旅のすべてのステップを考慮に入れるため、ユーザーは、メーリングリストへの参加、ブログの購読、ウェビナーへの登録、デモのリクエスト、電話のスケジュール設定、発信など、必要なすべてのアクションを実行する可能性が高くなります。購入。 これには、効果的な見出し、魅力的なコピー、役立つビジュアル、強力な行動への呼びかけが必要です。

より短い販売サイクル

B2BWebサイトとB2CWebサイトの違いの1つは、B2BWebサイトの販売サイクルがはるかに長くなる傾向があることです。 見込み客の調査プロセスが長く、投資がはるかに大きいため、これは理解できます。 リードがWebサイトに最初にアクセスしたときに、購入の準備ができることは非常にまれです。 ただし、サイトの読み込みが速く、ナビゲートが簡単で、必要なすべての情報を提供し、エンゲージメントを維持できる場合は、プロセスをスピードアップできます。 もう1つの重要な要素は、訪問者が電子メールニュースレターにサインアップするように誘うWebサイトを設計することです。 このようにして、購入の準備ができるまで、これらのリードを育成できます。

顧客維持の向上

新規顧客の獲得は、既存の顧客を維持するよりも大幅に費用がかかります。 そしてあなたのウェブサイトのデザインが顧客をより多くのために呼び戻すことができる多くの方法があります。 あなたのサイトとの彼らの相互作用を快適にするためにあなたのコントロールですべてをしてください。 読み込みが速いことを確認してください。 レスポンシブデザインを実装します。 ネイティブの支払い機能を含めます。 顧客ポータルを作成して、プロジェクトや注文のステータスを確認できるようにします。 彼らがあなたに連絡するためのいくつかの方法を含めてください。 ライブチャットを使用して、質問に対する迅速な回答を得ることができます。 これらの要素はすべて、顧客を満足させ、ビジネスの収益を促進し続けます。

GIPHY経由

ユーザーエクスペリエンス(UX)デザインとは何ですか?

ユーザーエクスペリエンスの設計プロセスでは、Webサイトの訪問者が必要とするすべてのものを考慮し、サイト全体の各機能と配置を最適化する必要があります。 上記のすべての機能のリストを作成して、ランダムに追加することはできません。

UXデザインは、各要素をコンテキストに配置します。 Web訪問者が特定の瞬間に行っていることに関連するすべてのものを作成します。 そして、実用的なものに加えて、このプロセスには、純粋に楽しいまたは面白い要素を追加することも含まれます。 重要なのは、見込み客と顧客が滞在したい環境を作ることです。

UXデザインプロセスはウェブサイトプロジェクトごとに異なる場合がありますが、一般的な分母は次のとおりです。

  • 広範な市場調査の実施
  • バイヤーペルソナの開発
  • ワイヤーフレームの作成
  • ツール、チュートリアル、3Dエクスペリエンス、インフォグラフィックなどの便利な機能を考え出す
  • UX象限モデルのすべての領域を確実にカバーする(以下で説明)
  • A/Bテスト

UX象限モデル

UXデザイナーは、ユーザーエクスペリエンスを最適化するために集まった4つの異なる分野の専門家です。

経験戦略(ExS)

ExSはU​​Xの主要な傘です。 それはあなたがあなたのビジネスソリューションについての詳細と前向きな経験と結婚するところです。 例としては、見つけやすく、理解しやすい製品説明を提供することが含まれます。

GIPHY経由

インタラクションデザイン(IxD)

インタラクションデザインとは、ウェブサイトのインタラクティブな要素(召喚状のボタン、ツール、クイズ、ページの遷移など)を指します。これらは、ウェブサイトの訪問者を導き、コンバージョン率を高めるための重要な要素です。

ユーザー調査(UR)

URには、Webユーザーが自分の行動やフィードバックに基づいて、何を望んでいるかを調べることが含まれます。 このタイプの情報を見つけるには、ユーザビリティをテストしたり、調査を展開したり、直接(電子メール、ソーシャルメディア、または対話するたびに)直接質問したりすることができます。

情報アーキテクチャ(IA)

情報アーキテクチャとは、Webサイトの構造を指します。 子ページとその階層とともに、ナビゲーションバーごとにすべてがどのように編成されるか。 それは、ナビゲートしやすい方法ですべてをまとめることを含みます。

Webサイトを設計する際に、4つの要素すべてを考慮に入れることで、最適なUXのすべての基盤が確実にカバーされます。

貧弱なユーザーエクスペリエンスの兆候

非常に古くなったウェブサイトがあり、UXの質が悪いという要素は、アクセスしたすべての人に表示されます。画像なし、リンクなし、リンク切れ、コンテンツの少ないページがたくさんある、ダイヤルを使用している場合と同じように読み込みが遅い画像-アップインターネット接続。 つまり、90年代後半から2000年代初頭に作成されたように見える、または感じられるものはすべてです。

ただし、より現代的に見えるWebサイトでは、ユーザーエクスペリエンスが低下する可能性があります。 Webサイトの監査を実施して、次のいずれかに該当するかどうかを判断します。

読み込み時間が遅い

ほとんどの人は、ブツの注意力を持っています。 それを私たちの既存の即時満足の文化と組み合わせてください。あなたのウェブサイトが2秒以内に読み込まれない場合、人々は去るでしょう。

モバイルの最適化なし

仕事のために机に座っていないとき、ほとんどの人は自分の電話からオンラインになります。 また、Webサイトは高速に読み込まれ、デスクトップからは見栄えがする場合がありますが、小さな画面から読みやすく、ナビゲートするのが難しい場合は、見込み客は離れてしまいます。

紛らわしいナビゲーション

ウェブサイトは直感的でなければなりません。 メニューオプションが多すぎる、各Webページでデザインに一貫性がない、テキストの残りの部分と同じ色のクリック可能なリンク、および/または漠然とした行動の呼びかけがあると、訪問者はイライラします。

GIPHY経由

漠然とした行動の呼びかけ

CTAと言えば、これらは短く、アクション指向である必要があります。 さらに、読者はそれをクリックしたときに何が起こるかを正確に知っている必要があります。 ここをクリックすると、電子書籍をダウンロードしたり、通話をスケジュールしたりするほど効果的ではありません。

高いバウンス率

ウェブサイトの指標を見ると、バウンス率が最も高いページは何ですか。 そして、その理由は何ですか? それがランディングページであり、彼らがそれを記入した後に去るからであるならば、あなたは金色です。 しかし、あなたのホームページ、製品/サービスのページ、またはブログによって人々が数秒でWebサイトを離れる場合、彼らは混乱しているか、圧倒されているか、退屈しています。

低いコンバージョン率

また、人々があなたの望む行動をとる頻度にも注意を払う必要があります。 ほとんど無視されるCTAボタンは、それらについて何かを変更する必要があることを示しています。 これは、テキスト、サイズ、または色である可能性があります。

UXデザインのヒントとベストプラクティス

この時点で、優れたユーザーエクスペリエンスのベストプラクティスを構成するものについての良いアイデアが得られているはずです。 ただし、わかりやすくするために、確実に実装したい7つのベストプラクティスを次に示します。

1.高速読み込み時間

前述のように、読み込み時間の短縮は非常に重要です。 読み込みが速くない限り、読者はサイト上の他のものを見ることができません。 自分の情報を確認するには、GooglePageSpeedInsightsやPingdomなどのツールを使用します。

GIPHY経由

2.シンプルなナビゲーションバー

あなたのウェブサイトの何も圧倒的であるべきではありません。 ナビゲーションバーは、ページ間を簡単に移動できるようにする必要があり、わかりやすいものにする必要があります。 あまりにも多くのオプション(またはあまりにも多くのオプションを含むドロップダウンが多すぎる)を追加することは混乱を招き、UXの質の悪さの典型的な例です。

3.パンくずリスト

ブレッドクラムを使用すると、Webサイトの訪問者が特定のページに簡単に戻ることができます。 この用語は、ユーザーがサイトの現在の場所を確認できるセカンダリナビゲーションを指します。 これは、ナビゲーションバーにドロップダウンメニューがあるWebサイトに適しています。 一連の水平リンクとして表示されます。

以下の例では、Bed、Bath&BeyondのWebサイトに多くのページがありますが、コーヒーの画像は、[キッチン]タブにあるメニューオプション[コーヒーと紅茶]にあります。 そして、パンくずリストのおかげで、これを一目で見ることができます。

出典:Bed、Bad&Beyond

4.役立つコンテンツ

昔々、ウェブサイトにキーワードを詰め込むことは、それがグーグルでランク付けされるのを助けるのに十分でした。 もう違います。 その戦術はSERPへの配置を改善しません。 また、顧客中心であること。 これは、見栄えを良くするだけではありません。 これは、ユーザーの問題点を解決し、ユーザーが課題を克服できるようにすることです。 そうしてください。 ブログ、電子書籍、ホワイトペーパーなどの教育コンテンツを提供します。 インフォグラフィックやビデオチュートリアルなど、簡単な手順でプロセスを説明します。 彼らの質問に答えなさい。 価値を提供します。 これにより、彼らは戻ってきて、あなたのコンテンツを共有し、あなたにもっと多くのビジネスを紹介し続けるでしょう。

5.空白

空白は、まさにそのように聞こえます—段落とページセクションの間の空の領域。 たくさんの空白を含めると、サイトがクリーンで読みやすくなります。 AppleとAmazonについて考えてみてください。 あなたはあなたの注意を争う多くのノイズを持っていません。 これにより、探しているものを簡単に見つけることができます。

6.Webページ間の一貫性

人々は解決策を見つけるためにあなたのサイトに来ています。 したがって、彼らはあなたのサイトで物事を見つける方法をすばやく理解できるはずです。 そして、一度実行すると、表示しているページに関係なく、直感的に実行し続けたいと考えています。 したがって、読者ができるだけ簡単にできるように、レイアウトの一貫性を維持してください。

7.あなたに連絡する複数の方法

あなたの市場調査の一部には、あなたのターゲットオーディエンスがあなたとコミュニケーションすることを好む方法を見つけることが含まれます。 世代、職務、または好みに応じて、これには電子メール、電話、またはライブチャットが含まれる場合があります。 上位2つを選び、実装します。 ライブチャットは、リアルタイムで迅速な回答を得るのに最適です。

UXデザインの例

ここで、これらの要素のいくつかが実際に動作していることを確認するために、UXを正しく実行しているビジネスを見てみましょう。

HubSpot

もちろん、HubSpotから始めています。 きれいで、空白がたくさんあり、注意を引き、クリックすると何が起こるかを正確に伝える召喚ボタンがあり、ライブチャットツールを使用して簡単に回答を得ることができます。

ページのさらに下にあるシンプルなカードデザインで、探しているハブを簡単に見つけることができます。 それぞれの簡単な説明のすぐ下に最も人気のある機能をリストすると、コンテンツをスキャン可能で理解しやすくなります。

アップル

いつものように、Appleはほとんどすべての点でパックをリードしています—そして彼らは彼らのウェブサイトのUXで舞台を整えました。 ホワイトスペースはいたるところにあります。 気を散らすものはありません。 上部にあるアイコンのいずれかをクリックして、探している製品の種類を見つけてください。 または、すでにカルトフォロワーの一部であり、お金を渡す準備ができている場合は、[購入]をクリックします。

ただし、ウォレットを開く準備がまだできていない場合は、役立つ比較チャートが提供されるため、調査プロセスが簡単になります。 必要な情報を取得するために、50個のタブを開いたり、ページ間を移動したりする必要はありません。 すべてが可能な限り簡単で単純化されています。

AirBnB

Airbnbを利用すると、どこに行っても、滞在先を簡単に見つけることができます。 実際、どこに行くのかわからなくても、好きな場所を見つけるのに役立ちます。 彼らのホームページにはまばらなテキストがありますが、場所を探すか、ホストになるためにどこに行くべきかを正確に知っています。

また、旅行中に行うことや、故郷に滞在することで体験できることなど、Webサイトの訪問者に役立つコンテンツを提供します。

そして、ユーザーが自分の資産を借りることを検討しているが、それでも質問がある場合、サイトはそれらの答えを見つけるのを本当に簡単にします:

ユーザーエクスペリエンスを提供することは、顧客中心であることがすべてです。何が彼らにとって物事を容易にするでしょうか? もっと楽しめる? もっと魅力的ですか? 次に、各要素を拡張して、Webサイトを見つけたことにワクワクするようにします。 そして、彼らがそうしたら、彼らはそれについて知っているすべての人に話します。