UXを損ねてしまうかも？UI設計でやりがちな間違い4選

更新日: 2017年07月12日

デザイン

*UX(ユーザーエクスペリエンス)*はホームページを製作する上で確実に考慮に入れなければならない要素のひとつです。

しかし、多くのホームページが存在するなかで、本当の意味で良いUXを実現しているのはほんの一握りです。
ポップアップで広告を出したり、スパムを飛ばしてきたり、ユーザーの行動を阻害するようなUI設計がなされているホームページは少なくありません。

そこまで極端でなくても、無意識のうちにUXを損ねている可能性もあります。
UXを最大化させるためには、良いUI設計だけではなく同時に確実に避けたいUI設計も知っておくと良いでしょう。

「反面教師」という言葉がありますが、成功をモデリングするだけでなく、失敗事例を分析することでも学ぶべきことが多くあります。

今回は、UXを損ねてしまうかもしれないUI上の間違いを解説します。

UXを傷つけてしまうかもしれないUI上の間違い

1. 不要なモーダルウィンドウ

jQueryが登場した当初、モーダルウィンドウを実装するプラグインは非常に多く登場しました。
実際のところ、限られたウィンドウサイズの中で別の領域を登場させるという方法は非常に賢いやり方に見えます。

モーダルウィンドウを使えば、新しいタブを開くJavaScriptを使わなくて済みます。

勘違いしてはいけないのは、モーダルウィンドウ自体が問題ではないということです。
*「望んでもいないのに出てきてしまう」という条件付きの「モーダルウィンドウ」*こそが厄介で、こういうものが登場してしまうだけでUXが劇的に下がってしまいます。

特に望んでもいないのに出てきてしまうようなモーダルウィンドウは、例えば次のような場合に登場します。

ユーザーのマウスがウィンドウから離れてしまう時に登場するモーダルウィンドウ
ブログ記事を読み続けて数秒後に自動的に登場するモーダルウィンドウ
ブログ記事を読み続けてマウスをスクロールしたあと、一定の距離で自動的に登場するモーダルウィンドウ

要素をクリックしたときに登場するモーダルであれば話は別ですが、クリックもしていないのに出てくるようなモーダルはユーザーをイラつかせるだけです。
そこにどれだけユーザーの興味を惹くようなコンテンツが配置されていたとしても、かなり使いづらいホームページになってしまいます。

UXを改善したいと考えるのであれば、答えはもう明白です。
望まれていないのに登場するモーダルウィンドウは今すぐやめましょう。
特に、Googleは、ユーザーによる操作なしでモーダルを立ち上げるようなサイトは、今ではペナルティの対象としています。

ただし、たとえモーダルウィンドウを開くのにクリックで動くとしても、モーダルウィンドウを闇雲に使うのはよくありません。
*「クリックしたらモーダルウィンドウが開きます」*のような文言がないのであれば、結局はクリックして急にモーダルウィンドウが登場したらユーザーはびっくりしてしまいます。

2. パディングのないナビメニュー

どのホームページにもナビゲーションメニューがあり、ほとんどのリンクにはその周りにパディング(要素を囲む余白)があります。
しかし、時々パディングがクリックできず、とても小さなテキストにしかリンクが設定されていないがために、クリックしにくいメニューがあります。
これは、UXを著しく低下させてしまう原因となります。

このUX上の問題を確認するには、実際のUIをクリックして確認してみるしかありません。
パディングも含めてリンクとして設定されているかどうかにかかわらず、見た目は同じなので、実際にリンクテキストの周りをクリックしてみるしかありません。

一方で、この目立ちにくくも決定的に重要な部分に気づいているサイトもあります。
例えば、Googleの特設サイトをはじめとして、リンク周りのパディングにまでリンクを貼っているサイトも少なくありません。