Design デザイン・UI

 
スマホデザイン・UI

スマホサイトを使いにくくしているUI【5選】

スマホサイトの使いにくいUI
日常的にスマホサイトを使っていて、使いづらいなと感じることありませんか?

良かれと思って実装したものが、実際はユーザビリティを低下させているものになっていることが多々あります。
そこで今回は、スマホサイトを使いにくくしているUIを5つ紹介したいと思います。

固定表示されるメニュー、ページトップへのリンク

固定表示コンテンツ
スマホサイト、アプリでよく見られる、画面の上部に固定されているメニューです。
ページの下までスクロールしても、すぐメニューが開ける点では便利ですが、画面が小さいユーザーにとっては表示される範囲が狭まり、何度もスクロールをすることになるため、使いづらいものとなってしまいます。

また、ページトップへのリンクについても同様で、画面右下に配置されることがよくありますが、誤タップにより意図せずページトップに戻ってしまうことがあります。
途中まで読んでいたのに、急にページトップに戻ってしまったら、ユーザーがストレスを感じ離脱してしまうことも考えられますよね。

随所に「ページトップへ戻る」リンクを設置することで、このような事態は回避され、画面が制限されることも避けることができます。

コンテンツ内のスクロール枠

スクロール枠
複数のリンクを収めるためにスクロール枠を用いることがありますが、こちらも注意しないと使いにくいサイトを印象付ける要素になります。
ページの下へスクロールをしている途中で、スクロール枠内に当たってしまうと枠内のスクロールが終わらない限り、ページ下へのスクロールができなくなってしまいます。

また、android2系のOSでは、overflow:scroll;が対応していないため、スクロール枠自体が機能しません。

※Javascriptで無理やり動かす方法はあります。

どうしてもスクロール枠を置きたい場合は、枠の左右にタップできる領域(15px程度)を設けるなど、ページの下へスクロールできる道を作る必要があります。

複数アコーディオン

複数アコーディオン
ページを長くしないために、複数のアコーディオンを用いてコンテンツを格納することがあります。例としては、Q&Aサイトで質問をタップすると答えが表示されるようなページです。

もし、タップした項目以外は閉じるなどの処理を加えている場合、タップした項目より上の項目が開いていると、開いていたコンテンツが閉じ、強制的に上方向へスクロールされてしまいます。その結果、ユーザーがタップした項目を見失ってしまい、探す手間が増えてしまい使いにくさへと繋がってしまいます。

アコーディオンは大カテゴリーのみに使用し、その他はページ内リンクで補完するなどして表示方法を工夫しましょう。

タップ領域が小さく近い

タップ領域が小さい・近い
ボタンのタップ領域が極端に小さく、リンクが隣接している場合、誤タップを誘発してしまいます。

iOS、androidのガイドラインでは横幅44pxが最適なボタンサイズといわれていますので、それ以下のサイズは避けるようにしましょう。

5.フォームの入力項目

入力フォーム

スマホは文字入力に長けたデバイスではありません。フォームでは入力項目が多い程ユーザーにストレスを与えてしまいます。
氏名や住所など手入力しなくてはいけない項目以外は、選択式や自動入力にするなどしてストレス軽減に努めましょう。

最後に

明確な訪問目的がない限り、使いにくいと感じたユーザーはすぐに離脱してしまいます。スマホサイトのUIはまだ確立されたものではありませんが、リンクの回りに余白を設けたり、ボタンの大きさを調整したりすることで使い勝手の良さは改善されます。
これを機に、自身のスマホサイトを見直してみてはいかがでしょうか。

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事