Login / Registration Idées et beaux exemples

Tout au long du Web moderne, nous constatons un nombre croissant de lieux de saisie pour les utilisateurs. Ceux-ci incluent des paniers d'achat, des jeux Web interactifs et très certainement des formulaires d'inscription à un site Web. Il semble que non seulement les concepteurs devraient se concentrer sur la conception de la page, mais que l’esthétique de la forme joue également un rôle essentiel..

Déterminez le nombre de formulaires que vous avez éventuellement remplis au cours de votre historique Internet. Il existe d'innombrables exemples de ceux-ci sur les forums, les babillards électroniques, les blogs, etc. Dans cet article, nous allons examiner quelques astuces pour concevoir vos formulaires dans la page..

Il est sage de considérer certains des éléments ici sous un angle objectif. Bien que de nombreux formulaires de connexion et d’inscription fonctionnent bien avec un type de site, il n’ya pas de jugement définitif à décider. “meilleur” Solution. Utilisez votre intuition de conception pour appliquer des fragments de formes auxquelles vous aspirez.

Considérer plusieurs entrées

Pour commencer, considérons un petit formulaire de contact de Foundation Six Web Design. Oui, il ne s’agit pas d’un formulaire de connexion, il est donc possible que le sujet sorte du sujet. Cependant, leur design de page est très impressionnant et cela vous montre ce qu’un peu de créativité peut réaliser..

Chacun des champs de saisie vous permet de saisir des informations de contact personnelles - nom, e-mail, etc. Les styles vont bien au-delà de l'ordinaire, offrant une entrée utilisateur sous forme de calligraphie manuscrite. Ce type de formatage gardera vos utilisateurs dans l’étonnement et atteindra l’objectif de normes de conception bien plus élevées..

Vous voudrez implémenter des styles comme ceux-ci, similaires à toutes vos pages de connexion. Je ne recommanderais certainement pas de coller avec le même style de texte de saisie et les menus option / sélection. Lorsque vous faites du jogging pour stimuler votre cerveau, réfléchissez à la manière dont chaque élément doit être disposé: beaucoup d'espace entre les calques, un grand texte facilement lisible et même des liens dans la barre latérale vers leur ligne de courrier électronique directe..

Zones de connexion jQuery

Cela a été utilisé sur d'innombrables sites Web dans le passé et sera certainement vu dans les conceptions new-age. L'époque où les pratiques standard permettaient aux utilisateurs d'accéder à une nouvelle page pour chaque étape du processus de connexion est révolue. Normalement, cela signifie une page pour saisir vos données et une nouvelle page pour le traitement des informations de connexion..

Pixel2Life offre des informations fantastiques sur un nouveau champ de saisie de données. Sur leur page d'accueil, vous pouvez cliquer sur le lien de connexion et faire apparaître une boîte de connexion dynamique alimentée par jQuery. Ce formulaire contient un appel Ajax à un script PHP externe qui vérifie les informations d'identification de vos informations de connexion et, une fois traité, accorde ou refuse l'accès..

En allant un peu plus loin, l’ astucieux peut remarquer un lien d’enregistrement directement sous la zone de connexion. Cela offre une expérience utilisateur beaucoup plus fluide pour ceux qui cherchent à s'inscrire pour le site Web mais ne peuvent pas localiser le lien d'inscription.

Si un utilisateur n'a pas de compte mais souhaite en créer un, cela les amène sur la page d'inscription sans aucun problème de page. La zone de connexion resterait une option viable pour accéder à votre propre compte, toutefois, cette option permet de générer des rendements plus élevés et un plus grand nombre de nouveaux inscrits..

Inscriptions simples d'une page

Nous constatons un autre paradigme en évolution, à savoir le manque de détails pour l'enregistrement de nouveaux comptes. Ce n'est pas forcément une mauvaise statistique si les utilisateurs sont impatients de remplir des données. Les chiffres suggèrent effectivement des sites Web avec des pages d’enregistrement plus courtes plus lourd listes de nouveaux utilisateurs sur une base quotidienne.

Sikbox offre aux visiteurs une option légère pour créer leur propre champ de recherche pour un site Web. La seule exigence est votre propre domaine personnalisé pour lequel vous souhaitez fournir des résultats de recherche. Les champs de saisie sont volumineux, le texte est très simple à lire et il y a absolument aucune publicité pour détourner l'attention des utilisateurs de la création de leur formulaire de recherche!

À présent, ce n’est pas la meilleure forme à utiliser lorsque vous créez votre propre page d’enregistrement pour un forum ou une archive de blog. Celles-ci nécessiteront au moins, par définition standard, un type de combinaison adresse e-mail / nom d'utilisateur ainsi qu'un mot de passe. Certaines applications Web de la nouvelle génération génèreront des mots de passe dynamiques pour les utilisateurs simplement pour accélérer le processus d'inscription..

Bien entendu, le compromis manque ici pour permettre à l'utilisateur de générer son propre mot de passe auquel beaucoup de gens sont habitués..

Construire des effets flashy

L'une des meilleures expériences d'inscription que j'ai eue a été la création de mon premier compte Tumblr. La page d'accueil de leur site propose à la fois un identifiant et un formulaire d'inscription placés directement l'un en dessous de l'autre avec de nouveaux effets de surbrillance / atténuation CSS3..

Cette approche systématique est similaire en ce qui concerne la zone de connexion jQuery de Pixel2Life. Cependant, la différence avec Tumblr est que le réseau ne peut offrir aucun contenu à ceux qui n'ont pas de blog (en dehors de la navigation sur d'autres comptes). Le véritable avantage de tumblr est de créer votre propre blog et d'en suivre d'autres. Votre objectif principal en page d'accueil est donc de créer un compte ou de vous connecter..

Il y a quelques bugs avec ce système. Notamment dans IE6 / IE7, ne prenant pas en charge ces nouvelles propriétés CSS. On utilise également sur la page d’accueil un système permettant d’ajouter des éléments d’étiquette dans les valeurs d’entrée du formulaire - “défaut” caractères utilisés pour les boîtes de courrier électronique / mot de passe.

Ces étiquettes disparaissent progressivement dans les navigateurs modernes tels que Chrome / Firefox. Mais aucune chance de ce genre avec les navigateurs obsolètes qui, comme vous pouvez l’imaginer, est assez ennuyant d’essayer de relire votre propre saisie.!

20+ exemples de beaux formulaires

Vous trouverez ci-dessous une galerie de synthèse de quelques modèles de formulaires de connexion fantastiques. Celles-ci ont été sélectionnées sur le Web et incluent de nombreuses formes d'applications Web. Si vous avez des suggestions pour d'autres sites, n'hésitez pas à les partager dans la section commentaires ci-dessous.!

Snoggle News