Page contact : conseils et ressources webdesign

Une page de contact représente souvent la porte d’entrée d’un utilisateur chez une marque. Pour maximiser la conversation et offrir la meilleure expérience possible, je vous propose de (re)-découvrir quelques bonnes pratiques.

Cela semble évident mais un formulaire de contact réfléchi, fonctionnel et original vous permet d’augmenter significativement le nombre de demandes qualifiées. Même si les réseaux sociaux ont aujourd’hui aisément complété la page de contact classique sur un site, celle-ci n’est pas encore obsolète pour autant.

Bien définir le rôle de la page et du formulaire :

Trouver des prospects, des contacts ? Répondre à des questions techniques, gérer le service technique ? Un page de contact doit avoir un rôle précis : définissez-le et allez à l’essentiel avec vos champs. Proposez également des alternatives comme un numéro de téléphone et/ou une carte.

L’utilisateur avant tout :

Aujourd’hui de simples champs de formulaires ne suffisent plus. Dans l’ère du mobile et du responsive design, nous devons remettre l’utilisateur au centre de l’expérience.

Pour inciter les internautes a compléter vos champs, accompagnez-les et récompensez-les à chaque étape réussie. Comment faire en pratique ? En offrant un bon retour visuel ou sonore à chaque champ par exemple. Ajoutez des coches une fois qu’un champ est bien rempli, avertissez sans violence lorsqu’un champ est faux, etc.

Autre chose, si votre formulaire doit comporter plusieurs étapes, utilisez des barres de progression, des onglets, voir un accordéon.

Quelques exemples concrets :

Les exemples ci-dessous démontrent bien qu’il est possible de faire une page ou un formulaire de contact efficace et original. En fin d’article, je vous propose de découvrir quelques ressources et plug ins utiles pour créer la votre.

Sweetscoops

En mode « ghost button« , le formulaire s’intègre aisément dans la navigation. Son déploiement plein écran, sa belle image de fond le rendent incontournable.

contact-form-exemple-1

The Chedi Andermatt

Dans le même esprit esthétique, le formulaire de contact de ce site est placé très astucieusement. Au clic sur le menu principal, il est déployé sous la forme d’un volet. Un bon moyen de le rendre accessible rapidement et facilement depuis n’importe quelle page.

contact-form-exemple-2

Kinhr

La superbe photo du haut de page donne déjà l’impression d’être connecté avec la société. Cette tendance de l’Hero Image avec une vraie photographie, donne de la crédibilité et surpasse largement une photo de stock.

contact-form-exemple-3

Multifarious

Pour remettre l’humain au centre de l’expérience, adressez-vous donc à lui comme un humain. Un texte accueillant et amical comme sur le site de Multifarious est un bon exemple.

contact-form-exemple-4

Lander App

Un détail bien placé fait la différence. Sur cette page de contact, l’ajout des contacts réels avec qui vous allez vous entretenir met en confiance et donne du crédit au service.

contact-form-exemple-5

Fior di latte gelato

Dites adieu aux formulaires long et impersonnel. Ici l’approche est différente : le site propose une méthode de contact en privilégiant les réseaux sociaux.

contact-form-exemple-6

Cafe Evoke

Avec son design franchement réussi, le site Evoke offre un formulaire ultra simple s’intégrant parfaitement dans le webdesign global.

contact-form-exemple-7

Ultra Noir

Du moderne vintage à souhait sur la page de contact d’Ultra Noir. Simple, efficace et original.

contact-form-exemple-8

Supereight Studio

Une carte, des adresses et un formulaire. Peut-être un peu lourd, mais complet et bien agencé.

contact-form-exemple-9

Mostly Serious

Chez Mostly Serious, la page contact va à l’essentiel ! Et c’est exactement ce qu’on attends d’elle.

contact-form-exemple-10

Ressources :

J’ai collecté quelques intéressantes ressources, notamment chez les puissants Codrops.

Effets sur les inputs

Une impressionnante collection d’effets applicables sur les champs texte. Nous allons sans aucun doute en retrouver dans quelques sites à venir.

contact-form-ressource-4

Formulaire minimal

Un tutoriel complet pour créer un petit formulaire en plusieurs étapes. Une belle barre de progression vient compléter le remplissage et le nouveau champs est chargé de manière dynamique. Une expérience vraiment réussie !

contact-form-ressource

« Natural language form »

Un concept qui se développe petit à petit sur différents sites : les champs forment un texte à trous cohérent, que l’utilisateur doit remplir. Un bon moyen de faire participer activement l’utilisateur, sans devoir remplir un formulaire rébarbatif. 

contact-form-ressource-2

Checkbox animée

Pour compléter l’interactivité de l’expérience, pourquoi ne pas mettre en place des cases à cochées animée ? C’est que propose ce tutoriel, à grand renfort de SVG.

contact-form-ressource-3

Jotform

Cet éditeur de formulaire WYSIWYG, rassemble et récompense les créations les plus efficaces. Un award du meilleur formulaire ? Et oui, c’est bel et bien ça !

contact-form-ressource-5

Typeform

Typeform est également un créateur de formulaire en ligne (avec une interface WYSIWYG). Il vous permet de déployer rapidement un formulaire de contact, un questionnaire, bref des éléments avec des champs, mais de manière élégante.

contact-form-ressource-6

Pour conclure :

Les exemples présentés utilisent un design simple, efficace et minimaliste pour rendre l’expérience la plus simple possible. Oubliez les questions à rallonge, adressez-vous à l’utilisateur comme à un humain, ramenez de l’interactivité et surtout personnalisez l’expérience, en donnant à l’utilisateur la sensation d’être unique.

Vous avez des exemples et des ressources ?
N’hésitez pas à les partager !

5 commentaires

Répondre muriel Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*