Design & Ergonomie webau service des conversions
Présenté par M. Pelissier
Pourquoi vos utilisateurs vous quittent-ils?
La navigation
La publicité
La structure
Son / Vidéo trop intrusifs
Sérieusement ? On est obligé de s'inscrire pour voir le site ?
Du contenu ennuyeux, un design ennuyeux...
Une lisibilité médiocre
Tunnel de conversion trop fastidieux ou trop long
Dernière mise à jour 1999... ah quand même
Les couleurs
Coordination des couleurs
Couleurs chaudes
Couleurs Froides
Source : Kissmetrics
Coordination des couleurs
Couleurs complémentaires Couleurs analogues
Source : Kissmetrics
La triade
“split” complémentaires La triade rectangulaire Le carré
Coordination des couleurs
Coordination de Rouge
Source : Kissmetrics
Coordination de Gris
Beaucoup de Coordination
Moins de Coordination
Coordination de RougeCoordination de Gris
+ Bleu
Coordination des couleurs
Coordination de Rouge
Source : Kissmetrics
Image de fond et Coordination
Exemple de BEN & JERRY’S
Comment les couleurs influencent la concrétisation ?
Impulser l’achat, souvent pour les publicités de Fast food, centres commerciaux, soldes
Comment les couleurs influencent la concrétisation ?
Comment les couleurs influencent la concrétisation ?
Cible : Personnes ayant un budget, souvent utilisées pour les banques, grands magasins
Comment les couleurs influencent la concrétisation ?
Acheteurs traditionnels, souvent utilisées pour les magasins de vêtements
Comment les couleurs influencent la concrétisation ?
Comment les couleurs influencent la concrétisation ?
Comment les couleurs influencent la concrétisation ?
Comment les couleurs influencent la concrétisation ?
Optimisme et JeunesseAttirer l’attention de l’acheteur
Energie, souvent utilisé pour liquidations
Sécurité, confianceBanque et affaires
Richesse et relaxationPouvoir de l’acheteur
Comment les couleurs influencent la concrétisation ?
Source Kissmetrics
Pouvoir et raffinementProduits de luxe
Romantisme et féminitéCible : femmes et jeunes filles
AgressivitéIncitation à l’action
Soucrire, Vendre Acheter
Calme et Apaisant, Produits de beauté
LA STRUCTURE
Anatomie d’une « landing page » efficaceHome Page
Les bases logo: Sa dimension et son positionnement
La navigation: Page d’accueil
claire pour guider l’utilisateur vers les
éléments importants
Option de recherche sur le site
Le contenu : précis et pertinent, doit
répondre aux attentes de l’utilisateur
Logo
Navigation simple Recherche
amomuito.com
amomuito.com
Et pas…
Anatomie d’une « landing page » efficacePage Produit
Simplifiez le plus possible
Des "call to action" clairs et explicites
Des pages « rapides » pour que l’internaute ait une réponse rapide à ses questions
De la qualité de vos images / photos
Mettre en avant les bonnes choses
Donnez le choix
Call to action
Photos de qualité
Roseindigo.com
chaussettes.com
archiduchesse.com
Efficace ?
OU Efficace ?
Anatomie d’une « landing page » efficace
Encart rouge : Surtout utile pour le clientEncart vert : Surtout utile pour vous
Mettre en avant les produits clés /
phares
Mettre en avant les objectifs (les vôtres / les leurs)
Recommander des produits intéréssants
pour eux
Anatomie d’une « landing page » efficaceConversion : l’Inscription
Simplifiez le plus possible !!
headict.com
Anatomie d’une « landing page » efficaceL’entonnoir de conversion
Une page « récapitulatif »
Call to action SIMPLES
Minimiser les demandes à l’utilisateur
Un design ergonomique et ludique
Anatomie d’une « landing page » efficaceL’entonnoir de conversion
Archiduchesse.com
Des étapes claires
Repérage facile
Anatomie d’une « landing page » efficaceL’entonnoir de conversion
madamechoup.com
Des étapes claires
Anatomie d’une « landing page » efficaceL’entonnoir de conversion
One Page Checkout
Anatomie d’une « landing page » efficaceL’objet de votre site
Logo“Vignette” e-commerce
Informe sur la nature du site
Image reflétant votre activité
infos sur votre activité visibles sans scroller la
page
De l’importance des tests
Une mesure de vos choix
A/B testing
Analytics
L’A/B testing
Deux types de design
Deux textes d’incitation différents
>> Quelle est celle qui convertit le mieux ??
L’A/B testing
Anatomy d’une page A/B testable Parfaite
L’A/B testing
Headline But principal : Intéresser l’utilisateur afin qu’il lise le reste de votre page
L’A/B testing
La Photo Principale Les photos contenant des humains convertissent mieux Les photos “rotatives” aident à la conversion Evoquer des sentiments positifs
L’A/B testing
Récupération des données Emails, formulaires de contact…. Doivent être facile à comprendre, instructions simples… Faire comprendre poliement s’il y a une erreur ou un oubli
L’A/B testing
Incitation à l’action Bouton de couleur différente
Des mots simples, clairs et inspirant
L’A/B testing
Les Bénéfices de votre produit/service Les utilisateurs sont des scanners, pas des lecteurs
Comprendre votre cible avant de penser aux bénéfices
L’A/B testing
Une autre inciation à l’action…
… peut être un ensemble de boutons sociaux, de partage
Peuvent être placé sur votre page “confirmation” ou page de remerciements
AnalyticsLe tunnel de conversion
fez
Inscrivez les étapes de votre tunnel de conversion
AnalyticsLe tunnel de conversion
fez
Analysez les étapes où vous perdez vos
prospects
Pourriez-vous en simplifier certaines ?
Améliorer l’ergonomie ?
RASSURER VOS CONSOMMATEURS
Stucturation des contenus
• Le numéro de téléphone
Afficher le numéro de téléphone dans la page d’accueil pour augmenter la confiance
L’utilisateur sait qu’il peut s’adresser à une personne de vive voix
Stucturation des contenus
• Module bancaire sécurisé
Mettre en avant que le site utilise un module de paiement sécurisé
Le paiement doit être facile d’accès et rapide
Stucturation des contenus
• Module bancaire sécurisé
Stucturation des contenus
Vous avez confiance ?
Stucturation des contenus
• Labels et autres mentions rassurantes
Stucturation des contenus
• Offrir différents types de contenus
Photos, videos, dessins…Plusieurs sortes de contenus offrent un détail du produit Plusieurs vues
L’internaute se sentira en confiance s’il peut voir des photos professionnelles et des avis d’autres utilisateurs
• L’avis des consommateurs !!
tribord.com
tribord.com
L’impact « Social »
• Pensez aux “boutons sociaux”
www.atelierdelaceinture.fr
madamechoup.com
Innovation : l’intéraction utilisateur
madamechoup.com
Stucturation des contenus : Présentation de la société
• Présentation de la société
Date de création, localisation, structure de l’entreprise…Photos, représentations animées, dessins…
L’utilisateur sait qui se trouve derrière le site web, il aura donc plus de facilité à acheter s’il a une vision d’une structure solide
Page « l’équipe »
Stucturation des contenus : Présentation de la société
Mywebshop.org
Stucturation des contenus : Présentation de la société
comete.com
Page « l’équipe »
Structuration des contenus : L’inscription
Simple, clair, concis et ergonomique : l’utilisateur sait instinctivement ce que l’on attend de lui !
Structuration des contenus : Rassurer
• Le cadre légal
Le cadre légal doit se retrouver sur toutes les pages du site Mentions légales (inscription à la CNIL s’il y a lieu) Conditions Générales de Ventes Mise en place de « process » internes pour le respect de la loi « informatique et
liberté » Gestion de vos listes d’e-mailing « propre » et respectueuse de la réglementation en
vigueur (gestion des désabonnement, opt-in, etc.)
Les mentions légales et CGV assurent la bienveillance de l’entreprise
Sarenza.com
glisshop.com
Structuration des contenus : Le cadre légal
Structuration des contenus : Exemple de bonne pratique (Home)
Structuration des contenus : Exemple de bonne pratique (Page de « listing »)
Améliorer vos conversions : Le « P.E.T » design
1. Trop de choix tue le choix => Soyez concis + de choix = + de trafic MAIS moins de conversions Trouver l’équilibre en gardant cette maxime en tête
2. Les témoignages et avis sont vos meilleurs vendeurs, ceux de vos amis sont encore meilleurs !!
3. Faite ressentir l’urgence Plus que x jours pour… Seulement N articles en promos…
4. Capter l’attention “basique” de vos visiteurs Nouriture, Sexe, Danger
5. Soyez humain et personnel6. Racontez / Montrez des histoires plutôt que des faits7. Engagez vos utilisateurs
Récompensez / Encouragez les commentaires produits Programme de parainage et de fidélité, etc.
Améliorer vos conversions : Le « P.E.T » design
Les « 10 commandements » d’un design axé sur la conversion
Un contact téléphonique
Des formulaires de contact bien présents
Des photos et témoignages personnels
Des vidéos pour engager votre audience
Des signes de sécurité rassurants et crédibles
Des mots « choc »
Eviter les design « génériques »
Penser d'abord à votre objectif (le design ensuite)
De l'espace
Tester, tester et re…tester
En conclusion
Innover oui mais n’oubliez pas les normes, les conventions et encore moins la législation (exemple : patrikervell ou madamechoup)
Web design, ergonomie et mise en page de vos contenus sont cruciaux
Ne copiez pas !! Ou alors dites-le ;-)
Evitez les fautes et soyez honnête
Produisez du contenu unique et de qualité
Merci de votre attention