やってしまいがちなユーザビリティのミスとその解決方法

ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。

10 Usability Crimes You Really Shouldn't Commit

下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。

• はじめに
• 1. ラベルがないフォーム
• 2. トップページにリンクしないロゴ
• 3. 訪問済みリンクの指定がない
• 4. アクティブなフィールドが明示されない
• 5. altの記述がない画像
• 6. 背景色がない背景画像
• 7. 長い長いテキスト
• 8. 下線付きだがリンクではない
• 9. ココをクリック
• 10. 均等割付「justified」の使用

はじめに

ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。
あなたのウェブサイトのユーザビリティを拡張する手助けになるよう、解決方法も提供します。

1. ラベルがないフォーム

フォームでインプットフィールドを使用する際、ラジオボタンやチェックボックスとそれに対応するテキストはそれぞれlabelで関連づけを行い、クリックのエリアをより大きくすることは重要です。

2. トップページにリンクしないロゴ

ウェブサイトのロゴにトップページへのリンクを設置することは一般的な慣習とされています。また配置は一般的には、上部の左です。

3. 訪問済みリンクの指定がない

しばしば見落とされがちですが、ユーザーにリングが既にクリック済みであるということをビジュアルで明示します。

4. アクティブなフィールドが明示されない

フォームを入力する際、ユーザーが利用しやすいようにアクティブなフィールドをビジュアルで明示します。これは境界線をハイライトにしたり、背景の色を変更するといった微妙な変化が好まれています。

5. altの記述がない画像

これは重要なポイントです。画像には記述的なテキストをaltにいれるようにします。画像をリンクとして使用する際には、リンクがどこに遷移するかについての記述をいれてください。

6. 背景色がない背景画像

透過のテキスト画像を使用することは一般的です。しかし背景の色に頼ってしまい色が変更になった際に読めなくなることは避けてください。

7. 長い長いテキスト

絶え間なく長いテキストはユーザーにとって不快でしかありません。それを走査して、読み、理解することが容易にできるようにするために明確なセクションに分け、見出しを設置してコンテンツを分断させてください。

8. 下線付きだがリンクではない

多くのユーザーはテキストに下線が引かれていたり、色が異なったいるものはリンクである可能性が高いことを知っています。そのため、一部のテキストを強調するために同じような装飾を使用するとユーザーは混乱してしまいます。その際はstrongやemを使用して強調してください。

9. ココをクリック

リンクの文言に「ココをクリック」を使用する事はインターネットの当初から存在していました。この文言はユーザーに何が起きようとしているか見つけ出すためにセンテンスの全体を把握することを要求するものです。その代わりに、リンクのテキストは次に何が起こるかを明示する記述にしてください。

10. 均等割付「justified」の使用

この問題はもう少し深くアクセシビリティを目指している人のための重要なポイントです。テキストに「justified」を指定すると見た目は両端が揃ってきれいに見えるかもしれません。しかし、難読症のユーザーがパラグラフの正当ではない間隔でワードを識別するため、若干の真のリーダビリティ問題を生じることがあります。