49
24/03/14 Rendre son site plus performant !

A6 rendre son site plus performant

Embed Size (px)

Citation preview

Page 1: A6 rendre son site plus performant

24/03/14 Rendre son site plus performant !

Page 2: A6 rendre son site plus performant

Un site performant, c’est quoi ?

Page 3: A6 rendre son site plus performant

Mécanique du e-marketingles 4 paliers décisifs

VisibilitéAccrocheSéduction

InformationFacilitationRassurance

Conversion

Partagerebond

abandon

Page 4: A6 rendre son site plus performant

Mécanique du e-marketingPsychologie de l’internaute

- Rien n’est jamais évident pour l’internaute

- Infos simples. Phrases courtes. Peu de texte. Beaucoup d’images

- Hiérarchisation de l’info dans la mise en page (zoning)

- Eléments de conversion en avant (contact / réserver …)

- Des contenus structurés : paragraphes courts

- Un maximum d’informations (la carotte ne fonctionne pas)

- Toute information accessible en moins de 3 clics

- Accès direct/facile aux pages les plus demandées

- Plein d’ « informations de rassurance »

- Photos nombreuses et grandes

- Intégration / Valorisation d’ avis clients

- Valorisation des labels

Idiot

Aveugle

Paresseux

Peureux

Page 5: A6 rendre son site plus performant

Cheminement sur un site performant

Accroche (5 secondes) :- J’identifie le site (qui, quoi, où…)- Je sens du professionnalisme

- Il me semble agréable et clair

Découverte :- Je comprends immédiatement l’organisation / navigation du site- Je trouve facilement les premières informations recherchées

Usage :- Je parcours le site et trouve facilement d’autres informations- Les informations sont agréables à lire/voir- Plusieurs niveaux : infos / détails / compléments d’info / suggestions

Conversion :- je me projette ; je prévois- Je contacte ; je réserve ;

Page 6: A6 rendre son site plus performant

Concrètement, sur mon site

Je soigne le zoning :

Page 7: A6 rendre son site plus performant

Concrètement, sur mon site

Je structure mes contenus :

- Plusieurs paragraphes par page- Des titres de paragraphes- Sauts de ligne (écriture aérée)- Phrases courtes- Photos et illustrations nombreuses

Page 8: A6 rendre son site plus performant
Page 9: A6 rendre son site plus performant

Concrètement, sur mon site

Je teste , j’applique la règle des 3 clics :

toute page est accessible depuis 1, 2 ou 3 clics maxi

Page 10: A6 rendre son site plus performant

Concrètement, sur mon site

Je hiérarchise l’information :

- L’information essentielle très visible (Titres)

- L’information importante est visible (gras, souligné, illustrations…)

- Les détails et compléments d’info sont moins visibles MAIS ils sont clairs et faciles à lire

Page 11: A6 rendre son site plus performant

Les photos ?

Page 12: A6 rendre son site plus performant

3 choses à faire avec les photos

- Des photos plus qualitatives

- Plus de photos

- Des photos optimisées : petites (ou moyennes) et lègères

Page 13: A6 rendre son site plus performant

Pourquoi une photo est efficace

- Elle est prise avec un bon appareil

- Elle est prise au bon moment (saison, météo…)

- Elle montre ce qu’il y a de plus valorisant

- Elle est originale

- Elle invite à la projection (mise en situation)

Page 14: A6 rendre son site plus performant
Page 15: A6 rendre son site plus performant
Page 16: A6 rendre son site plus performant
Page 17: A6 rendre son site plus performant
Page 18: A6 rendre son site plus performant
Page 19: A6 rendre son site plus performant

Plus de photos, ça veut dire :

- des photos très visibles en page d’accueil

- des photos sur toutes les pages intérieures

- une page dédiée aux photos (galerie photos)

