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

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

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

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

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

推薦する

ウェブデザインのグラフィック構成と組版機能の紹介

すべてには基礎が必要です。家を建てるには基礎が必要です。方程式を解くには、まず九九を覚える必要があり...

Dockerイメージをインポートおよびエクスポートする方法

この記事では、移行、バックアップ、アップグレードなどのシナリオで使用される Docker イメージの...

HTMLハイパーリンクaタグのhrefジャンプとonclick間の実行順序の例

HTMLハイパーリンクaタグのhrefジャンプとonclickの実行関係htmlのaタグのhrefは...

Vueはシンプルなデータ双方向バインディングを実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。初心者...

カンマで区切られたmysqlの分割関数の実装

1: 文字列を区切るためのストアドプロシージャを定義する 区切り文字 $$ `mess`$$ を使う...

jsのイベントループ機構の解析

序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...

nginx を使用した負荷分散モジュールの解釈

目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...

MySQL 数値型オーバーフローの処理方法

さて、質問させてください。MySQL で列を int(0) に設定すると何が起こりますか?この問題を...

Dockerはローカルディレクトリとデータボリュームコンテナ操作をマウントします

1. DockerはローカルディレクトリをマウントしますDocker は、ホスト上のディレクトリをイ...

Vueはツリー構造の追加、削除、変更、チェックのサンプルコードを実装します

実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...

MySQL で特殊文字を含むデータベース名を作成する方法の例

序文この記事では、MySQL で特殊文字を使用してデータベース名を作成する方法について説明します。こ...

Linux での MongoDB のインストールと設定のチュートリアル

MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...

MySQL の日付関数と日付変換およびフォーマット関数

MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...

Linux システムで複数のバージョンの PHP を共存させるソリューション (超シンプル)

PHP7が出たので、最新バージョンのファンとしては、早速アップグレードして体験してみました。しかし...