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

User Frustration on Web
DESIGNER

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

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

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

1. 文字が小さい

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

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

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

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

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

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

User Frustration on Web

▲右側のようなボタンはNG(出典:Apple

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

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

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

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

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

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

User Frustration on Web

▲動的コンテンツに押されて、その下のコンテンツが瞬間移動してしまう(出典: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デザインはスクロールハイジャックですが、コンテンツがスライド形式でデザインされているため、ユーザーはスライドを切り替えるような感覚でストレスなく操作できます。

User Frustration on Web

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

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

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

User Frustration on Web

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

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

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

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

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

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

User Frustration on Web

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

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

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

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

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

User Frustration on Web

▲プッシュ通知の許可を求める画面(出典:Mozilla

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

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

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

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

User Frustration on Web

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

おわりに

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

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

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

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship