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

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

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

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

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

推薦する

フォームのmethod=post/getの違い

フォームは、get と post の 2 つのデータ転送方法を提供します。どちらもデータを送信する方...

Ubuntu環境でのPHP関連のパスと変更方法

Ubuntu環境におけるPHP関連パスPHP パス /usr/bin/php phpize5 /us...

MySql5.x を MySql8.x にアップグレードする方法と手順

MySQL 5.x と MySQL 8.0.X のいくつかの違いapplication.proper...

CentOS7 ファイアウォールとオープンポートの簡単な使い方の簡単な紹介

概要(公式にはより詳しい説明があります) Firewalld は、ネットワーク接続またはインターフェ...

MySQL エラー コード 1064 の解決策

SQL ステートメント内の単語が mysql のキーワードと競合する場合は、`` (タブ キーの上)...

MySQL での Truncate の使用法の詳細な説明

序文:テーブルをクリアしたいときは、truncate ステートメントをよく使用します。ほとんどの場合...

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...

CentOS 6.5 の設定 ssh キーフリーログインで pssh コマンドを実行する方法の説明

1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...

シェル スクリプトを使用してワンクリックで MySQL 5.7.29 をインストールする方法

この記事は51CTOブログの著者wjw555の作品を参照しています。スクリプトの内容: vim イン...

この記事では、Vue 3.0 レスポンシブの使い方を説明します。

目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...

nginx+FastDFS を使ってファイル管理システムを段階的に構築する

目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...

div の特定の実装は自動的に折り返されず、HTML で折り返されないよう強制されます。

1. 改行なしを実現するには<nobr>タグを使用するコードをコピーコードは次のとおりで...

Linux サービス管理の 2 つの方法、service と systemctl の詳細な説明

1.サービスコマンドサービスコマンドは実際には/etc/init.dディレクトリに移動し、関連プログ...

ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...

VUEをベースにしたシンプルな学生情報管理システムの実装

目次1. 主な機能2. 実装のアイデア3. コードの実装4. エフェクト表示V. 結論1. 主な機能...