ログインフォームUXの概念の例？

Question

ユーザーがサインインするための使いやすいフォームをデザインしたい。

私は最初の段階としてモックアップを探していましたが、ログインフォームのより完全に設計された実際の例を見つけました。すばらしいですが、複雑さや気を散らすものを抽象化するためにモックアップを用意したいと思います。

サインインフォームのモックアップについては、このような繰り返しの多いコンポーネントであるため、さらに多くのリソースが見つかると思いました。ほとんどすべてのWebサイト/ Webアプリにあります。ですから、これを解決する手助けをしてみましょう。ここで作品を共有したり、関連するWebページにリンクしたりできると便利です。

Adrien Be · Answer

一般的な要件：

私が遭遇した「ログインフォーム」の概念の一般的な要件/パターンを特定しました。

認証にOAuth/OpenIDを使用する
オーバーレイにログインする：背景画像の問題を削除します
- 一部の解像度では、ログインボックスによって醜くオーバーレイされない応答性のある背景を持つことはしばしば困難です。
ユーザー名
- 入力
- ラベル-オプション
- プレースホルダー-オプション
パスワード
- 入力
- ラベル-オプション
- プレースホルダー-オプション
パスワードチェックボックスを表示
忘れないチェックボックス
パスワードを忘れたリンク
登録リンク

モックアップ

私はそれらのいくつかをモックアップに「翻訳」しましたfully designed & live examples質問で言及し、上記の「一般的な要件」からいくつかの概念を追加しました。

追加の回答に貢献を追加してください。ありがとう。

「ユーザー名+パスワード」ログインフォームのモックアップ

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

OAuth/OpenID認証のモックアップOR "username + password"ログインフォーム

最近、ユーザーがサードパーティのWebサイトにログインするためにOAuthが頻繁に使用されています：OpenID、Microsoft、Google、Facebook、Twitter、One Networkなど

その場合は、関連する認証サービスにリダイレクトする「単なる」ボタンです。

多くのWebサイトは、OAuthまたは通常の資格情報を使用してログインする両方のオプションを提示しています。したがって、上記のモックアップソリューションの1つをOAuth button（ s）、以下の例を参照してください。