ユーザビリティという言葉をご存じでしょうか？
「使いやすさ」という意味ですが、Webの世界ではもう少し詳しく定義されています。
ユーザビリティを意識せずにサイトを制作すると、使いづらい、ストレスが溜まる、そんなサイトになってしまうかもしれません。
今回の記事では、Webサイトで起きがちなユーザビリティの問題に対して、改善のための具体例をご紹介します。
ユーザビリティとは？
W3CのWAIはユーザビリティについて以下のように説明しています。
Usability is about designing products to be effective, efficient, and satisfying.
製品を効果的、効率的、かつ満足できるようにデザインすること。
ボタンを例にすると、以下のようなボタンがユーザビリティが高いボタンと言えます。
- 押せるということが分かりやすい
- 押すと何が起こるか分かりやすくて、安心して押せる
- 押しやすい大きさをしている
- 押し間違えないように余白が確保されている（他のボタンと並んで表示されている場合）
- その操作を行いたい時にすぐにアクセスできる場所にある
他のUIと共通するところもありますが、ボタンひとつとってもこれだけ気にかける項目があります。
また、アクセシビリティという似た言葉が使われることもあります。こちらは、障害をもつ人々がそうでない人々と同等の理解や操作ができることを言います。
ユーザビリティより対象を絞った意味を持ちますが、アクセシビリティが高いサイトは健常者にとっても使いやすいサイトであることがほとんどです。
具体例
押しにくいリンク
ここではリンクテキストのユーザビリティについて説明します。
ブラウザのデフォルトCSSでは、リンクテキストのクリック有効範囲 = リンクテキストの大きさです。
デフォルトCSSのままだと、font-sizeによってはクリック有効範囲が小さくて押しにくい可能性があります。
このようなリンクテキストのユーザビリティを改善するには、クリック有効範囲を広げるためにa要素にpaddingをつけます。当たり前のことですが意外に忘れがちです。
サンプル内の2つのメニューはpadding以外は同じスタイルが当たっています。リンクを押し比べてみてください。
See the Pen
Untitled by odaka (@odaka08)
on CodePen.
領域が大きいので当然ですがpaddingありのリンクの方が押しやすかったと思います。
ここまでマウス操作特有のクリックという言葉を使っていましたが、指でのタップ操作でもほぼ同じことが言えます。
Googleが運営しているweb.devの記事Accessible tap targetsでは、タップターゲットの最小サイズは48 x 48pxを推奨しています。（48pxは指の腹のサイズとだいたい同じ）
また、押し間違えを防ぐためにターゲット同士に8pxの間隔をとるように言っています。
サンプルのリンク同士も8pxの間隔をとっています。スマートフォンなどのタッチデバイスで操作したときも押し間違えにくいはずです。
今回はリンクテキストを例にしましたが、buttonやselectなど、マウスや指で操作するUIには同じことが言えます。
状況が分からないUI
ここでは待機状態に関するユーザビリティについて説明します。
ここで言う待機状態は、データ取得中やフォーム送信中など、ユーザーが何かしらの処理の終了を待っている状態のことです。
たとえば問い合わせフォームでは、以下のような流れで処理が行われます。
- ユーザーが送信ボタンを押す
- サーバーで処理を行う
- サーバーの処理が終わったらページの表示を更新する
2でユーザーは待機状態になりますが、このとき表示に変化がなかった場合、ユーザーはどう思うでしょうか？
- ボタンを押せていなかったかも
- 状況が分からない
- サイトが壊れているかも
以下のサンプルはボタンを押すと3秒かかって処理を実行して、そのあと完了表示に切り替わります。（実際には何もしていません）
枠線の内側だけを見ながらGoodとBadを押し比べてみてください。
See the Pen
Untitled by odaka (@odaka08)
on CodePen.
Badボタンを押した後、不安になってもう一度ボタンを押したくなりませんでしたか？
一方Goodボタンはボタンやカーソルの見た目が変わり、「送信中です。」というメッセージが表示されるので、安心して処理が終わるのを待てたのではないでしょうか？
ユーザーがWebサイトで待てる時間は3~5秒とも言われています。問い合わせをするなどの目的がある状態であればもう少し待てるかもしれませんが、処理が進んでいることを伝えるだけでもユーザーのストレスを軽減できるはずです。
また、テキストメッセージだけでなく興味を引くアニメーションなどを見せることで、ユーザーの体感時間を短くできるとも言われています。
See the Pen
Untitled by odaka (@odaka08)
on CodePen.
ちなみにこちらのサンプルも待機時間は3秒です。
おわりに
今回はユーザビリティについて書いてみました。
ひとつひとつは小さな配慮ですが、それらを積み重ねることでユーザビリティが高いサイトに近づいていくはずです。
また、普段何気なく利用しているアプリやゲームのUIを意識してみることで、ユーザビリティについてのヒントが得られるかもしれません。
