カテゴリーアーカイブ: デザイン

コンバージョン率を台無しにする10個のUXミス

ネットサービスを提供したり、オンラインショッピングサイトを運営したりと、ウェブサイトにはさまざまな形がありますが、「ユーザーに達してもらいたい目的」を持っていることは共通しています。目的の達成率、つまりコンバージョン率を上げるにはウェブサイトのデザインや構成といったユーザーエクスペリエンス(UX)が重要。しかし、知らず知らずのうちにUXでミスを犯してコンバージョン率を下げていることがあるとして、SyneriseのプロダクトマーケティングマネージャーであるKarolina Rowecka氏が「コンバージョン率を台無しにする10個のUXミス」を解説しています。

Don’t Ruin Your Conversion Rate with These 10 UX Mistakes | by Karolina Rowecka | Synerise | Medium
https://medium.com/synerise/dont-ruin-your-conversion-rate-with-these-10-ux-mistakes-42c29f677d9

ウェブサイトを訪れた人が、ウェブサイト上のサービスや製品について「時間をかけて知る価値がある」と納得するまでの時間はほんの数秒です。この数秒間でウェブサイトは「いい第一印象」を作る必要があるとのこと。

いい第一印象を作る上で理解すべきことは、まず、人の目の動きです。「人がまず目をやる場所」に重要な要素・インパクトのある要素を配置することで、人の興味や関心をかき立てることが可能。

どのように人の目線が動くのかは、以下の記事から読むことができます。

高齢化に伴い、世界人口における視覚障害者の数は2050年までに3倍になるといわれています。視覚障害といった身体障害を持つ人がアクセスしやすいサイト作りは難しいものではなく、ほんの少しの労力で会社に大きな利益をもたらすことが可能とRowecka氏は述べています。

「低コントラストのウェブデザイン」「小さなフォント」「わかりにくいレイアウト」「不明瞭なメッセージ」などは視覚障害を持つ人に不親切です。しかし、これらは障害のない人にとっても分かりづらいものなので、デザインを改善することで全ての人にとっての「分かりやすさ」が増します。

「誰にとっても明瞭なウェブサイト」を作るためには、以下の点が推奨されています。

・ウェブサイトを訪れた人がフォントサイズや色のコントラストを設定可能であること
・写真やムービーに代替テキスト(alt属性)を設定すること

◆03:間違った単語を使用している
ブランドはより多くの情報をウェブサイトに盛り込もうとしますが、説明が過剰だったり、専門用語が多すぎると、基本的な情報すらユーザーに伝わりません。

例えば、クライアントと食事する場合、最初から混みいったビジネスの話はしないはず。まずは軽い話題から始めて、相手のニーズや知識レベルに合わせてコンテンツの量や語彙(ごい)を調整していくのがよいとされています。

UXの観点から見ても、最初の方で重要なのは「情報量を盛り込むこと」ではなく、「会話を殺さないこと」です。より端的に、明瞭に情報を示すことで、ユーザーとの関係を築くことが重要になります。

◆04:パンくずリストを忘れる
パンくずリストとは、ウェブサイトでのウェブページの位置をツリー構造を持ったリンクで示すもの。パンくずリストを使うとウェブサイトやアプリがシンプルかつ直感的になります。

例えば多くのオンラインショッピングサイトでは、「Men>Shirts>Casual」というように、自分が見ている製品がどのような絞り込みをへているのかが可視化されます。このパンくずリストによって、絞り込みを容易に変更し、求める製品にアクセスしやすくしています。

正しいパンくずリストはユーザーの直帰率を下げることが可能。またSEOの観点からいうと、パンくずリストはウェブサイトの内部リンクを改善してサイトリンクの構造を強化することにも役立ちます。

◆05:次に何をすべきかを顧客に考えさせる
「次に何をクリックすべきか」を顧客が考えなければならないウェブサイトは最悪のもの。優れたUXは、色・サイズ・コントラスト・位置などからウェブサイトのどの要素が重要であるかを顧客に伝えます。そして顧客を自然とナビゲートすることが可能です。

選択の余地がない時、人は不満を感じますが、一方で選択肢が多すぎても満足度が下がります。このため選択肢の数を絞り込む必要があります。ウェブサイトで何を強調すればいいのかがわからない場合は分析ツールを使って訪問者がウェブサイトをどのように移動しているかを確認するのも1つの方法です。

分析の中でユーザーの意志決定時間が長いことが示された時には、顧客が迅速に意志決定を行えるようUXを変更することがベター。例えば、一度カートに入れた製品を放棄してユーザーが購入ページに戻ってきた場合、ユーザーの心理は「他の商品が欲しい」と仮定できます。この場合、多数の購入ページ間を再び移動させるのではく、ユーザーが欲しいと考えられる商品を動的コンテンツとして表示すれば、「少ない情報」で「迅速な意志決定」を促せます。

◆06:CTAが明確ではない、または多すぎる
CTAは「Call To Action」の略で、「ユーザーに行動を起こさせるウェブサイトの要素」を意味します。

CTAは「視覚的に目立つこと」と「正しい順序で表示させること」が大切です。この2点を守るCTAはユーザーを悩ませることなく、スムーズに目的とする行動に導きます。特にボタンの色は重要で、鮮やかな明るい色は「クリックすると何かが起こる」ということを直感的に伝えることが可能。また赤は否定、緑は肯定、黄色は警告といったように、色によって伝える意味合いが異なることについても注意すべき。

一方で、ボタンが多すぎるとユーザーはどのボタンを押していいかわからず、結果として「何もクリックしない」という状態で終わります。ページ上で目立たせたいものを決め、ボタンを1つに制限することが推奨されています。

また、多くのウェブサイトで、ニュースレターの登録後にユーザーへのフィードバックが忘れ去られています。「登録してくれてありがとうございます」というメッセージの表示を忘れるべきではないとRowecka氏は述べました

◆07:質問しすぎ
フォームに入力することが好きなユーザーはめったにいません。「フォームへの入力」はユーザーが最も面倒に感じることの1つなので、アンケートなどを実施する場合は、割り引きコードといった特典をつけることが推奨されています。

またフォームでユーザーに何かを尋ねる場合には、以下の点に注意。

・オートコンプリート機能で簡単に入力を終えられること
・自動保存機能
・できるだけ質問を少なく
・ユーザーがクリックして展開する必要がない方法で表示する

◆08:簡単に保存できるものを保存しない
たとえばウェブサイトで航空券を購入する際に、購入フォームが4つのステップで構成されているとします。4ステップ目を終えた時に2つ目のステップに間違いがあったことに気付き、ステップを戻って情報を入れ直してから次のステップに進むと、入力したものが全て消えていることがあります。このようなフォームはユーザーをいらだたせ、目的達成を阻みます。

上記のような状況を回避するために、以下2点に注意すべきとのこと。

・全てのフォームでオートコンプリートを有効にする
・ユーザーが単純な間違いに気付けるように、入力情報が形式に合致しているかを確認できるツールを使用する。

◆09:最も重要なことから目をそらしている

ユーザーがウェブサイトで欲しいものを選び、カートに追加し、購入を完了させるまでの道筋で、ユーザーの意識をそらすものが多すぎると、長期的なコンバージョンに影響します。これはバナー広告やポップアップといった一般的な「邪魔になるもの」だけでなく、時には「ユーザーが得するもの」についても言えます。

例えば「プレミア製品」を購入したユーザーが購入ボタンを押す直前になって「プレミア製品には10%のクーポンがつきます」という表示を目にしたとします。このユーザーは「まだクーポンをもらってない」と考え、ページを戻ってクーポンを探しだすはず。この段階で、既に購入直前だったユーザーの行動がねじ曲げられることになります。

ウェブサイトの不要な要素はできるだけ取り除き、ユーザーが購入に近づけば近づくほど、ユーザーの前に表示される選択肢が少なくなるようにUXを設計します。

◆10:十分なテストが行われていない
優れたUXのページは似たような見た目になることが多々あります。しかし、競合他社のウェブサイトで有効なことが、自分のウェブサイトで有効ではないこともあり得ます。ウェブサイトのユーザーのニーズや好みは常に変化するため、その変化をリアルタイムで把握することが重要とのことです。

このため、定期的にA/Bテストでヘッダー・グラフィック・ムービー・フォーム・CTAなどについて調査するようにすること。製品ページの見た目や注文処理のプロセスなど、ウェブサイトのさまざまな要素のうち、「チェックする点」「チェックするタイミング」を決めてA/Bテストを実施することが推奨されています。

