Webサイト内のフリクションを見つけて改善する7つの戦略

Stephen Moyers

Stephenはオンラインのマーケッターおよびデザイナー、テクノロジーに詳しいブロガーです。彼はロサンゼルスを拠点とするSPINX Digital Agencyと関連をもっています。

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

How to Reduce Friction in Web Design

ユーザー体験の観点から言うと、フリクション(摩擦)とはユーザーが目標を達成するのを阻むすべての要因のことです。

フリクションはユーザーとデザイナーの双方にとって重大な問題となります。なぜなら、フリクションはコンバージョンを低下させ、直帰率を上昇させて、ユーザーがタスクをやめてしまう要因となるからです。言いかえると、あらゆる優れたWebサイトとは正反対のものです。

ユーザー体験のフリクションは、あらゆるユーザーインタラクションに大きな被害を与えるでしょう。そのため、どんなに優れたインターフェイスであっても使いにくいものになってしまいます。反対にフリクションのないWebサイト体験は、シームレスで自然に理解できるインタラクションをもたらします。

Webサイトのフリクションを減らせば、複雑な部分のない高品質なインタラクションに近づくでしょう。Webサイトを整理することで、コンバージョンは増加し、ユーザーはより長い時間サイトに滞在するようになり、ユーザーが行動する可能性が高くなります。この記事ではその方法を紹介していきます。

Webサイトのフリクションを特定する

フリクションの形式はさまざまです。読み込み速度の遅さ、使いにくいナビゲーションなどを指して、フリクションとはユーザーがサイトにおいて乗り越えなくてはならないものであると定義する人もいます。また、フリクションという言葉を、インターフェイスにとって不要なもの、過剰なものを言い表すために使うこともあります。ほかにも、「認知的負荷」や、ユーザーを不必要に考えさせるあらゆるものを、フリクションと結びつける人もいます。

しかし、これらの定義はすべて、本質的には同じです。私たちはフリクションという状態を、一般的に次のように定義することができます。

  • 気の散るビジュアル
  • 雑然としたビジュアルのインターフェイス
  • 一貫性のなさ
  • 不要な動作や意思決定
  • わかりにくく直感的でない機能

また、フリクションが効果的になるケースが存在することを理解するのも重要です。フリクションが有効なケースとは、ある目的のためにフリクションによってユーザーの操作速度を落とす場合です。たとえば、データ収集のためやユーザーが深刻な失敗をするのを避けるためなどの状況が挙げられます。ユーザーが受信ボックスやアカウントを完全に削除してしまうのを避けるケースは、その好例です。

ほかの例として、フリクションが教育的目的を果たす場合があります。ゲームがその良い例です。ゲームでは、学習をさせるためにフリクションが使われます。フリクションによって、初心者からエキスパートまでゲームを楽しめるようになります。ゲームの習得は自転車に乗る練習のバーチャル版です。私たちは試行錯誤を繰り返して、新しいことを学びます。フリクションのないゲームはつまらないので、誰も好まないでしょう。

しかしほとんどのWebサイトは、体験におけるフリクションを極限まで減らしたいはずです。そのために、以下の実証済みの戦略を利用して、負荷のないユーザー体験を作りましょう。

1. マクロなアプローチから始める

フリクションのないユーザー体験を作るために、ユーザージャーニー全体を念頭においてから始めましょう。こうすれば、開発プロセスのどの部分にフリクションが役に立つのか、いつフリクションがユーザーにとって面倒になるのかを把握することができます。

ユーザージャーニーのどの段階でも、製品全体の成功に影響を及ぼす可能性があります。データを収集したり間違いを防いだりするために、いつフリクションが必要になるかを決定しましょう。そして、ユーザーの反応に悪影響を及ぼすだろう障害物は、すべて取り除きましょう。

2. 行動を起こすまでに必要なステップを最小限にする

ユーザープロセスのステップをいくつか省くことが、フリクションを減らす良い機会になるかもしれません。有名な事例に、iCal機能を使用する際の複雑なプロセスがあります。

  • その月の日付をダブルクリックする
  • イベント名を入力する
  • 過去のロケーションをスキップする
  • 過去の「一日中」のチェックボックスをスキップする
  • 過去の月をスキップする
  • 過去の日をスキップする
  • 過去の年をスキップする
  • イベントの時間を入力する
  • イベントが始まる時間を入力する
  • 午前か午後かを入力する

これを見てうんざりした人は、あなただけではありません。では、Backpackのカレンダー機能におけるユーザージャーニーと比較してみましょう。

  1. 月のビューにあるイベントの日付をダブルクリックする
  2. イベント名と開始時間を入力する

