本日は海外記事より、EFOに役立つ情報を紹介させていただきます。
本日は、Eメールマーケティングの専用ツールを提供するCampaign Monitor社によるブログで紹介されていた、モバイルデバイスでのニュースレター登録フォームの使い勝手を改善するための手法6つを紹介させていただきます。
スマートフォンでメールを閲覧する人は増えており、2013年4~11月にエクスペリアンジャパン社が実施した「開封エンゲージメントサービス調査」によると、HTMLメールの65.5%はモバイルで閲覧されていたそうです。
もはやメールマガジンはPC向けクライアントだけのものではなく、モバイルデバイスで登録を行うシーンというのもこれからますます増えてくるのかもしれません。
そんなメルマガ登録フォーム、スマートフォンで利用される場合はどのような点に配慮すれば良いのでしょうか。

スマホでのメルマガ登録フォームの6つのポイント

紹介されていたポイント7点は下記のとおりです。

それぞれ、詳しく紹介していきたいと思います。

1.ラベルをトップに揃える

入力項目の左側にラベルが配置されていると、フォームのフィールドを選択時に、ズームによってラベルが見きれてしまいます。
Zoom
それを防ぐための方法として、下記の2点が挙げられています。

  • ラベルをトップ(項目上部)に揃える
  • プレースホルダーにラベルを表示

ラベルをトップに揃えるというと少しわかりにくいですが、垂直方向にラベルと項目を配置することを意味しています。
またプレースホルダーの場合はページのスペースの節約にはなりますが、入力を始めるとラベルが隠されてしまうためおすすめできません。
記事においても前者の方法が推奨されています。

2.input type=”email”を使う

次はこのブログでも何度か登場しているソフトウェアキーボードの話題です。
メルマガ登録フォームということで、もちろんここではメールアドレスを入力することになると思います。
入力項目フォーカス時に表示するソフトウェアキーボードには、メールアドレス向けのものがあり、これは項目ごとに簡単に設定することができます。必ず、設定しておくようにしましょう。

「email」指定時のソフトウェアキーボード
「email」指定時のソフトウェアキーボード

3.幅を狭くする

画面の小さいモバイルデバイスで、PCを前提に作られた幅広の画面を、拡大して表示するのは非常に困難な作業です。
メディアクエリを追加しレスポンシブなデザインを用意するなど、スマートフォンの横幅に対応したデザインを用意することで、フォームにかぎらずサイト閲覧すべてにおいてユーザビリティを向上させることができます。

4.ライトボックスを使わない

ライトボックスとは、モーダル・ダイアログを実装するためのJavaScriptアプリケーションのことですが、ここではモーダルウィンドウ形式のUI全般を指していると考えられます。
皆様も下記のようなUIを一度はご覧になったことがあるのではないでしょうか。

ライトボックスのサンプル
ライトボックスのサンプル

このライトボックスは非常に便利で、項目数が少ないフォームなどにもよく利用されているユーザーインターフェースです。
しかし、スマートフォンのようなタッチデバイスでは、動作のもたつき、ズーム時の表示位置のずれ、スクロールの動きなどから快適性が落ちる場合があります。
誤って背景をタップしてしまいウィンドウを閉じてしまうケースも、タッチデバイスゆえに発生しやすいようにも思えます。
筆者は必ずモバイルデバイス上でライトボックスの動作をテストするようにと忠告しています。

5.選択式項目に注意する

筆者は2点の注意点を紹介しています。
まず一つ目は、チェックボックスは折り返すこと無く、チェック項目それぞれが単一の列になるよう配置するべきという点。
次に、単一選択の場面ではラジオボタンよりも画面領域を必要としないセレクトボックスを使用すると良いという点です。

6.ズームさせない

モバイルデバイスでは、標準ではズームが可能となっていますが、誤って不必要なズームを行ってしまうことにより、フォームのほとんどを見失うケースがあると筆者は述べます。
画面横幅を最適化する点とあわせて、ズームはオフに設定しておくのが吉です。

最後に

いかがだったでしょうか。
本日は海外記事より「スマートフォンでのメルマガ登録」のポイント6つをご紹介しました。
記事のテーマは「メルマガ登録フォーム」となっていましたが、メルマガ登録以外の用途のフォームにも応用可能なポイントばかりですね。
個人的には「4.ライトボックスを使わない」はメルマガ登録のように項目の少ないフォームに特有のポイントだと思います。
モーダルウィンドウ型のUIはPC向けページではフォームにも採り入れがちですが、スマートフォンではむやみに使わないように注意したいものです。
※その他、スマートフォンのEFOティップスについては下記で詳しく紹介していますので参考にしてみてください。
【保存版】スマートフォンEFO(フォーム改善)のための15カ条
https://f-tra.jp/blog/smartphone/4832

また、下記の参考記事(英文)もぜひ確認してみてください。
参考記事:Improving the usability of email subscribe forms on mobile devices