WD Online

課題解決のためのUI実装講座 Web Designing 2016年3月号

コンバージョン率アップを目指せ! ユーザビリティの高い入力フォーム(1/2) フォームのユーザビリティを向上させる6つのポイントと実装例

お問い合わせや登録など、さまざまなサイトに設置される「入力フォーム」。コンバージョンの向上に直結する重要なUIであるだけに、ユーザーがスムーズに入力できるようにし、ストレスを軽減して途中離脱を防ぎたいところだ。今回は、入力フォームのユーザビリティを向上させる工夫について、導入事例をもとに実装方法を解説する。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

コーポレートサイトや商品サイトのお問い合せや、サービスサイトのアカウント登録など、入力フォームを設置するサイトやシーンは多岐にわたる。サイト運営側にとっては、コンバージョンを左右する重要なポイントとなる。一方、ユーザーにとっては、閲覧以外の面倒なアクションを強いられることになり、離脱しやすいポイントだ。

ユーザーの離脱を防ぎ、フォームの入力から送信完了まで導くためには、入力にかかるストレスを軽減し、スムーズに入力してもらう工夫が必要となる。今回は、入力フォームのユーザビリティについて考えてみる。まずは、入力フォームのユーザービリティを高める6つのポイントを見てみよう。

 

[Case Study]ユーザビリティを考慮した入力フォームの実装例

上で挙げたポイントをどのように実践していけばよいのか、筆者らが所属するLIGが運営している「EDIMO」サイトのお問い合わせフォームを例に紹介する。まずは、ビジュアル面と機能面での工夫を見てみよう。

10594b9d9b8608532054d7402fe3a8fd.jpg
EDIMOにおける入力フォームのユーザビリティ向上施策

「必須」と「任意」を日本語で表示する

EDIMOのサイトでは、入力が必須の項目と任意の項目を分けてマークをつけている。ポイントは、「*」マークなどではなく、「必須」「任意」と日本語で書いている点だ。これにより、ユーザーが必須か任意かを瞬時に判断できるようになり、心理的負荷や手間の軽減に繋がることが期待できる。

プレースホルダーに記入例を表示する

各項目では、項目名の言葉遣いに注意を払い、ユーザーが参考にできる記入例を表示させる。EDIMOサイトでは、記入例をプレースホルダーテキストとして表示させ、わかりやすさとスマートな外観の両立を目指している。

色の変化で状況を伝える

テキストボックスでは、アクティブ状態(入力中)やエラー時の色を変えることで、ユーザーがいま何をしているのかをわかりやすくしている。これにより、ユーザーは迷うことなく入力完了までの操作を進めることができるだろう。

c981a4b9c5a2a4fd8f54c7e85d9f81ff.jpg
アクティブ状態(入力中)はテキストボックスの色を濃くする(上)。未入力や、不適切なフォーマットでの入力の場合には、入力エリアをオレンジ色に変更し、さらに入力エリアを左右に動かすことで、エラーであることが瞬時に伝わるようにしている(下)

上記以外にも、入力に対してリアルタイムでバリデーション(検証)を行ったり、必須項目がすべて適切に入力された場合のみ「送信する」ボタンを有効状態にしたりなど、機能面でもユーザビリティを向上させる施策を行っている。これらの実装方法については、次ページで詳しく解説していこう。

 

c51597a601ca7de519da12628e56deb3.jpg
Text:尾谷真希子
デザイナー。京都工芸繊維大学を卒業後、グラフィックデザインやコピーライティングの仕事を経て、WebサイトやアプリなどのUIデザインに携わる。2015年、株式会社LIGに入社。
ff886f4fee47b637b2bbc9187c9917ce.jpg
Text:堀口誠人
フロントエンジニア。ずっと日本で暮らしたかったため、ベトナム出張のあるWeb制作会社の内定を辞退し、2012年に株式会社LIGに入社。2015年、フィリピンに派遣される。 http://liginc.co.jp/

掲載号

Web Designing 2016年3月号

Web Designing 2016年3月号

2016年2月18日発売 本誌:1,530円(税込) / PDF版:1,200円(税込)

デジタル時代の「リピーター&ファンを生む」新法則/SimilarWeb活用講座

サンプルデータはこちらから

■ 特集:デジタル時代の「リピーター&ファンを生む」新法則
 「また、このサイトに来てしまった!」には理由がある

