登録フォームのデザインルール

登録フォームのデザインルール
随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今日レビューを書いている理由は、じっくり読んでみると、登録者を集めて活動を増やすコミュニティを構築するためのガイドのようなものだということがわかったからです。アクティブなコミュニティ メンバーシップを研究するには良い資料です。
レビューを書くことになったので、登録に関するいくつかのことを私の視点からお話しします。まずは記事全体の構成を分解し、その中の視点をもとに今の私の気持ちをお話しします。
登録は実のところ、やや退屈な作業です。サインアップとランプアップのパターンで言及されているポイントは次のとおりです。
ユーザーに参加を促す良い理由を与える
一見すると、マーケティングに少し似ているように見えるかもしれません。物事の本質は変わりませんが、人々の感情は逆転する可能性があります。つまり、ユーザーに登録してもらうための十分な理由を与えるということです。
サインアップのプロセスを楽に感じさせる
退屈で面倒な感覚を変えるには、フォームまたは登録プロセス全体を簡単かつ省力化する必要があります。
新規ユーザーを放置しない
文書全体におけるこの観点の重要性は、アクティビティを増やす方法に焦点を当てています。ユーザーは登録を完了しただけではミッションを完了したわけではなく、コミュニティで新しいことを学ぶことは始まりに過ぎません。
最初のつながりを加速する
先ほどのポイントから活動がスタートすれば、次はユーザーがコミュニティで生活し、以前投稿した情報を通じて友人と連絡を取るなど、つながりを築き、「世界中に友人がいて、世界が近所のような感覚」を実際に体験できるようになるでしょう。
記事全体の骨格構造はステップバイステップの行動ガイドとなっており、Facebook でメンバーを紹介し、コミュニティ活動を維持するための初期ガイダンスに詳細な注釈とガイダンスを提供し、参照マニュアルとして使用できます。読んだ後は、作品の概要に焦点を当て、登録フォームのいくつかのルールを整理します。
    フォーム構造に複数のステップが必要な場合は、明確なナビゲーションを提供することが重要です。進捗状況バーを使用して、ユーザーに現在の場所とステップ全体を知らせます。ステップ間の論理的なつながりを強調します(ステップ 1、ステップ 2、ステップ 3 のようにマークするなど)。各ステップを説明するために、意味のある画像やアイコン、さらにはタイトルを使用します。アクション ロジックのステップは、できれば 3 つのステップに制限します。登録中のユーザー プロンプト
      ヘルプが必要な場所や、前のアクションと後続のアクションが関連している場所には、ヒントを表示する必要があります。ユーザーへの励ましは、完了した入力項目ごとにチェックマーク アイコンを表示するなど、プロセスに反映させる必要があります。ポップアップ警告ボックスは使用しないでください。警告を使用してユーザーにフラストレーションを感じさせないでください。ヒント、成功、エラーを示すには、シンプルで識別しやすいアイコンを使用します。フォームの送信時にエラーが発生した場合は、長いフォームの場合はフォーム全体の上部にエラー リマインダーを表示して、ユーザーがエラーを修正できるように誘導するのが最適です。
    コピーライティングの質に関しては、量よりも重要です。フラットにリストアップするのではなく、ハイライトを直接指摘してください。特別な意味を持つコピーライティングは避けてください。特別な名詞がある場合は、ユーザーの混乱を避けるために明確に説明してください。コピーライティングの表面上のハイライトと、ユーザーにとって最も魅力的なものについて考えるようにしてください。「最新」という言葉は、必ずしもユーザーが最も興味を持っているものではありません。これまでのプロジェクトでは、多くのデータと実践がコピーライティングが非常に重要であることを強調しています。フォームのレイアウトでは、視覚的な干渉を減らすために、整列したフィールド、等長の入力ボックス、一貫した視覚スタイルを使用する必要があります。1つの画面に表示されるフィールドと入力ボックスの数を3〜6に制限するようにしてください(主に複数のステップの状況で使用されます)。オプションフィールドと必須フィールドがある場合は、違いを示します。異なる概念で情報を分類し、オプションフィールドと必須フィールドを可能な限り分離します。

フォーム設計のこれらの一般的なルールは、米国YahooのLukeWによるフォームの包括的な説明でも取り上げられています。これらはすべて最も一般的に使用されているものです。参考までに要約します。ガイド活動で深く探求できるポイントはまだたくさんあります。これについてはここでは説明せず、後で分析することにします。

<<:  Dockerはelasticsearchイメージを起動し、ディレクトリをマウントした後にエラーを解決します

>>:  Vueダイナミックフォームの詳細な応用

推薦する

Linuxサーバー間のリアルタイムファイル同期の実現

使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...

Dockerfile テキストファイルの使用例の分析

Dockerfile は、イメージをビルドするために使用されるテキスト ファイルです。テキスト コン...

ウェブページの内部アンカーポイントを実現するための純粋なCSSの上下オフセットコード例

最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...

CSS でのナビゲーション バーとドロップダウン メニューの実装

1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...

Clickhouse Docker クラスターの展開と構成を例を使って説明します

目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...

Linux のハードリンクとソフトリンクの原理と使用法の分析

Linux システムには、ファイル共有を解決するために使用できるリンク ファイルと呼ばれる種類のファ...

25 div+css プログラミングのヒントとコツ

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

1. フォントと文字表示の関係左側と右側の鋭角部分は Songti フォントで表示されます: &l...

iframe を介してフレームセットを本体に配置する

フレームセットと本文は同じレベルにあるため、本文にフレームセットを配置することはできません。まずペー...

uniappの無痛トークンリフレッシュ方法の詳細な説明

フロントエンドがインターフェースを要求すると、バックエンドでインターフェースが定義されます。ステータ...

js 配列エントリ() 反復メソッドを取得する

目次1.entires() メソッドの詳細な構文2.entires() メソッドの一般的な使用法と注...

Docker を使用した ElasticSearch:7.8.0 クラスターのインストールに関する詳細なチュートリアル

ElasticSearch クラスターは、クラスターを構築するための動態請求的方式と靜態配置文件をサ...

セマンティックタグを使用して、IE6、7、8と互換性のあるHTMLを記述します。

HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...

Ubuntu ブート自動起動サービス設定

Ubuntu でサービスを作成し、自動的に起動する方法: 1. [/lib/systemd/syst...

シンプルなjQuery + CSSを使用してカスタムタグタイトルツールチップを作成します

導入シンプルな jQuery + CSS を使用して、ブラウザのデフォルトの動作を置き換えるカスタム...