「どうすればユーザーにとって、満足度の高いサイトを作れるだろう…」
Webサイトのユーザビリティの改善方法について、悩んでいる方も多いのではないでしょうか?
サイトや商品がどんなにいい機能や性能を持っていたとしても、ユーザビリティが低いままでは他の競合にユーザーを奪われてしまいます。
今回は、ユーザビリティを改善するためのテクニックを5つに絞って、ご紹介していきます。
この記事を読むことで、ユーザビリティについての理解を深めることができ、具体的な改善テクニックを実践できるようになります。
ユーザビリティという言葉からすぐ思い浮かぶのは、「使いやすさ」ではないでしょうか?
そのままの意味でも間違いではありませんが、
ユーザビリティの第一人者であるヤコブ・ニールセン博士は、自身の著書「Usability Engineering」のなかで5つの構成要素を持っているとしています。
つまり、以上の5つの要素が満たされている「使いやすさ」こそ、ユーザビリティと言えます。
では次に、ユーザビリティを改善させるメリットにはどのようなものがあるのか、改めて確認しましょう。
ユーザビリティが改善されることで、ユーザの利用ストレスが排除され、離脱率を低下させることができます。
サイト利用に対する満足度が向上すれば、滞在時間やPVを増やすことに繋がり、自然と集客やファン獲得に結び付いていきます。
一見ユーザビリティとは無関係にも見える検索順位ですが、実は検索順位とユーザビリティは大きく関係しています。
Googleは2021年6月中旬より、検索順位を決める要素にCore Web Vitals(コアウェブバイタル)を導入しました。
「Core Web Vitals」におけるこの3つの要素は、それぞれユーザビリティと深く関わりがある指標です。
このように、検索順位の向上には3つの重要なポイントがあり、これらを満たすWebページは、ユーザビリティが高いとGoogleから評価を受け、検索結果を上げることができます。
検索結果を上げるためには、以上3つのユーザビリティのポイントを意識しましょう。
コンバージョンとは、訪問客のうち、何人が目的としている行動をとってくれたかを示す数値です。
例えば、「入力フォームが複雑で面倒」といった問題があると、せっかく購買意欲を高められたとしても、サイトを離脱してしまう原因となってしまい、コンバージョン率の低下に繋がります。
高いコンバージョン率を持ったサイトを作成するには、ユーザビリティへの意識は欠かすことができません。
他社と類似のサービスを提供している場合、同じ性能や機能を持っているだけでは、多くの支持を得ることは難しいかもしれません。
しかし、ユーザーにとって使いやすく購入意欲が高まるようなサイトと、そうでないサイトだといかがでしょうか?
サイトのユーザビリティを改善させることで、他社との差別化を図ることができるでしょう。
ユーザビリティは
5つの構成要素をもち、それぞれの構成要素にアプローチする改善ステップを用意する必要があります。
ここからは実際に何を改善すれば、ユーザビリティを向上させることができるのか、具体例を出しながら解説していきます。
ユーザーがよく使う機能を、サイトの様々な場所に散りばめてしまうと統一感がなく、操作ごとに視線や指を動かさないといけなくなるため、ストレスに感じてしまいます。
ユーザーが使いやすいように、ユーザーがサイトでどのような流れで回遊するのか、導線を考えながら、要素を配置しましょう。
グローバルナビの配置は、全てのページで統一した並びにし、統一性をサイトに持たせましょう。
また、新入生や卒業生といった目的が異なるユーザーごとにナビゲーションを分け、ユーザーが求めている情報にすぐにたどり着けるような工夫をおこなうのも効果的です。
※引用元 東京大学
https://www.u-tokyo.ac.jp/ja/alumni/index.html
入力欄とボタンが不必要に離れているなど、極力ユーザーが疲れるような機能の配置は避け、必要な機能ごとにまとめておきましょう。
また、情報の整理もユーザビリティにおいては重要です。
例えば、お問い合わせのナビをクリックした後には、よくあるご質問や内容に応じたお問い合わせ先の一覧を用意しておくと、ユーザーも次のアクションに迷うことがありません。
※引用元 株式会社明治
https://www.meiji.co.jp/support/
人間は、常に五感を使って反応を伺っています。
Webサイトでは、五感の中でも特に「視覚」に対して分かりやすくある必要があり、ユーザーが行なったアクションに対しても、適切な反応ができているかが重要です。
クリックできる要素に関しては、マウスを合わせたときに指カーソルに変化したり、ボタンの色が変わるようにしたりと、リンクがあることが分かりやすいデザインを心掛けましょう。
反応がない要素にしてしまうと、ユーザーが「押しても何も起こらないボタンなんだな」と無視してしまう可能性があり、コンバージョン率が低くなってしまいます。
また反対に、クリックができない要素に関しては、リンクテキストだと間違わせないよう、ボタンに似たデザインを使わないなど、ユーザーにストレスを与えない注意が必要です。
メールを開く際や、動画を再生して止まっている間、ロード中の表示が出なければどうでしょう?
ユーザーは、サイトが反応していないと考えて何度も処理を実行したり、サイト自体が機能していないのではないかと勘違いして、サイトを離れてしまうケースもあるかもしれません。
表示待ちやロード時間は、今何をしている状態なのか、常に分かりやすくなるよう心掛けましょう。
商品を購入したり問い合わせしたにも関わらず、確認メールが来なければ、処理が実行されたのかが分からず、ユーザーは不安になってしまいます。
内容に応じた確認メールを送り、ユーザーに安心感を与えるサイトにしましょう。
「間違ってデータを削除してしまった」
「戻るボタンを押したら、入力したフォームがクリアされてしまった」
そのような経験がある方も、多いのではないでしょうか?
ユーザーは制作者ほどWebページに詳しくありませんし、間違いは起こすものです。
間違いを起こさないように配慮されているかどうか、間違いやエラーが起きた後もサポートができるかどうかで使いやすさが変わってきます。
商品のカートリストから商品を削除する時や、入力フォームページから離れる際には、
「こちらのデータを削除してもよろしいですか?」
「入力内容が破棄される可能性がありますが、このページを離れますか?」
など、確認メッセージを表示しましょう。
間違って、データを削除してしまうことを防ぐことができます。
※引用元 株式会社日立ソリューションズ
https://www.hitachi-solutions.co.jp/inquiry/
1つの項目に入力の誤りがあっただけで、他の入力項目もリセットされてしまうなど、フォームの入力を何度も行うことはユーザーとしてはとてもストレスです。
入力したフォームの内容は、保持できるようにしてユーザビリティを改善させましょう。
また、フォームの入力に関して、現状の入力項目が本当に必要かどうかを検討しましょう。
できる限りユーザーが入力する項目を少なくし、間違えた場合に解決しやすいエラーメッセージが表示することも、重要な改善ポイントなので確認しておきましょう。
404ページに、他のページへのリンクがあるだけで、ユーザーはサイトを離脱しにくくなります。
例えば、amazonの404ページはホームページへの誘導があるだけではなく、デザインも可愛いと話題になっています。
更新するといろんな種類の犬たちが出迎えてくれます。
※引用元 amazon
https://www.amazon.com/404<
リンクカラーやボタンデザインなど、Webサイトには共通してよく使われるルールが必要です。
よく使われているルールを使ってもいいですし、サイト独自のルールを使っても構いません。
大事なことは、サイト内でルールが統一されているかどうかです。
もちろんサイト独自のルールを使う場合は、「ルール自体が覚えやすいものかどうか」という点も考慮しましょう。
青色のリンクカラーの箇所と、赤色のリンクカラーの箇所があるなど、サイト内でルールが違っていればユーザーも困惑してしまいます。
しかし、先述したようにリンクカラーの色は、サイト内でルールが統一されていれば問題ありません。
※弊社のホームページのリンクデザインではカーソルを合わせた際に青い下線が表示されるよう統一しています。
コーヒーの販売をしているWebサイトがあるとしましょう。
パターン①
自社のコーヒーのポイントを説明します。
パターン②
自社のコーヒーのポイントを説明します。
前者は言い回しや品詞に統一感がなく、見ていて綺麗ではありません。
最後に名詞で終わるように書き換え、コーヒーの表記もカタカナに統一するだけでだいぶ見やすくなります。
見出しや箇条書きの各項目ごとに、言い回しが統一されているかどうかでサイトの読みやすさが大幅に改善されるので、確認してみましょう。
現代では、PCに限らずスマホ・タブレットなど様々なデバイスからサイトを訪れるユーザーも多くなっています。
パソコンからサイトを閲覧すると綺麗に閲覧できていても、スマホからサイトを閲覧した際にデザインが崩れてしまっていては、ユーザーはサイトを離れてしまいます。
スマホだけでなく、iPhoneやアンドロイド、iPadなど、それぞれの端末のサイズに合わせて表示できるように改善しましょう。
スマホからホームページにアクセスし、デザイン崩れがないか確認しましょう。
スマホからサイトを閲覧した際に、画像サイズが大きすぎたり小さすぎたりすると、それだけでユーザーには見にくいサイトになってしまいます。
画像サイズの変更にはHTML/CSSへの専門知識が必要になります。
画像の最適化を依頼する場合は、専門知識をもつ会社に依頼するようにしましょう。
スマホから見た際にデザイン崩れが起きやすい箇所として、表データが挙げられます。
小さい枠の中に文字が納めされているため、スマホ対応のデザインにしようとすると、細かくデザインを設定しなければなりません。
Webサイトで表を扱っている場合は、スマホで見た際に読みやすいものになっているか再確認してみましょう。
いかがでしたでしょうか?
今回はユーザビリティを向上するための今すぐできる改善テクニック5選について紹介しました。
5つのテクニックを確認して、是非実践できそうなものから試してみてください。
ユーザビリティについて、少しでも興味を持っていただけたら嬉しいです。
クランタイマーでは、ユーザビリティを意識したWebサイト制作はもちろん、Webサービスなどのプロダクト開発、既存プロダクトの改修、技術サポートなども行っています。
サイト制作やWebサービスなどでお困りなことがあれば、是非クランチタイマーに気軽にご相談ください。
SHARE:
お気軽にお問い合わせください。
TEL082-299-2286
代表の佐々⽊が⽉に1回お届けするメールマガジン。
国内外スタートアップの最新情報や最新技術のサマリー、クランチタイマーの開発事例紹介など、ITに関する役⽴つ情報を中⼼にお送りします!