Avoir les options d'enregistrement et de connexion sur la même page - Meilleures pratiques

Question

Désolé d'avoir rendu cette question longue, mais je devais rendre toutes les informations disponibles.

J'essaie donc de concevoir la page d'accueil d'une application Web.

La page d'accueil aura les éléments suivants

1. Logo
2. Une courte copie du produit
3. Trois à quatre puces sur les caractéristiques du produit
4. Options de connexion/enregistrement

j'ai compris l'emplacement de tous les éléments, à l'exception de "Options de connexion/inscription".

Je souhaite répondre aux préoccupations suivantes

1. Limitez le plus possible le nombre de clics

2. Gardez la disposition générale épurée, surtout parce que j'ajouterai des boutons de connexion sociale ultérieurement.

3. Indiquez clairement que tout ce dont j'ai besoin pour m'enregistrer est un identifiant e-mail et un mot de passe

Voici quelques-unes des options qui vous sont venues à l'esprit

1. Fournir deux boutons - "Connexion" et "Resigter"

Exemple - Twitter

Bien que cela rend la mise en page très propre, cela oblige l'utilisateur à nécessairement cliquer sur l'un des boutons avant de faire quoi que ce soit. Pour les utilisateurs existants, cela peut devenir ennuyeux car ils doivent cliquer sur connexion, puis entrer les informations d'identification à chaque fois qu'ils souhaitent se connecter, tandis que pour les nouveaux utilisateurs, cela ajoute une étape au processus et masque également les informations nécessaires à l'inscription.

2. Concentrez-vous sur un - Formulaire de connexion avec [soumettre] pour vous connecter et séparer [lien] pour vous inscrire ou vice versa

Exemple - Evernote

Bien que cela semble relativement meilleur, je ne peux m'empêcher de le considérer comme une sorte de compromis. J'oblige les utilisateurs à cliquer sur le lien "connexion" avant de se connecter ou j'ajoute une étape et je masque les champs obligatoires pour l'inscription.

3. Fournissez deux formulaires - des formulaires séparés pour chacun

Exemple - Facebook

Comme indiqué précédemment, je crains que cela ne rende la mise en page trop encombrée et déroutante. Encore plus lorsque j'ajoute les boutons de connexion sociale.

4. Fusionner les deux formulaires

Étant donné que je n'étais pas entièrement satisfait de l'une des options ci-dessus. Je pensais fusionner les deux formes. Quelque chose comme ça

Fondamentalement, l'utilisateur voit une version du premier formulaire avec "Register/Login" ainsi que des indices pour éliminer la confusion, quelque chose comme "Les ID existants seront connectés, de nouveaux seront enregistrés". Ensuite, en fonction de l'endroit où l'ID entré est nouveau ou existant, le formulaire passera à celui approprié.

Je n'ai remarqué quelque chose de similaire que sur Amazon, grâce à cette question similaire , mais j'ai mes appréhensions à propos de cette méthode car elle pourrait rendre les utilisateurs un peu sceptiques avant d'entrer dans n'importe quel domaine.

La question est donc

1. Y a-t-il eu des recherches comparant les méthodes ci-dessus ou une meilleure pratique standard parmi les quatre

2. Y a-t-il une raison pour laquelle la quatrième option n'est pas aussi populaire que les trois premières (comme les études de cas d'échec, etc.)

J'ai parcouru les options suivantes, mais elles ne semblaient pas aussi contextuelles à ma situation

1. Meilleur moyen de s'inscrire et de se connecter dans le même formulaire
2. Le meilleur moyen de combiner connexion et inscription sous le même formulaire?
3. Avantages et inconvénients d'avoir le même formulaire pour la connexion, l'enregistrement et le mot de passe oublié

Answer 1

Super pour inclure ces options, car je pense que vous remarquerez pourquoi chaque site utilise un choix particulier. Décomposons-le.

Twitter est notoirement confronté à un "Qu'est-ce que Twitter? Comment l'utiliser? Pourquoi devrais-je l'utiliser?" problème. Vous remarquerez que leur conception représente à peu près cela. Votre capture d'écran ne l'inclut pas, mais je sais qu'en dessous de cet en-tête, ils ont un tas d'histoires en forme de grille conçues pour essayer de communiquer sur Twitter. C'est génial pour eux, et ils utilisent leur bien immobilier très probablement de la meilleure façon possible. Je pense que vous avez raison cependant, nécessitant toujours un clic pour soit vous inscrire ou vous connecter est difficile. Ils pourraient avoir aménagé les champs de connexion pour les utilisateurs qui ont déjà des comptes et leur épargner le chagrin.

Evernote. Les chances sont que si un utilisateur est arrivé sur cette page, il a entendu parler d'Evernote d'une manière ou d'une autre et Evernote doit s'inscrire. Ils sont au total en mode "croissance de la base" et aimeraient plus que tout votre courrier électronique afin qu'ils puissent continuer à vous envoyer des campagnes par courrier électronique et vous expliquer la puissance d'Evernote. La valeur par défaut "S'inscrire" est une raison commerciale, mais ils vont ennuyer leurs utilisateurs qui ont des comptes, c'est pourquoi je comprends votre désir pour le formulaire fusionné.

Facebook. Un si bon exemple. La plupart du monde en ligne a un compte ces jours-ci, ils ne peuvent donc pas jouer à des jeux, ce qui rend difficile la connexion de leurs utilisateurs. Tout cela a du sens, les utilisateurs peuvent utiliser les champs de connexion supérieurs sans clics supplémentaires. Sinon, les nouveaux utilisateurs peuvent créer un compte dans l'interface utilisateur importante et très visuellement différente.

Je recommanderais quelque chose comme ça pour votre cas. Utilisez le modèle de Facebook et la salle sur le côté gauche pour inclure les points forts/fonctionnalités de votre produit. Il y a en fait eu des études pour indiquer que suivre la conception de Facebook, de manière écrasante, parce qu'elle est tellement familière aux gens, améliore réellement la convivialité.