2015/08/26
ユーザーをいらだたせる定番のWEBデザイン５個とその改善策(スマホ向け多め)
WEBデザインとして定番として使われているものの中には、
実はユーザーにとって、ストレスの元になっているものがいくつかあることを最近知りましたので、
そういったユーザーをいらだたせている定番のWEBデザインについてご紹介させていただきます。
今回紹介するものはスマホの時に特に問題となるものが多いです。
PCでご覧の方でDEMOページをご覧になる方は、スマホからご覧になることをお勧めいたします。
↓このページのQRコード
予告のないポップアップ・別タブ表示(特にスマホ)
通常リンクと区別のない唐突な別タブでのリンクや、
ページ訪問時のポップアップでの情報掲載などは、
ユーザーが意図していない動作であることが多く、ユーザーをいらだたせる原因となります。
スマホではタブ操作がやや面倒な場合が多いため、別タブでのリンクの表示もストレスのもととなります。
改善策
- リンク先を別タブで表示するときは、リンクに別タブで開くことをアイコンなどで明示する。
- ページ訪問時の情報の載せ方は、突然表示するのではなく、
明示的なボタンを置くなど、ユーザーのタイミングで表示できるように工夫する。
スクロール操作による特殊な動作(パララックスなど; 主にPC)
パララックスのような、スクロールしたときの動作をブラウザ本来の動きとは違う動きにするデザインは、
ユーザーが本来行いたい操作を妨害するため、ユーザーをいらだたせる原因となります。
改善策
- スクロール操作は基本的にデバイス本来の動きに合わせていないとストレスになるため、パララックスなどの操作は避ける事が望ましい。
- どうしても演出としてパララックスなどの効果が必要とされる場合は、スクロール感がデバイス本来の動きに近づくように厳密な調整をおこなう。
ページ内のスクロール可能な箇所(主にスマホ)
ページの中に高さを固定してスクロールできるようにした場所があると、
ページ全体のスクロールを妨害することになるため、ユーザーをいらだたせてしまします。
特にスマホでは画面が小さいため、深刻になってくることが多いです。
改善策
- スマホでの表示のときは、SNSのタイムラインの表示は諦める(SNSページヘのリンクバナーなどに置き換える)。
- マップは画面の横幅いっぱいに表示せず、横幅は画面の1/2〜2/3程度に抑え、代わりにマップへのリンクを置く。
- 記事の表示領域を狭めておきたい場合は、折りたたみなどの方法を使う。
スライダー等の自動スライド
自動で動くスライダーは、製作者が見せたいと思うものを目立たせたり、
限られたスペースで見せたいコンテンツへ誘導する手段としてよく使われていますが、
これはユーザー自身が操作する場合には、操作を妨害したり、誤操作を招く原因となってしまうため、
実はユーザーにストレスを感じさせてしまいます。
改善策
- スライダーの操作はユーザーに託し、操作可能であることがわかりやすいデザインにすることで、ユーザーによる操作を促す。
スマホ表示でのHTMLのviewport設定による拡大縮小の制限(スマホの場合)
HTMLの<head>内で、以下のようにviewportの設定をすると、スマホでのユーザーによる拡大縮小の操作を制限することができます。
|
1 | <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'> |
この設定は製作者が予期しない動作を制限する目的で行われることが多いのですが、
ユーザーが画像や小さな文字を拡大して確認するという操作を妨げますので、
場合によってはユーザーに不便な思いをさせてしまうことになります。
改善策
- viewportによる拡大縮小の制限をしない
|
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
まとめ (ユーザーをいらだたせるWEBデザインの共通点と新たなWEBデザインを考える場合のポイント)
ユーザーをいらだたせてしまうWEBデザインの共通点は、
ユーザーが意図していない動作をさせたり、ユーザーの操作を妨害してしまうという点です。
製作者がどうしてもユーザーに見せたいという思いが強すぎると、
ついついユーザーの使い勝手を忘れて、
ユーザーにとっては不便なデザインとなってしまう場合があります。
せっかく見せたいと思って工夫をこらしても、
それがユーザーのストレスになってしまう場合は、
それらはユーザーにとって「邪魔なもの」として捉えられてしまうことになってしまいます。
「見せたい」の前に「使いやすい」を前提にすることが、
新たなWEBデザインを考えだす上で必要なことだと感じました。
参考図書
「デザイニングWebアクセシビリティ – アクセシブルな設計やコンテンツ制作のアプローチ」 2015.7.27 太田良典(著), 伊原力也(著)
Author Profile
SHARE
