Conception De Formulaires Web : Vitrines Et Solutions

 L'Éditorial Fracassant

À propos de l’auteur

L’équipe de Smashing aime le contenu de haute qualité et se soucie des petits détails. Grâce à nos articles en ligne, Livres Fracassants, eBooks ainsi que Smashing …En savoir plus sur L’Éditorial Fracassant↬

  • 11 lecture minimale
  • Enregistrée pour une lecture hors ligne
  • Partager sur Twitter, LinkedIn

Cet aperçu présente une sélection triée sur le volet et organisée des articles du magazine Smashing les plus utiles et les plus populaires liés à la conception de formulaires Web et publiés ici au fil des ans.

Aperçu Rapide

  • Idées Utiles Et Lignes Directrices Pour Une Bonne Conception De Formulaires Web
  • Conception De Formulaires Web: Vitrines Et Solutions
  • Conception De Formulaires Web: Solutions Modernes Et Idées Créatives
  • Un Guide Complet Sur La Convivialité Des Formulaires Web
  • À La Recherche Du Parfait
  • Validation de Formulaire Web: Meilleures Pratiques et Tutoriels
  • Validation de Champ de Formulaire: L’Approche Basée sur les Erreurs
  • Modèles de Conception de Formulaire Web: Formulaires d’inscription
  • Modèles de Conception de Formulaire Web: Formulaires D’Inscription, Partie 2
  • Nouvelles Approches Pour La Conception De Formulaires De Connexion
  • Techniques Innovantes Pour Simplifier Les Inscriptions et Les Connexions
  • Formulaires Basés Sur CSS: Solutions Modernes
  • Formulaires Sur Appareils Mobiles: Solutions Modernes
  • Élimination Des Pierres D’Achoppement Dans Les Formulaires Mobiles
  • Téléchargement Gratuit: Feuille De Triche Pour La Conception Formulaires Web

Idées et Lignes directrices Utiles Pour une Bonne Conception de formulaires Web

Le formulaire de saisie est un élément essentiel de presque tous les sites Web ou applications de nos jours. L’entrée est une méthode d’interaction centrale et, dans de nombreux cas, elle représente le point de conversion difficile entre le succès et l’échec. Avec le temps et les efforts que nous mettons pour amener les utilisateurs à nos formulaires d’inscription et de contact, il est surprenant que nous ayons tendance à ne pas consacrer une quantité proportionnelle de temps aux formulaires eux-mêmes.

 Meilleures pratiques de conception de formulaires Web

Un certain nombre de techniques et d’éléments peuvent être utilisés dans les formulaires Web pour les transformer d’échecs abjects en points de conversion réussis. Dans cet article, nous présenterons quelques exemples intéressants et des directives utiles pour la conception de formulaires Web.

En savoir plus

Un Guide complet Sur la convivialité des formulaires Web

Contrairement à ce que vous pouvez lire, parsemer votre formulaire de jolis boutons, de couleurs et de typographie et de nombreux plugins jQuery ne le rendra pas utilisable. En effet, ce faisant, vous ne traiteriez (de manière non structurée) que d’un tiers de ce qui constitue la facilité d’utilisation de la forme.

Dans cet article, nous vous fournirons des directives pratiques que vous pouvez facilement suivre. Ces directives ont été élaborées à partir de tests d’utilisabilité, de tests sur le terrain, de suivi de site Web, de suivi oculaire, d’analyses Web et de plaintes réelles adressées au personnel du support client par des utilisateurs mécontents.

En savoir plus

Conception de formulaires Web: Solutions modernes et Idées créatives

Le formulaire Web est souvent le principal canal de communication entre les visiteurs et les propriétaires de sites. Les commentaires sont toujours importants, c’est pourquoi il est nécessaire de s’assurer que les formulaires Web sont faciles à comprendre et intuitifs à utiliser. Néanmoins, même dans la conception de formes, on peut se permettre une partie saine de la créativité.

Les formulaires Web ne doivent pas nécessairement être ennuyeux et, en utilisant CSS ou Flash, vous pouvez facilement vous assurer qu’ils sont attrayants et efficaces. Pour vous faire remarquer, vous devez trouver quelque chose d’unique et d’intéressant — des symboles, des icônes, des couleurs, une position ou la taille du formulaire Web sont souvent utilisés pour obtenir des solutions de conception intéressantes. Nous avons cherché quelques exemples et nous les avons trouvés. Formulaires web créatifs, originaux et inhabituels.

 Capture d'écran

