フォーム入力完了率を上げるための、マイクロコピーのチェックリスト
Jan 12, 2022この記事はPrototypr.ioのブログ: Boost your form completion rates with this microcopy checklistの翻訳転載です。著者のキネレット・イフラさんの許可を得て公開しています。
新しいフォームをネットの世界に公開するとき、または既存のフォームで、入力を完了せずに途中で離脱してしまうユーザーや、サポートを依頼するユーザーが多すぎるときは、このチェックリストを使って内容を点検しましょう。個々の項目に関する詳しい解説は、該当する章でお読みください。
ライティングに取り掛かる前に
1.ユーザーが納得して入力を完了するだけの、十分な理由がありますか?
ユーザーは、なぜ空欄を埋めなければならないか、それが彼らに何をもたらしてくれるのかを、理解しているでしょうか?この理解は、ユーザーがフォーム(特に長いフォームや複雑なフォーム)への記入を完了させるのに非常に重要です。入力フォームの最上部か、または入力フォームへのリンクが貼られたページに、その行動の真の価値を約束し実行を促すメッセージ(コールトゥアクション)を入れましょう。
複雑なシステムでは、コールトゥアクションの代わりに、なぜフォームが必要なのか、フォームを送信した後に何が起こるのかを一言で説明することもできます。
2.フォーム内のマイクロコピーが多すぎませんか?
画面に文字が詰まりすぎていませんか?そういうことが起きやすいのは、以下のような場合です。
・説明不要な部分まで、説明しすぎている。
・必要な箇所だけに絞り込んで説明しているものの、言葉が多すぎる。マイクロコピーは、もっと簡潔にできます(繰り返している言葉や、不要な指示語を検索してください)。
・UI/UX が不完全で、直感的な操作ができない。その場合は UX デザイナーのところに課題を持ち帰り、再検証しなければならない。
3.フォーム内のマイクロコピーが不足していませんか?
ユーザーに負担をかけないつもりで、重要な説明や安心感を与える一言まで省いてしまっていませんか?デザイナーが“余白好き”であるために、操作に必要不可欠な指示が、ツールチップ内に隠れていませんか?
もしそうなら、サラ・ウォルシュの素晴らしいレクチャーを見て、彼女のフォーム入力完了率が26%から92%に跳ね上がった事例を知ってください。
この記事では、フォームに指示を入れる方法と、その量が多すぎたり少なすぎたりする場合について書きました。
わかりやすさを大切に
4. 会話体ライティング
次のことを確認してください:
・ユーザーに直接語りかける
・日常的に使い慣れたいつも通りの言葉を使う
・能動態を使う
・対話を進めるための質問をする(もちろん、求められた場合に限る)
・簡潔でわかりやすい言葉を使う
5.ユーザーが操作するエレメントのラベル
ラベルとは、操作名のことで、ここに何を入力し、何を選択し、何をマークするかを定義するものです。それぞれのラベルを確認し、すべてのユーザーがラベルを簡単に理解できるようにしてください。
これらの言葉が含まれないことを確認します:
• より平易な言葉で言い換えられるはずの専門用語(ニールセン・ノーマングループのユーザビリティ調査によると、専門家でさえ不必要な専門用語を排除した平易な言葉を好む)。
• 社内でのみ通用するような、一般的ではない言葉。
• 抽象的な言葉や、曖昧で紛らわしい言葉。
このような言葉を見つけた場合は、次のいずれかの対策を採りましょう。
a. より簡単な言葉に入れ替える。
b. 説明を加える。
ちなみに、コントロールラベルは常にユーザーに見えるようにし、画面から消えないようにしてください。
6.ユーザーに複数の選択肢を提示する場合
ドロップダウンリストやラジオボタン、チェックボックスで選択するすべての選択肢は、以下の条件を満たさなければなりません:
・簡単に、即座に理解できる。
・それぞれの選択肢の名称が、直接的または間接的に、その内容をわかりやすく言い表している(そうでないときは、ツールチップを追加することを検討する)。
• 個々の選択肢の違いが明確である(区別しにくい項目がない)。
複数の項目を選択できる場合は、そのことを確実に伝えましょう。平均的なユーザーは、ラジオボタンとチェックボックスの違いがわかりませんし、いつ複数の選択ができるのか、1つだけなのかもわからないでしょう。
7.プレースホルダー
• ユーザーが文字入力の最中に確認したくなるような情報は、プレースホルダーにしない。
• ここに記載するのは、関連性のある追加情報だけとし、ラベルの言葉の繰り返しは避ける(アイトラッキング調査によると空の入力欄は、その存在がより一層目立ちます)。
・アクセシビリティのガイドラインに従い、高コントラストで表示する。
8.ツールチップ
・定位置に持続的に表示したい重要な情報は、ツールチップには含めない(ツールチップをわざわざ開かないユーザーにもメリットがあり、その数の多さに驚かされます)重要な情報は、ユーザーが操作するエレメントの横に書き、ユーザーが見落とさないようにします。
・入力欄がフォーカスを得たときに自動的に表示されるツールチップは、1回限り、またはごく稀にしか入力する必要のない項目に向く。
・「i」や「?」のアイコンを押したときにツールチップが表示される場合は、目の不自由な方にもわかるように、内容を明確に説明するaltテキストを追加してください。
何にも煩わされないスムーズな操作のために
9.エラーメッセージは見飽きた、うんざりだ、と思わせないように
すべての入力欄について、プロダクトマネージャーまたは開発担当者に次の点を確認しましょう:どのような入力値やフォーマットならシステムは処理できるでしょうか?どのような入力値やフォーマットが受理されず、エラーメッセージが出てしまうでしょうか?
エラーとなる入力値やフォーマットに関する注意書きを、入力欄の近くに、前もって明記しておきましょう。
例えば、以下のようなものです。
・特殊記号は使えるか?
・市外局番と電話番号の間にハイフンを使用してもよいか?
・パスワードの文字数は何文字か?
・このフィールドに許される最大値と最小値は何か?
10.必須項目 / 任意項目の表示
アスタリスクや “ 任意 ” という言葉で区別します。すべての入力欄が必須項目である場合は、目立つようにはっきりとそう書くか、またはすべての入力欄にきちんと記号を付けましょう。
• 回答文の書き出しの文例を提示するとよい。文例は、ユーザーが質問の意味を確実に理解し、テーマを絞り込むのに役立つ。適切なヒントを提示できると、それを膨らませて回答してもらうことができる。
• 回答文の文字数に制限がある場合は、その旨を明記する。文字数のカウンターを添えるのも一案。
11.オープンクエスチョン
• 回答文の書き出しの文例を提示するとよい。文例は、ユーザーが質問の意味を確実に理解し、テーマを絞り込むのに役立つ。適切なヒントを提示できると、それを膨らませて回答してもらうことができる。
• 回答文の文字数に制限がある場合は、その旨を明記する。文字数のカウンターを添えるのも一案。
12.スイッチとチェックボックス
ユーザーが、スイッチかチェックボックスを使ってオンかオフかを選択する項目を作るときは、オンまたはオフのいずれかを選択するために必要なすべての情報を、確実にユーザーに提供してください。個々の選択肢には、言外にどのような意味合いが伴うかも伝えましょう。
13.添付ファイル
ファイルの種類やサイズに制約がある場合は、事前にわかりやすく伝えましょう。
14.エラーメッセージ
• その入力フォームで発生し得るあらゆるエラーのシナリオを、開発チームから受け取っているか。
• ユーザーのための、有用で良質なマイクロコピーが書けているか。もっとも望ましいエラーメッセージを書くための原則に従ったか(『UXライティングの教科書』のエラーメッセージの章を参照)。
疑問や懸念への適切な対応
15.個人情報(メールアドレス、社会保障番号、電話番号、誕生日など)の提供を求めるとき
• 何らかの個人情報を提供してもらう必要があるときは、理由を説明する。例えば、出荷についてお客様に連絡するため、あるいは法律で要求されているため、などです。
• 個人情報の提供が任意である場合は、それによってユーザーが何を得るかを伝える。例えば、お客様のお誕生日にプレゼントをお送りするためなどです。
いずれにしても、情報を共有しないこと、または目的外には使用しないことを約束してください。
16.特殊な情報を提供してもらうとき
ユーザーは、どこを探せばその情報が得られるかわかるでしょうか? わかりづらそうなら、探すべき場所をきちんと伝えましょう。
17.セキュリティ
• オンラインで支払い操作が行われたら、成功した時点でそれをはっきり伝える(できれば複数の場所、特にクレジットカードの入力欄で)。
• 情報管理を特に厳重に行うべきサイト(金銭、恋愛、健康)では、提供された情報は保護され、外部に漏らされることはないと伝える。
18.入力値の変更
• フォームへの入力値を後から変更できる場合は、その旨を明記する。そうすればユーザーは、あまり悩まずに入力操作を進めることができる。
• 入力値を後から変更できない場合は、ユーザーが後悔せずに済むよう、事前に注意しておく。
クリックすれば終わりではない
19.待ち時間
読み込みや処理に時間がかかり、送信ボタンをクリックしてから成功メッセージが表示されるまでの間に待ち時間が発生する場合は、その時間をうまくやり過ごせるようなメッセージを用意しましょう。そうすれば、あなたがユーザーのために、どんな小さな物事もおろそかにせず対応していることが伝わります。
20.成功メッセージ
タスクを完了し、フォームを送信した直後にユーザーが目にするのは、どんなメッセージですか? ユーザーの成功を心から喜び、その努力をたたえ、あなたが目指した良質なエクスペリエンスを締めくくるにふさわしいメッセージが書けましたか?
このチェックリストに沿って何か変更することがあれば、どうだったか、どんな違いがあったかを教えてください :)