web-dev-qa-db-ja.com

モーダルダイアログでのログイン/サインアップ

私はしばらくの間、Webプラットフォームに取り組んできました。

通常の「サインアップ」ページと「ログイン」ページを書いているときに、ページ全体がそのような単純なタスクにはやり過ぎであることに気付き、それらをモーダルダイアログに配置することにしました。

JSに依存する以外に、どのような使いやすさ/ユーザーエクスペリエンスの欠点がこれを引き起こす可能性がありますユーザーに持ってきますか?

(もしあなたがモーダルダイアログが何であるかわからない場合 ここを参照

21
thwd

100を超える注目のサインアップフォームの選択を確認したところ、モーダルダイアログでサインアップフォームを表示したのはわずか7%であり、これには十分な理由があると思います。

これを考慮してください-ユーザーがサインアップまたはログインした後、(もしあれば)ユーザーをどこに送りますか?

モーダルダイアログをポップアップする場合、ユーザーは通常、ダイアログが後で消え、ダイアログが表示される前に表示されていたページに留まることを期待します。

しかし、実際にはログイン、特にサインアップは、重要なイベントまたは変更を表します状態の場合、通常はユーザーを適切なページに移動してユーザーを歓迎します。これは通常、モーダルダイアログが閉じられたときにユーザーが期待するものに満足できるものではありません。


サインアップにモーダルポップアップを使用することがわかったサイトに興味がある人のために SlashdotPageflakesDiggHuffPost が含まれています=、 要旨休憩バーンズとノーブルGroupon 登録後、魅力的なオファーのウェルカムページに移動した直後に、「最後の1つ」にモーダルダイアログを使用する

21
Roger Attrill

サインアップとログインにはモーダルダイアログを使用します。コンテキストを提供するために、同じアカウントを使用する異なるドメインのサイトのネットワークを実行します。これらのサイトのほとんどすべてのコンテンツは公開されています。

ログインとログアウトの間に壁はありません。投票やコメントなどの特定のアクションでは、ユーザーがログインする必要があります。ユーザーがそのアクションを実行しようとすると、モーダルでプロンプトが表示されます。

モーダルを選択したのは、ユーザーがページ上にとどまり、実行しようとしているタスクのコンテキスト内にとどまるためです。ユーザーが投票しようとした場合、そのアクションを保存し、ログイン後に実行します。ユーザーがJSを無効にしている場合は、これらのフォームの非モーダルバージョンにフォールバックします。

このアプローチには確かにトレードオフがあります。同様に、サインアップフローで製品をユーザーに販売するスペースに制限があります。また、アクションのページ全体のバージョンに比べて、すべてが正しく機能するまでに時間がかかります。私たちにとっては、ページ全体を提供することはできなかった、サインアップおよびログインするユーザーにクロスドメインの優れたエクスペリエンスを提供することができます。

Our signup form

7
sudonim

ログインモーダルがユーザーのモバイル画面の大部分を占める場合、ユーザーはモバイルの[戻る]ボタンでキャンセルしたくなるかもしれません。これを明示的に処理しない場合、アプリはダイアログを閉じ、さらに閲覧履歴に戻ります。これを想像してみてください:

Google.com->リンク先ページ->ユーザーがクリックしてログインすると、ログインモーダルが表示され、ユーザーは考えを変えて[戻る]ボタンでキャンセルします。

これで、ユーザーはニースのランディングページではなく、Googleに戻ります。

4
User

モーダルダイアログは注意して使用する必要があり、可能な場合は回避する必要があります。 StackExchangeログインは、正しく実行するための良い例です。

モーダルダイアログを使用する正当な理由がいくつかあります。肯定的なユーザーアクションがある場合(たとえば、印刷-印刷オプションを表示します)。しかし、ログインは別の方法で行うことができます。

それがあなたの選択であるならば、他のものを選んでください。それが他の誰かの選択である場合、他の選択肢があることを彼/彼女に納得させるようにしてください。詳細については seit.com を参照してください(私はそれらとは関係ありません)。

モーダルダイアログボックス:はいまたはいいえ

モーダルダイアログボックスに関して言えば、受賞者は非常に異なるイデオロギーを持っています。極端な例として、座席管理があります。物理的な環境を監視するリアルタイムのアプリケーションとして、Seating Managementはホステスの仕事を中断することはしていませんでした。ホステスが5人のゲストをデータベースに4人のキャパシティーがあると言っているテーブルに着席させたい場合、システムはそれが不可能であると言ってレストランの実行を停止しません。たぶんそのパーティーは友好的に見えたので、彼らは予備の椅子に詰め込むことができました。

極端に言えば、いくつかのアプリはモーダルダイアログボックス(およびその多く)を使用しており、ユーザーを明確に停止させ、先に進む前に何かを行う必要があります。以下で説明するように、ライトボックスはこの目的に適した手法でした。

それで、ここでの答えは何ですか?なにもない。一般に、モーダルダイアログボックスが回避または軽視されると、ユーザーエクスペリエンスはより快適になります。ただし、修正が必要な場合は、ユーザーがそのことを知っていることを確認することをお勧めします。

4
GUI Junkie

単純な経験則:他に選択肢がないがない限り、モーダルダイアログを使用しないでください。ユーザーのアクションに不要な制限を課すことにより、ユーザーフローを混乱させます。

一般に、「他に選択肢のないテスト」とは、モーダルアクションを開始すると、アクションを完了する必要があります。そうしないと、何か悪いことが発生します

非モーダルログインダイアログを使用する場合、起こりうる「何か悪いこと」は、ユーザーが実際にはログインしていないのに、ログインしたと思ってしまう可能性があることです。

0
Simon Woodside