なんとなくhoverに頼らないUI設計

リンクに見えるとは、どういうことなのでしょうか？

Webの世界において、リンクは最も基本的な機能のひとつです。
文章中で補足や誘導をしたいとき、あるいは別ページに移動してもらいたいとき、私たちは迷わずリンクを使います。

けれど最近、ふとしたときに「あれ、これはリンクだったんだ」と後から気づくような場面があります。
意識して見れば確かに工夫されているし、多くのデザイナーがリンクらしく見せるために努力していることも感じます。
それでも、マウスを乗せてみなければ気づけないリンクが、いくつかの現場でまだ見受けられるのも事実です。

リンクであることに気づかれないという状況は、リンクとしてそこにあっても、ないのと同じ状態なのかもしれません。

hoverという演出に、頼りすぎていないでしょうか？

マウスを乗せると色が変わる、少し太くなる、あるいは下線が現れる。
hover時の反応は、Webデザインの中でごく一般的な演出として使われています。

背景には、過度に目立たせず、それでいて操作対象であることを伝えるという繊細なバランス感覚があります。
リンクの存在を静かに示すその手法に、制作側の気配りを感じることもあります。

クリーンでミニマルなデザインが好まれる傾向は、今も続いているように思います。
トーンを抑えた配色、装飾を最小限にしたレイアウト。リンクに下線をつけず、文章に溶け込ませるような見せ方もよく見かけます。

そうした控えめな美しさに、私自身も惹かれることは多々あります。
ただしその美しさが、伝わることや気づかれることと引き換えになってしまっている場合があることも、忘れずにいたいと思います。

hoverできない人気づけない人

Webを利用する人々の環境は、決して一様ではありません。
たとえば、色の見え方に多様性がある人。
タブレットやスマートフォンのように、hoverという概念が存在しない端末。
拡大表示で画面を見る人や、キーボード操作を中心に使う人。

そうした環境では、hoverは機能しません。
つまり、hoverに依存した設計は、それが前提とならないユーザーを静かに取りこぼしてしまう可能性があります。

見た目ではリンクに見えず、操作もしにくい。
それは小さなことに見えるかもしれませんが、ユーザー体験には確実に影響を与えます。
気づかなかったことに、ユーザー自身も気づけないまま、ページをそっと閉じてしまう。
そうした瞬間が、今もどこかで起きているのです。

情報を伝えるということ

伝えたいことがあるなら、ちゃんと伝わるようにしておこう。
シンプルですが、あらゆるUI設計の基本にある考え方ではないでしょうか。

派手である必要はありません。
けれど、わかる形で情報を届けることが大切です。
その工夫こそが、UI設計やアクセシビリティの本質だと思います。

hoverはあくまで補助的な演出です。
hoverしなければ意味が伝わらないとしたら、
それは少し、伝え方としては心もとないものかもしれません。

わかるように伝わるように

私たちにできることは、とてもシンプルです。

リンクには、下線をつけましょう。

hoverしなくても、リンクであることが一目で伝わるように。

リンクテキストには、意味を持たせましょう。

“こちら”や“→”ではなく、リンク先の内容が伝わる具体的な言葉を選びます。

hoverはあくまで補助にとどめ、基本は最初から伝わる設計に。

動きを使うのは良いことですが、それが前提にはならないように。

こうした小さな判断の積み重ねが、使えるWeb、伝わるWebにつながっていきます。