web-dev-qa-db-ja.com

同じページに登録オプションとログインオプションを用意する-ベストプラクティス

長い質問になって申し訳ありませんが、すべての情報を公開する必要がありました。

だから私はウェブアプリケーションのホームページをデザインしようとしています。

ホームページには次の要素があります

  1. ロゴ
  2. 製品についての短いコピー
  3. 製品の機能に関する3〜4の箇条書き
  4. ログイン/登録のオプション

「ログイン/サインアップのオプション」を除くほとんどすべての要素の配置を把握しました。

次の懸念事項に対応したいと思います

  1. クリック数をできるだけ少なくする

  2. 特に後でソーシャルログインボタンを追加するため、全体的なレイアウトを整頓しておきます。

  3. 登録に必要なのはメールIDとパスワードだけであることを明確にする

最初に頭に浮かんだオプションの一部を以下に示します

1。 「Login」と「Resigter」の2つのボタンを提供します

enter image description here 例- Twitter

これによりレイアウトは非常にクリーンになりますが、ユーザーは何かを行う前に必ずボタンの1つをクリックする必要があります。既存のユーザーの場合、ログインをクリックしてログインするたびに資格情報を入力する必要があるため、煩わしい場合がありますが、新しいユーザーの場合、プロセスにステップが追加され、登録に必要な情報が非表示になります。

2。いずれかに焦点を当てる-[送信]を使用してログインフォームにログインし、[リンク]を分離してサインアップするか、その逆を行います

enter image description here

例- Evernote

これは比較的良く聞こえますが、ある種のトレードオフとして考えるしかないでしょう。ログインする前にユーザーに「ログイン」リンクをクリックするよう強制するか、ステップを追加して登録に必要なフィールドを非表示にします。

3。 2つのフォームを提供する-それぞれに個別のフォーム

enter image description here

例- Facebook

前に述べたように、これはレイアウトが乱雑になり、混乱するのを恐れます。ソーシャルログインボタンを追加すると、さらにそうなります。

4。両方のフォームをマージします

私が上記のオプションのいずれかに完全に満足していないことを考えると、 2つのフォームをマージすることを考えていました。このようなもの

enter image description here

基本的に、ユーザーは最初のフォームのバージョンに「登録/ログイン」と、「既存のIDがログインし、新しいIDが登録される」などの混乱を解消するための手掛かりが表示されます。次に、入力したIDが新しい場所または既存の場所に基づいて、フォームが適切なIDに変わります。

この同様の質問 のおかげで、Amazonだけで同様のことに気付いただけですが、フィールドに入力する前にユーザーが少し懐疑的になる可能性があるため、この方法について心配しています。

だから問題は

  1. 4つの方法のうち、上記の方法または標準的なベストプラクティスを比較する研究はありますか

  2. 4番目のオプションが最初の3つよりも人気がない理由はありますか(失敗のケーススタディなど)

私は次のオプションを試してみましたが、それらは私の状況に関連しているようには見えませんでした

  1. 同じフォーム内で登録およびログインするための最良の方法
  2. サインインと同じフォームでサインアップを組み合わせる最良の方法?
  3. ログイン、登録、パスワードを忘れた場合に同じフォームを使用することの長所と短所
4
TDsouza

各サイトが特定の選択肢を使用する理由に気付くと思いますので、これらのオプションを含めるのは素晴らしいことです。分解してみましょう。

Twitterは「Twitterとは何ですか?どうやって使用するのですか?なぜ使用する必要があるのか​​?」問題。あなたは彼らのデザインがほとんどこれを表現していることに気付くでしょう。スクリーンショットには含まれていませんが、そのヘッダーの下には、Twitterの内容を伝えようとするグリッド状のストーリーがたくさんレイアウトされていることがわかります。それは彼らにとって素晴らしいことであり、彼らは彼らの不動産をおそらくを可能な限り最良の方法で使用しています。私はあなたが正しいと思いますが、それでもどちらかのクリックまたはサインアップまたはログインが必要なのは厳しいです。彼らはすでにアカウントを持っているユーザーのためにログインフィールドをレイアウトし、悲しみを救ったかもしれません。

Evernote。おそらく、ユーザーがこのページにアクセスした場合、どういうわけかevernoteについて聞いたことがあるので、Evernoteがユーザーにサインアップする必要があるのです。彼らは完全に「成長する」モードであり、何よりもあなたの電子メールを好きになるので、彼らはあなたに電子メールキャンペーンを送り続け、あなたにEvernoteの力を説明することができます。デフォルトで「サインアップ」に設定することはビジネス上の理由ですが、アカウントを持っているユーザーを困らせるため、統合フォームへの要望を理解しています。

フェイスブック。そのような良い例です。最近のオンラインの世界のほとんどはアカウントを持っているため、ユーザーがログインしづらくしてゲームをプレイすることはできません。つまり、ユーザーは余計なクリックをしなくても上位のログインフィールドを使用できます。そうでない場合、新しいユーザーは目立つおよび非常に視覚的に異なる UIでアカウントを作成できます。

あなたの場合は、このようなものをお勧めします。製品のハイライト/機能を含める方法として、Facebookのテンプレートと左側の部屋を使用します。実際、Facebookのデザインに圧倒されたのは、人々が使い慣れているため、使いやすさが向上することを示す調査が行われたことです。

4
Paula Chuchro