Exemples de formulaires de connexion Concepts UX?

Question

Je veux concevoir un formulaire facile à utiliser pour que mes utilisateurs puissent se connecter.

Je cherchais des maquettes dans un premier temps, mais j'ai trouvé des exemples de formulaires de connexion plus complets et plus vivants. C'est génial mais j'aimerais avoir des maquettes afin d'abstraire toute complexité ou distraction.

Je m'attendais à trouver plus de ressources sur les maquettes de formulaires de connexion, car c'est un composant tellement récurrent: il se trouve sur presque tous les sites Web/applications Web. Essayons donc de résoudre ce problème, ce serait bien si vous pouviez partager vos créations ici ou créer un lien vers les pages Web pertinentes.

Adrien Be · Answer

Exigences communes:

J'ai identifié des exigences/modèles communs pour les concepts de "formulaire de connexion" que j'ai rencontrés.

Utiliser OAuth/OpenID pour l'authentification
avoir la connexion sur la superposition: supprime le problème d'image d'arrière-plan
- car il est souvent difficile d'avoir un arrière-plan réactif qui ne soit pas laid superposé par la boîte de connexion dans certaines résolutions
nom d'utilisateur
- contribution
- étiquette - facultatif
- espace réservé - facultatif
mot de passe
- contribution
- étiquette - facultatif
- espace réservé - facultatif
case à cocher afficher le mot de passe
case à cocher souvenir de moi
mot de passe lien oublié
lien d'inscription

Maquettes

J'ai "traduit" en maquettes certains de ces fully designed & live examples mentionné dans la question et ajouté certains des concepts des "exigences communes" mentionnées ci-dessus.

N'hésitez pas à ajouter votre contribution dans une réponse complémentaire. Merci.

Maquettes pour le formulaire de connexion "nom d'utilisateur + mot de passe"

mockup

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

Maquette pour l'authentification OAuth/OpenID OR Formulaire de connexion "nom d'utilisateur + mot de passe"

OAuth est beaucoup utilisé ces jours-ci pour que les utilisateurs se connectent à des sites Web tiers: OpenID, Microsoft, Google, Facebook, Twitter, One Network, etc.

Dans ce cas, il s'agit "juste" d'un bouton redirigeant vers le service d'authentification concerné.

De nombreux sites Web présentent à la fois l'option de connexion en utilisant OAuth ou des informations d'identification régulières. Vous combineriez donc l'une des solutions de maquette illustrées ci-dessus avec le bouton OAuth ( s), voir l'exemple ci-dessous.