UIデザインにホバーはもう使うな【海外記事メモ】
海外記事を読んで、その内容と自分なりの考えをまとめています。今日はこの記事を取り上げたいと思います。※noteに使用している画像も以下からの引用になります
UIデザインをやってみると、専門性の高いサービスであればあるほどUIにホバー（マウスを数秒当てると出てくる説明）を補足として入れる必要が出てきたりします。
今日の記事は「でもホバーってユーザーの助けに本当になっているのか？」という観点からホバーについてを見直す内容になっています。
自分が作ってるサービスではこのへんを無自覚にがっつりホバーを入れたりしていたので耳の痛い内容ではあったのですが、非常に興味深い内容だったのでまとめてみます。今日もよろしくお願いいたします。
ホバーは邪魔である
ホバーはUI最前面に情報を表示させるため、UIの一部を隠してしまいます。
これは画面をスクロールしたりマウスを動かしたりするたびに画面上にちらつきが出て非常に邪魔です。ウェブページでただ言葉の上にマウスをおいただけでホバーが表示されてイライラしたことはないでしょうか？
ホバーはユーザーをいらいらさせる可能性を考慮する必要があります。
ホバーは時間を浪費させる
前述のような状況を防ぐために、デザイナーはホバーが出てくるタイミングを微妙に遅らせるようにするでしょう。それによって、スクロール時にちらついてしまうことを防ぐことができます。
しかし、それによってホバーのように隠された情報を見るためにはユーザーは一定時間静止していなければならなくなります。これはユーザーにとって、邪魔にならないUIのために時間を支払っているのと同義です。
ホバーは見つかりづらい
どんなUIであっても「ここにホバー情報があります」という表記がされることはありません。
そのためユーザーがホバーに気づくには偶然か、ひとつひとつの要素に対してマウスでホバーをして隠された情報の有無を確認しなければなりません。
ホバーは使いづらい
ホバーは見つかりづらい上に、ちょっとしたマウスの操作技術も求められます。
ホバーはマウスが操作されると消えてしまうため、ユーザーはホバーを見失わないようにマウスを静止させておく必要があります。
世の中にはいくつかホバーが有効に活用されている例はあるものの、基本的にはユーザーの負担を考慮してホバーに頼らないUI設計を行う必要があります。
ホバーはイライラする
ホバーはマウスを動作させると消えてしまいます。そのため、意図しない操作を行ってしまいホバーが消えると、ユーザーはまたホバーを表示させるために一定時間特定の場所で静止する必要があります。
加えて、モバイル機器ではホバーの機能を使うことはできません。モバイルのウェブブラウザではタップをホバーとして扱います。
つまり、ユーザーの操作としては最初にタップをしてホバーを表示させ、再度タップをすることでようやく目的のエレメントへのアクセスが可能になります。
普通のデザイナーであればこのような手間を避けるためモバイルでのホバーはサポートしないようにするでしょうが、そうすることでPCとモバイルのプラットフォーム上でのUXの差が生まれてしまいます。
そのためユーザーにとってはPCとモバイルとで異なる操作性の学習が必要となり、サービスへのイライラの原因となります。
ホバーを使わないようにするにはどうればよいか？
ホバーで表示していた補足情報を常に表示させるか、補足が必要な要素の下にボタンなどを配置し、そこをクリックすることで情報を見れるようにすればよいだけです。
それはユーザーに余計な手間を与えることになるように感じますが、それはホバーのようにメニューが出てくるまで待つよりずっとマシです。
理想的にはホバーは使用しないほうが良いです。もし使わなければならないときは、UXの品質を向上させるのに役立つ要素のみに限定的に使用し、核となるユーザーフローの妨げにならないような配慮が必要です。
感想：将来的に必ず消えていくホバーへの対策をしよう
冒頭に述べた通り、自分はここで述べられていたデメリットは薄々自覚しつつもホバーをかなり使ってしまうところがありました。
しかし、将来的にはホバーというものが廃れていくように感じています。
個人的に最も大きな要因と思ったのは、記事でも述べられている通りモバイルで提供されるUXとの相性の悪さにあると思います。
情報の閲覧をPCではなくタブレットを含めたモバイル機器へ移行していく流れは今後もずっと続いていくことでしょう。
今の若い世代ではPCを使わない割合がマジョリティとなって久しい現代において、モバイルファーストでUXを設計していかなければならず、そこと親和性の低いUIはどんどん淘汰されていくと考えます。
そんな時代において我々UIデザイナーが行うべきは、いかにホバーに頼らないUIを設計していくかを常に考えることでしょう。
近い将来ホバーが完全になくなる未来さえも念頭に置きつつ、時代にあったUIを考えていくことが求められるなぁと改めて考えさせられました。
_________________________________________________________
＠やました
ポートフォリオ : https://www.saito-t-design.com/
__________________________________________________________
サポートいただいたお金は今後の発信活動に関わるものに活用させていただきます。