Ergonomie et web design au service des conversions

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