フォームを誘導するマイクロコピーを導入する4つの方法

作り方

Kinneret Yifrah


UXライティングとマイクロコピーのパイオニア。イスラエルにて大手マイクロコピー(UXライティング)スタジオ(NEMALA MicroCopy Studio)を運営。
ヘブライ語、英語、フランス語、ドイツ語、韓国語、日本語の6ヶ国語に翻訳されたベストセラー『Microcopy: The Complete Guide』の著者であり、実践的なワークショップを開催している。

この記事はの4 ways to introduce guiding microcopy in forms翻訳転載です。 配信元または著者の許可を得て配信しています。

フォームに書く指示やヒントには、必ず葛藤が生じます。
フォームに記入する際、威圧的で複雑な印象を与えないよう、テキストを詰め込みすぎないようにしたいです。

しかし、ユーザーが抱くかもしれない疑問に対する答えや、ユーザーの予約に対する適切な回答を用意しておくことは重要です。
そうすることで、フォームを途中で投げ出すユーザーを減らすことができ、私たちがユーザーとそのニーズを考えていたことをユーザーに示すことができます。

では、フォームにマイクロコピーを加えるべきか、加えないべきか?

ミニ・事例 #1

ジョシュア・ポーターの投稿(彼がマイクロコピーという言葉を作った投稿)では、支払いフォームのページで5-10%の離脱率につながる問題について述べています。
彼は、住所欄の近くに具体的な指示の一文を追加することでこの障害を克服しました(「クレジットカードに関連する請求先住所を必ず入力してください」)。
これはフォーム内のテキストをできるだけ増やさないように、指示の無駄を省くことが、タスクを完了しようとするユーザーを助けるのではなく、難しくしてしまい、コンバージョン率を上げるどころか下げてしまうという素晴らしい例です。

ミニ・事例 #2

これは複雑なシステムにおいて特に当てはまることです。
メラヴ・ハーパズは、彼女の素晴らしい投稿「Friction as a Function(機能としての摩擦)」の中で、たとえ既に混雑しているフォームであっても、マイクロコピーを追加することで、ユーザーがより高いレベルの信頼性と確実性をもってタスクを効果的に完了できることがあることを示しています。

ミニ・事例 #3

スティングテレビのデジタル部門責任者であるヤキール・レズニックは、ある講演で、彼らが実施したABテストについて語りました。
バージョンAでは、「きれい」なフォームでユーザーの名前と電話番号を求めました。指示は1つだけでした。
(「今、必要なのは、あなたの名前と電話番号だけです」)。

バージョンBでは、この情報はユーザーがユーザー名やパスワードを回復する必要がある場合に必要だという説明を加えました。
このかなり長い文章は、フォームにより多くのテキストを「負担」させ、さらに携帯電話では余分なスクロールを必要としましたが、コンバージョン率は11%上昇しました。

なぜでしょう

なぜなら、ユーザーは一般的にそのような情報を渡すことを嫌うので、余分な文章は、彼らがこれからしようとしていることに合理的な説明を提供することによって、彼らを安心させることができるからです。
テキストがユーザーにとって重要であれば、彼らはそれを読み、その意味に注意を払うでしょう。

だからこそ、フォームにどれだけのマイクロコピーを追加するかが問題なのではなく、ユーザーが助けを必要としているかどうかが問題なのです。
もし答えが「はい」なら、文書によるガイダンスを追加しましょう。
フォーム上でユーザーが迷ったり、間違えたり、不安を感じたりしそうな場所に気づいたら、迷わず、ユーザーを悩ませる質問に対する答えや、この時点でユーザーが必要としている安心させる言葉を書きましょう。

それどころか、このような葛藤の際にあなたのサポートがあれば、サポートに問い合わせたり自分の考えていたことをあきらめたりすることもなく、探しているものを簡単に見つけることができます。
もちろん、指示はできるだけ短く簡潔に、少ない言葉で最大限の情報を提供できるようなものでなければなりません。
また、指示は必要な瞬間まで隠しておくこともでき、文脈に応じてさまざまな方法で提示できます。

フォームにマイクロコピーを導入する4つの方法

1. 静止

このマイクロコピーは、現れたり、動いたり、消えたりすることもなく、画面に永久に表示されます。
ただそこにあり、アクセスが可能で、操作の前か横にずっとあります。

主な利点:見逃すことがない。
主な欠点:フォームの表示が乱れる。

以下の場合に最適。
操作方法を理解する上で指示が重要な場合やユーザーにとって不可欠であり、ユーザーがそれを見逃さないようにしたい場合。

マンチェリーは、不可逆的なアクションをユーザーに通知するために、静的なマイクロコピーを使用しています。


これらの指示は、利用可能なマイクロコピーの要件を満たすために、入力欄の前に置かれるべきであることに注目してください。

2. オンデマンドで表示

ユーザーがアイコン(?、!、i)やリンクの上をクリックしたりカーソルを合わせたりすると、(通常はツールチップで)表示されるマイクロコピーです。

主な利点:常に誰でも簡単にアクセスできるが、慣れている人には邪魔にならない。
主な欠点:ユーザーがクリックせず、重要な情報を見逃してしまう可能性がある。

以下の場合に最適。
a. 提示すべき情報や指示が多く、視覚的に過負荷になる可能性があり、非表示にしたほうがよい場合。

