WebサイトUIUXの改善事例

  • 2022.3.23

WebサイトのUIUXを改善する、という状況になった際、一番役に立つのは事例でしょう。

事例を知れば、「こう言う風にすればいい」「こんなやり方もあるのか」といったように、エピソード形式で経験を疑似体験できます。

今回は、そんなエピソード形式で、様々な課題の解決方法をお伝えすることをメイントピックとしてお伝えできればと思います。

課題発見方法別事例は以下の通りです。

  • ヒートマップエピソード
  • ユーザビリティーテストエピソード
  • オブジェクトベースUIエピソード

それぞれ説明していきます。

ヒートマップエピソード  

まずエピソードをお伝えする前に、ヒートマップとは何かを説明いたします。

ヒートマップとは、サイトのどの部分にマウスが移動しているか、どこがクリックされているか、と言った情報をサーモグラフィーのように可視化した分析方法のことです。

そんなヒートマップが活用されたのは、「コンバージョンをさらに上げたい」という課題に直面した際です。

コンバージョンというのは、LPなどの宣伝用サイトで、お客様が「資料請求」「トライアルお申込み」など、商品に興味をもって該当するボタンなどをクリックすることのことです。

この場合のコンバージョンを上げたい、というのはつまり、「お客様がより商品に興味をもってクリックしてくれる状態」という事になります。

すなわちサイトにおける宣伝力の上昇を課題に掲げたという事なのですが、その際に活用されたのが、ヒートマップでした。

ヒートマップ、この場合活用されたのはマウスグラフィヒートマップというものですが(ヒートマップにも種類があります)、こちらはマウスの動きを追跡してサーモグラフィーのような情報に落とし込む情報です。

マウスの動きで何が分かるのか、ということですが、一般的にマウスの動きは視線の動きと80%一致していると言われています。そのため、ヒートマップの情報を確認することでどこが見られていて、どこが見られていないかという事が一目瞭然となるのです。

そうなれば後は簡単です。コンバージョンを上げる=「資料請求」などのボタンをクリックしてもらう、ということですので、対応策はヒートマップでもっともみられている場所にボタンを配置するだけです。

それだけでコンバージョンは上昇します。何故なら、サイトを見ているユーザーの中には「資料請求したいがボタンの場所が分からない」という方もいるためです。そんなユーザーの視線に止まる場所にボタンを置けば、コンバージョンがしやすくなり、上昇する、という解決につながるのです。

ユーザビリティーテストエピソード  

まず、ユーザビリティテストとは何かを説明します。

ユーザビリティテストとは、一度作ったWebサイトを、一度外部のユーザーに使用してもらい、その操作を録画してどんな動きをしていたか、どんなところで困っていたか、ということをテストする分析方法です。

そんなユーザビリティテストが活用されたのは、「離脱率が非常に高いので、その改善」という課題が掲げられた際です。

離脱率、というのはその通り、サイトを訪問したユーザーがサイトから離脱してしまうことです。この離脱という現象は中々シビアで、少しでもストレスがかかるとユーザーの大半は離脱してしまうと言います。

その解決の糸口として採用されたユーザビリティテストという事なのですが、録画したデータを確認したところ、とあるUIのみでかなりのテストユーザーが困惑していたことが発覚します。

このUIは、エントリーフォームでした。あなたにも覚えがあるかもしれません。エントリーフォームで自分の情報を入れていく際に、かなりストレスがかかって離脱してしまったことが。

その通り、エントリーフォームは大抵の場合、ユーザーに大きなストレスをかけてしまいがちなUIになります。せっかく長文で記載したのに間違っていて先に進めないとか、誤ってページの更新をしてしまったばかりにフォームの情報を最初から入れ直すことになったりだとか、そう言った事故が頻発する箇所です。

今回のユーザビリティテストで判明したのは、ユーザーがフォームで求められている情報を間違って認識し、そのせいで中々次の情報送信ページに移動できずに困惑していた、ということでした。

