e コマースのユーザー フローを作成する方法

オンライン ストアの新しい Web サイトを構築しているとします。 WordPress のようなページ ビルダーに入り、ページにセクションを追加し始め、ナビゲーション バーを中央に配置するか、About クリップを最初に配置するかを決定します。

または、すでにウェブサイトを持っていて、見栄えを良くすることができると判断した場合は、画像、テキスト、および CTA の再配置を開始します。

とにかく、間違いはすでに犯されています。どちらの場合も、戦略やユーザー フローは存在しません。 デザインはさりげなく選ばれ、本物のジャクソン・ポロックの絵のように飛び散っています。

ポロックのファンであろうとなかろうと、彼の絵はじょうごのある段階から次の段階へとリードをナビゲートする必要はありませんでした。

オンライン ショッピングの新しい時代では、e コマース Web サイトを持つことが重要です。これは、潜在的に有益なアプリです。

しかし、美しいウェブサイトを持っているだけでは十分ではありません。同様に、大量のトラフィックを引き付けても、コンバージョン (つまり、製品を購入) しない限り無駄です。 見込み客をコンバージョンに導くように設計された Web サイトが必要です。

優れたデザインの Web サイトは、お気に入りのフォントやアニメーションを選択することから始まりません。 ユーザー フローをマッピングすることから始めます。

ユーザー フロー ダイアグラムとは

ユーザー フロー ダイアグラム (ユーザー フロー チャート、タスク フロー ダイアグラム、ユーザー インターフェイス フロー ダイアグラムとも呼ばれます) は、ユーザーが目標またはタスクを達成するために Web サイトまたはアプリを介してたどる経路を示します。 ユーザーがタスク (商品の購入など) を完了するまでに 1 つのページから次のページに移動する手順を示すことで、タスクの完了を促す方法を理解できます。

UX Collective のユーザー フロー図の例。

UXデザインにおけるユーザーフローの役割

ユーザー エクスペリエンス デザイン (UX デザイン) とは、ユーザー中心のデザインを作成することです。 ユーザー、つまり潜在的な顧客をデザインの選択の中心に置くことで、ユーザーのエクスペリエンスを向上させ、販売の最後までナビゲートする可能性を高めます。

ユーザーフローは、コンバージョンを生み出すために必要なユーザーアクションと製品機能を考慮して、ユーザーが製品デザインとどのようにやり取りするかを明らかにします。

設計プロセスを開始する前にユーザー フロー図を作成して、Web サイトのニーズを知らせます。 ストラテジスト、デザイナー、Web 開発者は、UX フローを使用して製品の欠陥を特定し、ページ数、各コンポーネントのコンポーネント、すべての情報アーキテクチャなど、プロジェクトの範囲を理解します。

Web サイトの開発後にユーザー フローを作成して、簡素化と改善が必要な領域を特定することもできます。

Creately のサンプル ユーザー フロー ダイアグラム。

高レベルのユーザー フローと詳細なユーザー フロー

高レベルのユーザー フローは、アイデアやプロセスの概要をすばやく示すために作成された、高速で簡潔なフローです。

詳細なユーザー フロー (またはタスク フロー) はより有用であり、タスクの完了に関連するすべてのステップと決定が詳述されています。 詳細なフロー図は、e コマース Web サイトのデザインとコンテンツを知らせるために作成するものです。

ユーザー フローは、ペルソナとエントリ ポイントに基づいてユーザーが異なる方法でタスクを完了できることを強調するという点で、ユーザー フローをタスク フローと区別するものもあります。

ユーザー フローとユーザー ジャーニー

ユーザー フローは、ユーザーのエンド ツー エンドの製品体験を概説するユーザー ジャーニー マップとは異なります。 フローが純粋にアクションベースであるのに対し、ユーザー ジャーニーはユーザーの感情などの要素を考慮に入れます。

ユーザー ジャーニー マップとカスタマー ジャーニー マップは同じ意味で使用されることもありますが、これはユーザーと顧客が同一人物である場合にのみ機能し、常にそうであるとは限りません。 たとえば、雇用主 (顧客) は、従業員 (ユーザー) が使用するオンライン ツールを購入できます。

ユーザー フロー図の作成方法

1. ダイアグラムの目的を決定する

ユーザー フロー図に含まれるものは、目標と追跡しているタスクによって異なります。 図ごとの目標またはタスクの数を制限します。 一度に 1 つだけチャート化するのが最適です。 複数の図を見ると、図が複雑になりすぎて、効果が低下する可能性があります。

後で参照できるように、目的に基づいてユーザー フローに明確なタイトルを付けます。

2. 典型的なユーザーを理解する