- des photos de thématiques annexes (

Page 20: A6 rendre son site plus performant

Optimisation d’une photo :

> Redimensionner la photo (1000px max)

> Compresser en jpg (qualité inférieure à 50%)

>>> Image inférieure à 200 ko

Page 21: A6 rendre son site plus performant

La Rassurance

Page 22: A6 rendre son site plus performant

Les éléments de rassurance

Ce sont toutes les informations qui vont rassurer l’internaute, lui ôter les freins psychogiques à la conversion

Important : sur le web, le moindre doute entraine un abandon

Page 23: A6 rendre son site plus performant
Page 24: A6 rendre son site plus performant

Les éléments de rassurance dans le tourisme

- Identité claire du site - Paiement sécurisé- Labels , récompenses - Disponibilités

- Partenariats (institutionnels) - Contacts (tél, mail)- Descriptions détaillées - Avis clients - Garanties, engagements, charte - Services +- Information large (environnement, activités…)

- Sobriété graphique- Nom de domaine

>>> Afficher les éléments de rassurance à différentes étapes de la visite du site

Page 25: A6 rendre son site plus performant

Le clic de conversion

Page 26: A6 rendre son site plus performant

Incitation à la conversion

Proposer la conversion à divers endroits du site( voire sur toutes les pages )

Page 27: A6 rendre son site plus performant

5 Trucs à supprimer

Page 28: A6 rendre son site plus performant

A supprimer de mon site

Les animations « Flash » sur mon site >

La musique (ou autre son d’ambiance)

Les Gifs animés

Les couleurs de fonds malheureuses

Compteurs de visite

Ma « splash page »

Les animations « Flash » sur mon site >

La musique (ou autre son d’ambiance)

Les Gifs animés

Les couleurs de fonds « malheureuses »

Mon compteur de visite

Ma « splash page »

Page 29: A6 rendre son site plus performant

Gifs animés

Page 30: A6 rendre son site plus performant

Splash Page

Page 31: A6 rendre son site plus performant

15 supers outils pour enrichir mon site web

Page 32: A6 rendre son site plus performant
Page 33: A6 rendre son site plus performant

Comprendre la notion d’intégration

Intégrer Dans mon site internet, je peux intégrer des éléments

(données, images, fonctionnalités…) qui viennent d’ailleurs (autre site, serveur…)

Exemples : carte, video…

Comment faire ?Généralement, le service « intégrable » fournit un code à copier-coller dans mon site. (« embedded code »)2 principaux types de codes : Javascript ou Iframe

WidgetOutil proposant une (des) fonctionnalité(s) particulière(s) pouvant être intégré dans un site web facilement (code)

Page 34: A6 rendre son site plus performant

Les Widgets Sitra

A quoi ça sert ?

- Permet d’afficher de façon personnalisée de l’offre touristique locale.

Exemples : - Les restos alentours- l’agenda des 8 prochains jours dans ma commune

- les sites touristiques 20km à la ronde

>>>

Page 35: A6 rendre son site plus performant

Google Map Engine

A quoi ça sert ?

- Permet de créer des cartes personnalisées, d’y intégrer des données, calques, icones, etc….

S’intègre ensuite dans n’importe quel site

► https://mapsengine.google.com/map/

>>>

Page 36: A6 rendre son site plus performant

Moteur de recherche personnalisé

A quoi ça sert ?

- Permet d’intégrer un moteur de recherche à mon site internet.

S’intègre ensuite dans n’importe quel site

► https://www.google.fr/cse/?hl=fr

>>>

Page 37: A6 rendre son site plus performant

Google Translate

A quoi ça sert ?

- Permet d’intégrer Google Traduction à mon site internet.

► http://translate.google.fr/?hl=fr puis « Gadget Traduction »

>>>

Page 38: A6 rendre son site plus performant

Google Drive (formulaire)

A quoi ça sert ?

- Permet de créer des formulaires, de les intégrer dans mon site, puis de recevoir/traiter les réponses.

► https://drive.google.com

>>>

Page 39: A6 rendre son site plus performant

Wufoo

A quoi ça sert ?

- Permet de créer des formulaires avancés, de les intégrer dans mon site, puis de recevoir/traiter les réponses.

► http://www.wufoo.com/

>>>

Page 40: A6 rendre son site plus performant

Calameo

A quoi ça sert ?

- Permet de mettre en ligne une brochure pdf (magazine, livre), puis de l’intégrer dans mon site. Elle sera alors « feuilletée en ligne » Maxi 100MO/brochure

► http://fr.calameo.com/

>>>

Page 41: A6 rendre son site plus performant

Slideshare

A quoi ça sert ?

- Permet de mettre en ligne une présentation (powerpoint ou pdf) et de l’intégrer dans mon site.Les diapositives défileront dans la page voulue.

► http://fr.slideshare.net/

>>>

Page 42: A6 rendre son site plus performant

Prezi

A quoi ça sert ?

- Permet de créer une présentation originale et de l’intégrer dans mon site.

► https://prezi.com/

>>>

Page 43: A6 rendre son site plus performant

Add this

A quoi ça sert ?

- Permet d’intégrer à mon site, des fonctionnalités de partage sur les réseaux sociaux.Boutons / barres personnalisables

► https://www.addthis.com/get/sharing

>>>

Page 44: A6 rendre son site plus performant

Modules facebook

A quoi ça sert ?

- Permet d’intégrer à mon site, des fonctionnalités propres à facebook : suivi, partage…« facebook social plugins »

► https://developers.facebook.com/docs/plugins/

>>>

Page 45: A6 rendre son site plus performant

Likebox : incite à suivre une page facebook

Page 46: A6 rendre son site plus performant

FB Comments: permet de laisser des commentaires

Page 47: A6 rendre son site plus performant

Widgets TripAdvisor

A quoi ça sert ?

- Permet d’intégrer à mon site, des fonctionnalités propres à Tripadvisor : dépôt d‘avis, affichage de ma note, etc…

► www.tripadvisor.fr/Widgets

>>>

Page 48: A6 rendre son site plus performant

Cincopa

A quoi ça sert ?

- Permet d’intégrer à mon site, une gallerie photo, un slider ou autres effets liés à l’image.

► http://www.cincopa.com

Page 49: A6 rendre son site plus performant

MERCI