Réflexion sur l'importance du design et de l'ergonomie dans le E-tourisme.

1. L’IMPORTANCE
DE L’IMAGE & DE L’ERGONOMIE
DANS UN PROJET E-TOURISTIQUE
Conférence Mai 2010

2. Qui suis-je ?
Olivier SOROS
Directeur artistique
Web-designer
Gérant de la société SoHappy
Intervenant - formateur à la formation
D.U. Multimédia à Pau

3. 0/ avant de vous lancer
dans le design & l’ergonomie

4. > Connaître votre marque / votre destination,
> Connaître votre cible / vos visiteurs,
> Etudier votre concurrence,
> Avant de réaliser votre design, vous devez connaitre
votre contenu,
> Connaître le média internet et ses spécificités
techniques.
RAPPEL DES BASES
0/ AVANT DE VOUS LANCER

5. 0/ webdesign, kezako ?
Rapide rappel

6. 0/ WEBDESIGN ? KEZAKO ?
Savant dosage entre
GRAPHISME et ERGONOMIE
C’est le langage de votre page !
1/ DESIGN VISUEL
(L’image) :
• éléments graphiques,
• couleurs,
• typographies,
• mise en page.
2/ DESIGN FONCTIONNEL
(L’ergonomie) :
• système de navigation,
menus, boutons, liens,
• ergonomie de votre site.
RAPPEL DES BASES

7. 0/ le parcours visuel
d’une page web

8. 2 temps de lecture :
1/ Le scannage de la page.
L'internaute parcourt
rapidement la page
2/ Lecture une fois
l’information repérée.
Quand l'information est
trouvée, il prend le temps de
lire, sinon il quitte la page.
0/ LE PARCOURS VISUEL
RAPPEL DES BASES

9. 1 2
3 4
56
7
8
Scannage de la page :
rapide : durée : 4 > 10 secondes

10. 1
2
3
4
5
Lecture du contenu :
+ lent
6

11. Exemple d’études
D’EYE TRACKING

12. EXPEDIA.FR
Eye Tracking : Le «F Tracking»

13. EXPEDIA.FR
Eye Tracking : Expedia.frEye Tracking : Expedia.fr

14. ASTUCE :
UTILISATION DU PORTRAIT
Des études d’EYE TRACKING montrent que les
visiteurs sont attirés instinctivement par un
visage et le regardent.
Il est donc nécessaire de placer votre offre ou les
contenus importants à proximité de cette zone.

16. 1/ l’image
Le rôle primordial de l’image
dans le choix de la destination

17. > Identifier votre marque et votre
positionnement (par la charte graphique)
> Se différencier des concurrents et attirer
l’attention (par l’originalité graphique)
> Valoriser et organiser vos informations
(par la mise en page)
1/ LE RÔLE DE L’IMAGE

18. Inspirer confiance
et rassurer vos visiteurs par ...
1/CONFIANCE
Design qualitatif
+
Simplicité d’utilisation
1/ LES OBJECTIFS

19. Indispensable à la crédibilité
de votre destination !
L’image doit se mettre au service de votre
message par ...
Pertinence des images
+
Contenu de qualité
2/CRÉDIBILITÉ
1/ LES OBJECTIFS

20. Vos visiteurs ne sont pas là pour
admirer l’interface de votre site !
Ils recherchent de l’information !
Clarté, simplicité de l’interface
+
Guidage visuel
N’en faîtes pas trop, restez simple !
3/VALORISER L’INFORMATION
1/ LES OBJECTIFS

21. LES LEVIERS D’ACTION
1/ TRADUCTION GRAPHIQUE
> Les images, illustrations
> Les couleurs
> Les contrastes
> Les formes
> La typographie
> L’équilibre
> Le rythme
> Les proportions
> L’unité

22. Le petit PLUS pour
votre destination :
Différenciez-vous
Soyez créatif !

23. DE LA QUALITÉ ET DU CHOIX DES PHOTOGRAPHIES
1/ L’IMPORTANCE
Une belle image vaut mieux qu’un long discours
> Montrer les bénéfices, les valeurs, les qualités de
votre destination
> Donner des raisons à votre internaute de choisir votre
destination :
+ Par l’évasion + par l’humour + par l’originalité
> Réveillez ses émotions, créez du désir !
> Sentiment d’immersion

24. DE LA QUALITÉ ET DU CHOIX DES PHOTOGRAPHIES
1/ L’IMPORTANCE
Donnez envie !

25. UN BON WEB DESIGN
C’EST AUSSI :
HTML
RESOLUTION
ORDINATEUR
OPTIMISATION
CSS
W3C
FRAMEWORKS
CONNEXION
ETALONNAGE
PLUGINS

26. 1/ CONTRAINTES TECHNIQUES
> Les navigateurs (compatibilité)
> Les polices HTML, choix limité ?
> La résolution de l’écran, laquelle choisir ?
> La mise à jour des plug-ins
> Le poids des images
Les + aléatoires :
L’étalonnage des couleurs du moniteur ou le
réglage de la luminosité
S’ADAPTER AUX

27. 2/ l’ergonomie
Le rôle primordial de l’ergonomie
dans la vente de la destination

28. 2/ LE RÔLE DE L’ERGONOMIE
Sens général : “ Étude scientifique de la relation
entre l'homme et la machine. ”
Appliquée au web :
“Capacité à répondre efficacement aux
attentes des internautes et à leur fournir
un confort de navigation.”
APPLIQUÉE AU WEB

