ユーザーフローテンプレート
創造的なソリューションのための条件を育むことで、UX や製品チームがユーザー体験を向上させるのを支援します。
ユーザーフローテンプレートについて
ユーザーフロー ダイアグラム(インタラクションやタスクフロー ダイアグラムとも呼ばれます)は、視覚的なステップバイステップのマッピングプロセスであり、ユーザーがあなたの製品や体験を通じてタスクを完了したり、目標を達成するための行動を概説します。
ユーザーフロー ダイアグラミングは、ユーザーが選択したパスの質や体験を解釈するのに役立ちます。このフローは、ユーザーがタスクを完了するために選んだステップ数や、製品やサービスとやり取りして問題を解決する際に選択する経路を明らかにすることもできます。
ユーザーフロー ダイアグラムが特定の製品をユーザーがどのように移動するかに焦点を当てる一方、スクリーンフロー テンプレートはワイヤーフレームスタイルのページレイアウトをフローチャート形式で提示します。
ユーザーフロー ダイアグラムとは何ですか?
ユーザーフロー ダイアグラムは、UX や製品チームがシステムとやり取りする際にユーザーが取るべき論理的なパスをマッピングするのに役立ちます。ビジュアルツールとして、ユーザーフロー ダイアグラムは、ウェブサイトやアプリの機能、ユーザーが取りうる可能なアクション、およびユーザーの判断が生む結果との関係を示します。
ユーザーフローの主な要素は次のとおりです。
開始点または終了点: フローがどこから始まり、どこで終了するかを明確に示します。
プロセスまたはアクション: ユーザーが取るステップを示します。例えば「ログイン」や「購入」などです。
意思決定ポイント: ユーザーが選択を迫られるタイミングを示します。
矢印: 彼らは、ユーザーがした決定に基づいてどこに進むかを示します。
既存のユーザー体験がどのように顧客のコンバージョン率向上に繋がるかを評価または改善しようとしている場合は、ユーザーフローを試してみてください。
このプロセスは、ユーザーを念頭に置き、購入やニュースレターへの登録、無料トライアルの選択など、ビジネスの目的を特定するのに役立ちます。
ユーザーフロー テンプレートを使用するタイミング
ユーザーフローダイアグラムは以下を支援できます。
直感的なインターフェイスを構築する:フローはユーザーにとって移動が容易で、効率よく使え、直感的なものですか?
既存のインターフェイスが目的に合っているか決定する: うまくいっていることは?うまくいっていないことは?改善が必要なことは?フローはシームレスで理にかなっていますか?
製品フローを社内チームやクライアントに提示する:デザインチームは、顧客が購入時、登録時、ログイン時に何を言ったりしたりするのかを見ることができますか?クライアントは一歩一歩の概要を得て、あなたのビジョンに一致させることができますか?
ユーザーフローを作成する、または再作成する際には、あなた自身とチームに問いかけましょう。
ユーザーは何をしようとしているのですか?
ユーザーにとって重要なことは何か、そして継続する自信を与えるのは何か?
ユーザーが成功するためにどんな追加情報が必要ですか?
ユーザーがタスクを完了する上での不安や障害は何ですか?
ユーザーフローマップは、デザイナー(およびそのチームやクライアント)が、複雑なプロセスをマッピングする際にも、ユーザー中心の視点を保つのに役立ちます。
デザイナーとして、ユーザーフローダイアグラムを使用して、ウェブサイトやアプリのページ、画面、またはサーフェスをどのようにデザインするかを決定し、含めるコンテンツやナビゲーションタスクを再配置できます。
独自のユーザーフローダイアグラムを作成する
独自のユーザーフローを作成するのは簡単です。Miro のビジュアルワークスペースは、ダイアグラムを作成して共有するのに最適なキャンバスです。ユーザーフローテンプレートを選択し、自分のものを作るために次のステップを踏みましょう。
ビジネス目標とユーザーの目標を決める。
ユーザーにたどり着いてほしい場所を見極める。すでに持っていない場合(または更新が必要な場合は)、カスタマージャーニーマップを使って、顧客体験の共有ビジョンを作成しましょう。すべてのチームメンバーは、製品やサービスとのあらゆる可能な接点で顧客の感情を共有して理解することで利益を得ることができます。ユーザーへの共感を築くことで、ユーザーフロープロセスのすべてのステップに役立ちます。
ビジターがどうやってあなたのウェブサイトを見つけているかを発見する。
あなたの製品やサービスを、直接トラフィック、自然検索、広告、ソーシャルメディア、紹介リンク、メールなどを通じて見つけていますか?これらのポイントは、あなたのユーザーフローダイアグラムの出発点となります。
ユーザーが必要とする情報とそれを必要とするタイミングを見つけ出す。
ユーザーは適切なタイミングで必要な情報を提供されるとコンバージョンします。したがって、顧客がデジタルタッチポイントから何を求めているのか、またどのように感じているかを考慮してください。エンゲージメント—例えば、チャットボットとのやり取り—も依然として潜在的な成功指標であり、最終購入に結びつけることだけが重要ではありません。
ユーザーフローを図式化。
既存の図形と矢印をユーザーフローテンプレートから編集して、前のステップで得られたユーザーリサーチに適応させることができます。顧客が最初の接点を見つけた後、次に何をしますか?タスクを完了するまでに何ステップ必要ですか?テンプレートの基本的なユーザーフローを使用して、自分自身のフローを描き始めましょう。タッチポイントやドロップオフ、コネクターラインの矢印の向きを変更して、ユーザーフローダイアグラムにより適合させましょう。
チームからのフィードバックを得ましょう。
チーム、クライアント、またはクロスファンクショナルな関係者を招待して、Miroのボードを閲覧してもらいましょう。付箋や@メンションを使用して、非同期でフィードバックを残すことを選択でき、ピアレビューに活用できます。Miroのボードでビデオ通話に参加し、ノートテイカーの役割をチーム内から誰かに割り当てることもできます。チームから十分な意見を得たら、それに応じて調整を行いましょう。
他のステークホルダーやクライアントと共有し、必要に応じて繰り返し調整を行いましょう。
ユーザーフローは、顧客の態度や動機が変化するにつれて変わっていきます。それに応じて適応し、ユーザー中心のままでいましょう。
ユーザーフローの例とは何ですか?
イベント用のウェブサイトを開発していると想像してください。ユーザー体験を向上させたい場合は、イベントの登録からチケットの購入までのすべての必要な手順を明確に定義する必要があります。 まず、顧客の動向を追跡し、彼らがイベントのチケットを購入するまでの旅程の始まりを特定することから始めることができます。ユーザーフロー図は、顧客が購入を完了するまでの流れ(ウェブサイトにおける最終目標)を、登録から支払いページまでを一目で把握できるように可視化します。
このテンプレートで作業を開始する
ローファイ ワイヤーフレーム テンプレート
活躍するシチュエーション:
デスクリサーチ, 製品管理, ワイヤーフレーム
サイトを設計する際やアプリを作成する際は、初期段階で全体像を把握し、大きなアイデアを伝えることが重要です。ローファイ ワイヤーフレームは、見て実行する力を与えます。これらのラフなレイアウト(ナプキンに描いたスケッチのデジタル版と考えてください)は、チームやプロジェクトの関係者が、デザインミーティングがユーザーのニーズに合っているかどうかを迅速に判断するのに役立ちます。私たちのテンプレートを使用すれば、会議やワークショップ、プレゼンテーション、批評セッションでワイヤーフレームを簡単に利用できます。
ウェブサイトフローチャート テンプレート
活躍するシチュエーション:
フローチャート, マッピング, ユーザー エクスペリエンス
ウェブサイト フローチャート、またはサイトマップとしても知られるものは、現在または将来のウェブサイトの構造と複雑さをマッピングします。フローチャートは、将来のコンテンツに向けた知識のギャップを特定するのにチームに役立ちます。ウェブサイトを構築する際には、各コンテンツがウェブコンテンツに関連するキーワードに基づいて、ユーザーに正確な検索結果を提供することを確実にしたいものです。製品、UX、コンテンツのチームは、フローチャートやサイトマップを使用して、ウェブサイトに含まれるすべての内容を理解し、ユーザー体験を向上させるためにコンテンツの追加や再構築を計画できます。
プロトタイプ テンプレート
活躍するシチュエーション:
UX デザイン, デザイン思考
プロトタイプは製品のライブモックアップであり、製品の構造、ユーザーフロー、ナビゲーションの詳細(ボタンやメニューなど)を定義しながら、ビジュアルデザインのような最終的な詳細に拘ることなく完成させます。プロトタイプは、ユーザーがどのように製品やサービスを体験するかをシミュレーションし、ユーザーのコンテキストやタスクフローをマッピングし、ペルソナを理解するためのシナリオを作成し、製品に関するフィードバックを収集することを可能にします。プロトタイプを使用することで、プロセスの初期段階で障害を特定し、コストを削減できます。プロトタイプはさまざまですが、通常は矢印やリンクでつながれた一連の画面やアートボードが含まれます。
アプリワイヤーフレーム テンプレート
活躍するシチュエーション:
UX デザイン, ワイヤーフレーム
アプリ作成を始める準備はできていますか?それがどのように機能し、ユーザーがどのように対話するかを想像するだけでなく、ワイヤーフレームに示させましょう。ワイヤーフレームは、各画面の基本的なレイアウトを作成するための手法です。ワイヤーフレームを作成する際は、プロセスの初期段階で行うのが理想です。各画面が何を達成するかを理解し、重要なステークホルダーからの同意を得ることができ、デザインやコンテンツを追加する前にこれを行うことで、時間とコストを節約できます。ユーザーの旅の観点から物事を考えることで、より魅力的で成功する体験を提供できます。