実は使いにくいかも?スマートフォンで要注意な定番UI・6選

main

PC向けウェブサイトではごくあたりまえに使われている便利なユーザーインタフェースが、スマートフォンで閲覧時に思わぬストレスを生んでいる可能性があります。
本日はEFOにも関係のありそうな6つの定番UIを、モバイルでのユーザビリティの観点から検証していきます。

要注意UIその1:モーダルウィンドウ

モーダルウィンドウの例

モーダルウィンドウの例

モーダルウィンドウとは、画面上にを浮かび上がるように表示する子ウィンドウのことで、一般には画面がグレー(またはホワイト)アウトし、その上にコンテンツが重ねあわさるようなユーザーインターフェース(オーバーレイ表示といいます)となっています。
一度開いたダイアログボックスをユーザーが閉じるまでは、他の操作をできないようになっています。

このモーダルウィンドウ、表示するまで場所を取ることがないため、ちょっとしたヘルプやメッセージを表示するのに大活躍しますが、スマートフォンで用いる場合には少し注意が必要です。

誤って閉じてしまう場合が!

一般的なモーダルウィンドウは、コンテンツ内の「☓」マークや背景をタップすることで閉じるようになっています。つまり、スマートフォンの小さな画面では、誤って背景をタップしてしまう可能性が高くなります

とくにフォーム要素をモーダルウィンドウで表示する場合は要注意です。
入力作業中に誤って画面を閉じてしまいストレスを感じる可能性が高いばかりか、入力内容が保持されていないとするとそのまま離脱する可能性も高いと言えるでしょう。
スクロールを伴うような長いテキストコンテンツには注意が必要です。

読むだけならOK

純粋に補足やヘルプなど比較的短めの文章を表示するだけであれば、問題ないでしょう。

モーダルウィンドウの例(スマートフォンフォーム)

補足を表示するモーダルウィンドウの例(スマートフォンフォーム)

要注意UIその2:折りたたみ表示

折りたたみ表示は、モーダルウィンドウと同様に表示するまで場所をとることのないUIであるためで、スマートフォンにおいてよく使われます。
コンテンツを浮かび上がらせるモーダルに対し、折りたたみはその名の通り、インラインのコンテンツを畳んで隠しておくイメージです。

展開時の動きに注意

必要なときだけ展開すれば良い折りたたみ表示は、一見害がなさそうですが、展開時の動きには注意が必要です、

もしも展開したことがわかりにくい場合、コンテンツが展開したことにユーザーが気づかずに戸惑いを与えてしまう可能性はあります

コンテンツの展開時に滑り落ちるようなアニメーションを加えることで、直感的に折りたたみコンテンツの存在に気がつくことができます。

アイコンなどのデザインもユーゼビリティ向上のカギに

また、アニメーションのほかにも、タップ要素のデザインも折りたたみのわかりやすさのカギとなります。

折りたたみ表示のデザイン

折りたたみ表示のデザイン例

例えばただのテキストリンクで折りたたみ表示を表現するよりは、下向きのカーソルなどコンテンツが下に展開されることを連想させるアイコンを用いるとよいでしょう。
さらにできればしっかり余白を持たせてタップアリアを明確に区別するとより親切です。

要注意UIその3:ページTOPへのスクロール

ページトップに戻るボタン

ページトップに戻るボタン

ページが縦に長めのサイトであれば必ずといっていいほど実装されている「ページTOPに戻る」ボタンは、スクロールをしなくてもページの一番上まで戻ることができる、便利なユーザーインターフェースのひとつです。

間違って押下すると非常にストレス

しかしこのスクロールボタン、当然ですが誤って押下してしまうと非常にストレスです。
ただでさえ画面が小さく誤ってタップしてしまう可能性が高いことに加え、ボタンはページのどの位置にいても使用できるよう画面下部などに固定表示するケースが非常に多くなっており、言い換えると常にタップしやすい位置についてくるボタンとなっているのです。

さらに、スマートフォンのページはその多くが縦長となっていますので、誤ってスクロールしてしまうと、ページが縦にがなければ長いほど元の位置に戻すのも一苦労。さらにユーザーをイライラさせる結果を招いてしまいます。

下部にのみ表示すればOK!

もうおわかりですね。
スマートフォンにおいては、ページTOPに移動するためのリンクは、スクロールに応じて追随する形ではなく段落やページの下部などに設置するようにしましょう。

要注意UIその4:固定表示

上記で取り上げたほかにも、スクロールしても画面の一定の場所にコンテンツがつねに表示される「固定表示」は、画面の小さいスマートフォンではストレスを産みがちです。

例えば単純な表示領域の侵食や、固定表示のままソフトウェアキーボードを起動した際に表示が崩れたりということがストレスにつながります。

メニューを固定表示したりるすると、さらに表示領域は狭くなる

メニューを固定表示したりるすると、さらに表示領域は狭くなる

フォーカスした瞬間の位置のまま、一緒にスクロールされる

フォーカスした瞬間の位置のまま、一緒にスクロールされる

※詳しくは下記の記事でも取り上げています

実はストレスだった!スマートフォンでの固定表示がユーザビリティに与える悪影響
https://f-tra.jp/blog/smartphone/4580

要注意UIその5:画面内のスクロール

フォームの一部の領域にたくさんのテキストを収める

個人情報保護方針への同意

画面の一部の領域に多くのコンテンツを収めるために、スクロールバーを設ける場合があります。
フォームではよく「利用規約」や「個人情報保護方針」などの確認をフォーム内に含ませる場合によく使われます。

スクロール時に非常にストレス!

PCではさほど気になることがありませんが、スマートフォンの小さい画面では、このスクロールエリアが画面の大部分を占めてしまう可能性が。
そうするとページ全体をスクロールしようとしているのに、部分的なスクロールしかできない、という事態になりかねません。

なるべく折りたたみやモーダルで対応

スマートフォンでは、画面内の固定表示をできるだけ使わずに、利用規約などの表示は折りたたみやモーダルウィンドウを用いて表示するほうが余計なストレスを生むことがありません。

とはいえやむを得ない場合などは、左右の余白をしっかり確保してスクロールを邪魔することのないように気をつけて画面設計したいですね。

要注意UIその6:別窓表示

最後はUIというよりはUX(ユーザー体験)の領域になってきますが、サイトで良く使われる別窓表示について触れておきたいと思います。

別窓(タブ)表示はフォーム内からフォーム外の個人情報の取り扱いや利用規約のページへの参照リンクとして用いられます。
別窓表示にしておくことで、規約を見に行ったユーザーがフォームから離脱することを防いでくれる効果があります。

迷子になる可能性

別タブ表示のアニメーション2

しかし、スマートフォンにおいては別ダブ表示になったことがわかりにくい場合も多く、実際にリンクが別窓表示になっていたことで迷子になってしまうユーザーもいました。
極力別窓表示のリンクは用いずに、モーダルウィンドウや折りたたみ表示を利用するようにしましょう。

最後に

いかがだったでしょうか。
本日は、スマートフォンフォームで注意するべき定番UIを6種類、ご紹介しました。

あなたのフォームでは、定番UIでスマートフォンでのユーザービリティを落としてしまっていないでしょうか?
ぜひ、気をつけてみてください。

main

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です
  1. ピンバック: 実は使いにくいかも?スマートフォンで要注意な定番UI・6選I make "I"