b. 何度も行う操作で、2度目、3度目は情報アイコンを参照せずに完了できる場合。
このようにして、新しいユーザーは必要な情報に非常にアクセスしやすくなり、慣れているユーザーは立ち止まることがなく素早く進むことができます。

Booking.comとPayPalという、情報や説明が非常に豊富な2つのウェブサイトで、「?」アイコンにカーソルを合わせると、このようなツールチップが表示されます。

「しかし、複雑なシステムでは、すべての入力欄にアイコンを置かなければならないだろう!」。
確かにそうかもしれません。しかし見てください。

あなたのシステムのユーザーに、この2つの選択肢のどちらかを選んでもらうとしたら、彼らは何を選ぶと思いますか。
– ユーザーガイドかヘルプセンターを開き、各用語の意味と正しい記入方法を検索する。
または
– UIの各入力欄の近くにあるアイコンにカーソルを合わせて、関連情報にアクセスできるようにする。

確かに、「すっきりした」フォームはユーザーにとって使いやすいです。
しかし、それがユーザーにとって難しく、より多くの作業を発生させるのであれば、「きれい」であることに意味はありません。
マイクロコピーを加え、共有すべき情報が多い場合はiアイコンの下に隠すのが一番です。適切なデザインであれば、見栄えも良くなります。

これはFacebookの広告作成用UIです。
各コントロールの横にiアイコンが配置されていますが、アイコンは邪魔になりません。
それどころか、私が必要とするすべての用語や決定に対して、正確でアクセスしやすく、役に立つガイダンスを提供してくれます。

ヒント

アイコンではなくリンクを使って、ユーザーが抱く可能性のある疑問や、ユーザー自身の言葉を響かせましょう。
例えばどうやって計算したのですか?なぜ質問しているのですか?この情報はどこにありますか?どのように機能するのですか?

こうすることで、ユーザーを理解し、彼らが知る必要のある答えをあなたと一緒に見つけることができるという気持ちを強めることができます。
私がThe Noun Projectでライセンスを選択しなければならなかったとき、ボタンの下にある質問はまさに私の頭の中でぐるぐる回っていたものでした。

3. 自動的に表示

マイクロコピーは、ユーザーが必要な時(つまり、項目に注目している時)に自動的に表示され、ユーザーが必要とする限り表示され続けます。
ユーザーがフォームを移動すると、それは消え、新しいガイダンスがそれに代わります。

この優れたツールチップ(対象にカーソルやマウスポインタを合わせると出現する注釈)は、WixブログのAlt入力欄にカーソルを置くと自動的に表示されます。

主な利点:必要なときにいつでもアクセスできる、フォームに負担をかけない、指示を見落とす可能性がない。
主な欠点:もう必要のないリピーターでさえ、何度も表示される。

以下の場合に最適。
a. 多くの情報や指示があり、視覚的に過負荷になる可能性があるため、非表示にしたほうがよい場合。

b. アカウント設定のような一度きりのアクションの場合。

c. 金銭的な行動、教育機関への入学、高価な買い物をするときなど、ユーザーに手を取り合っているような感覚を与えたい場合。

d. 航空券の購入のように、重要かつ頻繁に行われないアクションの場合。

ちなみに、これはツールチップである必要はないです。
このスクリーンショットはZeplinの登録時のものです。右のコピーは自動的に表示され、次の入力欄に進むと消えます。

Wixは、メニュー上でユーザーを誘導するためにこのテクニックを使用しています。
右側のヘルプは、ユーザーが上にカーソルを置いたカテゴリーに応じて変化します。

このツールチップは、 Wizzairのウェブサイトからダウンロードしたもので、パスワード入力欄に注目されると自動的に表示され、有効なパスワードが作成されるまで表示されます。

もっと短く書くこともできるはずです。
* 7~16文字
* 数字とアルファベットを含むこと
* 特殊文字は不可

4. プレースホルダー

通常、入力欄に薄い色合いで書かれ、入力欄に注目されると消えるマイクロコピー。
これがSimply Hiredのプレースホルダーです。

主な利点:見逃すことがない。
主な欠点:消えてしまい、ユーザーはオンデマンドで情報を見ることができない。

以下の場合に最適。
a. 小さい指示。

b. プレースホルダーが消えても、ユーザーが再び情報を見たいと思う可能性がない場合。

c. ユーザーから求められる入力が長かったり繊細で、スレッドや短い誘導質問を与えたい場合。

d. フィールドに正しく入力するための短い例をユーザーに示す場合。

これらはPayPalの指示プレースホルダです。


 Microcopy: The Complete Guide(マイクロコピー完全ガイド)」の第10章に掲載されているでプレースホルダーの使い方をもっと見てみてください。

もちろん、1つのフォームで4つの方法すべてを使わないでください。
ご存じのように、一貫性は美点です。
それぞれの方法をユーザーのニーズに合わせて適切に使い、シンプルで使いやすいリラックスできるフォームを作りましょう。

\ この記事をシェアする /

前の投稿
【ビジネスにおけるナッジ理論】EASTフレームワークの効果的な活用方法を具体例を交えて解説
次の投稿
【完全保存版】CVRを向上させた成功事例9選:真似してサイト改善!


マイクロコピーメルマガ購読 
*
メニュー