eコマースストアのユーザージャーニーの作成

公開: 2019-07-17

あらゆるタイプのWebサイトを構築するには、独自の課題が伴います。しかし、eコマースのWebサイトは、まったく別の球技です。他のウェブサイトと同じ目的を共有しています。ブランドの個性を開発して維持し、オーディエンスとコミュニケーションを取り、エンゲージメントを高め、リードを獲得して維持し、最終的には消費者との強力で長期的な関係を構築します。

しかし同時に、実際の店舗としても機能し、売り上げの増加と顧客満足度の向上を通じて収益を上げ、業績を向上させることを目的としています。それは多くの責任です！ eコマースストアですべてを確実に達成したい場合は、これらのヒントに従って、Webサイトで完全に機能するユーザージャーニーを作成してください。

UXデータを収集する

UXデータの目的は、既存のユーザーエクスペリエンスの観察に関する利用可能なすべての洞察を身に付けることです。これが必要なのは、問題を見つけて、最初からサイト構造を改善するソリューションを考え始めることができるようにするためです。 Hindsightなどの優れたUXツールを使用すると、正確なデータを収集してサイトの改善領域を特定できます。訪問者がサイト内を移動するときの記録から、Webページのヒートマップを生成して人々がどこにいるか（またはいないか）を確認できます。 't）クリックします。

もちろん、これは、テストする既存のWebサイトがある場合にのみ当てはまります。まったく新しいWebサイトを構築している場合、このステップは後のフェーズでのみ実行されます。ただし、これらのヒントを覚えておいてください。

収集するデータによって、次のような重要な情報が決まります。

活動または相互作用のピーク
エンゲージメントセグメンテーション
壊れたまたは行き止まりの旅
欲求不満のポイント

また、SEOインサイト、Google広告、Googleアナリティクス、ソーシャルメディアプラットフォームに組み込まれているアナリティクスから収集したデータを使用して、調査結果をサポートすることもできます。データ収集は、将来のオンライン監査および調査目的のベンチマークとして使用できる情報のベースラインも提供します。

ケーススタディの作成を開始します

これは、特に数十のページと複数の可能なユーザージャーニーを持つWebサイトを扱っている場合に、将来のeコマースの成功の基本になります。

必要な調査が行われ、正しいデータが収集されたら、調査結果を簡潔に記録する必要があります。ケーススタディは、データの要約と説明、および仮説の作成またはテストに使用されます。ワイヤーフレームの作成からWebサイトの構築までの手順を実行するにつれて、記録するデータを拡張し、最終的には進行中のユーザーテストを測定するためのツールとして使用したり、チームメンバーが情報に基づいた決定を下せるようにします。

サイト構造を計画する

次の2つのステップは、情報アーキテクチャを設定し、ワイヤーフレームの形で完全なWebサイトレイアウトを計画することです。

簡単そうに聞こえますが、すでに考えたことがあるかもしれませんが、少し立ち止まって考えてみてください。このワイヤーフレームフェーズに本当に必要な注意を払ったのでしょうか。

これらの2つの手順を実行している間、ルックアンドフィールのブレインストーミングを開始できます。問題ありません。 eコマースストアの構造とナビゲーションが完璧に調整および統合されていることが確実になるまで、バックバーナーで最終的なユーザーインターフェイスの決定を続ける限り。重要性の観点から、ユーザーインターフェイスを2番目に置いているわけではありません。ユーザーインターフェイスは明らかに非常に重要です。それはあなたのウェブサイトの構造に生命を吹き込み、あなたの店をユーザーにとって直感的に機能させる上で主導的な役割を果たします。しかし、あなたのインターフェースは壊れたサイト構造や複雑なユーザージャーニーを保存することはできません。

ユーザーのように考える

ワイヤーフレームの完成を開始するときは、消費者のことを頭に入れておく必要があります。あなたはすでにあなたのブランドとそのすべての製品をよく知っているので、これはトリッキーな練習になる可能性があります、それはあなたにとってかなり簡単に思えます。しかし、それであなたを騙してはいけません！初めての訪問者とカートに戻る訪問者の両方を大騒ぎせずに駆り立てる、効率的で効果的なオンラインユーザージャーニーを中心にナビゲーションを開発する必要があります。

まず、Webサイトのナビゲーションをユーザーのペルソナに合わせて、ユーザーのニーズ、経験、行動、および目標を理解し、それを活用できるようにします。これは、ユーザージャーニーとユーザーフローの基礎を形成します。ユーザージャーニーは、ユーザーが日常的に製品と対話するシナリオを説明しますが、ユーザーフローは、最初から最後まで、製品との対話の独立した段階に焦点を合わせます。

ユーザーをよりよく理解するために、ターゲットオーディエンスとの直接インタビューを実施することを検討してください。ここでは、ユーザー製品の理解を特定し、ユーザージャーニーマップの基礎を形成し、既存/新規のユーザーペルソナを洗練するのに役立つ、具体的で自由形式の質問をすることができます。

ユーザーのように考えるときは、エラー防止を考慮に入れていることを確認してください。あなたのウェブサイトがどれほど注意深く設計されていても、あなたのサイトのナビゲーションがどれほど優れていても、ユーザーは間違いを犯します。そもそも問題の発生を防ぐためにさらに努力するのはあなたの責任です。ただし、その場合は、ユーザー向けのクイックフィックスが含まれていることを確認してください。

