画面フローテンプレートについて
画面フロー(「ワイヤーフロー」とも呼ばれる)は、ワイヤーフレームとフローチャートを組み合わせたものです。このフローは、各画面でユーザーが見るものをすべてマッピングし、プロダクトやサービスを通しての意思決定プロセスにどのように影響を与えるかを図示します。この情報があれば、インタラクションデザインに関して行った判断をより良く説明することができます。
スクリーン フロー テンプレートを使用して、ユーザー エクスペリエンスを最初から最後までスムーズでストレスのないものにする新しい機会を見つけましょう。
もし、あなたの仕事をさらに発展させ、UXデザインの領域に入り、画面ではなくテキストやシンボルを使ってユーザー ジャーニーをフローチャートとして示すことに興味がある場合は、ユーザー フロー テンプレートに興味を持つかもしれません。
スクリーン フローについての詳細をこのままお読みください。
スクリーン フローとは何ですか?
スクリーン フロー(またはワイヤーフロー)は、複数の画面レイアウトを組み合わせて、フローチャートのように接続し、顧客の意思決定ポイントと動きを最初から最後までマッピングします。
ワイヤーフレームだけでは、インタラクティブでページ毎のユーザーフローのコンテキストが不足しています。UXフロー単独ではより抽象的で、顧客が実際に何を見ているのかを示すことができません。
ワイヤーフロー、またはスクリーンフローは、両方の方法の強みを合わせ、ユーザーが何を見ているかが、製品やサービスの体験にどのように大きな影響を与えるのかを明確にするのに役立ちます。
スクリーンフローを使用するタイミング
ワイヤーフレームは、UXや製品チームが顧客の旅を一連のスクリーンではなく、完全なフローとして考えるのに役立ちます。ワイヤーフローまたはスクリーンフローは、スクリーン自体と顧客の製品やサービスとの相互作用に焦点を当てます。
デザイナーは、以下のような状況でスクリーンフローをマップ作成できます…
見逃しがないようにするためのシナリオ: エンドツーエンドのジャーニーをマッピングすることで、顧客のニーズに合ったすべての潜在的なユースケースを考慮できます。
ユーザーインタラクションの向上: サインアップ、確認、ポップアップなど、フローのあらゆる機会を通じて顧客を理解しましょう。
クロスファンクショナルコミュニケーションの改善: デザイナーと開発者を集め、個別の画面ではなく全体の体験を考えるよう促します。
ステークホルダーの教育に従事する: お客様やチームが、プロダクトや体験を通じた顧客の視点を考えたことがない場合、フローに従うことで顧客の課題に対する共感を構築するのに役立ちます。
独自のスクリーンフローを作成する
スクリーンフローの作成は簡単です。Miroのバーチャルコラボレーションプラットフォームは、それを作成して共有するのに最適なキャンバスを提供します。まずスクリーンフローテンプレートを選択し、次のステップに従って自分専用のものを作成してください。
1. ユーザーストーリーを定義する
ビジュアルシーケンスを描く前に、ユーザーのニーズと解決すべき課題を明確にしてください。これがスクリーンフローの出発点を設定するための基盤になります。
2. 主要な画面に表示する内容を決める
旅行の始点と終点を考えましょう。ランディングページが必要ですか?登録フォームのスクリーンはどうですか?確認ページが必要ですか?分割する必要のあるページや追加が必要なスクリーンなど、プロセスの変更や追加ステップを特定してください。Miroは優れたワイヤーフレーム作成ツールで、ワイヤーフレーム ライブラリーには15を超えるUIコンポーネントがあり、簡単にスクリーンフローに追加できます。
3. スクリーンを接続する
Miroの接続ラインツールを使用して、タスクを進めるために各スクリーン間に矢印を追加して移動させます。また、判断ポイントを含め、ユーザーに可能なすべての状況で何が起こるかを表示することができます。
4. チームや関係者とスクリーンフローを共有してフィードバックを得る
Miroのメンション機能を使用して、チームや個人にタグを付けることで、クイックフィードバック、デザイン批評、またはライブでのクライアントとのワークショップセッション前にレビューを行うことができます。また、メンバー招待ボタンをクリックすることで、Miroボードを誰とでも(未登録の場合でも)共有できます。
次のビッグなプロジェクトを構築するのに役立つユーザーフローの例をもっと発見してください。
スクリーンフローテンプレートに関するFAQ
UXにおけるスクリーンフローとは?
スクリーン フローは、ユーザーのインタラクションを分析するのに役立ち、主に製品画面に焦点を当てます。これにより、ワイヤーフレームとフローチャートの利点を組み合わせたもので、カスタマーフローの詳細な概要が得られ、それに基づいてより良いユーザーエクスペリエンスを構築するためのデータを提供します。