デザイン

デザイン

UX用語に詳しくなりたい人必見!最新のフローチャート徹底解説

UX Planet

UX Planet is a one-stop resource for everything related to user experience.

本記事は、UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

585 views

読了時間 : 約3分44秒

UXには多くの用語リストがあります。このリストは、たくさんの用語を含む職務記述書を見るときにより明確に使われます。

 

これらの用語集の中身は徐々に進化しつつあり、多くの用語が重複しています。そのため、今一度確かめる必要があるのです。

 

 

読み解いてみよう

タスクフロー解析やユーザーフローは何年にも渡って聞いている言葉です。私はこれを公式な定義をもつ言葉だととらえます。しかし、グーグルで調べると、存在しているUX用語集にはこれらの言葉は定義されていません。

 

どちらにせよ、フローは動きを表します。デザイナーはどのようにユーザーがウェブサイトやアプリを使っているのかを考える必要があるのです。

 

このようなフローを作ることは、デザイナーにユーザーが特定のページを尋ねた前と後で何が起きるのかや何が大切なのかを考えさせる手助けをしています。

 

初めのステップとして原型を作ることに付け加えて、フローは開発者にどのように代案が働くのかも考えさせる働きをもっています。

 

 

フローチャート

 

 

フローチャートは人や物の複雑に組み合わさった動きを表すダイアグラムです。

 

 

 

タスクフローとユーザーフロー

 

 

タスクフローとユーザーフローはそんなに違いません。双方のゴールは摩擦を最小限にしてタスクを成し遂げるためにユーザーを最適化することです。

 

これら二つはあなたにデザインの特徴が完成する前に考えさせることの手助けをします。

 

もしあなたが大まかにその二つの違いを知りたいのであれば、これがその定義になります。

 

 

 

タスクフロー

タスクフローは、特定の行動のために全てのユーザーによって完成されたシングルフローを指します。シングルフローのため枝分かれはしていません。

 

 

 

ユーザーフロー

ユーザーフローはユーザーが従う道筋のことです。

私はこれを旅のように考えるのが好きです。

フローは直線ではありません。枝分かれしている場合もあります。

 

想定できる道を決めていくことによって、最適化していきます。

 

ユーザーフローはシンプルに始められて赤い道筋がカギとなることを示し、決断を助けてくれます。商品が組み立てられる前に、複雑なフローを簡単にすることができるのです。

 

 

 

UIフロー

 

 

37のシグナルはユーザーフローのショート版です。ユーザーフローは以下のような問題があります。

 

  • フローはデザイン行程のなかで確認しずらい
  • フロー全てを書き出すには時間がかかる
  • スクリーンが変わるにつれてすぐに書き直さなくてはいけなくなる

 

UIフローは、始めるのも時間がかからないため、ニーズに合うかもしれません。

 

 

 

ワイヤーフロー

 

 

私は何年にも渡って、相互作用を知るためにフローチャートを作る必要がありました。より多くの状況を考えるために、私のフローチャートはワイヤーフレームを含むように変化しました。

 

NNグループは最近この新しいUX用語集を表すためにワイヤーフローという単語を造語したのです。

 

定義:ワイヤーフローはワイヤーフレームスタイルのページレイアウト単純化した相互関係を表すフローチャートを組み合わせたデザインフォーマットです。

 

ワイヤーフレームだけでは十分ではありません。ワイヤーフレームは相互作用だけではなく、レイアウトと統計とも関係しています。

フローチャート相互作用の詳細を補っていますが、ユーザーの状況を省きます。ワイヤーフローはレイアウトが変わっている複雑な相互作用を記録することに役立ちます。

 

 

 

ワイヤーフローの要素

  • 入口と出口
  • ユーザーの動き、システムアクション、代替策
  • コネクション:希望する道筋や違う可能性
  • 決定点:2つまたはそれ以上のオプションから選ばなくてはいけない点

 

考えられるユーザーのシナリオを理解することはより良くデザインされた経験を提供します。その方法はアイデアを考えたり、効果的にコラボレートするやり方を提供してくれたりします。

 

下記はワイヤーフローを始めるための資料です。

 

 

 

参考資料

いくつかの資料をご紹介します。

 

 

 

UIキット FREEBIE — Flowchart kit for Sketch

 

 

簡単に素早くサイトマップを作るためのユーザーフローです。

 

矢印に含まれるすべての要素はしっかりとカスタマイズされています。

 

 

 

Flowchart Kit Sketch Resource

これはページとウェブプロジェクトの相互作用を表したフローチャートキットです。

矢印、アイコン、ページを付け加えることができ、このキットを使っているサイトマップの調節もできます。

 

 

 

User Flow Diagram Template

このフローチャートダイアグラムテンプレートは簡単に美しいダイアグラムを作ることを手助けしてくれます。全てのブロックや矢印はスケッチシンボルとなっています。

 

 

 

スケッチプラグイン Sketch plugin — AEFlowchart

 

 

スケッチはフローチャートを作るためのいくつかのプラグインを持っています。

手早く確認した後、簡単に使うためのAEFlowchartを見つけました。

 

こちらをご確認ください。

Vime

 

 

 

読んでくれてありがとうございました。

楽しんでいただけたなら、うれしいです!

 

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