ユーザーがWebサイトに感じた不満トップ10

トレンドの移り変わりが速いWebデザインの世界では、ユーザーが抱く不満も日々変化しています。

今回ご紹介するのは、最新の不満事情。避けるべきデザインを把握しましょう。

User Frustrations in 2020: please avoid them if possible. https://t.co/HwqZI4RVyb pic.twitter.com/2TTCAlQR39

— Smashing Magazine 🇺🇦 🏳️‍🌈 (@smashingmag) July 21, 2020

本記事では、Smashing Magazineが発表した「User Frustrations In 2020」をベースに、ユーザーがサイトに抱いた不満と、その解消方法について解説します。

1. 文字が小さい

Webサイトの重要な要素であるテキスト。文字の読みやすさはUIの必須条件です。

文字の大きさに迷ったら、以下のルールを参考にしましょう。

• 文字サイズは最低16ピクセルにする
• 画面が大きい場合は文字も大きくする
• 行の高さは1.5em〜1.6emが目安
• かならず実際のデバイスでデザインを確認する

2. クリックする対象が小さい

リンクやボタンが小さければ小さいほど、クリックやタップのミスが生じやすくなります。

クリックできるギリギリの大きさではなく、ユーザーがクリックしやすい大きさを心がけましょう。

▲右側のようなボタンはNG（出典：Apple）

以下の2点を守れば、適切な大きさにできるはずです。

• 指で押せる大きさである、9mm四方程度を目安にする。マテリアルデザインではリンク／ボタンの最小サイズは48px四方
• ボタンのまわりに余白を作る（Microsoftはボタン間に10mmの余白を作ることを推奨）

▲クリック可能範囲は9mm、表示するボタンの大きさはクリック可能範囲の60%に設定。隣のボタンとクリック可能範囲のあいだに2mmの余白を儲ける（出典：Microsoft）

3. コンテンツが瞬間移動する

コンテンツがいきなり動いて、意図せず広告をクリックしてしまった経験は誰にでもあるはず。

こうした動作は、動的コンテンツの読み込みによって引き起こされます。

▲動的コンテンツに押されて、その下のコンテンツが瞬間移動してしまう（出典：CSS-Tricks）

動的コンテンツの幅や高さを測って、CSSでコンテナの最小値として設定しておくと、こうした問題を防げます。

4. 入力したデータが消える

時間をかけてフォームを入力し、送信ボタンを押したのに、エラーで入力した内容が消えてしまったら不満に思いますよね。

インタラクティブデザインにおいて、ユーザーの情報を大切に扱うことはとても重要です。

エラーを避けるために、localStorageとsessionStorageを活用しましょう。ユーザーが誤ってページを更新してしまっても、データを保持できます。

window.onload = function() {

    var var1 = localStorage.getItem(var1);
    if (var1 !== null) document.getElemenyById("var1").value = var1;

}

5. 「戻る」ボタンが反応しない

ヤコブ・ニールセン氏提唱の『ユーザビリティ10原則』のひとつである「ユーザーにコントロールと自由を与えること」。Webデザイナーは、ユーザーがいつでもキャンセルできるよう「戻る」ボタンを用意しておく必要があります。

記入してもらったデータが意図せず失われないようにする場合は、ポップアップなどで警告文を出し「戻る」ボタンを押すとデータが消えることを知らせましょう。

window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) { // notify about potential data loss here };

6. スクロールできない

スクロールしづらい、またはスクロールできないデザインは「スクロールハイジャック」とも呼ばれ、ユーザビリティを大きく損なうことで知られています。

スクロールすると画像が切り替わる1ページスクロールのようなデザインは、イラストやアニメーションが強調され魅力的に思えるかもしれません。しかし、イラストやアニメーションを美しく見せることが、Webデザインの本質ではありませんよね。

もしこうしたデザインを採用したいのであれば、ユーザーがストレスに感じないレイアウトを意識しましょう。

TumblrのWebデザインはスクロールハイジャックですが、コンテンツがスライド形式でデザインされているため、ユーザーはスライドを切り替えるような感覚でストレスなく操作できます。

▲スクロールハイジャックをうまく活用しているTumblrの例（出典：Tumblr）

7. アカウント登録を強制される

アカウント登録を強制するようなデザインは、ユーザーの自由を奪い不満を感じさせます。

▲記事を読もうとするユーザーにアカウント登録を求めるニューヨーク・タイムズのWebサイト（出典：ニューヨーク・タイムズ）

ユーザーが満足にWebサイトを閲覧できていない状況で、アカウント登録をさせようとするのは避けましょう。

たとえばメディアサイトの場合、アカウントを作らなくても読める記事をいくつか提供し、特別な記事を閲覧したユーザーにだけアカウントの作成を促す方法が効果的です。

8. 音声付きの動画が自動再生される

Webサイトにアクセスした際に音声付きの動画が自動再生されると、多くのユーザーはすぐに離脱します。離脱せずに残ったユーザーも、まず動画や音声を止めようとするでしょう。

ユーザーに動画を見せたい場合は、音声はミュートにするのがオススメ。

▲Facebookでは動画が自動再生されるものの、音声はミュートになっている

9. プッシュ通知の許可を求められる

アプリではユーザーにとって便利なプッシュ通知。しかし、Webではそうとも言えません。

Webサイトでプッシュ通知の許可を求めても、ほとんどのユーザーは無関心。しかも、こうしたポップアップはWebサイトを閲覧してくれているユーザーの気をそらしてしまいます。

Webサイトでプッシュ通知を使うのは、ユーザーにとってメリットがある場合のみにしましょう。

▲プッシュ通知の許可を求める画面（出典：Mozilla）

10. Cookieの使用許可を求められる

プッシュ通知のポップアップと同じく、Cookieの使用許可もユーザーの気を散らすもの。

Cookieの使用許可を求める方法は、Webサイトによって異なります。同意するまでユーザーを追いかけ続ける場合もあれば、クッキーを一部許可するといった選択肢をユーザーに与える場合も。

情報の重要度とユーザビリティを天秤にかけ、ポップアップを出すタイミングを考えましょう。

▲必要最低限のCookieのみを使用することを通知（出典：Cookiebot）

おわりに

トレンドのデザインや、優れたデザインだけでなく、ユーザーが抱えている不満を把握しておくことも大切です。

最新の不満事情を踏まえて、ユーザー目線の「良い」デザインを目指しましょう。

（執筆：Nick Babich　翻訳：Asuka Nakajima　編集：イズミカズキ　提供元：UX Planet ）