ロングフォームの販売ページのテクニックや例？
私は過去数か月にわたって多くのUXエキスパートと協力してきましたが、私は「長い形式」の道を進むことに抵抗していましたが、彼らは私に何度も何度も何度も何度も戻ってきました。 100％のコンセンサスはありますが、長い形式が私の理解が浅く、潜在的に急な学習曲線製品にとって正しいアプローチであるということです。
この立場を踏まえて、私は適切な「ロングフォーム」テクニックを学びたいと考えています。ほとんどのテキストのコピーライティングは終了しましたが、今探しているのは：
A）ストーリーテリングと販売を最大限にアピールするためにそれを改善または調整する方法（心理学の戦術）
B）コンテンツを視覚的に正しく作成する方法の明確なデモンストレーションまたは強力な例。
これらの点についていくつか情報を提供していただけませんか？
長い形式のページの例は、いわば10ダースです（実際には、黄金の例を見つけることなく、100万のWSOヒットを見ることができます）。従うべき詳細または機能する実証済みのパターンを説明するチュートリアルがさらに良いでしょう。
この本は、Caroline Jarrett氏によって作成されたものです。「 Forms that Work：Designing Web Forms for Usability（Interactive Technologies） "。
彼女は、非常に長い形式で英国政府に勤務してきた長年の経験を伝えています。
それ以外にも、いくつかのアイデアを細かく切り分けることができます。
- フォームをページに分割します。 長い形式=たくさんのスクロールとは思わないでください。どういうわけか関連するフィールドを含む、データのセクションの各ページを並べ替えます。画面の下部で、
[prev]および[next]ボタンを使用してアーティファクトを設定し、ページ番号を[page 3 of 8]に設定します。 - フォームが長い場合は、関連フィールドの近くでヘルプを利用できるようにすることが重要です。理想的には、関連フィールドのすぐ下に指示を表示します。
- 入力フィールドの左側にラベルを付けた、いわゆる「2列」レイアウトを使用します。小さなフォームの場合、フォームの上にラベルを設定することは問題ではありません。長いフォームでは、2列の配置には、より大きくて読みやすいラベルテキストなどの利点があります。また、2カラムを実際に3カラムにし、1ラベル、2フィールド、3をローカルヘルプボタンにします。
- ユーザーがヘルプをクリックしてフィールドのすぐ下に表示すると、jQueryのようなアニメーションで残りのフィールドがスライドダウンします。アニメーションは、他のフィールドがフォールドの下に滑り込んだ場合にどこに移動したかをユーザーが確認するのに役立ちます。
- 予想されるテキストの長さに従って、入力フィールドに異なるサイズを使用します。これはユーザーにとって素晴らしいヒントであり、すばやくフォーカスを再設定するのにも役立ちます（ユーザーにラベルの再スキャンを強制する同じサイズの入力の列とは対照的）。
- フィールドの背景色を少し変更するなどして、フォーカスがある場所をユーザーに示します。
- もちろん、前/次のアーティファクトについては、前のページを確認するときにユーザー入力を失わないでください。
- 多くのフォームはラベルと境界線を強調表示します。入力テキストをより目立ちやすく、簡単かつ迅速に確認できるようにするために、それらを暗くすることを好みます。しかし、これはmy参照です。
- 国境といえば、形が多くなればなるほど、それを理解するために必要な認知作業が高くなります。私はそれらを可能な限り最小限にしたいです。たとえば、フォーカスが関連付けられたフィールドに到達したときにのみ非常に明るいヘルプボタンを表示し、ホバー時にのみ強調表示します。
name first[_____] second[_____]のように完全に関連している場合を除き、前のフィールドの右側に入力フィールドを表示しないでください。そうすることで、ユーザーを混乱させたり、2番目の選択肢を見落としたりする危険性があります。