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

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

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

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

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

推薦する

JavaScript で配列の変更を監視する方法

序文以前、defineProperty を紹介したとき、オブジェクトの変更のみを監視でき、配列の変更...

React Hook の使用例 (一般的なフック 6 つ)

1. useState: 関数コンポーネントに状態を持たせる使用例: // カウンター impor...

VirtualBox仮想マシンがNATモードで外部ネットワークに接続できない問題の解決策

背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...

HTMLページ間で値を渡す問題の解決策

初めてこのエッセイを使ったとき、私はかなりぎこちなく感じましたhtmlファイルコードをコピーコードは...

docker+devpi を使用してローカル pypi ソースをビルドする方法

以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...

HTML をホームページとして設定し、お気に入りに追加_Powernode Java Academy

IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決:指定さ...

Remレイアウトを使用して適応性を実現する

以前、モバイル適応に関する記事を書きました。非常に長く、内容が多すぎて読みづらいものでした。そこで、...

Docker でタイムゾーンの問題に対処する方法

背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...

Linux で測位バックグラウンド サービスが時々クラッシュする問題の解決方法

問題の説明最近のバックグラウンドサービスでは、特定の命令の要求データをディスクに保存する新しい機能が...

Vueは動的クエリルール生成コンポーネントを実装します

1. 動的クエリルール動的クエリルールは、おおよそ次の図のようになります。ユーザのカスタマイズに応じ...

JavaScript の手ぶれ補正とスロットリングの説明

目次安定スロットリング要約する安定自動ドアは人を感知してドアを開け、5 秒間のカウントダウンを開始し...

ウェブページ経由で jar パッケージを Nexus にアップロードする方法

Maven を使用してプロジェクトを管理する場合、jar パッケージをプライベート ウェアハウスにア...

mysql order by in の文字順序の詳細な説明 (推奨)

//MySQL ステートメント SELECT * FROM `MyTable` WHERE `id...

MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...