②可読性を上げる

②可読性を上げる

視覚的に読み取りやすくする、という改善もテストしてみる価値があります。

■ 地図から地域を選択するインターフェイスの例

• オリジナルコントラストが不十分と思われる

  
• テストパターン地図の色を変更して、WCAGの基準値以上のコントラストを確保

  

オリジナルの地図の画像では、色がパステル調のため白文字とのコントラストが低く、見づらいのではないかという仮説を立てました。そこで、アクセシビリティの基準であるWCAGが定める基準値にそって、より幅広い視力の人が読み取りやすい画面に変更したところ、クリック率が少し向上しました。

■ さまざまな情報へのリンクを並べる表示の例

• オリジナル空白でトピック間の区切りを表現

  
• テストパターン点線でトピック間の区切りを表現し、リスト形式の矢印アイコンをなくし、「すべてのキャンペーンを見る」を下部へ移動

  

人間の脳はなるべく、「処理負荷を減らそう」とする傾向があります。

そのため、ユーザーが「自分にとってメリットがある記事を探そう」と思っていても、サイトに掲載しているさまざまな情報へのリンクを並べて表示している部分がごちゃっとして見づらいと、脳の処理負荷理が高くなり、パスされてしまいます。

このテストパターンのように、情報を区切って見やすくすることで脳の処理負荷を助けてあげると、さまざまな種類の情報が密集したところでも、見つけやすくなり、結果としてクリックされやすくなります。

③重要な情報を強める／余計な情報を弱める

不要な情報はお客様にとっては「ノイズ」となり、成果も低めてしまうものです。

■ ショップ紹介コーナーの例

• オリジナル「みんなに人気の定番ショップ」などの小見出しあり、人気ショップランキングを上部に表示

  
• テストパターン小見出しなし、人気ショップランキングを下部に表示、ショップ間を点線で区切り

  

小見出しがなくても意味がわかるにもかかわらず、余計な表記をつけていたため、それを理解するためのユーザーの処理能力を奪ってしまい、その先のアクションにつながらなかったのだろうと思われます。

不要な小見出しをなくし、点線で区切ってすっきりと見せることでクリック率が向上しました。

■ 商品一覧ページの例

• オリジナル商品名＋商品紹介文＋詳細情報をみる　リンク

  
• テストパターン商品名のみ

  

商品紹介文は充実していたのですが、その文章のなかに商品比較に役立つと思われる情報が少ないのではないかと考えました。そこで、思い切って紹介文を削除したところ、コンバージョン率が向上しました。

余分な情報を削ることで、より商品を探しやすくなり、幅広い商品を比較検討できるようになったのだと考えられます。

■ 商品詳細ページでの例

このテストは他のテストとは少し異なり、ページが表示された時点でブラウザ内でどんな情報が表示された状態にするかによってユーザー行動がどう変わるかをテストしています。

• オリジナル通常どおり

  

  ページを開いた時点では上部にロゴやメニューが表示されていて、商品以外の情報が占める面積がそれなりにあった。
• テストパターン表示内容が多くなる処理

  

  ページを開いた瞬間にページを自動的にスクロールすることで、ブラウザ画面内に商品情報を多く表示するようにした。

これらの商品詳細ページは、検索エンジンからの流入が特に多いページです。検索エンジンを使った商品探索行動では、検索結果ページからさまざまなWebサイトを開いてチェックして、また検索結果ページに戻るといった動きを行います。そのため、たくさんの競合となるWebサイトの中から、「このWebサイトはたくさん情報がありそうだ」「このWebサイトは探しやすそうだ」と期待してもらわなければなりません。

必要な情報が画面内に占める割合を高くすることで、成果につなげた例です。