f-traコンバージョンアップのためのUI改善情報をお届け。EFOやCTAのハウツーなど。千夏スマートフォンからウェブサイトを閲覧したりフォームを入力するときに、ユーザーはさまざまな要因によって制約を受けています。スマートフォンのEFOを考える時には、もちろんそのような制約を考慮しなくてはなりません。これまでこのブログにおいてもスマートフォンの制約や特徴に基づいたフォームの改善方法や注意点などを紹介してきましたが、今回はさまざまあるスマートフォンの制約をあらためて整理してみたいと思います。今回まとめたのは以下の13つの制約条件です。画面が小さいクリック精度が低い文字入力を間違えやすいクリックとスクロールの動作が僅差アニメーションにタイムラグがあるクリックの感触を感じにくいマウスオーバー動作がない右クリックの概念がない大きく、ユーザーの置かれた環境によるもの(1~5)と、デバイスの特徴によるもの(6~13)に分かれます。順番に解説していきます。フォーム入力に集中しにくいスマートフォンでフォームを使うユーザーの多くが、外出中であることが考えられます。移動時間や待ち時間、混雑した場所などでスマートフォンを使用している可能性もあり、室内で使用する場合と比べユーザーがフォーム入力に集中できる可能性は低いといえるのではないでしょうか。作業を中断する可能性があるスマートフォンでは、電話の着信やメッセージの受信通知、プッシュ通知など、その他アプリケーションがフォーム入力中のユーザーの作業を中断する可能性があります。太陽や光の反射がある日中外出しているユーザーなどは、太陽光の下でディスプレイを閲覧しています。太陽光などの強い光は画面に反射し、視認性を著しく下げてしまう可能性があります。一昔前に比べれば随分と改善されてきているとはいえ、まだまだエリアによってはモバイル回線の速度は低速でしょう。エリアとしては問題がない場合でも、通信速度制限を受けているデバイスではダウンロード速度が下がっていることがあります。混み合っている場所や移動中の車内、地下やエレベーターなどネットワークが弱い場所などではネットワークが不安定で、途中で途切れてしまう可能性があります。画面が小さいスマートフォンの画面は代表的ないiPhoneでも名刺ほどのサイズしかありません。フォーム入力中はソフトウェアキーボートが半分を占めてしまうためにさらに画面領域が狭まります。クリック精度が低いスマートフォンはタッチパネル式のデバイス、つまり指で操作する必要があります。1ピクセルを扱えるマウスポインタに比べ、指の厚みは10ミリ以上ありますので、どうしてもクリック精度が低下してしまいます。ボタンやリンク類が小さかったり隣接したりしていると、タップミスを引き起こす可能性があります。文字入力を間違いやすいスマートフォンで一般的な入力方式はフリック入力と呼ばれるものです。「あ」のキーを押すとあ段の文字候補が表示され、目的の文字の方向に指をスライドさせることで、文字を入力するというような方法です。このフリック入力、相当慣れている人であれば問題ないかもしれませんが、通常のキーボード操作に比べると文字の入力スピードは遅くなりがちですし、打ち間違える頻度も多くいように感じます。クリックとスクロールの動作が僅差PCでは、スクロールするときはマウスホイールかスクロールバーを利用し(ノートPCなどでは2本指でのスワイプなどもあります)、クリックするときはマウスのボタンを押下します。基本的にそれらの動作を誤ることは少ないと思います。スマートフォンでは、いずれも「画面を指で触り」、そのあと「離す」か「スライドさせる」かの違いしかありません。そのため、タップしようとしたのにスクロールする、あるいはその逆の現象が起こりやすくなります。アニメーションにタイムラグがあるデバイスやブラウザの種類にもよりますが、全体的な傾向として、スマートフォンではjavascriptなどのアニメーションの反応がもたつく印象を受けます。タップやスクロールイベントを取得するようなjavascriptの処理は、動作の瞬間ではなく、ワンテンポ送れて実行されることがあります。クリックの感触を感じにくいマウスでのクリックに比べ、指先の一部で画面に触れるという体験は、触感としても音としても反応を感じにいです。タップ時のフィードバックがないと、ただしくタップできているかユーザーは不安を感じます。マウスオーバー動作がないPCではマウスオーバー表現やマウスカーソルの形状変化によってクリック可能なエリアを判断できますが、スマートフォンにはそれがありません。右クリックの概念がないフォームにはあまり関係がないかもしれませんが、マウスにはある右クリックの概念がスマートフォンにはありません。タップの長押しやメニューボタンなどで右クリック的な用途を担っている場合が多いですが、スマートフォンに慣れていないユーザーには発見できない場合もありそうです。最後にいかがだったでしょうか。本日はスマートフォンでの(とくにフォームを使う場合の)制約について13の例を紹介いたしました。スマートフォンと取り巻く制約は意外と多いことがわかりますね。ブログで取り上げているものについては、記事へのリンクを付けておりますので、詳しい改善方法や構築のポイントについて参考にしていただければ幸いです。参考:http://baymard.com/blog/mobile-design-limitationsツイートこの記事が気に入ったらいいね!しようUI改善ブログの最新情報をお届けしますUI改善ブログを運営する株式会社エフ・コードではUI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。当ブログの更新情報は以下の各種アカウントから購読できます。Facebookを見るTwitterでフォローするFeedlyで購読するRSSを登録するメールマガジンを購読するブログの更新情報やセミナーのお知らせなど、UI改善に関する情報を1~2週間に1回お届けします。PRESSで執筆しましたEFOに関する特集記事を寄稿しています。Vol.89特集3:エントリーフォーム最適化入門2015年10月24日発売Web担当者Forumで連載中!公式Facebookページf-tra(エフトラ)について株式会社エフ・コードのマーケティングテクノロジーブランド「f-tra(エフトラ)」。現在は入力フォーム最適化(EFO)を簡単に実施できる「f-traEFO」と、ユーザーの行動喚起を促すためのUI検証する「f-traCTA」の2種類のUI改善ツールを提供しています。講演/取材/執筆についてEFOに関する講演、雑誌への寄稿、出版、取材などのご依頼は、弊社のお問合せフォームより承っております。お気軽にお問合せくださいませ。田中エフトラEFOサポートチームを統括する傍ら、EFOに関する講演、セミナー登壇、執筆などにも従事。Web担当者Forumにて連載を執筆しています。