Webページ(HTML、JavaScript、CSS)ではちょっとした処理が、ソースコードにすれば1行程度の設定や処理を変更するだけで、使い勝手が大幅に向上するものがある。そうした点を見逃すと、いかにデザインがよくできていても、「使えないサイト」「使いにくいサイト」という印象を与える。

「5 Common Usability Mistakes and Solutions For Avoiding Them」に、そうしたちょっとした間違いを紹介した記事が掲載された。ユーザビリティの低下を招くよくある失敗を5つ取り上げて紹介しており、コーディングの参考になる。

紹介されている内容を簡単にまとめると次のとおり。

  1. フォームの送信にclickイベントを使うことは避ける。フォームの送信はsubmitを使う。submitであればエンターキーが押されても送信処理が機能する。clickではボタンを押す必要があり二度手間になる。
  2. clickイベントを処理するときはCtrlキーとAltキーも考慮する。これらキーが押されている場合にはタブをバックグラウンドで開くことを意図していることが多いので、すぐにreturnして処理を戻す。
  3. text-overflow: ellipsisを使うとともに、コンテンツと同じ内容をtitle属性に記述する (JavaScriptで自動的にtitle属性を追加する処理を入れるというのもひとつの方法)
  4. :hoverのみならず:activeや:focusに関しても指定する。すべてのユーザがマウスを使っているということを仮定しない。
  5. メールアドレスの入力を求めるinput要素には必ずtype="email"を指定する。この指定がないとスマートフォンの仮想キーボードなどは@を表示してくれないので、入力が面倒。

上記ティップスは特にスマートフォンに対して効果的に機能する。キーボードやマウスを使えるPCと異なり、スマートフォンでは文字列の入力も億劫なところがあり、ちょっとでも無駄な操作が発生するようなUI/UXは懸念の対象になりやすい。

ただし、1.に関しては注意が必要。入力を素早く終わらせたい場合には便利な方法だが、業務系システムでは誤操作を防止するためにあえてclickイベントを使うことがある。