ログインとサインアップを同じフォームで組み合わせる最良の方法は？
両方のフォームを非常にシンプルにしたい-ヘッダーのfacebookのように3つの入力を並べてサインインする-電子メール、パスワード、そして「サインイン」（または「ログイン」の方がいい？）。
サインアップフォームにも同じフィールドを使用したいのですが、サインインボタンが表示されません。サインアップ用とサインイン用の2つのボタンが必要なのは、混乱を招くためです。同じメールとパスワードのフィールドを使用して効率的になりたいだけです。パスワード確認フィールドは必要ありません。これを機能させる方法について何か提案はありますか？
1つ目は、利用できないCookieをメールに保存して、ログインセッションが期限切れでオートフィルがオンになっていない場合でも、それがリピーターかどうかを常に確認できるようにすることです。
次に、ユーザーがメールフィールドに入力したら、ajaxリクエストを送信して、そのようなユーザーが存在するかどうかを判断します。それに応じて、タブを選択します。フィールドは同じなので、切り替え時にクリアしないでください。
3つ目は、ユーザーがメールを覚えていなかったりスペルを間違えたりした場合でも、ユーザーがやりたいことを選択したり、アカウントを作成したり、サインインしたりできるようにする必要があります。ユーザーが手でタブを選択した場合、彼は自分が何を望んでいるかを理解しています。その後はタブを自動切り替えせず、「そのようなユーザーは登録されていませんアカウントを作成しますか？」または「このメールアドレスのユーザーはすでに存在しますサインイン」のようなメッセージを表示します？ '
ユーザーが目的の動作を選択する明確な方法がないため（ログインしたいが、ボタンに「ログインまたは作成」と表示されているため、どのようにログインすればよいですか？）、@ Asmorが提案する単一のボタンは機能しません。彼がこのボタンをクリックした後に何が起こるかを伝えるため（「ログインしますか、それとも新しいアカウントが作成されますか？」）。
アマゾンはこれをかなりうまくやっています。それは私がそれを見た唯一の場所です。
第一画面は、標準のユーザー名/メールとパスワードのフィールドを表示するだけで、ボタンは「続行」や「進む」などの一般的なもの（または右向きの矢印）にする必要があります。
アカウントが存在し、パスワードが一致する場合は、通常どおりにログインを続行します。アカウントが存在しない場合orは存在するが、パスワードが間違っている場合は、「指定された資格情報でログインできませんでした。まだアカウントをお持ちでない場合は、メールでアクティベーションリンクを確認してください。」無効な資格情報に対する応答がアカウントがない場合と同じであるため、ユーザーは、そのユーザー名のアカウントが既に存在するかどうかを簡単に判断できません。 （もちろん、これはすべてユーザー名が電子メールであることを前提としています。それ以外の場合、このインターフェースは実際にはまったく機能しません。）
そのメールのアカウントisはすでにあるが、ユーザーが間違ったパスワードを入力した場合、アクティベーションメールは送信されないことに注意してください。ただし、誰かが間違ったパスワードで自分のアカウントにログインしようとしたという警告を既存のユーザーに送信することができます。
最後に、それが新しいアカウントの場合、アクティベーションリンクはユーザーを新しいページに移動させ、サインインフォームに入力したパスワードの確認を求めます。これにより、次の2つのことが実現します。
- 誤って入力したパスワードを回避するために、パスワードを2度入力します。
- これにより、電子メールを受信した人が実際にサインインフォームに最初に情報を入力した人と同じ人であることが保証されます。
そうは言っても、個人的にはFacebookでサインインするほうがずっと簡単です。
送信ボタンだけがあったらどうなるでしょう。あなたはそれを「サインインまたはアカウントの作成」またはあなたが何を持っていると呼ぶことができます。実際、ユーザーを混乱させずにこのフォームで両方を実行できることを説明する適切なタイトルを考え出すことは、最も難しいビットかもしれません...
とにかく、ボタンをクリックすると、サーバーにコールバックが送信され、次に何をするかが決まります。
ユーザー名が存在し、パスワードがユーザー名と一致する場合->ユーザーをログインします。
ユーザー名が存在し、パスワードが一致しない場合->これはWordにとって扱いにくいものですが、パスワードが間違っているか、ユーザー名が既に使用されていることをユーザーに説明する必要があります。
ユーザー名が存在しない場合->ユーザーにアカウントを作成するかどうかを尋ねます。
これを実現する良い方法は、フォームを同じに保つことですが、下部のボタンを変更するだけです。
したがって、（デフォルトの）ログイン画面には2つのフィールドがあります。1。電子メール/ログインを入力するため2.パスワードのため
および2つのボタン：1.ログイン-上記の資格情報を使用してサーバーにリクエストを送信します。 2.新しいアカウントにサインアップします（以下を参照）。
ユーザーが2番目のボタン（新しいアカウントボタン）をタッチすると、入力フィールドは同じままですが、上の2つのボタンは1つのサインアップボタンに置き換えられ、サーバーはサインアップを要求します。
これにより、フォーム/プロセスを非常にシンプルに保ちながら、間違ったメール/ IDを入力することによる誤ったサインアップを防ぐことができます。
他の人が述べたように、1つのボタンでサインインとサインアップの両方を行うことはお勧めできません。ログインボタンの隣にサインアップボタンがある場合も少し混乱します。ほとんどのユーザーはそれらを2つの異なるタスクと見なしているため、UIで何らかの分離を行うのが最適です。