Ci-dessous, nous présentons plus de 40 (vraiment) beaux exemples de formulaires Web ainsi que des solutions modernes et des idées créatives liées à la conception de formulaires Web. Certains des exemples sont basés sur Flash; cependant, dans la plupart des cas, vous pouvez facilement créer des conceptions similaires avec du CSS pur et du (X) HTML.

En savoir plus

À la recherche des

Parfaits, ou des Tests de Turing Publics Entièrement automatisés pour Distinguer les Ordinateurs et les Humains, existent pour s’assurer que les entrées utilisateur n’ont pas été générées par un ordinateur. Ces puzzles particuliers sont couramment utilisés sur le Web pour protéger les formulaires d’inscription et de commentaires contre le spam. Pour être honnête, j’ai des sentiments mitigés à propos de s. Ils m’ont ennuyé à de nombreuses reprises, mais je les ai également mis en œuvre comme solutions rapides sur des sites Web.

re

Cet article suit la recherche de la solution parfaite au problème des quantités croissantes de spam généré par l’homme. Nous examinerons comment et pourquoi s sont utilisés et leur effet sur la convivialité afin de répondre à des questions clés: qu’est-ce que le parfait, et sont-ils même souhaitables?

En savoir plus

Validation du formulaire Web: Bonnes pratiques et tutoriels

Idéalement, les utilisateurs rempliront le formulaire Web avec les informations nécessaires et termineront leur travail avec succès. Cependant, les gens font souvent des erreurs. C’est là que la validation des formulaires Web entre en jeu. L’objectif de la validation du formulaire Web est de s’assurer que l’utilisateur a fourni les informations nécessaires et correctement formatées nécessaires à la réussite d’une opération. Dans cet article, nous irons au-delà de la validation elle-même et explorerons différentes techniques, méthodes et approches de validation et de retour d’erreur.

 Formulaire d'inscription Facebook

L’entrée de l’utilisateur peut être validée sur le serveur et sur le client (navigateur web). Ainsi, nous avons une validation côté serveur et côté client. Nous discuterons des avantages et des inconvénients de chacun. Dans la validation côté serveur, les informations sont envoyées au serveur et validées à l’aide de l’un des langages côté serveur. Si la validation échoue, la réponse est ensuite renvoyée au client, la page contenant le formulaire Web est actualisée et un feedback est affiché.

En savoir plus

Validation du champ de formulaire: Les pages d’erreur de l’approche Erreurs uniquement

pour la validation des champs de formulaire sont terribles. Vous venez de remplir 20 champs de formulaire, mais la même page gonflée vous est renvoyée au visage car un seul champ n’a pas été validé.

Je me souviens clairement des soupirs de désespoir souvent bruyants lors de notre dernière étude d’utilisabilité à chaque fois qu’un sujet de test rencontrait une page d’erreur de validation.

Nous avons également remarqué que les sujets de test qui avaient été exposés à des erreurs de validation ont commencé à prendre des mesures préventives pour les éviter dans les étapes ultérieures, en écrivant des choses telles que « N / A » dans le champ « Nom de l’entreprise » en cas de doute quant à savoir si le champ était facultatif.

 Page d'erreur de validation du champ de formulaire à BlueNile.com

À l’Institut Baymard, nous avons réfléchi à ce problème et avons eu une idée que nous appelons « champs d’erreur uniquement » — ce qui est exactement le sujet de cet article. Avant d’explorer cette idée, examinons trois types traditionnels de techniques de validation: « rechargement de la même page », « rechargement optimisé de la même page » et « validation en ligne en direct. »

En savoir plus

Modèles de conception de formulaires Web: Formulaires d’inscription

Si vous souhaitez maximiser les revenus de votre service, vous devez maximiser les taux de remplissage de vos formulaires Web. À moins d’avoir des idées révolutionnaires pour impressionner vos visiteurs à première vue, il ne suffit pas de simplement permettre aux utilisateurs de s’inscrire sur votre site. Pour permettre au service d’atteindre une exposition maximale, nous, concepteurs, devons fournir aux utilisateurs une bonne expérience utilisateur. Nous devons les inviter, leur décrire le fonctionnement du service, leur expliquer pourquoi ils doivent remplir le formulaire et leur suggérer les avantages qu’ils obtiendront en retour. Et, bien sûr, nous devrions également leur faciliter la participation.

Cependant, la conception de formulaires Web efficaces n’est pas facile. Et cela a une raison simple: personne n’aime remplir des formulaires – ni hors ligne ni en ligne. Par conséquent, en tant que concepteurs, nous devons prendre des décisions de conception judicieuses pour rendre l’achèvement du formulaire facile, intuitif et indolore.

 Modèles de conception de formulaires Web

