超没入体験を作る！「フロー体験」をUXに活かす4つのポイント

更新日: 2018年01月31日

"集中し過ぎて、時間が経つのがアッという間に感じられた"

皆さんにも、こんな経験はありませんか？

勉強やゲーム、スポーツなどで、こうした超集中的な作用が起こることを*「フロー体験」*と呼ぶことがあります。フロー体験では、集中して物事に取り組みながら、外部の雑音が聞こえなくなるほど集中することで、時間感覚が歪んでしまうとさえ言われています。

それでは、Webサイトを巡回している時に、こうした没入体験を生み出すには、果たしてどのようにすればいいのでしょうか？

今回は、「フロー体験」をUXに生かす4つのポイントをご紹介していきます。
　　

「フロー体験」とは？

画像引用元：BURST by shopify

認知科学者のドナルド・ノーマンによれば、「情動に訴えかける設計」が成立しているインターフェイス上では、ユーザーがコンテンツに対して無我夢中になり、没頭していくと解説しています。ユーザーが情動の客体に没入する際、**「フロー体験」（flow experience）**に入っていくと言われています。

「フロー」とは、社会心理学者ミハイ・チクセントミハイが提唱した考え方で、明確な目的を持って活動に没頭している状態のことを言います。フロー状態の中では、我を忘れ、時間感覚も歪み始めます。フロー状態が終了してしまうと、フロー化していた人は、まるで時間が一瞬で過ぎ去ったかのような感覚を覚えると説明されています。

それでは一体、フロー体験はどのような場合に起こるのでしょうか？

チクセントミハイによれば、フロー体験を現出するには、次のような条件が必要です。

1. 自分の能力に対して適切な難易度のものに取り組んでいる
2. 対象への自己統制感がある
3. 直接的なフィードバックがある
4. 集中を妨げる外乱がシャットアウトされている

画像引用元：BURST by shopify

こうした条件は、勉強であれ、テニスなどの球技であれ、人間が行うあらゆる活動に当てはまります。これらの要素が満たされた場合には、自分の心理的なエネルギーは、淀みなく連続して、100％その対象に注がれることになり、とてつもない集中力と楽しい感覚が生み出されるのです。

このように考えれば、以上の考え方をしっかりと押さえたWebサイトであれば、フロー体験が発生し、離脱率が低くなるどころか、エンゲージメントやコンバージョンも高まるのではないか、と考えることは自然なことでしょう。

実際、ほかのECサイトで買い物をするよりもAmazonで買い物をする人が多いのは、知名度やユーザビリティの面以外にも、「フロー体験」が発生しているから、と考えることもできます。

それでは、「フロー体験」をWebサイトのUXに活かすためには、どのようなことに気を付けていけばいいのでしょうか。

ここでは、Webサイトの場合の「フロー体験」に似た没入体験を生み出すためのポイントについて考えてみることにしましょう。
　　

「フロー体験」をUXに生かす4つのポイント

1. どこに何があるか想定できるページ構成にする

画像引用元：BURST by shopify

フロー体験を生み出す構成要素には、様々なものが挙げられます。

例えば、明確な目標を持ってWebサイトを訪問し、専念と集中によって、注意力を目標に100％向けることができれば、それは「フロー状態」を生み出している、と言うことができます。言い換えれば、目標達成に向けて予測をしたり既知の法則を適用することができ、深く集中し探求するような機会が与えられていれば、没入感のあるWebサイトになっているということです。

ということは、ユーザーが明確な目標を持ってWebサイトを訪問し、その目標を達成するプロセスが明確になっていればいいと言えます。Webサイトの制作側は、フロー体験を生み出すために、どこに何があるか想定できるページ構成にする必要があります。

コマースサイトであれば、購入ボタンがどこにあるかわからなかったり、数量の変更の仕方がわかりにくかったりする場合、没入体験を妨害している可能性があります。

メディア系のサイトも、カテゴリーはどこで、問い合わせはどこで、というのをユーザーテストをとおしてすぐに発見できる位置を特定し、最も使いやすいページを考えることが、フロー体験を生み出す第一歩です。
　　

2. コントロール可能にする

画像引用元：BURST by shopify

NetflixやHuluなどは、ダークカラーを採用することで作品選びの際に没入感を生み出すための環境を作り出している、と言われています。

しかし、それだけではなく、実際に動画を再生したときのコントロール（音量を上下したり、数秒戻ったり）の出来が没入体験を左右しています。

制御可能なインターフェイスが揃っていることは、Webにおける「フロー体験」現出の必須条件だといえます。動画が思ったとおり再生されない、上手くもとのページに戻ることができない、といった不具合は、大きいものであれ小さいものであれ、没入感を妨害するものにほかなりません。

集中を妨害する要素は極力排除すべきですが、このような要素は意外なところに潜んでいます。基本的なボタンパーツのようなUI部品をチェックして、意図したとおりに動いているのかを改めて確認してみましょう。
　　

3. 高度なインタラクティブ性がある

画像引用元：BURST by shopify

ペットや小さな子どもと戯れていると、時間がアッという間に過ぎてしまった。

そんな経験はありませんか？

フロー体験を生み出す構成要素の1つに、*「直接的で即座な反応」*があります。つまり、自分が行った行為に対して、目に見える形で反応があれば、フロー状態を構成しやすいというのです。

ECサイトで言えば、「買い物かごに入れる」ボタンを押せば、「買い物かごに入りました」などのメッセージを表示したり、買い物かごアイコンの上にある数字に１を足したりして、反応が即座に受理されたことを知らせることで、フロー体験を作りだすことができます。

一方、ボタンを押しても何も反応がなかったり、想定した反応とまったく違う反応があると、フローとはとても呼べない状態に変わってしまうのです。
　　

4. 広告を入れない

画像引用元：BURST by shopify

YouTubeでも動画が見られるのに、お金を払ってもNetflixやHuluのような有料サービスで映画を観たいというユーザーはたくさんいます。

理由はいくつかありますが、その中でも無視できないのが*「広告」*の存在です。

フリーミアムのビジネスモデルであれば、広告の表示によって収益を得る場合が多いはずです。ただ、広告は結局のところ、没入感を妨害してしまうものとして認識しておいたほうがよいでしょう。フロー体験を構成する要素の1つは「集中」ですが、広告は今集中しているものとは全く関係のないコンテンツを表示し、気を逸らしてしまう可能性すらあるからです。

もし広告を入れざるを得ない状況になったとしても、全く関係のない広告は挟むべきではありません。映画館の本編上映前に、関連した映画が紹介されるのは、没入感を妨げないためです。どうしても広告を入れざるを得ない状況であれば、少なくとも、何らかの形で関連性のあるものに替えることができるようにしましょう。
　　