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

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

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

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

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

推薦する

Vueは商品詳細ページの商品タブ機能を実装します

この記事の例では、商品詳細ページ機能を実現するためのVueの商品タブの具体的なコードを参考までに共有...

docker compose idea CreateProcess error=2 システムは指定されたファイルを見つけることができません

Docker の作成Compose の紹介Compose は、マルチコンテナ Docker アプリケ...

WeChatアプレットキャンバスが署名機能を実装

WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...

Vue 仮想 Dom から実際の Dom への変換

別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...

CSS 画像アニメーション効果のサンプルコード(フォトフレーム)

この記事では、CSS 画像アニメーション効果(フォトフレーム)のサンプルコードを紹介し、皆さんと共有...

VMware14 に CentOS 7 をインストールするグラフィック チュートリアル

CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...

モバイルデバイス上の 1px 境界線を解決する最善の方法 (推奨)

モバイル デバイス向けに開発する場合、Retina 画面上で要素の境界線が太くなるという問題に遭遇す...

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

目次day.js を使用する理由モーメントデイ.js day.js がなければどうなるでしょうか? ...

DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作

目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....

Linuxはiptablesを使用して複数のIPからのサーバーへのアクセスを制限します

序文Linux カーネルでは、netfilter は、パケット フィルタリング、ネットワーク アドレ...

node.js が大規模プロジェクトに適さない理由

目次序文1. アプリケーションコンポーネント2. アプリケーションの種類3. アプリケーションサービ...

docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...

jsを使って簡単な計算機を作る

この記事では、jsで簡単な計算機を作成する具体的なコードを参考までに共有します。具体的な内容は次のと...

JavaScriptページングコンポーネントの使い方の詳細な説明

ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実...

Linux仮想マシンの静的IPアドレスを構成するための手順を完了します

序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...