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