UI考察：リンク範囲の組み方だけでUIの品質が変わる

サンプルはこちら。

See the Pen Amgiu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

どちらも見た目は全く同じメニューバーですが、カーソルを乗せてみてどちらが心地よく使えそうでしょうか？

上のメニューはテキスト部分のみがリンク領域なのに対し、下のメニューはバーの上下までリンク範囲なので、見た目に期待した通りの物理的なボタン感があります。この「見た目に期待した通り」というのは結構重要で、期待に反すると気持ち悪く感じたりします。

上のメニューはリンクが離れ合っているのでカーソル表示も矢印・指先・矢印とチョロチョロ変わりますが、下のメニューは隣り合うリンク同士がピッタリ隣り合っており、カーソルが指先表示のまま連続して変わらないので、利用感の質も良くなります。

上下のメニューでCSSは1箇所しか変わりません。

.menu1 {
  a {
    margin: 10px 20px;
  }
}
.menu2 {
  a {
    padding: 10px 20px;
  }
}

マージンかパディングの差かなのですが今回はソースの話は意味がなく、こうしたわずかな違いで利用感の差がはっきり生まれ、UIの品質が変わるという点に着目してもらえればと思います。