ユーザーを理解することは、最適に機能するタスク フロー ナビゲーションと、各ページに含めるコンテンツを知らせるのに役立ちます。

ユーザー調査を実施して、ユーザーの以下を収集します。

• 目標
• 動機
• 望ましい機能
• 経験・知識のレベル
• 障壁

これらの要因は、さまざまなオーディエンス セグメントや購入過程の段階によって変化する可能性がありますが、それらを使用して、各 Web ページの内容、各ページのデザイン方法、およびリンク先を決定します。

ユーザーとビジネスの目標を一致させて、両方を満たす e コマース Web サイト フローを設計できるようにする必要があります。

競合他社のフローを調査することでも、洞察が得られます。

3. タスク フロー キーを作成する

一貫性があり、他の人が理解できるように使用する色と形状のキーを提供する限り、タスク フロー ダイアグラムがどのように見えるべきかについて厳密な規則はありません。

一般的なユーザー フロー シンボルは次のとおりです。

時々使用される他の形状には、三角形、斜めの平行四辺形、および破線の形状 (実線の代わりに) が含まれます。 システム タスク、入力要素、選択/クリックなどの追加アイテムの形状を切り替えて、必要に応じて具体的にすることができます。

使用する色は、ユーザー フロー チャートの意味と読みやすさに貢献する必要があります。 アイテムをグループ化し、要素を識別し、パターンを明らかにするのに色がどのように役立つかを考えてみましょう。

その他の種類のユーザー フロー チャート

ユーザー フロー チャートは Web サイトに固有のものであるため、すべてが形や色を使用する一般的な方法に従っているわけではありません。

別のスタイルのユーザー フローは、コンピューター サイエンスで使用される状態図をモデルにしています。 状態図の外観はさまざまですが、e コマース プロセス フローを導く矢印を使用して、一連の分数として記述できます。 分数には、ユーザーが分数ラインの上に表示するものと、ユーザーがその下で実行するものが含まれます。

サイト マップをモデルにしたユーザー フローもあります。 実行されたアクションに加えて、ユーザー フローに関連する各 Web ページに、それらのページのすべてのセクションとサブセクションのリストが表示されます。 次に、矢印または線は、どのページ セクションと CTA がユーザーをフローの次のステップに導くかを示します。

Behance の Salinthip Kaewkerd からのサンプル ユーザー フロー。

4. ユーザー フロー図の概要を説明する

フォーマットを決定したら、タスク フローのマッピングを開始できます。 特定の図で選択したエントリ ポイントから開始し、エントリ ポイントからタスク完了までのすべてのステップをリストします。

エントリ ポイントは、広告、ソーシャル メディア、オーガニック検索結果、外部リンク、メール キャンペーンなど、ユーザーを Web サイトに誘導する任意のソースです。 アプリは、Web サイトよりもエントリ ポイントが少ない傾向にあります。

以下の手順 (ユーザー インターフェイス フロー図の要部) は、マップするために選択したタスクによって異なります。 それらには、ログインおよびサインアップ フォーム、製品の閲覧、チェックアウト プロセス、オンボーディングなどの項目が含まれる場合があります。 ユーザーがどのようにして各ページにたどり着くのか、そのページで実行できるすべてのアクション、そのページからどこに移動して目標に向かって進むのかを検討してください。

ユーザー フローの最後のステップは、タスクを完了するユーザー アクションではなく、ユーザーの完了を確認する機能であるべきです。

現在の e コマース Web サイトをアップグレードする場合は、Google アナリティクスの行動フロー レポートを使用して、ユーザーがどこから来て、どのように Web サイトをナビゲートし、どこから離脱するかについての洞察を得ることができます。

ユーザー フローをマッピングすると、ユーザーが 1 つのタスクを完了するために複数のパスを使用できることがわかります。 ブランチまたはノードは、これらのポイントで途切れて、主要経路のマッピングを続行します。

フロー ダイアグラムを作成するときは、フロー ダイアグラムが移動する方向の数を制限することで読みやすさを向上させることができます。すべての方向を指す矢印になってしまうと、ダイアグラムが迷路のように見え始めます。 機能図の作成に使用できるユーザー フロー ツールは多数あります。

5. フローを削減する

ユーザー フロー ダイアグラムを作成したら、ハサミを作成します。 この手順には、次の 3 つの重要な編集が含まれます。

1. フローの視覚化に不要な情報を削除する
2. 純粋なユーザー ナビゲーションの外にある詳細をジャーニー マップに移動する
3. 冗長または不要な手順の特定