29. 2/ LES OBJECTIFS
DE L’ERGONOMIE
> Faciliter la navigation et l’accès aux
informations,
> Retenir l’internaute.
Objectif final :
> Faciliter la recherche d’informations
pour vendre ou fidéliser.

30. Vous devez anticiper ou
analyser, la diversité des
profils de vos visiteurs :
> Attentes de l’utilisateur
> Habitudes de l’utilisateur
> Age de l’utilisateur
> Equipements informatiques
> Niveau de connaissance

31. NE FAITES PAS RÉFLÉCHIR VOS VISITEURS
DON’T MAKE ME THINK !

32. 3/ le rôle primordial
de la page d’accueil

33. > qualité esthétique,
> ergonomie de l’interface,
> pertinence du contenu et l’information délivrée,
> actualisation des données.
3/ IMPORTANCE DE LA PAGE
D’ACCUEIL (LANDING PAGE)
Vous avez 10 secondes
pour convaincre !

34. http://www.ptbalirealestate.com/

35. http://voyage.baliveo.com/

36. 3/ IMPORTANCE DE LA PAGE
> Donnez rapidement à vos visiteurs ce qu’ils recherchent.
Clarté, sobriété de l’interface !
> Optimisez votre contenu autour de l’offre elle-même.
Clarifiez votre message !
> Exploitez des images persuasives, ne négligez pas les photographies
> Rassemblez les informations utiles au visiteur
> Attirez, orientez le regard vers le bouton de conversion
> Appréhendez le concept de ligne de flottaison
D’ACCUEIL (LANDING PAGE)

37. LA LIGNE DE FLOTTAISON : ECRAN 20 POUCES
ASTUCE :
LA LIGNE DE FLOTTAISON
ECRAN 17 POUCES
600 pixels de hauteur
ECRAN 21 POUCES ET >
800 pixels de hauteur

38. 3/ IMPORTANCE DE LA PAGE
> Pour évitez le «Bounce Rate»
Le taux de rebond est le
pourcentage d'internautes qui
sont entrés sur une page Web et
qui ont quitté le site après.
Ils n'ont vu qu'une seule page.
D’ACCUEIL (LANDING PAGE)

39. 4/ Le rôle
du guidage visuel
pour orienter vos internautes
et les amener à acheter votre destination
HEY ! PSS
C’EST
PAR ICI !

40. 4/ LE GUIDAGE VISUEL
> Le graphisme et le mise en page permettent la
bonne mise en valeur, le repérage et la
structuration des informations :
Les couleurs
Les formes graphiques
La typographie
Les photographies
Les animations
Les tailles
Les formes
Les positions
Les contrastes
Les espaces
(blancs, marges)
Le graphisme au service de l’ergonomie

41. 4/ GUIDER VOS INTERNAUTES

42. MISE EN APPLICATION
TRAVAIL SUR LES CONTRASTES

43. 4/ LES CONTRASTES
Utilisation des contrastes pour :
• mettre en valeur des informations
• structurer les informations
• guider le regard
• améliorer la lisibilité
Avec un travail graphique sur :
• l’utilisation des couleurs (intensité, couleur)
• les tailles
• les formes et éléments graphiques
• l’utilisation des photographies / illustrations
GUIDER LE REGARD

44. 100%
80%
60%
100%
80% 100%
100%
50%
20%
100%
100%

46. 5/ L’accessibilité
pour les déficients visuels

47. PENSEZ AUX DÉFICIENTS
VISUEL
ACCESSIBILITE
WCAGDALTONIENS
PERCEPTION
COULEURS
VISION

48. 5/ LE CONTRASTE
Pensez aussi à vos internautes déficients visuels !
& L’ACCESSIBILITE
> Vérifiez vos contrastes couleurs
> Ne transmettrez pas un message uniquement
avec la couleur
> Evitez les clignotements
> Utilisez des polices de caractères suffisamment
grandes
> Respectez les standards de développement W3C
> Respectez les standards d’accessibilité WAI / WCAG

49. On vérifie ?
la validité W3C ?

52. On vérifie ?
les contrastes ?

55. 6/ les tendances
design & ergonomie dans le e-tourisme

56. 6/ LES TENDANCES
> L’utilisation de grandes photographies (background ou header)
> Sobriété de l’interface
> L’utilisation de grandes typographies
> Utilisation de typographie personnalisées non HTML
> Plus d’espace, plus d’aération
> Mise en page à l’aide de grilles (de mise en page)
> L’utilisation du PNG (transparence)
> L’intégration des réseaux sociaux (Icônes)

59. 7/ Les mobiles
Ne négligez pas les mobiles

60. 7/ L’AVENIR... LE PRÉSENT
> Avant (actuellement)
Le site internet ne s’adapte
pas à votre résolution
d’écran :
> Choix d’une résolution
(actuellement 1024 x 768 px)
> Page centrée dans l’écran
(taille fixe)

61. 7/ L’AVENIR... LE PRÉSENT
> La problématique aujourd’hui
Le site internet doit s’adapter aux
différentes résolutions d’écrans
(ordinateurs, smartphones, ...)
> Comment prévoir les différentes
résolutions et formats d’écrans
Ordinateurs : 800x600,
1024x768 px, 1920x1200...
Mobiles : 220x176, 480x800,
320x480...
Tablettes : 768x1024px

62. 7/ L’AVENIR... LE PRÉSENT
> Une solution, le site «flexible»
Un site internet qui s’adaptera
en fonction du support !
> La technique du
Fluid Layout ?
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

63. Merci !
OLIVIER SOROS
Studio SO’HAPPY - communication globale
conseil I publicité I édition I internet I mobiles
www.sohappy-studio.com