【漫画】フリーランスは“103万円の壁”にどう向き合うか?
- お金
- フリーランス/個人事業主
- 漫画
スマートフォンは電話やメールといったコミュニケーションだけでなく、いつでも「買い物」ができる生活に欠かせない存在です。
Forresterの調査によると、アメリカにおける2018年のスマートフォンによる購買額は1兆ドルにものぼるそう。
今回は購買促進に役立つ、スマホ向けフォームデザインで注意すべき5つのポイントご紹介します。
目次
スマホユーザーに向けたフォームをデザインする前に、まずはスマホUIとデスクトップUIの違いを理解する必要があります。以下の点に注意しましょう。
スマホなどのモバイルデバイスにおいて、ユーザーはマウスではなく指やタッチペンによるタップ動作を行います。
そこで必要になるのが、タップ動作に適したナビゲーションです。
スマホに最適化されたナビゲーションについては、以下の記事が参考になります。
モバイルアプリのナビゲーションをデザインするときに想像して欲しい3つのこと
Workship MAGAZINE
スマートフォンユーザーの80%〜90%がスマートフォンを縦に持っているため、必然的に縦スクロールが多用されます。縦画面で見やすいUIデザインを考えましょう。
またスマホは画面が小さめなので、スクロールなしで購買フォーム全体を表示することはほぼ不可能です。スクロールした時のユーザビリティを考慮するのも大切です。
スマホの場合、本文に使うフォントの人気サイズは16pxとされています。16pxを基準にフォントサイズを検討するのがおすすめです。
フォントに関する調査をおこなっているマサチューセッツ工科大学は、以下の2点を守ることを推奨しています。
デザイナーが好きなデザインが、かならずしもユーザーに好かれるとは限りません。
ユーザーフレンドリーなフォームをデザインするためには、デバイスの大きさを考慮して、ユーザーの環境を理解する必要があります。
スマホで行う購買プロセスでは、マルチカラムレイアウトは不向きであることが多いです。
Baymard Instituteがおこなった調査によると、マルチカラムレイアウトを採用した購買プロセスでは、ユーザーが必要なフィールドをスキップしてしまったり、間違った情報を入力してしまったりする場合があるそう。
そこでおすすめなのがシングルカラムレイアウトの採用です。スマホでの閲覧を第一に考えたシンプルなレイアウトなので、スマホが主流の現代にはぴったりといえます。間違いが起きづらく、ユーザーが購買プロセスを完了しやすくなります。
ユーザーに入力してもらう情報が多い場合は、購買フォームをステップごとに分割しましょう。
マルチステップフォームは、ユーザーがプロセスを理解することを助けるだけでなく、入力した情報の整理にも役立ちます。
またプログレスバーを配置して、進行状況をユーザーに伝えることもお忘れなく。
マルチステップフォームをおすすめする一方で、フォームは最小限にしなければなりません。多くの情報をユーザーに求めすぎると、ユーザーは途中でフォームの入力を放棄してしまいます。
プロセスはできるだけシンプルにして、重要なフィールドに絞ることを意識しましょう。
オートメーションは、面倒なフォームの入力を助けてくれる自動入力システムです。
住所や電話番号などの情報が自動的に入力されると、ユーザーは手間が省けて嬉しいですよね。
郵便番号を入力すれば住所を自動で埋めてくれるシステムは、導入もしやすくおすすめです。
購買フォームの途中放棄が防げます。
都市名や住所などの誤入力が、自動で修正されるようなシステムもおすすめです。
位置情報を使用して国を識別したり、クレジットカード番号の最初の4桁で種類を識別するのが、この自動検出にあたります。
プライバシーに関わる位置情報を使う場合は、必ずユーザーに許可を求めるようにしましょう。
小さな画面にドロップダウンは不向きです。スライダーやステッパーなどで代用しましょう。
選択範囲が広い場合や、数値の範囲が大きい場合は、スライダーの使用をおすすめします。
ステッパーの魅力は、細かな数の調整がしやすい点です。
ホテルや航空券の予約人数など、ステッパーは値の小さい入力をするのにおすすめ。
飛行機の座席の位置(通路側、中央、窓側)など、限られた選択肢を提示する場合には、セグメントがおすすめです。
クレジットカードや電話番号の入力フィールドは、ユーザーが入力しやすい形式を探りましょう。ユーザーが視覚的に理解できる、入力間違いを防げるものが望ましいです。
たとえば以下のように、電話番号の入力欄にに「区切り記号」を入れるのも良いでしょう。
Googleのプロダクトディレクターであるルーク・ウォロブスキー氏は、「プレースホルダーテキストは、フィールドにすでに入力されているように見えるため、避けるべきだ」と述べています。
入力する内容を説明してくれるフィールドラベルは、UIデザインにおいて重要な存在です。フォームにラベルを配置する方法はさまざまですが、まず考えるべきは「どこに配置するか」です。
たとえばCSSやJavaScriptで作成できる、フローティングラベル。はじめはテキストボックスにインラインラベルとして表示されますが、ユーザーが入力を開始するとラベルが上部に移動されます。
この仕組みにより、ユーザーは入力している項目を確認しながらフォームを埋められるため、混乱を防げます。
すべてのコンバージョンは、デバイスに関係なくCTAボタンに依存しています。
CTAボタンはユーザーに「次のステップでなにをすべきか、そしてなにが起こるか」という情報を与えてくれます。
CTAボタンの分かりやすさを向上させるために、以下の点に気を配ってみましょう。
CTAボタンについて、詳しくは以下の記事をご覧ください。
CTAボタンの理想的なデザインとは?サイズ/色/テキスト/配置のポイントまとめ
Workship MAGAZINE
購買フォームのデザインはCVを大きく左右します。しかしスマホは画面が小さいぶん、購買フォームの最適化プロセスは複雑です。
だからこそ今回ご紹介したヒントが参考になるはず。ユーザーフレンドリーなフォームデザインにぜひこの記事を役立ててみてください。
(執筆:Pete McCain 翻訳:Nakajima Asuka 編集:Sansui Riho)
EFO(エントリーフォーム最適化)をサポートするJS/CSSツール10選
Workship MAGAZINE
EFO対策が裏目にでる9の間違い!凝った入力フォームがUXの低下を招く!
Workship MAGAZINE
離脱されない入力フィールド(入力欄)のデザイン方法。6つの要素を徹底解説
Workship MAGAZINE