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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 長文記事のページ分割

ページ分割は、すぐに読みたいと思っているユーザーUXを著しく阻害する原因となります。

クリックしなければ次に進めないような記事は、「本来なくてもいい行動」を誘発しているので、場合によってはユーザーの反感を買うことにもなります。

デザイナーであれば、ユーザーが本文を読むのに集中できる環境を用意する必要があります。
できるだけ、無駄な行動や注意を散漫させるような阻害要因は排除すべきです。

読了するまでのページ数が多ければ多いほど、ユーザーは読了するまえに読むのを諦めて離脱するか、いらいらを募らせることになってしまいます。

4. 勝手に開かれるチャットウィンドウ

ホームページを閲覧していると、右側にカスタマーチャットを開くボタンが設置してあることがあります。
これ自体は問題ではありませんが、ボタンを押していないのにチャットウィンドウが開く場合があります。

先ほどご紹介したモーダルウィンドウと同じで、ユーザーが操作をしていないのに勝手に現れてしまうようなウィンドウはUXを著しく低下させてしまいます
必要なければ閉じればいいのですが、そうした操作すらユーザーが望んでいない操作となってしまいます。

チャットウィンドウを表示させる場合は、ユーザーが自ら開いた時、またはある条件下(ページを行ったり来たりして欲しい情報が見つかっていないような行動をとっている場合など)でのみ自動的に開くようにするなど、できる限り不快感を与えないよう配慮が必要です。

まとめ

今回ご紹介した4つのUI設計は多数のホームページに見られますが、早急に改善しなければユーザーが離れていってしまう可能性があります。

あなたが運営しているホームページブログは大丈夫でしょうか。
もう一度この記事のポイントを見直して、よりよいUXを提供できるホームページ制作を心がけましょう。