オンラインフォームの使いやすさを最適化!参考にしたいポイント9個まとめ

uxmaster_top

[fancy_box]海外デザインブログDesignModoで公開された「Optimizing the Usability of Online Forms」の著者 Paula Borowskaより許可をもらい日本語訳しています。Thank you, @designmodo & @paula![/fancy_box]

 

インターネットにおけるオンラインフォームは、ウェブサイトの門番のような役割を担っています。アカウントへのサインアップやログインフォームなどでも、しばしば記入する必要があります。普段よく利用するツイートやEmailも、実はフォームを入力していると考えたことがあったでしょうか。

 

フォームを最適化することで、ユーザーのコンバージョン率をより改善することができます。

 

 

 

詳細は以下から。

 

 

 

オンラインフォームの使いやすさを最適化するポイント9個まとめ

 

ポイント1

できる限りシンプルにしよう。

 

オンラインフォームを作成するときに、もっとも有効的な方法のひとつが、可能な限りフォームをシンプルにしましょう。

 

ユーザーに必要な情報だけを質問しているか確認しましょう。不要な質問は、この時点で省いておきましょう。よりフォームを入力してくれるユーザーが増加するでしょう。

 

Iconfinder

iconfinder

 

Hey, Designer!

heydesigners

 

 

 
ポイント2

整理、オーガナイズしよう。

 

入力フォームは少ないほうがベターでしょう、これはシンプルなユーザー体験も実現しているのため、ユーザーも煩わしさをあまり感じません。どうしても入力フォームが増えてしまうときは、似たようなセクションごとに整理してみるとよいでしょう。入力ページを分けることもできますが、できるだけまとめるように心がけましょう。

 

Fitbit

fitbit

 

Jawbone

jawboneup

 

 

 
ポイント3

フォームが長いときは、経過状況を表示しよう。

 

複数のフォームがある場合、たとえば商品購入チェックアウトなどは、ユーザーにどのプロセス段階か表示することが大事です。特に入力ページがわかれている場合、ユーザーは何を入力しているのか迷いやすくなります。

 

どのステップ / ページの入力が完了したのか、さり気なく表示することがポイントです、たとえばページ1 / 3のように。

 

Juiiicy

juiiicy

 

Working Nomads

workingnomads

 

 

 
ポイント4

プレイスホルダに記入例を表示しよう。

 

ユーザーに電話番号を入力してもらうにはどのような方法があるでしょう。プレイスホルダを使い、どのように表示して欲しいか明記することができます。

 

もうひとつのやり方として、特に記入形式にこだわらず、柔軟な入力フォームを作成するという方法があります。基本フォーム通り入力されなくても、エラーメッセージを表示しません。なぜならユーザーは、あなたの望んでいる入力パータンなんて知りませんから。

 

EasyPost

easypost

 

 

 
ポイント5

明快なボタン用テキストを使おう。

 

ボタンデザインは、あまり何も考えずに名前、ラベル付けされることが増えています。「提出する(Submit)」と記載されたボタンを使用するのはやめましょう。なぜならユーザーはボタンをクリックしたあとに何が起こるのか、記述されていないので不明です。

 

「送信する(Send)」や「アカウントを作成(Create an account)」などを使うことで、ユーザーも何もしているのかより分かりやすくなります。

 

Dropbox

dropbox

 

 

 
ポイント6

適切なラベルを使おう。

 

インプットやフォーム用ラベルは分かりやすく、簡潔にし、ユーザーに安心感を与えましょう。特にプライバシーになる内容を記述するのはタブーです、控えましょう。

 

Karma

karma

 

 

 
ポイント7

なぜ入力が必要のか説明しよう。

 

私自身の人生の中で、なぜこのサインアップフォームは、私の電話番号を入力しないといけないのか疑問なのときがあります。それは多くの場合、なぜその項目の記入が必要なのか説明されていないのです。(「セキュリティの理由ににおいて(For security Purposes)」は、なんの説明にもなりません。)特に電話番号など、プライバシーに関わる項目には注意が必要です。

 

電話番号を入力することに抵抗があるひとは多いと思いますが、もし予約したフライトに問題があった場合の連絡先として必要な場合はどうでしょう。このように記述してあると、ユーザーは安心して入力することができるでしょう。セキュリティーは、フォーム入力コンバージョンの鍵となります。

 

Stripe

stripe

 

 

 
ポイント8

ドロップダウンを使うタイミングを把握しよう。

 

入力フォームにおいて使い方が分かれるポイントとして、ドロップダウンの実装があります。ドロップダウンの問題は、選択オプションをクリックしないと確認できないという点です。

 

選択オプションが多い場合はドロップダウンを使わずに、ラジオボックスやトグルを利用することで、まとめて確認できます。

 

HeatlthTab

healthtab

 

Lovely

lovely

 

 

 
ポイント9

まとめてもうワンポイント。

 

最後に他にもポイントとなるTIPを2点ピックアップしています。

 

[list type=”star”] [li]モバイルフレンドリー : スマートフォンやタブレット端末でも動作確認をしましょう。[/li]

[li]ソーシャルネットワークサインアップの活用 : ユーザーが利用しているソーシャルネットワークのログインIDによるサインアップ。コンバージョン率増加につながります。[/li][/list]

 

ユーザーにオンラインフォームを記入してもらうには、明確な理由をもつことが重要となります。またログインページでは、eBookやメルマガ登録されるのかきちんと明記しましょう。

 

Medium

medium

 

Awwwards

awwwards

 

 

 

おわりに、、。

 

オンラインフォームの最適化は、信頼を得ることが全てです。ユーザーになぜその情報が必要なのか説明し、必要最低限におさえるようにしましょう。ヘルプ、ガイドラインになる項目を一緒に提供しながら、シンプルに仕上げることがポイントです。ユーザーの時間の無駄使いはやめましょう。

 

 

参照元リンク : Optimizng the Usability of Online Forms – DesignModo