「自社サービスのリピーターを増やしたい!」「自社商品のファンを生み出したい!」というのは、売上を安定して伸ばすためには欠かせない命題です。しかし、スマートフォンの普及でネットが当たり前になった「デジタル時代」の消費者動向は、以前とは明らかに変わってきています。では、この時代にリピーターやファンを生み出すには、どのようなポイントを押さえて施策を打っていく必要があるのでしょうか。リピーターやファンを生むために必要な「エンゲージメント」の仕組みから、実際の成功事例の考察まで、さまざまな切り口の「法則」を紹介していきます。

 Part1 デジタルサービスにおけるエンゲージメント向上とは
  なぜエンゲージメントを高めるのか?
  「エンゲージメントの高い顧客=リピーター」ではない
  顧客がそのサービスを仕方なく使っている「悪い売上」
  単なるリピーターではなく、ファンをつくる
  顧客からの愛着度を高めるためには?
  よい体験を生むための重要なポイント
  エンゲージメントを高める上での指標
 Part2 成功の理由はコレだ! エンゲージメント四賢人の事例分析
  Case Study 01 斬新なポイント制度でユーザーを巻き込むタイムズカープラスの戦略
  Case Study 02 LOHACOだからできるメーカーの垣根を越えた販売
  Case Study 03 顧客満足度を高め継続性を促進するOisixのECショップ戦略
  Case Study 04 ワイン特有の悩みを自社の強みで解決する京橋ワイン
  Case Study 05 稼働率の上昇プロセスを重視するスーパーホテルの徹底的“おもてなし”

■ 集中企画:業界潮流、競合動向もまるわかり!「SimilarWeb」活用講座
 競合Webサイトを徹底分析して、自社Webサイトの運用・施策を改善しよう

Webサイトの運用では、アクセス解析と時流に即した改善は成果を上げるために必須のポイントです。また、自社Webサイトの分析と同時に、競合他社や市場トレンドの動向についても目を配る必要があります。ここでは、そうした分析を効率的に行える「Web競合解析ツール」の効果的な活用法について紹介します。

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
PRIUS! IMPOSSIBLE GIRLS/Act of love/SHIFTBRAIN.Inc./Google Performing Arts/NHKプロフェッショナル「私の流儀」公式アプリ/沖縄ラリー 360°/ミュージックビデオ「愛が降る街」/aircord/オカモト「LOVERS 研究所」/Web体操第一/ワコール リボンブラ

■ ビジネス・EC
 □ ECサイト業界研究
 LTV(顧客生涯価値)――顧客エンゲージメントを高め、収益につなげる効果指標

 □ 月刊店舗設計
 イスム:新しい価値観の提案で市場を作り出す

 □ モバイルビジネス最前線
 TimeTree:今さら共有カレンダー? その成功に見る「チーム文化醸成」というグロースハック

 □ 知的財産権にまつわるエトセトラ
 人工知能に著作権は認められるか?

 □ Bay Area Startup News
 シンプルを極めた「Amazon Dashボタン」。IoT製品の成功は“一つにつき一つ”

■ マーケティング・プロモーション
 □ サイト改善基礎講座
 コンバージョン率改善の近道は意思決定ボタンにあり

 □ ハギハラ総研
 増えつづける「モバイルオンリー」ユーザー

 □ デジタルプロモーションの舞台裏
 りんご農家と歯科医院のタッグが生んだ、新しいりんご販売のカタチ

 □ 行動デザイン塾
 ビギナーにこそ“行動の継続化”を働きかけよう

 □ 課題解決のためのUI実装講座
 コンバージョン率アップを目指せ! ユーザビリティの高い入力フォーム

 □ 解析ツールの読み方・活かし方
 来店につながる指標を見抜く! 集客型Webサイトにおけるアクセス解析データの活用

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]ユーモア倍返し:Burglars Just Want Tacos 眞鍋海里
 [デジタルプロモーション] LOVERS 研究所:コンドーム vs. 現代日本 築地 Roy 良
 [Webサービス]桃の花は咲くのか:Peach 土屋尚史
 [IoT]日常系センシング:Nima 神谷憲司

 □ モノを生むカイシャ
 ケイズデザインラボ:挑戦する人たちがその門を叩くカイシャ!

 □ 清水幹太の「Question the World」
 レイ・イナモト:「広告界のイチロー」の楽しい性癖

 □ ツクルヒト
 科学の力で未来の錨を引き上げる:増田光弘(錨研究者)

 □ 最果タヒの「詩句ハック」
 第21回 詩の着せ替え

 □ デザインにできることMonologue
 Vol.146 デザイニング・プログラム

 □ エキソニモのドーン・オブ・ザ・ボット
 信用も権力も分散型データベースが管理する、そんな未来はディストピアか優しい世界か?

■ インフォメーション
 □ Topics
 VIEWS/東京ビジネスデザインアワード 2016/mamorino Watch/「Awwwardsカンファレンス」特別レポート

 □ Movement&News
 世界200万人が熱狂したゲームの展覧会「GAME ON」/オンラインマガジン「SHIFT」が主催する「DOTMOV FESTIVAL 2016」作品募集/村上隆のスーパーフラット・コレクション展 ほか
 東京ミッドタウンで「デジタルメディア展」開催/Twitterが会話型広告機能を追加/Facebookがライブ動画機能をリリース/UX/UI デザインを本気で学ぶオンラインスクール「Delight U」開講 ほか

編集部よりお詫びと訂正のお知らせ

本誌目次、WD SELECTIONにおきまして誤記がありました。お詫びするとともに、以下に正しい表記を掲載いたします。

aircord

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています