実用編

EFO(入力フォーム最適化)について考えてみる

EFO(Entry Form Optimization)は、入力フォームを最適化することですが、EFOの施策をやるかどうかで、入力フォームの離脱率を改善することができます。

ただでさえ離脱しやすい入力フォームページでどのような対策をすべきか、実体験から学んだこととググって調べたことをまとめてみます。

よくある問題点

全体

  • 目的を果たそうとフォームに辿り着いたが、なんとなく面倒に感じ離脱
  • フォーム内にTOPもしくは他ページへのリンクがあり、そこへ離脱
  • 間違って他のページへ移動してしまい、戻るとイチから再入力させられる
  • 入力項目数が不明瞭で、入力完了までがわかりづらい

入力途中

  • 入力を順番に進めていたが、途中で面倒になり離脱
  • フォームが長い(項目数が多い)
  • 項目入力時に問題が発生する(例:半角全角の指定がある)
  • 必須項目がわかりにくい

完了時

  • 入力完了後にエラーが発生して、面倒になり離脱
  • 入力完了後にエラーが発生して、入力がリセットされてしまう
  • 入力完了後にエラーが表示されるが、エラーの箇所がどこかわからない

確認すべきポイントと対処例

必須項目は明確になっているか?

  • 必須入力か任意入力か分かりやすくする
  • 必須項目に背景色を設定し、正確に入力すると背景色が消える

入力をアシストしているか?

  • 入力内容を明確にする
  • 何を入力すべきか誰にでも分かるようにする
  • 入力する内容をわかりやすく入力例として示す
  • アクティブフィールドの色を変える
  • 入力する情報をなるべく短くする
  • 入力の手間を少なくする
  • 「半角」「全角」を自動で切り替える
  • 名前入力の場合はフリガナを自動で入力する
  • 住所入力の場合はユニバーサル仕様に郵便番号から住所入力を自動補完する
  • 電話番号入力の場合は全角数字で入力しても半角に自動変換させる
  • 選択項目にする場合は、ユーザーが最も選ぶ項目から並べる

エラー時の対応をしているか?

  • エラーを明確にする
  • 入力にエラーがある場合は、瞬時にエラー内容を知らせる
  • どこがエラーか表示を目立たせる
  • 入力内容によってエラー表示を変える
  • 入力を間違った場合にどう修正すればいいのかわかりやすくする
  • エラー箇所に正しい情報が入力されたら、エラーをリアルタイムで消す

確認画面とエラー警告を繰り返すことを回避しているか?

  • 必須項目の入力が完了するまでは送信ボタンを選択できないようにする
  • 入力漏れや入力ミスがある場合は、送信ボタンを選択できないようにする

入力状況が明確になっているか?

  • フォームの残り項目数をリアルタイムに通知したり、入力の進行状況をナビゲートする
  • 入力必須項目の残数を表示する
  • 入力ステップが長い場合に全体像が見えるようにする
  • ステップを明確にする

離脱を防いでいるか?

  • 間違い操作や予期せぬリンク移動時にページから離脱しようとするとメッセージを表示する

情報の入力箇所以外にも気を配っているか?

  • 項目数をなるべく少なくする
  • セキュリティを確保して安心感を高める
  • フォームを送信することでどんなメリットを得られるのかを伝える
  • キャンセルボタンは付けない
  • ボタンを2つ置く場合は、アクションしてほしいボタンの方を大きくする
  • フォームの項目は垂直にする
  • 余計なリンクは付けない
  • スパム対策キャプチャを入れるかは要検討する(メリット・デメリット)
  • 「Tab」ボタンで移動できるようにする
  • 確認ページは明確にする
  • サンキューページを活用する
  • 様々な環境(たとえば同じターゲット層でもデバイスがPCとスマホなど)ごとに配慮する

アクセス解析でPDCA

公開後は、どのポイントで離脱するのかアクセス解析で調査しながら調整を繰り返し続けます。

最近の記事

文章のユーザビリティ

この書籍の中で、ライティングのユーザビリティについて触れている項目があり、激しく共感する部分だったので、ここで備忘録としてピックアップする。 ・・・

ライティング

インタフェースデザイン

この書籍は、I部 リサーチ、II部 デザイン、III部 インプリメンテーションと三部構成になっている。この記事では、その中から、I部 リサーチ、・・・

デザイン思考

フルHD映像を4Kにする → スーパースケール

これを知ったときはマジか!と飛び跳ねた。あらためて思い返してみると、確かに公式チュートリアルでも触れていたことをうっすら思い出す。そしてそのときとやり方がなん・・・

DaVinci Resolve

Macで編集時と書き出し後で色味が変わってしまう場合に試してみたいこと

試したことはまだないけど、Macで編集時と書き出し後で色味が変わって困ったときのために備忘録。 プロジェクト設定 > 「カラーマネジメント・・・

DaVinci Resolve

プロジェクト設定と環境設定

プロジェクト設定と環境設定について詳しく解説されている情報がなかなか見つからないので、要所要所で知り得た情報を更新していきます。 プロジェクト設定 ・・・

DaVinci Resolve

項目”Clipy”は開いているため、ゴミ箱に入れることができません。←アンインストールしようとしたときの話し

Clipyが超絶便利そうだったので、macOS Big Sur にインストール&再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・

徒然なままに

setTimeout は requestAnimationFrame に変えるべき?

requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimati・・・

JavaScript

書籍「小さなチーム、大きな仕事」からピックアップ

6年ぶりに読み返したが、今なおハッとさせられることが多く見つかる。 この本で忘れないようにしたい項目をピックアップするだけでも役に立ちそ・・・

起業向け情報

書籍「完全網羅 起業成功マニュアル」からピックアップ

この記事では、以前に読んだ際に付箋を付けていたが、その部分だけを備忘録としてピックアップするため、本の要約ではない。実際は、何倍も濃い内容で、練・・・

起業向け情報

書籍「はじめの一歩を踏み出そう」から気になったフレーズをピックアップ

もう一回、全部読み返したいところだが、書籍がありすぎるので、当時付箋紙をつけていたところだけをピックアップ。書籍内ではより具体的な説明があるので・・・

起業向け情報

人気の記事

記事のコメントの投稿と表示をテンプレートに直接書いてみる

記事のコメント部分を最低限必要な情報のみ直書きしてみます(WordPress 4.9.2 で実施)。 前提 誰でもコメントできる(管理画面の「設定」→・・・

WordPress2018年2月4日

float段組みした場合のclear設定の方法

.group{ overflow:auto !important; overflow /**/:hidden; } または .group{ overflo・・・

CSS2007年12月4日

ファイル名を拡張子なしで取得するサンプル

変数bnにphpファイルのファイル名を拡張子なしで取得するサンプル $bn = basename($_SERVER['PHP_SELF'], ".php");・・・

php2011年10月27日

特定の文字で複数にセルを分割する

たとえば、セルに「テスト左:テスト右」と書かれているのを「テスト左」「テスト右」とセルを分割する方法です。Javascriptでいうところのsplitです。 そ・・・

Excel2009年6月17日

Sassファイルを保存するとcssファイルが自動作成されて困る→サイト管理

sassファイルを保存すると、cssファイルが自動生成されるという症状でしばらくの間、ストレスだったがようやく解決。 例えば、var.scssを修正して保存す・・・

Dreamweaver2018年9月27日

xhtml strictで新規ウィンドウを開きたい場合

xhtml1.1 strictでは、新規ウィンドウを開くtarget属性を推奨していません。新規ウィンドウを立ち上げるべきかどうかはユーザーが決めるべきだという・・・

JavaScript2007年1月9日

ケータイサイトにおけるメルマガの基本

わざわざメールマガジンの配信登録してくれた皆さんには特別な情報やオトクな情報をいち早くお届けします」という姿勢が大事。 ユーザがガードを下げるのはページ導線の・・・

知識編2007年8月12日

外付けハードディスクを起動ディスクにする

iBook G4(OS10.3.x)がある。Safariのバージョンは、1.xだ。2は10.4にしないと使えない。もっと詳しく言えば、10.4.10以下でないと・・・

お仕事・制作日記2008年9月8日

JSONP Javascriptがちょっと分かってきたかも

いまどき「マッシュアップ」という言葉を使うこと自体ちょっぴり恥ずかしいのですが、外部APIを連携する際のお覚書き。 これまで外部APIの連携は、「php」と「A・・・

JavaScript2010年5月18日

Javascriptでカレンダーを作ってみた

ポイントは、「その年月のカレンダーのその日は第何週なのか、第何曜日なのか、何日なのか」をJavaScriptで生成し、祝祭日はCSSで指定していること。 サン・・・

JavaScript2011年8月12日

コメントありの記事

インタフェースデザイン

「test」

デザイン思考

Instagram API を使ってインスタに投稿した画像データを取得する

「>ころころさん コメントありがとうございます! 確かに、APIドキュメント見ましたが、ライブに関する情報は今のところ取得できないようですね。 インスタライ・・・」

API

Sony Eマウント フルサイズ対応のカメラレンズを収集するページを作ってみた

「SIGMAから超軽量で明るい単焦点レンズが2本発売になりましたので、リストにレンズ情報追加しました!」

お仕事・制作日記

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

「>名無しさん ご指摘、ありがとうございます! 記事冒頭の「まずはサンプル」のサンプルが動いていませんでしたので修正しました。」

JavaScript

えっ!?Yahooの検索結果から遷移しようとしたら全く違うサイトにリダイレクトされてしまった...

「>前田さん コメントありがとうございます。 環境は分かりかねますが、修正したいファイルのパーミッションを604や644に変更すると書き込みできるようになります(・・・」

お仕事・制作日記

記事の投稿IDなどの投稿者(ユーザー)情報を取得する方法 → get_the_author_meta

「アバターを取得する「get_avatar」についても追記しました!」

WordPress

jQueryでformを操る【nameの値を取得する/クリアする】

「「値をクリアする」を追加しました。チェックボックスやラジオボタンの値を何も選択していない状態に戻すときについて触れています。」

JavaScript

iframeの高さを自動調整する

「>匿名さん コメントありがとうございます。 サンプルでは、beforeは何も処理していないので期待する表示にならない、で正解です。 クリックした後が、対応・・・」

JavaScript

MAMPでMySQL Serverが突然起動しなくなった時 → ログファイル削除

「(匿名)さん コメントありがとうございます。何も設定変更していないのに、それまで使用できていたサーバーが突然使えなくなるのは辛いですよね、、。 ここで紹介したや・・・」

MAMP

イラストレーターでレイヤーごとにPNGで書き出す

「コメントありがとうございます! そもそもできるかはわかりませんが、ソースを書き換える必要はあります。 下記記事などが参考になるかもしれません。 illustra・・・」

Illustorator

WEB制作WEB設計実用編EFO(入力フォーム最適化)について考えてみる | シンプルシンプルデザイン