web-dev-qa-db-ja.com

プライベートWebアプリにログイン/登録するときに最も快適で高速なUXは何ですか?

私の場合、openIdログインは問題外です。私が取り組んでいるアプリケーションでは、特定の特定の電子メールドメインを持つ企業ユーザーのみが登録できます。

ログイン/登録フォームは、簡単なログインと簡単な登録を可能にする、単純明快である必要があります。

私はいくつかのモックを作りました、これに基づいてこれを達成するさまざまな方法があります この回答された質問

Same place register and login transition 登録ボタンを見つけるのは簡単です-でも、ログインの種類は無視されているように感じます。もう1つの方法は、登録ボタンを左側に配置することです。
すばやくログインできますか?はい。
登録は高速ですか?多分、ユーザーが登録ボタンをクリックしたときに何が起こるかは直感的ではありません。

Tabbed login/register panel ログインは高速ですか?はい。
登録は高速ですか?はい、タブ付きナビゲーションはユーザーにとって直感的ですが、スペースがないため、登録に使用される各追加フィールドより大きなレジスタウィンドウが必要になります。

Another options ログインは高速ですか?はい。
Fast to register?多分、最初のケースと同じ点です。また、ボタンの配置方法に一貫性がないようです。

私の質問は、同じパネルから誰かをログインまたは登録する最も速い方法は何ですか?

a。ユーザーは特定のメールアドレスを持つ企業ユーザーです
b。メール以外の実際のデータはなく、登録時に名前が必要になる場合があります。

ログイン/登録メカニズムが必要なのはなぜですか?

これは他の会社に販売される製品になるため、ユーザーをログインさせるのが簡単、高速、そして安価です。これは、ユーザーを内部で認証するために必要な機能を備えている場合と備えていない場合があります。

21
Vlad Nicula

私が行う多くの変更があります。

1)フロー、左から右、上から下(ラテン語ベースの言語)
これは、「ログイン」ボタンがフィールドに右揃えで配置されることを意味します

簡素化する:

2)タイトルを削除する
「ログイン」と「登録」のタイトルを削除します。ボタン自体がタイトルとして機能する必要があります。一致するように大きくします。

3)ラベルを削除する
ラベルをテキストフィールド自体に組み込みます。

4)ログインと登録を1つのページにまとめます。
ユーザーがクリックするたびに、クライアントの20%が失われる可能性があります。タブまたはWebページのクリックを排除すると、より多くのクライアントを維持するのに役立ちます。

5)追加の再入力パスワードフィールドを削除する
この設計要素は、オペレーティングシステムのエンジニアによって推進されました。通常、エラーは、ユーザーがシステムからロックアウトされ、パスワードを回復する手段がないことを意味します。 Webの世界では、パスワードを取得する標準的な方法は「忘れましたか?」メールでリンク。また、ジャンプする余分なループを削除することは、常にユーザーにとってポジティブです。

6)「記憶する」をフィールドに近づけます。
「remember me」をユーザー名/メールの横にするか、ログイン/サインアップの横にするかについて、いくつかの議論がありました。フィールドは適切なコンテキストを提供するので、メールを入力した直後に、「記憶」することを選択できます。 「サインイン」ボタンの隣に配置する理由は、彼らが安全な場所からログインしているかどうかも尋ねるためでした。サインインによって配置されるエンジニアにとってはより理にかなっています。ただし、ユーザーの観点からは、彼の電子メールアドレスを覚えていることはより理にかなっています(たぶん、彼のパスワードも覚えているかもしれませんが)。

7)「忘れられた?」がない
(パスワードフィールドの横にある)そのコンテキストのために、その意味は明白です。簡単にパスワードを回復する方法がある場合、登録(サインアップ)パネルでパスワードを誤って入力したという問題は気になりません。

名前:

8)ログインまたはサインイン
Webの世界では、誰もがOSベースの世界のログインとは対照的に、共通の用語であるサインインに移行し始めています。

9)登録またはサインアップ
サインインを使用する場合は、サインアップを使用することも同様に意味があります。

10)メールまたはメールアドレス
メールはメールアドレスの省略形であり、ここでも説明的なラベルは必要ありません

11)名前がありませんか?
通常、誰かを登録するときは、少なくとも名前が必要です。そして、名と姓のフィールドの代わりに、単一のフィールドを持ち、フルネームを要求するのが最善です。繰り返しますが、パターンに注意してください。追加のエラーチェックをプログラマにオフロードしています。通常、プログラマがこれを設計した場合、彼は自分のデータベースに直接マッピングする姓と名のテキストフィールドを要求します。

12)サイズとレイアウト。
通常、サイズによって、ログイン画面全体に人々の目を引くことができます。問題は、彼らの目がどこに引き付けられるかです。トリックは新しいユーザーが貴重です。したがって、できるだけ多くの新規ユーザーをサインアップするように設計をセットアップします。つまり、タイプが大きく、テキストフィールドが大きく、REGISTER(またはサインアップ)パネルの彩度が高くなります。