ここで判明したのは、まずもって「入力指示が適切でなく、誤解を招きやすい文言であったこと」、そして「入力内容が間違っていた際に、多数ある入力項目の内どれが誤って記載しているのかを、ユーザーに教えるUIが実装されていなかった」という二点でした。

つまり、間違ったことを書きやすいエントリーフォームな上に、どこが間違っていて、どう訂正すればいいのか分からない状態になっていた、という事です。

このように文章に起こすと致命的なのですが、開発チームは開発者ですから、どこでどうつまるのかがユーザーほど理解できません。こう言ったことは往々にして起こりがちなのです。

そのため、その二点を改善したところ、離脱率はかなりの割合で改善されました。このように、開発チームだからこそ分からない、ということが、ユーザビリティテストで浮き彫りになるのです。

オブジェクトベースUIエピソード  

オブジェクトベースUIとは、ユーザーに「まずオブジェクト(もの)を提示する」という形式で構築されたUIのことです。

これだけ示しても難しいでしょうから、対義語としてタスクベースUIについても説明しましょう。

タスクベースUIとは、ユーザーに「まずタスクを提示する」という形式で構築されたUIのことです。

このように、まず「どれをしようかな」という選択肢を提示する形式のUIがオブジェクトベースUIで、「何をしようかな」という選択肢を提示する形式のUIがタスクベースUIという事になります。

そんなオブジェクトベースUIですが、今回は「何ともいえずUIが使いにくい」という課題が掲げられた際に活用されました。

この「何ともいえず使いにくい」というのは曖昧な課題で、まず「何故UIが使いにくく感じるのか」というところから研究していく必要がありました。

その際にとあるアドバイザーを招いたところ、このような指摘を受けたのです。

「このUI、タスクベースなのでオブジェクトベースに変更しませんか?」

アドバイザーが説明するところでは、人間は基本的にオブジェクトベースでモノを考える生物であるので、タスクベースのUIだと使いにくさを感じてしまう、ということでした。

タスクベースがどのように使いにくいのかと言うと、「まず何をするか」を決めさせて、そこから「その動作をどれに行使するか」を決めてもらう形になり、いざその「どれ」をかくにんしたところ「あ、これは削除しちゃいけないんだった」と気付いても、やり直すには最初からでなければなりません。

では何故人間向きではないとされるタスクベースUIが実装されてしまうのかと言うと、エンジニアは職業柄タスクベースでモノを考えがちになるので、エンジニアにUIを設計させると、ついこのような形にしてしまうのだそうです。

そのため、タスクベースUIをオブジェクトベースUIに変更することで、使いにくさが改善されたというのが今回の事例となります。

まとめ  

今回は、事例に沿う形で3つの解決方法をご教授いたしました。

では、最後にもう一度解決方法をおさらいしておきましょう。

ヒートマップは、マウスの動きやクリックされた場所を、サーモグラフィーのように視覚的に見ることが出来るサイト分析方法です。このヒートマップの内、マウスの動きを追跡するマウスグラフィヒートマップによって、ユーザーがどこを見ているのかという情報を取得し、一番見られている場所にコンバージョンボタンを配置することで、コンバージョンを上昇させることが出来ました。

ユーザビリティテストは、テストユーザーにサイトを使用してもらい、その動きを録画する方法です。ユーザビリティテストを行うことで、ユーザーがどこを見ていて、どこを使いづらく感じるのか、といった情報を獲得できます。これによって、サイトのUIにどんな問題があるのか、という事を洗い出すことが出来ます。

最後にオブジェクトベースUIです。オブジェクトベースとは「まずどれを選ぶか」という選択肢を提示する方法のことで、対義語にタスクベースという「まず何をするか」という選択肢を提示する方法があります。基本的に人間はオブジェクトベースのUIを好みます。

以上が、今回の記事のまとめになります。是非ご活用いただければ幸いです。