したがって、基本的に、ワイヤーフレームを作成するときは、考えられるすべての訪問者のシナリオに対して、ナビゲートしやすい旅があることを確認してください。その間、情報アーキテクチャを改良して、ステップを最小限に抑え、アップセルやクロスセルの旅のためにWebサイトのレイアウトで理想的な瞬間を見つけてください。

ワイヤーフレームをテストする

この時点で、ワイヤーフレームは、設計要素がほとんどまたはまったく実装されていない、何らかの形の青写真である可能性があります。ただし、この時点でコンテンツをワイヤーフレームに追加する必要があります。ワイヤーフレームの効率と使いやすさをテストする場合は、すべての通信を含める必要があります。

この種のワイヤーフレームテストについては、必ずしも一般の人々に頼る必要はありません。さまざまな部門のチームメンバーにサイト全体の構造、ナビゲーション、および設計を確認してもらうことで、今のところ十分な洞察が明らかになります。テストグループを、これまでにプロセスと実質的な相互作用をすでに持っている人々に限定していないことを確認してください。新しい目と新鮮な意見が必要です。

忠実度の高いワイヤーフレームを構築する

プロトタイプとも呼ばれるハイファイワイヤーフレームは、完全に機能するワイヤーフレームであり、すべてのページとジャーニーで最終的なWebサイトを模倣します。これを使用して、Web開発を開始する前に、組織外の人々に対してユーザーテストを実施します。このプロセスは、オンラインストアの完成に向けた最後のいくつかのステップを構成するため、急いではいけません。

モデレートテストと非モデレートテストの両方を実行できます。どちらの方法も、ユーザーがワイヤーフレームをどのように操作するかを観察し、ユーザーが目的を達成するのを妨げる問題、ファインダビリティの問題、非効率性、ボトルネック、行き止まりを特定することを目的としています。

これは、デザインがWebサイトのスケルトンをサポートおよび補完していることを確認するためにユーザーインターフェイスを取り込む部分でもあります。

ユーザーインターフェイスのヒューリスティック評価を行う

ヒューリスティック評価は、1人以上のUXまたはUIスペシャリストによって行われるレビューです。具体的には、ユーザーエクスペリエンスの観点からWebサイトのユーザーインターフェイスを確認します。これは、一連の原則に基づいて、考えられるすべてのユーザージャーニーにわたってWebサイトの全体的な「直感的な」ユーザビリティをテストするのに役立ちます。忠実度の高いプロトタイプをテストするときに分析できる、ユーザージャーニーに焦点を当てた5つの原則を次に示します。

システムステータスの可視性

ユーザージャーニーのすべての対話を通じて、ユーザーは妥当な時間内に適切なフィードバック（視覚的な手がかり）を通じて何が起こっているかを常に把握している必要があります。この例としては、リンクやクリック可能なアイテムにカーソルを合わせたときのカーソルの変化の一貫性を確保したり、アイテムが読み込まれていることを明確に示したりすることができます。

システムと現実世界の一致

レイアウト上のすべての実用的なポイントとコンテンツのストランドには目的があり、ユーザーの言語を話す必要があります。情報階層は、設計を通じて実現され、自然で論理的な順序に従う必要があります。 Webサイトのコンテンツとナビゲーション全体で平易な英語を使用し、実際の例を伝える高品質の画像を含めます。

ユーザーコントロールと自由

情報アーキテクチャがどれほどうまく設定されていても、ナビゲーションがどれほどうまく設計されていても、ユーザーは間違いを犯します。彼らがそうするとき、彼らがはっきりとマークされた緊急出口を見つけて、イライラすることなく彼らの旅に戻ることができることが重要です。目に見える手がかり、二次ナビゲーション、またはブレッドクラム戦術を実装することにより、やり直しと元に戻すアクションをサポートします。

一貫性と基準

固定されたデザインで自分自身を制限する必要はありませんが、それでもユーザーが個々のインターフェイス要素を理解できるようにする必要があります。ユーザーは、異なる言葉、状況、または行動が同じことを意味するのかどうか疑問に思う必要はありません。さまざまなレイアウトが認識可能な構造に従っていること、および色と、一次および二次の召喚状のデザインなどの実用的な要素に一貫性があることを確認してください。

ヘルプとドキュメント

Webサイトのレイアウトには複雑すぎる情報を含めない方がよい場合でも、場合によってはヘルプとドキュメントを提供する必要があります。そのような情報は、検索が簡単で、タスクに焦点を合わせ、説明的である必要があります。これは特に、より高度な製品や複雑な製品を販売しているeコマースストアに当てはまります。たとえば、オンラインのペイントストアには、技術データシートと有用なアプリケーション情報を含める必要があります。

それだけではありません

あなたはあなたのウェブサイトでの作業やあなたのユーザージャーニーの強化を完全に終えることは決してできません。ワイヤーフレームをまったく新しいWebサイトのこの大規模なプロジェクトと考える必要はありません。ワイヤーフレームは、ブレインストーミングとテストを行って、小さな問題でも改善することができます。ただし、最小の問題が最大のコンバージョン損失につながる場合があります。そのため、ウェブサイトが旅のあらゆる段階でユーザーをサポートできるようにしてください。そして、ここから何をすべきかわからない場合は、私たちにリングをください。 Shopifyのエキスパートとして、私たちはあなたと同じようにあなたのオンラインストアの成功に情熱を注いでいます。