Ergonomie Design dans le e-tourisme

449 views
378 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
449
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ergonomie Design dans le e-tourisme

  1. 1. L’IMPORTANCEDE L’IMAGE & DE L’ERGONOMIEDANS UN PROJET E-TOURISTIQUEConférence Mai 2010
  2. 2. Qui suis-je ?Olivier SOROSDirecteur artistiqueWeb-designerGérant de la société SoHappyIntervenant - formateur à la formationD.U. Multimédia à Pau
  3. 3. 0/ avant de vous lancerdans le design & l’ergonomie
  4. 4. > Connaître votre marque / votre destination,> Connaître votre cible / vos visiteurs,> Etudier votre concurrence,> Avant de réaliser votre design, vous devez connaitrevotre contenu,> Connaître le média internet et ses spécificitéstechniques.RAPPEL DES BASES0/ AVANT DE VOUS LANCER
  5. 5. 0/ webdesign, kezako ?Rapide rappel
  6. 6. 0/ WEBDESIGN ? KEZAKO ?Savant dosage entreGRAPHISME et ERGONOMIEC’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. 7. 0/ le parcours visueld’une page web
  8. 8. 2 temps de lecture :1/ Le scannage de la page.Linternaute parcourtrapidement la page2/ Lecture une foisl’information repérée.Quand linformation esttrouvée, il prend le temps delire, sinon il quitte la page.0/ LE PARCOURS VISUELRAPPEL DES BASES
  9. 9. 1 23 45678Scannage de la page :rapide : durée : 4 > 10 secondes
  10. 10. 12345Lecture du contenu :+ lent6
  11. 11. Exemple d’étudesD’EYE TRACKING
  12. 12. EXPEDIA.FREye Tracking : Le «F Tracking»
  13. 13. EXPEDIA.FREye Tracking : Expedia.frEye Tracking : Expedia.fr
  14. 14. ASTUCE :UTILISATION DU PORTRAITDes études d’EYE TRACKING montrent que lesvisiteurs sont attirés instinctivement par unvisage et le regardent.Il est donc nécessaire de placer votre offre ou lescontenus importants à proximité de cette zone.
  15. 15. 1/ l’imageLe rôle primordial de l’imagedans le choix de la destination
  16. 16. > Identifier votre marque et votrepositionnement (par la charte graphique)> Se différencier des concurrents et attirerl’attention (par l’originalité graphique)> Valoriser et organiser vos informations(par la mise en page)1/ LE RÔLE DE L’IMAGE
  17. 17. Inspirer confianceet rassurer vos visiteurs par ...1/CONFIANCEDesign qualitatif+Simplicité d’utilisation1/ LES OBJECTIFS
  18. 18. Indispensable à la crédibilitéde votre destination !L’image doit se mettre au service de votremessage par ...Pertinence des images+Contenu de qualité2/CRÉDIBILITÉ1/ LES OBJECTIFS
  19. 19. Vos visiteurs ne sont pas là pouradmirer l’interface de votre site !Ils recherchent de l’information !Clarté, simplicité de l’interface+Guidage visuelN’en faîtes pas trop, restez simple !3/VALORISER L’INFORMATION1/ LES OBJECTIFS
  20. 20. LES LEVIERS D’ACTION1/ TRADUCTION GRAPHIQUE> Les images, illustrations> Les couleurs> Les contrastes> Les formes> La typographie> L’équilibre> Le rythme> Les proportions> L’unité
  21. 21. Le petit PLUS pourvotre destination :Différenciez-vousSoyez créatif !
  22. 22. DE LA QUALITÉ ET DU CHOIX DES PHOTOGRAPHIES1/ L’IMPORTANCEUne belle image vaut mieux qu’un long discours> Montrer les bénéfices, les valeurs, les qualités devotre destination> Donner des raisons à votre internaute de choisir votredestination :+ Par l’évasion + par l’humour + par l’originalité> Réveillez ses émotions, créez du désir !> Sentiment d’immersion
  23. 23. DE LA QUALITÉ ET DU CHOIX DES PHOTOGRAPHIES1/ L’IMPORTANCEDonnez envie !
  24. 24. UN BON WEB DESIGNC’EST AUSSI :HTMLRESOLUTIONORDINATEUROPTIMISATIONCSSW3CFRAMEWORKSCONNEXIONETALONNAGEPLUGINS
  25. 25. 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 imagesLes + aléatoires :L’étalonnage des couleurs du moniteur ou leréglage de la luminositéS’ADAPTER AUX
  26. 26. 2/ l’ergonomieLe rôle primordial de l’ergonomiedans la vente de la destination
  27. 27. 2/ LE RÔLE DE L’ERGONOMIESens général : “ Étude scientifique de la relationentre lhomme et la machine. ”Appliquée au web :“Capacité à répondre efficacement auxattentes des internautes et à leur fournirun confort de navigation.”APPLIQUÉE AU WEB
  28. 28. 2/ LES OBJECTIFSDE L’ERGONOMIE> Faciliter la navigation et l’accès auxinformations,> Retenir l’internaute.Objectif final :> Faciliter la recherche d’informationspour vendre ou fidéliser.
  29. 29. Vous devez anticiper ouanalyser, la diversité desprofils de vos visiteurs :> Attentes de l’utilisateur> Habitudes de l’utilisateur> Age de l’utilisateur> Equipements informatiques> Niveau de connaissance
  30. 30. NE FAITES PAS RÉFLÉCHIR VOS VISITEURSDON’T MAKE ME THINK !
  31. 31. 3/ le rôle primordialde la page d’accueil
  32. 32. > qualité esthétique,> ergonomie de l’interface,> pertinence du contenu et l’information délivrée,> actualisation des données.3/ IMPORTANCE DE LA PAGED’ACCUEIL (LANDING PAGE)Vous avez 10 secondespour convaincre !
  33. 33. http://www.ptbalirealestate.com/
  34. 34. http://voyage.baliveo.com/
  35. 35. 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 flottaisonD’ACCUEIL (LANDING PAGE)
  36. 36. LA LIGNE DE FLOTTAISON : ECRAN 20 POUCESASTUCE :LA LIGNE DE FLOTTAISONECRAN 17 POUCES600 pixels de hauteurECRAN 21 POUCES ET >800 pixels de hauteur
  37. 37. 3/ IMPORTANCE DE LA PAGE> Pour évitez le «Bounce Rate»Le taux de rebond est lepourcentage dinternautes quisont entrés sur une page Web etqui ont quitté le site après.Ils nont vu quune seule page.D’ACCUEIL (LANDING PAGE)
  38. 38. 4/ Le rôledu guidage visuelpour orienter vos internauteset les amener à acheter votre destinationHEY ! PSSC’ESTPAR ICI !
  39. 39. 4/ LE GUIDAGE VISUEL> Le graphisme et le mise en page permettent labonne mise en valeur, le repérage et lastructuration des informations :Les couleursLes formes graphiquesLa typographieLes photographiesLes animationsLes taillesLes formesLes positionsLes contrastesLes espaces(blancs, marges)Le graphisme au service de l’ergonomie
  40. 40. 4/ GUIDER VOS INTERNAUTES
  41. 41. MISE EN APPLICATIONTRAVAIL SUR LES CONTRASTES
  42. 42. 4/ LES CONTRASTESUtilisation 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 / illustrationsGUIDER LE REGARD
  43. 43. 100%80%60%100%80% 100%100%50%20%100%100%
  44. 44. 5/ L’accessibilitépour les déficients visuels
  45. 45. PENSEZ AUX DÉFICIENTSVISUELACCESSIBILITEWCAGDALTONIENSPERCEPTIONCOULEURSVISION
  46. 46. 5/ LE CONTRASTEPensez aussi à vos internautes déficients visuels !& L’ACCESSIBILITE> Vérifiez vos contrastes couleurs> Ne transmettrez pas un message uniquementavec la couleur> Evitez les clignotements> Utilisez des polices de caractères suffisammentgrandes> Respectez les standards de développement W3C> Respectez les standards d’accessibilité WAI / WCAG
  47. 47. On vérifie ?la validité W3C ?
  48. 48. On vérifie ?les contrastes ?
  49. 49. 6/ les tendancesdesign & ergonomie dans le e-tourisme
  50. 50. 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)
  51. 51. 7/ Les mobilesNe négligez pas les mobiles
  52. 52. 7/ L’AVENIR... LE PRÉSENT> Avant (actuellement)Le site internet ne s’adaptepas à votre résolutiond’écran :> Choix d’une résolution(actuellement 1024 x 768 px)> Page centrée dans l’écran(taille fixe)
  53. 53. 7/ L’AVENIR... LE PRÉSENT> La problématique aujourd’huiLe site internet doit s’adapter auxdifférentes résolutions d’écrans(ordinateurs, smartphones, ...)> Comment prévoir les différentesrésolutions et formats d’écransOrdinateurs : 800x600,1024x768 px, 1920x1200...Mobiles : 220x176, 480x800,320x480...Tablettes : 768x1024px
  54. 54. 7/ L’AVENIR... LE PRÉSENT> Une solution, le site «flexible»Un site internet qui s’adapteraen fonction du support !> La technique duFluid Layout ?http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
  55. 55. Merci !OLIVIER SOROSStudio SO’HAPPY - communication globaleconseil I publicité I édition I internet I mobileswww.sohappy-studio.com

×