・関連記事
ユーザーをだますウェブデザインの「ダークパターン」にはどのようなものがあるのか? | GIGAZINE.BIZ

決済時に初めて支払総額が表示される「ドリッププライシング」の圧倒的な効果が実験で示される | GIGAZINE.BIZ

以下の広告媒体資料のパスワードを入手するにはここをクリック

決済時に初めて支払総額が表示される「ドリッププライシング」の圧倒的な効果が実験で示される

ウェブサービスやウェブサイトには、収益を上げるためにわざと解約ボタンを分かりづらくしたり、あたかも有料オプションをデフォルトオプションのように見せたりするといった「ワナ」が仕掛けられていることがあります。このようなデザインは「ダークパターン」と呼ばれます。

新たな研究では、ダークパターンのうち、購入の最終段階になって追加料金が初めて表示される「ドリッププライシング」がいかに顧客からお金を得るのに効果的なのかが示されました。

Price Salience and Product Choice
(PDFファイル)http://faculty.haas.berkeley.edu/stadelis/AIP.pdf

Buyer beware: Massive experiment shows why ticket sellers hit you with last-second fees | Haas News | Berkeley Haas
https://newsroom.haas.berkeley.edu/research/buyer-beware-massive-experiment-shows-why-ticket-sellers-hit-you-with-hidden-fees-drip-pricing/

ドリッププライシングはその性質から「コスト隠し」とも呼ばれるもの。シカゴ大学のマーケティング学准教授であるサラ・モシャリー氏は、カリフォルニア大学バークレー校の経済学者であるスティーブン・タデリス氏や、オンラインチケット販売サイトのStubHubの元データサイエンティストであるケイン・スウィーニー氏、Amazon所属の経済学者兼データサイエンティストのトーマス・ブレイク氏と共に、コスト隠しが実際にどれほど効果的なのかを調べるべく、大規模な実験を行いました。

実験はStubHub上で実施されました。実験開始前の2015年の時点でStubHubは、ユーザーがウェブサイトを訪れた時点で「チケット購入に必要な総額」を見せる設計でした。この総額は、チケットの料金の15%にあたる手数料および送料を含みました。

実験では、数百万人存在するアメリカのStubHubユーザーのうち半分に、ショッピング画面では手数料を含めない「純粋なチケット価格」を見せたとのこと。これらユーザーはチェックアウト画面になって初めて支払総額を確認することになりました。残り半数のStubHubユーザーは、それまでと同様にショッピング画面で支払総額が確認可能でした。

この結果、最初に総額を示されなかったユーザーは総額を示されたユーザーに比べて21%チケットに支出し、14%も購入を完了しやすいことが示されたとのことです。また、総額表示されなかったユーザーの購入したチケット額は総額表示されたユーザーが購入したチケット額よりも5%高く、これは、前者が舞台に近い良い席を購入する傾向にあったためだと記されています。

研究者はさらに、チケット購入者がどのような道筋でクリックを進めて購入に至ったのかを調査。すると、総額表示されなかったユーザーはランディングページでチケットをクリックする可能性が非常に高く、クリック率は総額表示を見たユーザーの119%でした。ただし、チェックアウト時の離脱も多く、チェックアウトボタンのクリック率は最初から総額表示されていたユーザーよりも45%も低かったとのこと。また、このようなユーザーはページを戻って再検索する可能性も高かったそうです。

上記の実験結果が示された後、StubHubはウェブサイトの構成を変更し、チェックアウト時になって初めて総額が表示されるようにしました。StubHubは売り手にマーケットプレイスが含まれるため、売り手が仕様変更にどう対応するかを観察したところ、売り手はユーザーがより高額なチケットを求めることを把握し、舞台に近い高額なチケットをリストし始めるとともに、消費者にとってより魅力的に見えるようにチケット価格を端数で設定しだしたとのこと。

加えて、研究者がStubHubのヘビーユーザーとそうでないユーザーを区別し実験を行ったところ、過去に10回ウェブサイトにアクセスしたことがある購入者はドリッププライシングに対し、初心者グループに比べて支出が少なくなることが判明しました。これは言い換えると、ドリッププライシングは、住宅や自動車など、消費者の購入頻度が低いものに対して、より顕著に効果が出る可能性があるといえます。

・関連記事
ユーザーをだますウェブデザインの「ダークパターン」にはどのようなものがあるのか? | GIGAZINE.BIZ