私はすぐにモックアップを一緒に投げました、もっと微調整があります、サインアップはさらに大きくする必要があり、サインインとサインアップの間のより良い分離です。ログインには小さいフォントを使用する必要があります。しかし、一般的な考え方はそこにあります。

モックアップ:

Sign in and Sign Up Panels

13)サインイン/サインアップの同じフィールド? - 番号
ユーザーが2つの異なるタスクを実行するための2つのボタンがあると混乱します。これを処理する最良の方法は、シーンの背後で管理することです。現在登録されているユーザーがサインインの代わりにサインアップしようとすると、舞台裏のソフトウェアが電子メールがすでに登録されており、パスワードが一致することを検出するため、システムは自動的にユーザーにサインインし、すべての情報を再入力させる必要はありません。再びサインインパネルで。

8
eLouai

最初の画像は私が通常期待するものを示していると思いますが、登録よりも多くの人がアプリケーションにログインするため(ユーザーは一度だけ登録し、定期的にログインすることを望んでいます)、ログインを左側に置き、登録を権利。

別の登録詳細ページが必要な場合は、ボタンではなく、登録ページへのリンクを使用しますか?ただし、必要なのはログイン時と同じ詳細情報だけであるということです。これが当てはまる場合(名前が必要ですか?)、2つのボタンを備えた単なるログインページ([ログイン]または[登録する])があります。

タブはIMOであり、見逃しがちです。登録方法はすぐにはわかりません。そして、同じ詳細に基づいてログインまたは登録しますが、人気があることはわかっていますが、特にサイトを頻繁に使用しない場合は混乱し、すでに登録している場合は覚えていない可能性があります。

フォーカスは、登録ではなくログインにある必要があります。ただし、ログインページから登録への明確なルートを示すことが重要です。

6

誰がどちらが優れているかを明確に述べることはできないと思います。私にはそれぞれ長所と短所があります。それらのうち、私は個人的にタブ付きの2番目のものが好きですが、それは非常に主観的です。

それらのどれも「悪い」UXではありませんが、実際に重要なのは、アプリケーションを使用するユーザーにとって最も直感的なものです。すでにクローズドグループであるとおっしゃっていますが、少し時間をかけて、そのグループの数人のユーザに対してユーザビリティテストを行ってみませんか?何時間もかかることはなく、そのグループに最適な方法についての洞察が得られます。

その際、ログインとサインアップが同じフォームにないものを含めることを忘れないでください。それはそのようにすっきりしているわけではないかもしれませんが、それを使用している人々にとってより明確であれば、それは検討する価値があります。

3
JohnGB

視覚的には2番目のモックアップが好きですが、サインインと登録を切り替えるためにタブをクリックする必要があるかどうかは明確ではないことに同意します。同じモックアップで、「remember me」チェックボックスをボタンの左側に移動します。これにより、デザインがきれいに保たれ、チェックボックスに気づく前にユーザーがボタンをクリックしないようにすることができます。また、同じチェックボックスを[登録]タブに追加します。

ユーザーがログイン時に誤った詳細を入力した場合、ボタンの下に次の行に沿って親しみやすいテキストを提示する必要があります。もう一度試すか、新しい顧客/ユーザー/何でも登録しますか?」という語を使用して、「登録」という単語を登録タブにリンクします。

ログイン名とメールアドレスについては、さまざまなログインスクリプトがフィールドに入力できる文字を制限しているため、メールアドレスを使用することを好みます。ドリアンファブレ。これは、私が登録に使用したものを覚えようとするときに明らかに苦痛であり、パスワードと照合することを気にしないでください。

2
Dorian Fabre

無し!あなたは本当にログインが必要ですか?他の設定に基づいて誰が誰であるかを決定し、システムに現在ログインしているユーザーに基づいて単にユーザーをログインさせることはできませんか?

ユーザーにログインする方法が本当に必要な場合は、no registerオプションを使用することもできます。

ユーザーにログイン情報を入力させ、不明なユーザー名でユーザーがアカウントを作成/登録する必要があると明言するだけです。

1
Barfieldmv

これは純粋に主観的な答えです。あなたが提供した例のうち、私は2番目の答えが好きです。

個人的には、ログインと登録プロセスを分離することを好みます。両方を同時に提供する代わりに、両方に他へのリンクを提供しますか?

ここでいくつかの例を見てください: http://ui-patterns.com/explore/collections/login-forms

1
Sheff

登録とログインは別々にしてください。そうしないと、誤った資格情報(誤ったユーザー名や間違ったパスワードなど)で誤ってログインしようとしたユーザーが、意図せずにそれらの資格情報でアカウントを作成してしまいます。次に、すべてのデータが「なくなる」と、混乱する可能性があります。ログインしている人に自分の資格情報が悪いことを伝えることができるようにしたいのに対し、登録している人は、ユーザー名がすでに使用されているかどうかを知るだけで済みます。また、登録する人は自分のパスワードを確認する必要があります。ログインしている人はしません。

したがって、私の意見は、登録とログインを2つの別々のページとして保持することです。各フォームの下に、他のページへのリンクがあります(例:「すでにアカウントをお持ちですか?ログイン!」および「アカウントをお持ちでないですか?登録!」)。

1
Evan