2つのアプリを同時に比較してみると、どちらのほうがよりフリクションが少ないかは簡単にわかります。サイトによっては、多くのステップが必要なプロセスがあるかもしれません。もしそのような場合は、それぞれのステップをできる限り簡単なものにしてください。たとえば、入力する代わりにチェックボックスを使ったり、なるべくステップを1つにまとめたりすることで、ステップを簡単にできるかもしれません。

3. 「Less is More」を理解する

インターフェイスの最終的な目標は、できるだけシンプルなものにすることです。シンプルであることが、Webデザインのベストプラクティスの基礎になります。不要なものを取り除けば、必要不可欠なものを伝えることができるのです。

ユーザーの期待に沿った要素を優先させるよう気を配り、必ずしも必要でないものはすべて取り除きましょう。これを実行している典型的な例がGoogleのホームページです。Googleのホームページでできることは1つだけで、周りには多くのホワイトスペースがあります。

機能を詰め込みすぎてはいけません。複雑になり、ユーザーに害をもたらしし、最終的に製品に悪影響を与えるリスクがあります。

4. 良いナビゲーションのプラクティスを活用する

負荷のない体験にとって天敵の1つが、ひどいナビゲーションです。

残念ながら、ナビゲーションのデザインでは多くの間違いが起きる可能性があります。ナビゲーションはよく起こるフリクションの原因です。わかりやすいナビゲーションを作る「万能の」アプローチは存在しません。しかし、サイトで機能する方法を学ぶことができるソースは存在します。それは、あなたのユーザーです。

ユーザーテストによって、ユーザーがサイトやアプリのコンテンツにどのようにアクセスし、カテゴライズするのかを理解することができるでしょう。ユーザーテストから得た情報を利用して、ナビゲーションのプラクティスを導き、調整しましょう。そうすることで、ユーザーのニーズを満たすことができます。

5. チャンキングによる情報の整理

心理学を学んだ人なら誰でも、平均的な人間が記憶できるのは7±2つであるというGeorge A. Miller氏の仮説を思い出すでしょう。

この戦略の由来は、心理学における「チャンキング(編注:情報の断片を何らかの法則に基づきまとめること)」です。チャンキングによって認知的過負荷を防ぐことができます。情報をチャンク(塊、断片)にまとめることで、人間の脳の限界に対処し、維持できる記憶を増加させることができます。

チャンキングの概念をWebデザインにも応用し、複雑なタスクを小さくてシンプルな一連のタスクに分割することができます。フォーム入力などの面倒なタスクにこの技術を適用することで、直帰率を低くしてユーザーの関心を向上させましょう。

6. わかりきったことを1からやり直してはいけない

Webサイトで新しいことや革新的なことを行うのは、魅力的に思えるでしょう。クリエイティブな人間として、Webデザイナーがユニークなものを作成するのは自然なことです。しかし、ユーザーは親しみのあるUI要素とインタラクションすることを好みます。なぜなら、ユーザーは過去の体験による知識を活用することができるからです。

新しい機能をユーザーに学習させる度に、私たちはユーザーに対してさらなるフリクションを生み出してしまっているのです。予測可能なUIパターンは、ユーザーがシステムを理解してタスクを完了させる助けになります。事前に構築されたUIやUXの基準をできる限り多く使うようにしましょう。たとえば、検索用の虫メガネアイコンは、ユーザーにとってすぐに認識でき、余計な思考を必要としません。

7. ブランドに忠実であり続ける

最後に、少しだけユーザーと同じ立場になってみましょう。サイトを訪れて4~6秒の間に、訪問者はどのようなサイトにいるかわかるでしょうか? もしわからないようであれば、最初からフリクションが生じています。

ランディングページやアプリのトップページは、ソリューションに直結したり、ユーザーのために問題を解決したり、目標達成の手助けをしたりなくてはなりません。この戦略は、レイアウトやタイポグラフィ、グラフィックなどにも適応されます。

結論

Webサイトやアプリは、できる限りフリクションのないものであるべきです。不要なステップや乱雑なデザイン要素を取り除くことで、ユーザーの目標をより早く達成させ、Webサイトの直帰率を下げることができるでしょう。

Webサイトにおけるフリクションは、実践的なものから見た目の問題まで多岐にわたります。たとえば、遅いローディングや稚拙なナビゲーションは、ユーザーがサイトから離脱する要因になるかもしれません。またホワイトスペースの不足や間違ったフォントは、認知的負荷を増やします。そのため、製品をデザインするときには、ユーザージャーニー全体を考慮することが重要です。

以上で概要を説明したステップに従うことで、Webサイト内のフリクションを特定し、その軽減に踏み出すことができます。そうすることで、コンバージョンが増加し、ユーザーの問題をより解決できるようになるでしょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて