リスト全体にリンク設定でユーザビリティ向上

Webサイトでリンクのリストをコーディングする際、文字だけではなく、リスト(liタグ)全体にリンクを設定したほうが、操作しやすくなります。

リスト全体がクリック可能

amazonのリストメニューが参考になります。

リストメニューのリンクが、文字だけでなく、メニューの幅いっぱいまでクリックできるようになっています。

文字だけがリンクだと、クリックできる範囲が小さくて、カーソルを合わせるために、少しだけ集中力を消耗します。

細かいところですが、操作ストレスが溜まると、離脱につながります。

aタグにdisplay:block

実装にあたり、必要なCSSは1行。

実際は、aタグすべてがdisplay:blockにならないよう、任意のクラスをあわせて設定します。(.linkList a のように)

導入コストが引くく、コストパフォーマンスの高いユーザビリティ改善のため、忘れずに導入できればと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)