Mais comment pouvons-nous exactement comprendre ces décisions? Où le lien vers le formulaire doit-il être placé dans la mise en page? Comment devrions-nous le concevoir? Comment mettre en évidence les étiquettes et comment les aligner ? À quoi ressemblent les modèles de conception de formulaires Web dans les sites Web modernes? Ce sont exactement les questions que nous nous sommes posées. Et pour obtenir les réponses, nous avons mené une enquête.

Ci-dessous, nous présentons les résultats de notre enquête sur les modèles actuels de conception de formulaires Web — les résultats d’une analyse de 100 sites Web populaires où les formulaires Web (devraient) avoir de l’importance. Nous avons décidé de commencer par les formulaires d’inscription. Nous présentons ci-dessous la première partie de nos résultats; la deuxième partie des résultats de l’enquête sera publiée la semaine prochaine.

Mise à jour: la deuxième partie des résultats de l’enquête est maintenant également publiée: Modèles de conception de formulaires Web: Formulaires d’inscription Partie 2.

En savoir plus

Modèles de conception de formulaires Web: Formulaires d’inscription, Partie 2

La semaine dernière, nous avons présenté les premiers résultats de notre enquête sur les formulaires Web. L’objectif principal de l’enquête était de fournir aux concepteurs et aux développeurs une certaine intuition de l’efficacité de la conception des formulaires Web; nous avons également présenté quelques lignes directrices sur la manière d’obtenir un formulaire Web efficace et convivial.

 Capture d'écran

Nous nous sommes concentrés sur les formulaires d’inscription car nous voulions examiner séparément d’autres formulaires cruciaux (par exemple, les formulaires de paiement). Ensuite, nous avons parcouru chaque formulaire d’inscription des sites sélectionnés et analysé les approches de conception mises en œuvre dans ces formulaires. Ci—dessous, nous présentons la deuxième partie de nos résultats – les résultats de notre enquête parmi les formulaires Web de 100 sites Web populaires où les formulaires Web (devraient) avoir de l’importance.

Veuillez noter que cet article ne concerne pas les formulaires de paiement — c’est un sujet pour une autre discussion, nous pouvons les considérer séparément dans l’un des prochains articles. Nous tenons à remercier Wufoo de nous avoir fourni un cadre pour mener notre enquête.

En savoir plus

Nouvelles approches Pour Concevoir des formulaires de connexion

Pour beaucoup d’entre nous, la connexion à des sites Web fait partie de notre routine quotidienne. En fait, nous le faisons probablement si souvent que nous avons cessé de penser à la façon dont cela se fait… c’est-à-dire jusqu’à ce que quelque chose ne tourne pas rond: nous oublions notre mot de passe, notre nom d’utilisateur, l’adresse e-mail avec laquelle nous nous sommes inscrits, comment nous nous sommes inscrits, ou même si nous nous sommes jamais inscrits.

Ces expériences ne sont pas seulement frustrantes pour nous, elles sont également mauvaises pour les entreprises. À quel point? L’analyse de l’ingénierie de l’interface utilisateur 1 d’un grand détaillant en ligne a révélé que 45% de tous les clients avaient plusieurs inscriptions dans le système, que 160 000 personnes demandaient leur mot de passe chaque jour et que 75% de ces personnes n’avaient jamais effectué l’achat qu’elles avaient commencé une fois qu’elles avaient demandé leur mot de passe.

 Gowalla
Le formulaire de connexion sur Gowalla.

Pour couronner le tout, les visiteurs qui ne sont pas connectés ne voient pas une vue personnalisée du contenu et des recommandations d’un site Web, ce qui réduit les taux de conversion et l’engagement. Alors, la connexion est un gros problème?—?assez grand pour que certains sites Web aient commencé à explorer de nouvelles solutions de conception pour l’ancien problème.

En savoir plus

Techniques innovantes Pour simplifier les inscriptions et les connexions

Il existe de nombreuses façons de concevoir des formulaires d’inscription et de connexion. La plupart des concepteurs connaissent les méthodes conventionnelles. Mais comprendre et appliquer quelques techniques innovantes pourrait rendre vos formulaires plus simples et plus efficaces à remplir. Dans cet article, nous aimerions présenter quelques nouvelles idées qui pourraient être utiles pour vos prochains designs. Veuillez noter qu’avant d’utiliser ces techniques, vous devez vous assurer qu’elles ont du sens dans le contexte dans lequel vous allez les utiliser. Nous aimerions connaître vos études de cas et vos tests d’utilisabilité qui confirment ou rejettent les suggestions proposées ci-dessous.

