すぐ対策したい!スマートフォン向けフォームでありがちなストレスを生む5つの要因

WEBサイトにおいて、スマートフォン向けページを用意するのが当たり前となってきましたが、
果たしてあなたのスマホフォームはユーザーを逃していないでしょうか?

今回は、スマホ特有のユーザーが感じるストレスとその改善ポイントを5つご紹介します。

ケース1:入力モードが入力形式に対応していない

あたりまえですが、フォームの「お名前」の項目には「かな」、や「メールアドレス」には「アルファベット」、「電話番号」には「数字」など、項目により必要とされる入力モードはさまざま。
以前、必ず押さえておきたい!iPhone、Androidのフォーム標準UIまとめのなかでもお伝えしましたが、
スマートフォンデバイスではあらかじめ設定をすることで任意の形式のソフトウェアキーボードを表示させることができます

当然ですが、あらかじめ必要な形式に対応しておけば、その分ユーザーの手間を大幅に減らすことができます
むしろ、いまどき対応させておくのは当たり前。かえって不便だなとユーザーに感じさせる前に急いで対策しましょう!

具体的に、iPhoneでは以下の入力形式向けのソフトウェアキーボードがあるようですので、参考にしてみてください。
※今回Androidやsafari以外のブラウザでのの検証は行なっていません。input typeの種類や対応状況については別途検索していただけると幸いです。

かな(text)

ソフトウェアキーボード:かな一番基本の形です。とくに指定していない時はこのソフトウェアキーボードが表示されます。

数字(number)

ソフトウェアキーボード:数字最初に数字のキーボードが表示されるようにできます。

電話(tel)

 
ソフトウェアキーボード:電話番号まるでこのまま電話をかけられるかのようなユーザーインターフェースとなっています。「+」「*」「#」などの電話ならではの記号が表示されているのも使いやすいポイントです。

パスワード(password)

ソフトウェアキーボード:パスワードパスワードに用いられる英字と数字の2種類のキーボードを切替られるようになっている(かなは表示されない)ほか、入力中の文字列が隠れるようになっているようです。

日時

時間に関する入力について、iPhoneでは多くのバリエーションに対応しているようです。

左から順に月の選択(month)、時間の選択(time)、日付の選択(date)、日時の選択(datetime)

ソフトウェアキーボード:月ソフトウェアキーボード:時間ソフトウェアキーボード:日時ソフトウェアキーボード:日付と時間

未対応ブラウザの場合はかえってユーザビリティを落とす可能性も

ブラウザや端末によっては一部の入力タイプには対応していない可能性があるため、主要ブラウザ/デバイスのテストは必ず行いましょう。

ケース2:フォームの左横に項目名が記載されている(表の形になっている)

PCフォームではかなり主流である表組み(テーブル)型のフォーム。
PCの大きなディスプレイでは画面幅を有効活用した使いやすいフォームであることが多いですが、スマートフォンではそうはいきません。

テーブル型フォーム事例
◀今回事例とさせていただきます住友商事さん(https://www.sumitomocorp.co.jp/info/unit/)のスマホ向けサイト。一見、文字サイズも大きく2カラムとはいえ見難い印象はありません。

必ず押さえておきたい!iPhone、Androidのフォーム標準UIまとめでもお伝えしましたが、
スマートフォン、なかでもiPhoneの標準UIではフォームのタップ時に勝手にズームインが起こります

フォーカス時に項目名が見えない
◀ズームインすると…

ご覧のとおり、入力中の項目名がほとんど見きれてしまいます
これでは、入力を進めていくうちに何の情報を入力しているのかわからなくなってしまう可能性は高いでしょう。その都度、横方向にスクロールして項目名を確認するのは大きなストレスとなります。


改善策その1:縦方向にパーツを配置する

この事態を防ぐために、スマートフォンの場合は縦方向に項目名を配置していくことをオススメします。

この場合、たとえ項目名が拡大されてしまっても項目名が隠れてわからなくなってしまうことはほとんどなくなります。
PCの場合はページが長くなりすぎないことがUI改善のセオリーではあるため、違和感を感じる方もいらっしゃるかもしれませんが、スマホの場合はPCに比べ、スクロールをストレスに感じるユーザーは少ないため、思い切って縦長のレイアウトにトライしてみてください。

改善策その2:ズームさせない

もう一つの手法として、ズームしないように設定することが考えられます。

とはいえ、2カラム表示にすることで必然的に文字が小さくなってしまいますので、あらかじめ文字を大きくしておくなどデザイン上での工夫は必須でしょう。

ケース3:入力欄が横並びになっている

こちらもケース2と同様、iPhoneでズームされる際に起きる問題です。

横並びの入力欄
このように横方向に並ぶ入力欄は名前や郵便番号のような情報を入力するフォームでたまに見かけます。

この例では、きちんと右横の「名」の項目名とフォームパーツの一部が見えているため、問題ないのですが、
項目名やフォームパーツの横幅によっては、完全に右側の入力欄が画面からはみ出てしまうケースが考えられます。
そうなれば、ユーザーが右横の入力欄の存在に気づかない可能性があります。

ですので、こちらも項目名と同様、できるだけ横並びの配置は避けるかズームを許可しない設定を行いましょう。

ケース4:リアルタイムエラーに気づかない

リアルタイムエラーの失敗例
スマートフォンデバイスの多くでは、次の項目に進むと勝手に画面が少しスクロールされるようになっています。
ですので、せっかくリアルタイムエラー表示の処理を行なっていても、エラー文言が見きれてしまう可能性があります。

こうした事態を防ぐため、エラー文言はフォームの下側に表示するのが良いでしょう。


ケース5:別タブ表示で迷子になる

スマートフォン向けのサイトは画面の面積も小さく、注意書きや備考などを表示させる際についつい別タブ表示を使用してしまうことが多いのではないでしょうか。

別タブ表示のアニメーション1別タブ表示のアニメーション2◀別タブ表示のアニメーション(iPhone safari)できるだけ視覚的にわかりやすいようにはなっていますが…

この別タブ表示、慣れていればとくに気になりませんが、実はかなりのユーザーを迷子にさせてしまいます
ブラウザバックで戻ろうにも、戻れず…結局フォームから離脱、というケースが考えられます。

できるだけ別タブ表示は使わないように

スマホのモーダルウィンドウ
ですので、極力別タブ表示のリンクは使わないようにしましょう。
とはいえ、普通のリンクにしてしまうとそれこそ即離脱。
代替としてモーダルウィンドウなどを活用するのが良いでしょう。

やむを得ない場合

とはいえ、モーダルで表示しきれないほどのボリュームがある等、どうしても別ページにリンクする必要がある場合もあると思います。
その際は、アイコンや注意書きなどで<このリンクは別タブで開きますよ>という旨をユーザーに理解してもらえやすいように工夫してください。

まとめ

いかがだったでしょうか。
どれもついつい陥りがちなパターンですが、ここでご紹介した改善方法はどのようなフォームでも対応できるうえに、使いやすさが格段にアップする改善点ばかりですので
この機会にしっかり対策しておきたいですね。

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

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

エフトラEFO機能アイコン

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

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

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

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

メールアドレスを入力

 購読解除はいつでも可能です