以下の広告媒体資料のパスワードを入手するにはここをクリック

ダークパターンとは何か?ユーザーをだますウェブデザインの「ダークパターン」にはどのようなものがあるのかを解説

ウェブサイトやウェブサービスを運営する中で、ユーザーを製品ページにまで誘導したり、「購入」ボタンを押してもらったりといったコンバージョンを高めるウェブデザインが重要になりますが、時には「ユーザーをだます」デザインがあえて選ばれることも。「ダークパターン」と呼ばれるこのようなデザインにどんな種類があるのかを、ダークパターンに関する情報を広めて企業によるダークパターンの使用を減らすことを目的としたイニシアチブ「Dark Patterns」がまとめています。

Dark Patterns – Types of Dark Pattern
https://darkpatterns.org/types-of-dark-pattern.html

◆01:隠れた質問
1つの質問に回答させているように見せかけて、よく読むと実は異なる複数の質問に回答させているというフォームの形。質問を軽く読んで「はい」と回答すると、実はユーザーの予想と違う質問に「はい」と回答してしまうことになります。

以下がその例。赤枠部分のチェック項目は上が「Currys.co.ukからのオファーや商品の詳細を送らないでください」とあり、下が「オファーや商品の詳細を送ってください」という書き出しになっているため、ユーザーは「Currys.co.ukからの」という言葉を予想しますが、実際には「Currys.co.ukの推奨するサードパーティー組織からの」と書かれています。

◆02:カートに忍び込む
通販サイトなどで商品を購入する際に、自分が求めたアイテム以外が勝手にカートに入っていること。多くはカートに入れるボタンなどを押すときにオプトアウト式で追加アイテムが選択されています。

以下がその例。意図して購入したものは「17.98ドル(約1900円)」ですが、最終的な合計はそれとはかけ離れた「154.31ドル(約1万6000円)」になっています。

◆03:ごきぶりホイホイ
サブスクリプションのプレミアム版など、「加入は簡単だがやめる方法が困難」という形式が取られていることを「ごきぶりホイホイ」と呼ぶとのこと。

◆04:プライバシー・ザッカリング
ユーザーが意図するよりも多くのプライバシー情報がサービス運営側でシェアされていること。この名前はFacebookのCEOであるマーク・ザッカーバーグ氏にちなんでつけられました。

◆05:価格比較の防止
売り手が自分の販売する商品と他の商品の価格比較を困難にすること。このような行動により、ユーザーは十分な情報を得られないままに購入の決断を行うことになります。

◆06:ミスディレクション
ユーザーの目を向けたくないものが存在する時に、ユーザーの注目を引く別のものを用意すること。

以下の画像は航空券の予約画面ですが、デフォルト状態で選択されているシートが、実は有料オプションを選択した状態のシートになっています。画面下部に小さく有料オプションをオプトアプトする選択肢が用意されていますが、多くの人は気づかずに進んでしまうよう設計されています。

◆07:コスト隠し
通販サイトなどで購入の最終段階に到達した際に、突如、税や送料といった新たな費用が表示されること。

◆08:おとり商法
ユーザーが意図する行動と、実際のその行動の結果を異なった内容に設計すること。Microsoftは2016年、Windows Updateのポップアップウィンドウを「閉じる」行動に、「アップグレードを承認する」という意味を持たせて非難を浴びました。

◆09:後悔という人質
ユーザーが選択を拒否する際、そのオプションの表現を「ユーザーが損をすること」を明示する言葉で示し、後悔を人質にしてユーザーに特定の決断をさせること。Amazonプライムへの登録を拒否するリンクが「いいえ、私には無制限の即日配達が不要です」と書かれていたことが、これにあたります。

◆10:偽装広告
広告をクリックさせるため、広告を広告以外のコンテンツやナビゲーションに見せかけること。

◆11:継続の強制
無料のトライアルが終了した後に、ユーザーに何の通知もなくクレジットカードから引き落としがされるような仕組みのこと。このようなケースは、サービスからの退会が難しくなるように設計されることでさらに事態が悪化します。

◆12:「友人を見つける」というスパム
「友人を探す」といった、一見すると無害で好ましい結果を生み出すように見える目的でメールやSNSのアクセス許可を求め、実際にはアクセスした連絡先に「ユーザーから」という名目でスパムを送ること。