スマートフォンは電話やメールといったコミュニケーションだけでなく、いつでも「買い物」ができる生活に欠かせない存在です。

Forresterの調査によると、アメリカにおける2018年のスマートフォンによる購買額は1兆ドルにものぼるそう。

今回は購買促進に役立つ、モバイル向けフォームデザインのヒントを5つご紹介します。

1. モバイルUIとデスクトップUIの違いを理解する

モバイルユーザーに向けたフォームをデザインする前に、まずはモバイルUIとデスクトップUIの違いを理解する必要があります。以下の点に注意しましょう。

ナビゲーション

モバイルデバイスにおいて、ユーザーはマウスではなく指やタッチペンによるタップ動作を行います。

そこで必要になるのが、タップ動作に適したナビゲーションです。

モバイルに最適化されたナビゲーションについては、以下の記事が参考になります。

アスペクト比

スマートフォンユーザーの80%〜90%がスマートフォンを縦に持っているため、必然的に縦スクロールが多用されます。縦画面で見やすいUIデザインを考えましょう。

またモバイルデバイスは小さめなので、スクロールなしで購買フォーム全体を表示することはほぼ不可能です。スクロールした時のユーザビリティを考慮するのも大切です。

フォントサイズ

モバイルデバイスの場合、本文に使うフォントの人気サイズは16pxとされています。16pxを基準にフォントサイズを検討するのがおすすめです。

フォントに関する調査をおこなっているマサチューセッツ工科大学は、以下の2点を守ることを推奨しています。

  • 10px以下のフォントを避ける
  • 文字幅を標準にする
How To Design Mobile Forms

▲出典:nngroup

2. ユーザーを意識する

デザイナーが好きなデザインが、かならずしもユーザーに好かれるとは限りません。

ユーザーフレンドリーなフォームをデザインするためには、デバイスの大きさを考慮して、ユーザーの環境を理解する必要があります。

シングルカラムレイアウト

モバイルデバイスで行う購買プロセスでは、マルチカラムレイアウトは不向きであることが多いです。

Baymard Instituteがおこなった調査によると、マルチカラムレイアウトを採用した購買プロセスでは、ユーザーが必要なフィールドをスキップしてしまったり、間違った情報を入力してしまったりする場合があるそう。

そこでおすすめなのがシングルカラムレイアウトの採用です。モバイルデバイスでの閲覧を第一に考えたシンプルなレイアウトなので、モバイルデバイスが主流の現代にはぴったりといえます。間違いが起きづらく、ユーザーが購買プロセスを完了しやすくなります。

How To Design Mobile Forms

▲出典:Baymard Institute

マルチステップフォーム

ユーザーに入力してもらう情報が多い場合は、購買フォームをステップごとに分割しましょう。

マルチステップフォームは、ユーザーがプロセスを理解することを助けるだけでなく、入力した情報の整理にも役立ちます。

またプログレスバーを配置して、進行状況をユーザーに伝えることもお忘れなく。

How To Design Mobile Forms

▲出典:Dribbble

フォームは最小限に

マルチステップフォームをおすすめする一方で、フォームは最小限にしなければなりません。多くの情報をユーザーに求めすぎると、ユーザーは途中でフォームの入力を放棄してしまいます。

プロセスはできるだけシンプルにして、重要なフィールドに絞ることを意識しましょう。

3. オートメーションを取り入れる

オートメーションは、面倒なフォームの入力を助けてくれる自動入力システムです。

住所や電話番号などの情報が自動的に入力されると、ユーザーは手間が省けて嬉しいですよね。

オートコンプリートとオートフィル

郵便番号を入力すれば住所を自動で埋めてくれるシステムは、導入もしやすくおすすめです。

購買フォームの途中放棄が防げます。

オートコレクト

都市名や住所などの誤入力が、自動で修正されるようなシステムもおすすめです。

How To Design Mobile Forms

▲出典:Google

自動検出

位置情報を使用して国を識別したり、クレジットカード番号の最初の4桁で種類を識別するのが、この自動検出にあたります。

プライバシーに関わる位置情報を使う場合は、必ずユーザーに許可を求めるようにしましょう。

4. ドロップダウンは使わない

小さな画面にドロップダウンは不向きです。スライダーやステッパーなどで代用しましょう。

スライダー

選択範囲が広い場合や、数値の範囲が大きい場合は、スライダーの使用をおすすめします。

How To Design Mobile Forms

▲出典:Smashing Magazine

ステッパー

ステッパーの魅力は、細かな数の調整がしやすい点です。

ホテルや航空券の予約人数など、ステッパーは値の小さい入力をするのにおすすめ。

How To Design Mobile Forms

▲出典:Lukew

セグメント

飛行機の座席の位置(通路側、中央、窓側)など、限られた選択肢を提示する場合には、セグメントがおすすめです。

How To Design Mobile Forms

▲出典:Lukew

5. ラベルで入力を手助けする

クレジットカードや電話番号の入力フィールドは、ユーザーが入力しやすい形式を探りましょう。ユーザーが視覚的に理解できる、入力間違いを防げるものが望ましいです。

たとえば以下のように、電話番号の入力欄にに「区切り記号」を入れるのも良いでしょう。

How To Design Mobile Forms

▲出典:Baymard

Googleのプロダクトディレクターであるルーク・ウォロブスキー氏は、「プレースホルダーテキストは、フィールドにすでに入力されているように見えるため、避けるべきだ」と述べています。

フィールドラベル

入力する内容を説明してくれるフィールドラベルは、UIデザインにおいて重要な存在です。モバイルフォームにラベルを配置する方法はさまざまですが、まず考えるべきは「どこに配置するか」です。

たとえばCSSやJavaScriptで作成できる、フローティングラベル。はじめはテキストボックスにインラインラベルとして表示されますが、ユーザーが入力を開始するとラベルが上部に移動されます。

この仕組みにより、ユーザーは入力している項目を確認しながらフォームを埋められるため、混乱を防げます。

おまけ:CTAボタンに注目

すべてのコンバージョンは、デバイスに関係なくCTAボタンに依存しています。

CTAボタンはユーザーに「次のステップでなにをすべきか、そしてなにが起こるか」という情報を与えてくれます。

CTAボタンの分かりやすさを向上させるために、以下の点に気を配ってみましょう。

  • 行動を促すアクションワードを使用する
  • CTAボタンをクリックするメリットを明確に説明する
How To Design Mobile Forms

▲出典:Dribbble

CTAボタンについて、詳しくは以下の記事をご覧ください。

おわりに

購買フォームのデザインはCVを大きく左右します。しかしモバイルは画面が小さいぶん、購買フォームの最適化プロセスは複雑です。

だからこそ今回ご紹介したヒントが参考になるはず。ユーザーフレンドリーなモバイルフォームのデザインにぜひこの記事を役立ててみてください。

(執筆:Pete McCain 翻訳:Nakajima Asuka 編集:Sansui Riho)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