En savoir plus

Formulaires basés sur CSS: Solutions modernes

Les formulaires d’inscription et de commentaires sont disponibles partout. Chaque start-up essaie d’attirer l’attention des visiteurs, de sorte que les formulaires Web deviennent de plus en plus importants pour le succès de toute entreprise. En fin de compte, exactement ces formulaires Web sont responsables du premier contact avec les clients potentiels. Jetons un coup d’œil aux solutions modernes qu’un développeur Web peut utiliser en concevant son prochain formulaire basé sur css. Liens vérifiés: Mai / 08 2008.

En savoir plus

Formulaires sur appareils mobiles: Solutions modernes

Les formulaires mobiles ont tendance à avoir beaucoup plus de contraintes que leurs cousins de bureau: les écrans sont plus petits; les connexions sont plus lentes; la saisie de texte est plus délicate; la liste continue. Ainsi, limiter le nombre de formulaires dans vos applications mobiles et sites Web est généralement une bonne idée. Lorsque vous souhaitez que les utilisateurs utilisent des appareils mobiles, les boutons radio, les cases à cocher, les menus de sélection et les listes fonctionnent généralement beaucoup mieux que les champs de texte ouverts.

Mais les contraintes engendrent l’innovation et les formes mobiles ne sont pas différentes. Les limites des appareils mobiles ont forcé les développeurs et les concepteurs à trouver de nouvelles façons de permettre aux utilisateurs de saisir des données plus rapidement et plus facilement. Grâce aux solutions modernes couvertes dans cet article, l’espace mobile peut ne pas être un endroit pour éviter les formes beaucoup plus longtemps. Au lieu de cela, il peut devenir l’endroit pour les encourager.

En savoir plus

Enlever Les Pierres d’Achoppement Dans les Formes Mobiles

Il y a quelques semaines, j’ai été assez surpris quand j’ai vu le trottoir s’approcher rapidement alors que je me promenais. Allongé là stupéfait, je réalisai bientôt ce qui s’était passé: je suis tombé. Ouch. B – moins. J’essaie normalement d’être le plus attentif possible, mais cette fois, une grosse fissure dans le trottoir a attrapé ma chaussure et m’a complètement déséquilibrée.

 Trébuchement mobile

Lorsqu’il s’agit de remplir des formulaires sur un téléphone mobile, j’ai observé de nombreux utilisateurs vivre une expérience similaire, simplement moins douloureuse dans son aspect physique. De nombreux éléments d’un formulaire mobile affectent la fluidité avec laquelle les utilisateurs accéderont à un service ou à un produit se cachant derrière un formulaire de toute nature.

Plusieurs facteurs peuvent être considérés comme des pierres d’achoppement tout au long du processus de remplissage d’un formulaire. Plus précisément sur un appareil portable, ce voyage est compliqué par le fait que nous devons prendre en compte des paramètres contextuels tels que l’heure, l’emplacement ou des options de saisie limitées, par rapport à une expérience de bureau ferme. Dans cet article, nous examinerons les pierres d’achoppement les plus courantes pour les appareils mobiles. De plus, je discuterai des stratégies de conception pour éviter les pierres d’achoppement et faciliter une promenade sûre et rapide dans les formulaires pour les utilisateurs mobiles.

En savoir plus

Téléchargement gratuit: Feuille de triche Pour la Conception de formulaires Web

Formulaires, formulaires, formulaires: si souvent négligés dans la conception. Dans cet article, nous sommes heureux de publier la feuille de triche de conception de formulaire, créée par Joe Leech et publiée pour le magazine Smashing et ses lecteurs. Cette feuille de berceau contient un modèle Omnigraffle, ainsi que des exemples Photoshop (PSD) et PDF que vous pouvez télécharger et utiliser à votre guise. Imprimez la feuille, collez-la à votre mur, envoyez-la aux clients et aidez généralement à améliorer un peu les formulaires de chacun.

 Conception de formulaires

Les concepteurs de la feuille de berceau ont passé des années à concevoir et à tester des formulaires, et ils ont décidé de résumer les problèmes et les problèmes les plus courants qui surviennent dans leurs projets.

En savoir plus

Vous pourriez également être intéressé par les sélections « Best of » suivantes:

  • Éléments De Conception Web : Exemples Et Meilleures Pratiques
  • Vitrines De Navigation De Conception Web
  • Convivialité & Expérience Utilisateur

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.