どう使い分ける?サイトフローとユーザーフロー

anthony

anthonyはUX Movementの執筆者、チーフエディターです。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Site Flows vs. User Flows: When to Use Which (2015-07-29)

ウェブサイトのUXデザインは、各ページがどうなっているかを理解するだけでは足りません。それぞれのページがどのような流れになっているかをも理解する必要があります。ページフローを前もって考えていなければ、デザインし始めた途端に問題発生ということもあり得ます。

例えば、

・サイトプロセスの一定のページをデザインし忘れている

・あるページをリンクするコールトゥアクション(CTA)をデザインし忘れている

・あるページがサイトの階層のどこに属するかわからない

・ユーザーがタスクを完了するためにどのページをナビゲートしなければならないかがわからない

もし、こうした問題を1つでも経験したことがあるなら、1度はサイトやユーザーフローを作っておくべきです。そうすれば、こうした問題に取り組んだり、問題を回避したりするのに役立ってくれるようになります。しかし、その経験を実際に使うには、まずはどう違うのかを理解しなければなりません。

サイトフローとユーザーフローは同じではない

サイトフローとユーザーフローを混同しているデザイナーはたくさんいます。どちらもページフローの説明になりますが、視点と目的が異なります。

サイトフローは、言ってみれば地図を見ているようなものです。地図は全体を見ることができ、どこに行けるかの大体の方向性がわかります。こうして全体像が見えるため、サイトのサイズや複雑性を感じとることができます。

siteflow-map

ユーザーフローは、A地点からB地点までの道順を見るようなものです。どの道を通ってどこで曲がって、目的地までにどのくらいかかるのかということがわかります。こういった具体的な情報は効果的に目的地に到着するのに役立ってくれます。こうして低い視点から見ることで、タスクの完了にどのぐらい時間がかかるか、どのぐらいの労力が必要かということを感じることができます。

userflow-directions

いつサイトフローを使うか

ワイヤーフレームを作る前に、サイトでどんなページが使われているかを知ることは重要です。そしてその後、どのページがお互いにリンクされているかを知らなければなりません。こうすることで、正しいページフローに沿ってユーザーを導くコールトゥアクションがデザインできるのです。

siteflow-cta 名称未設定3

サイトフローは、ナビゲーションの階層を明確に把握することができます。ナビゲーションの幅と奥行きがざっとわかります。ナビゲーションパスが深すぎれば、合理化してもいいですし、ナビゲーションの幅が広すぎれば、関連ページをまとめてもいいと思います。これら全てが、よりシンプルなナビゲーションのエクスペリエンスをデザインするのに役立ってくれるのです。

名称未設定6

チームの他のメンバーにとってもサイトフローはプラスとなります。ディベロッパーはコードを書き加える際にどのページがリンクし合ってるかを知る必要がありますが、サイトフローがあれば、間違ったリンクやリンク忘れを防いでくれます。 

サイトフローはまた、特定のページでどんなマイクロインタラクションが行われるのかをディベロッパーに知ってもらうのに効果的な方法でもあります。マイクロインタラクションは大量のコードや機能性と関係していることも多く、サイトフローがあれば、それらを前もって計画し、必要に応じた方法を見つけやすくなります。

名称未設定4

いつユーザーフローを使うか

全てのタスクがわかりやすいパスになっているとは限りません。複雑に入り組んでいるものもあります。こういったページフローはより複雑で、徹底的に検証する必要があります。ユーザーフローはこういったタスクの有効性を分析するのにぴったりです。

例えば、パスワードを忘れてリセットする場合、ただページをクリックしていくだけではすみません。ユーザーはまずパスワードのエラーを認識し、必要事項を入力して、それからメールをチェックしなければなりません。ユーザーフローを使うと、タスク全ての面を検証してくれるので素早く簡単に分析ができます。

名称未設定5

ユーザーフローはシステムが、ユーザーの行動にどう応じているかをディベロッパーが理解するのにも役立ちます。エラーが生じた時は、システムがユーザーに応答してアクションを起こすようになっていなければなりません。ディベロッパーはユーザーフロー上のインタラクション全ての詳細を見ることができます。 

素早いフロー作成のためのツールキット

フローを作成するのにあまりにも時間をかけすぎてはいけません。フローはデザインを始めるのに役立てるものであって、デザイン自体を遅らせるものではないのです。

だからこそ、フローパターンのようなツールキットが必要になります。フローパターンは既に設計された様々なフローページがあり、アレンジやカスタマイズができます。マイクロインタラクション、マーカー、コールアウトなどがついていて、素早くフロー作成ができます。

フローは皆のため

フローはデザイナーだけが見るためのものではありません。チームの全員でサイトのビジョンを分かち合うものです。全員が地図を手にしていれば、行き先についてもっと安心していられます。

ユーザーにとってもフローはプラスに働きます。時間をかけて計画を練り上げているため、ナビゲーションもページフローのエクスペリエンスもより良いものとなるからです。

サイトフローとユーザーフローは構造上の面でUXに影響します。デザインプロセスの必須部分とすれば、皆にとってプラスになるのです。


イベント

2017/12/05(火)
Design Thinking Square