デザインの要!ユーザビリティを向上させる10の方法


デザインの要!ユーザビリティを向上させる10の方法
目次
  1. ユーザビリティとは?
  2. ユーザビリティを向上するための10の方法
  3. ページ要素を詰めすぎない
  4. 画面ごとにレイアウトを変えない
  5. 現在地を表示する
  6. 情報はできるだけ少なくする
  7. クリック数やタップ数を減らす
  8. 選択肢は多くても23つほどにする
  9. アクティブな要素には効果をつける
  10. 見出しタグを正しく使う
  11. スマホでは要素を大きく、距離を離す
  12. 広告の配置や使い方に気を付ける
  13. あとがき

ユーザビリティを向上させる方法についてまとめました。ウェブデザインやアプリ開発など、デザインにおいてユーザビリティは非常に大切。ポイントをおさえつつ、ユーザビリティ向上を目指していきましょう。

ユーザビリティとは?

ユーザビリティとは?

ユーザビリティとはどういったものなのか、簡単に復習しておきましょう。

厳密な定義を考えると難しくなってしまうのですが、一言で言うと使いやすさのことです。ユーザーがストレスなくスムーズに製品を使えていれば、ユーザビリティが高いということになります。逆に、使い方がわかりづらかったり、ユーザーにストレスを感じさせてしまう場合はユーザビリティが低いのです。

「製品」と言いましたが、これにはあらゆるものが含まれます。アプリやウェブサイトもそうですし、日用品や家電製品もそうです。本稿ではウェブサービスやアプリに絞って話を進めていきますが、デザインにまつわるあらゆる分野に共通する内容だということは知っておきましょう。

なお、ユーザビリティと似た言葉にユーティリティがあります。こちらは機能や性能のことで、使いやすさを表すユーザビリティとは別ものです。

ユーザビリティを向上するための10の方法

website-1624028_640

ページ要素を詰めすぎない

ページ要素を詰めすぎると、視認性が悪くなりますし、操作もしにくくなってしまいます。適度に間隔を空けて、見やすく読みやすいレイアウトにしましょう。

画面ごとにレイアウトを変えない

アプリやウェブサイトで画面ごとにレイアウトが異なると、統一感がなく使いづらくなってしまいます。基本的な構造は、ページごとに変えないようにしましょう。

現在地を表示する

地図のことではなく、ウェブサイトやアプリで操作をしているときの現在地のことです。会員登録や商品の購入フローなどで、必ずとりいれて欲しいポイントです。いま自分が何をしているのか、あとどれくらいのステップが残っているのかがわかるので、安心して操作を続けてもらえるようになります。

情報はできるだけ少なくする

情報が多いと、ユーザーも何を見たらいいのか、何をすればいいのかがわからなくなります。1つの画面に表示する内容は、できるだけ少なくなるようにしましょう。

クリック数やタップ数を減らす

クリックやタップなどの操作は、1回であっても少なくするようにしましょう。たった1回のタップが増えただけで、ユーザーレビューが炎上したアプリもありました。開発側にとってはたいしたことでなくても、ユーザーにとってはそうではありません。

選択肢は多くても23つほどにする

決定回避の法則をご存じでしょうか?選択肢の数が多いと、結局何も選べなくなってしまうことを言います。例えば、選べるプランが10個も20個もあると、ユーザーにとってはどれを選べばいいのかわからなくなってしまうのです。選択肢は多くても、23個ほどになるよう意識しましょう。

アクティブな要素には効果をつける

入力欄やボタンなど、アクティブになっている要素にはそれとわかるように効果を加えるようにしてください。ボーダーや影の色を変えてもいいですし、ちょっとしたエフェクトをかけてもいいでしょう。

見出しタグを正しく使う

特にウェブサイトでは、見出しを適切に使うようにしましょう。コンテンツや文章の構造がわかりやすくなりますし、読む時のリズムが生まれるので格段にページが読みやすくなります。見出しタグを正しい順序で使うことも、忘れないでください。

スマホでは要素を大きく、距離を離す

スマホ向けのウェブサイトやアプリでは、ボタンやリンクなどの要素を大きくするようにしましょう。また、要素同士が近いとタップがしづらくなりますよね。要素の間を多めにとるなどして、スマホでも操作しやすくなるよう工夫しましょう。

広告の配置や使い方に気を付ける

多くのユーザーは、広告が表示されることを喜んでいません。それを知った上で、ウェブ広告を使うべきです。メインのコンテンツを邪魔してはいけませんし、一方でユーザーの目に入るよう配置する必要があります。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

あとがき

ユーザビリティの基本と、ユーザビリティを向上するためのポイントについて解説しました。デザイナーはもちろんですが、非デザイナーにとってもユーザビリティは必要な知識です。ユーザビリティは奥が深いのですが、本記事で取り上げた内容については必須知識として持っておくといいでしょう。


関連記事

中西洋平
この記事を書いた人
中西洋平
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp