パンプキンスパイスラテ

IT系のことが多めの日記帳です

WEBユーザビリティ向上の為に考えるたった5つのこと

ひとまず最低限これだけ守っていれば、そこそこWEBユーザビリティが良くなるハズ。

titleのテキストは重要

検索エンジンの見出しとなるので、パッと見、そのサイトがどのようなサイトなのかがわかるようにする。さらに複数のタブで開いている場合、初めの数文字しか表示されていない場合があるので、先頭にわかりやすいキーワードをおくと親切。
例えばコーポレートページの場合、
「株式会社○× - サービス紹介 - サービス名」よりも
「サービス名 - サービス紹介 - 株式会社○×」のように、先頭に重要なキーワードがくるようにする。
その際、「サービスの特徴+サービス名」だと尚良し。
例)簡単メール配信システム「カンタン@メ〜ル」 - サービス紹介 - 株式会社○×

ファイル(ディレクトリ)は意味のある名前をつける

特に大きめなサイトの場合、自分がどこにいるのかわからなくなってしまう為、現在地がわかりやすいURLにする。
例えば、「/page/html/kantan/service.html」より
「/service/kantan.html」のようになるべく短く簡潔に、さらに意味を持たせる。
そこそこネットリテラシーが高い人は、URLを削ってサイトを移動したりする。
上記の場合、サービス一覧ページへ移動しようとして「kantan.html」を削除して「/service/」へアクセスする。
そうでない人でも、URLと連動した「パンくずリスト」を用意することで、目的のページへ移動しやすくなる。

サイトのレイアウトを統一する

グローバルメニューの位置、サイドメニューの位置をサイト全体を通して統一すること。
ページごとに微妙にレイアウトが変わっているととてもわかりづらい。例外はトップページのみ。
できれば、表示しているページのメニューは色が反転している等の目印があると良い。
さらに見出し+文章などのレイアウトまで統一されていると尚良い。
ページを移動するユーザーの目線を迷わせないようにできる。

リンクをわかりやすくする

たまにデザインにこだわる為か、通常テキストと同じ色のリンクや、下線がないリンクや、マウスオーバーしても変化しないリンクがあるけど、それらは絶対ダメ。とてもわかりづらい。
理想は、青系・下線・マウスオーバーで変化(色)である。
色はサイトカラーによって要調整だけど、基本はそれがリンクであることがわかりやすいようにする。
同様に、お問い合わせボタンや、申し込みボタンも、それがボタンであることがわかりやすいデザインにする。
例えばショッピングサイトなのに、購入ボタンがわかりづらかったら、せっかくのお客を逃してしまうことになる。

フォントサイズは大きめにする

ちょっと古いセンスの持ち主に多いんだけど、デザインにこだわる為に小さめのフォントにしてしまうサイトがあったりする。それらはほとんど英語サイトのデザインに影響を受けていると思う。
でもちょっとまって。
英語と日本語では、基本サイズが異なるので読みやすさが全然違う。
ちょっと大きめかなってくらいが日本語にはちょうど良い。
テキストであればユーザー側でもブラウザで調整できるが、画像は無理なので、特に画像にも注意する。