この最後のステップは、ナビゲーション フローを視覚化するためのものではなく、エクスペリエンスを改善しようとしているユーザーのためのものです。 ユーザーがタスクを完了するために必要な決定とアクションが多ければ多いほど、そうする可能性は低くなります。 ユーザー フローをできる限り簡素化して、コンバージョンの可能性を高めます。

6. 意図を込めてラベルを付ける

ユーザー フロー図のすべての要素に明確なラベルを付けます。 各図形、ページ、セクション、またはアクションが何を参照しているのかを明確にする必要があります。 意味を損なう場合は、省略形を使用しないでください。 終了したら、何人かの同僚にユーザー フローをレビューしてもらい、解釈できるかどうかを確認します。

データを使用してユーザー フローを最適化する

新しい Web サイトを作成したり、新しいデザインやコンテンツをテストしたりする場合は、実際のユーザー フローを調べて、フロー ダイアグラムに描かれている期待と比較することを検討してください。 不一致が生じた場合は、それらを使用してフロー図を修正するか、ユーザー インターフェイス自体を編集して、計画どおりにユーザーを導くことができます。 ユーザビリティ テスト、タスク分析、ツリー テストなど、いくつかの UX 調査方法でユーザー フローをテストします。

また、Google アナリティクスのデータや調査を使用して、ユーザー フローを最適化して売り上げを伸ばすことができる場所を確認することもできます。 e コマースの Web サイトを構築する場合、ユーザー フローは e コマースのセールス ファネルに結び付けられます。 ユーザーが目標到達プロセスを下るにつれて離脱するのは自然なことですが (したがって、目標到達プロセスの形になっています)、大幅な離脱ポイントは改善の余地があることを示しています。

多くの場合、改善とは、ナビゲーションをより自然にしたり、デザインを編集したり、方向性のあるコピーを追加したりして、ユーザー フローを最適化することを意味します。

フローのドロップオフは、ビジネス上の選択に起因する場合もあります。潜在的な購入者が配送料を確認した後の直帰率の増加は、高い配送料が問題である可能性が高いことを示しています。

直帰率を取り巻くステップを分析し、問題 (および解決策) が何であるかを仮定します。 ドロップオフが減少し、より多くのユーザーが次のステップに進むまで、ソリューションの A/B テストを行います。

e コマース ウェブサイト フローの差別化

e コマースのフローチャートは、同様のパターンに従う傾向があります。外部でページを発見し、ページに入り、製品を見て、カートに製品を追加し、チェックアウトし、確認を受け取ります。

これらはすべて、本質的に e コマースに関連する手順ですが、ユーザー フローを設計する際には、独自の価値提案とオーディエンスを考慮する価値があります。

もっと提供できますか？ ユーザーは追加機能を利用できますか?

一部の e コマース ストアは、パーソナライズ クイズや試用機能を含めることで、ユーザー ジャーニーとタスク フローを混同しています。 たとえば、Sephora の Virtual Artist を使用すると、ユーザーは自宅で購入する前に自分のメイクがどのように見えるかをシミュレートできます。

ユーザーフローを設計する際に忘れられがちな e コマースで差別化すべきもう 1 つの場所は、購入後です。 顧客の購入を確認することは、カスタマー ジャーニーの終わりではありません。 今、彼らは荷物を追跡し、心配そうに到着を待ち、ワクワクしながら箱を開け、場合によっては返品する必要があります。 配送、サンキュー ページ、アップセルでユーザー エクスペリエンスを改善する方法を検討する価値があります。

e コマースの Web サイトとアプリのフローを作成するときは、e コマース ファネルのすべての段階に注意してください。

• 考慮
• 評価
• 購入
• 購入後

効率的なUXフローで売り上げを伸ばす

ユーザー エクスペリエンスは、ユーザーが見て楽しむ美しいデザイン以上のものです。 コンバージョンに向けた e コマースのジャーニーを通じてリードをガイドする情報アーキテクチャとコンテンツを設計しています。

それは、ユーザーが簡単にナビゲートできる Web サイトまたはアプリケーションを構築し、ある段階から次の段階に移動し、探している製品を見つけ、必要なときに適切な CTA をクリックすることです。

エントリーポイントから販売ポイントまでの手順が多すぎると、より多くの作業を行うよう求められます。 手順が少なすぎると、躊躇を解決するのに十分ではない可能性があります。 オンラインで買い物をするとき、仕事やリスクを好む人はいません。

Web サイトのタスクごとに効率的なユーザー フローをマッピングすることは、消費者の摩擦点を特定する効果的な方法です。これにより、より優れたユーザー エクスペリエンスを提供するデジタル製品を設計し、結果として売り上げを伸ばすことができます。