Login / Formulaire d'inscription: Idées et beaux exemples

Tout au long du web moderne, nous voyons une quantité croissante d'endroits pour l'entrée de l'utilisateur. Ceux-ci comprennent des paniers d'achat, des jeux interactifs sur le Web, et certainement des formulaires d'inscription sur le site Web. Il semble que non seulement les concepteurs devraient se concentrer sur la conception de la page, mais l'esthétique de la forme est également un rôle tout aussi essentiel.

Considérez le nombre de formulaires que vous avez remplis au cours de votre historique Internet. Il existe d'innombrables exemples de ces forums, forums, blogs, et bien d'autres encore. Dans cet article, nous allons jeter un œil à quelques astuces pour concevoir vos formulaires sur une page.

Il est sage d'examiner certains des éléments ici d'un point de vue objectif. Bien que de nombreux formulaires de connexion et d'inscription fonctionnent bien avec un type de site, il n'y a pas de jugement final sur la meilleure solution. Utilisez votre intuition de conception pour appliquer des morceaux à partir des formes auxquelles vous aspirez.

Considérer plusieurs entrées

Pour commencer, pensez à un petit formulaire de contact de la Fondation Six Web Design. Oui, il ne s'agit pas d'un formulaire de connexion, cela peut vous éloigner un peu du sujet. Cependant, la conception de leur page est très impressionnante et elle vous montre ce qu'un peu de créativité peut accomplir.

Chacun des champs de saisie vous offre la possibilité de taper des informations de contact personnelles - nom, adresse e-mail, etc. Les styles vont bien au-delà de l'ordinaire, offrant une saisie de l'utilisateur dans un type de calligraphie manuscrite. Ce type de format gardera vos utilisateurs dans un état d'émerveillement et atteindra un objectif de normes de conception beaucoup plus élevées.

Vous voudrez implémenter des styles similaires à ceux de toutes vos pages de connexion. Je ne recommanderais certainement pas de coller avec le même style de texte d'entrée et les menus option / select. Lorsque vous faites du jogging votre cerveau pour la créativité, considérez comment chaque élément doit être mis en page: beaucoup d'espace entre les calques, un grand texte facilement lisible, et même des liens latéraux à leur ligne de courriel directe.

Boîtes de connexion jQuery

Cela a été utilisé sur d'innombrables sites Web dans le passé et sera certainement vu dans les conceptions new-age. Il y a longtemps que les pratiques standard amèneraient les utilisateurs sur une nouvelle page pour chaque étape du processus de connexion. Normalement, cela signifie une page pour entrer vos données et aussi une nouvelle page pour le traitement des informations de connexion.

Pixel2Life offre un aperçu fantastique d'un nouveau champ de saisie de données. À partir de leur page d'accueil, vous pouvez cliquer sur le lien de connexion et ouvrir 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 encore plus loin, l'astucieux peut remarquer un lien d'enregistrement directement sous la boîte de connexion. Cela offre une expérience utilisateur beaucoup plus fluide pour ceux qui cherchent à s'inscrire au site Web mais qui ne peuvent pas trouver le lien d'inscription.

Si un utilisateur n'a pas de compte mais souhaite en créer un, cela l'amène sur la page d'inscription sans problème de page buggé. La boîte de connexion serait toujours une option viable pour accéder à votre propre compte, mais en laissant l'option céder la place à des rendements plus élevés et des volumes plus élevés de nouveaux inscrits.

Simple inscription d'une page

Un autre paradigme changeant que nous voyons est le manque de tels détails pour les nouveaux enregistrements de compte. Ce n'est pas nécessairement une mauvaise statistique en supposant que les utilisateurs s'impatientent de remplir des données. Les chiffres suggèrent en fait que les sites avec des pages d'inscription plus courtes accumulent quotidiennement des listes plus importantes de nouveaux utilisateurs.

Sikbox offre une option légère pour les visiteurs de créer leur propre boîte de recherche pour un site Web. La seule exigence est votre propre domaine personnalisé pour fournir des résultats de recherche. Les champs de saisie sont volumineux, le texte est très simple à lire et il n'y a absolument aucune publicité pour distraire les utilisateurs de la tâche de construire leur formulaire de recherche!

Maintenant, ce n'est pas la meilleure forme à construire lors de la création de votre propre page d'inscription pour un forum ou une archive de blog. Ceux-ci, par définition standard, nécessitent au moins un certain type de combinaison adresse électronique / nom d'utilisateur avec un mot de passe. Certaines applications Web new-age généreront des mots de passe dynamiques pour les utilisateurs simplement pour accélérer le processus d'enregistrement.

Bien sûr, le compromis ici manque de contrôle sur la fin de l'utilisateur pour générer son propre mot de passe auquel de nombreuses personnes sont habituées.

Construire des effets flashy

L'une des plus grandes expériences d'inscription que j'ai jamais eu a été de créer mon premier compte Tumblr. La page d'accueil de leur site propose à la fois un formulaire de connexion et d'inscription placé directement sous l'autre avec les nouveaux effets de surbrillance / fondu 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 les autres comptes). Le vrai bénéfice de tumblr est de créer son propre blog et d'en suivre d'autres. Votre objectif principal sur la page d'accueil est donc de créer un compte ou de vous connecter.

Il y a quelques bugs avec ce système. Notamment IE6 / IE7 ne supporte pas ces nouvelles propriétés CSS. Un système d'ajout d'éléments d'étiquettes dans les valeurs d'entrée du formulaire est également utilisé sur la page d'accueil. Il remplace essentiellement les caractères "par défaut" utilisés pour les boîtes de messagerie / mot de passe.

Ces étiquettes disparaissent dans les navigateurs modernes tels que Chrome / Firefox. Mais pas de chance avec les navigateurs déconseillés qui, comme vous pouvez l'imaginer, est assez ennuyeux en essayant de relire votre propre entrée!

20+ exemples de conception de belle forme

Vous trouverez ci-dessous une galerie rapide de certaines conceptions de formulaires de connexion. Ceux-ci ont été choisis à partir du Web et comprennent de nombreuses formes d'applications Web. Si vous avez des suggestions pour d'autres sites, n'hésitez pas à les partager dans la section des commentaires ci-dessous!

Snoggle Nouvelles

Robo.to

Virb

Grooveshark

Storenvy

Dropbox

Idées Green Globe

Freshbooks

Thème

MailChimp

Camp de base

Vol d'essai

AwesomeJS

Déverrouiller

PopScreen

Gowalla

Kontain

MobileMe

Laterthis

Launchlist

Theidealist

Importer ou exporter vos mots de passe directement à partir de Google Chrome

Ceux qui ont utilisé le navigateur Chrome de Google connaissent la fonctionnalité d'enregistrement du mot de passe qui peut être utilisée pour la fonctionnalité de remplissage automatique du navigateur . Cependant, saviez-vous que vous pouvez importer, ou même exporter des mots de passe à partir du navigateur lui-même?Voici c

(Conseils techniques et de conception)

8 façons dont les pigistes peuvent lancer votre startup

Ce sont de bons moments pour travailler en tant que pigiste. L'industrie de la pige est comme un feu sauvage, avec de plus en plus d'argent versé dans le mélange. Il y a déjà des tonnes d'entreprises qui utilisent l'industrie. Si vous êtes un entrepreneur jeune et prometteur, vous voulez que votre démarrage fonctionne au plus bas des frais généraux. La réd

(Conseils techniques et de conception)