La web ergonomie, un concept centré sur l’utilisateur.<br />Présentation par : Sophie DucqAhnine<br />http://www.visualpro...
Pour créer un site il suffit de :<br />Un nom de domaine,<br />Un hébergement, <br />Un éditeur de pages web, <br />Un pro...
Une ergonomie attractive et cognitive  permet :<br />D’éviter de forts taux de rebond <br />(% d'internautes qui arrivent ...
Les principales règles ergonomiques selon Jackob Nielsen  qui en fut le pionner :  <br />« Simplifier les sites web pour e...
Jackob Nielsen propose entre autres de :<br />Résumer et expliquer clairement le but d'un site sur la page d'accueil,<br /...
La web ergonomie est un concept centré sur l’utilisateur, <br />Elle répond à des caractéristiques<br /><ul><li>Physiologi...
Perceptives
Cognitives</li></li></ul><li>Quelques principes ergonomiques fondamentaux d’un site Internet :<br />
L’accessibilité : <br />
L’accessibilité :<br />Utilisation d’url simple et intuitif <br />Temps de chargement des pages réduit (40% des visiteurs ...
Le design :<br />
Le design :<br />Une charte graphique au reflet de l’image de l’entreprise et adapté à sa communication,<br />De 3 à 6 cou...
La navigation :<br />
La navigation 1/2 :<br />Une page d’accueil sachant aller à l’essentiel : (elle n’aura que 30 secondes pour séduire ses in...
La navigation 3/3 :<br />une hiérarchisation  des rubriques et sous rubriques cohérente. <br />Les éléments internes facil...
La navigation 2/3 :<br />Sources :Techniques et bonnes pratiques pour écrire sur le web de Luc Legay<br />
La lecture hypertextuelle :<br />
La lecture hypertextuelle 1/4 :<br />La lecture est sur écran 4 fois plus difficile que sur papier : <br />Ménagez vos lec...
La lecture hypertextuelle 2/4 :<br />La lecture hypertextuelle demande beaucoup d’efforts cognitifs, vos lecteurs devront ...
En vérifier leur pertinence,
Choisir leur parcours de lectures. </li></li></ul><li>La lecture hypertextuelle 3/4 :<br />Sens de la lecture hypertextuel...
La lecture hypertextuelle 4/4 :<br />En "F" dans le fameux triangle d'or de Google. <br />
Le contenu textuel :<br />
Le contenu textuel 1/2 :<br />« Le lecteur fait une lecture rapide sans prélèvements d’informations. Il ne s’attarde pas s...
Le contenu textuel 2/2 :<br />Une rédaction à partir de phrases et de paragraphes courts, <br />Une mise en avant de vos p...
Les fonctionnalités<br />
Les fonctionnalités 1/3 :<br />Moins on en met, plus c'est facile :<br />Moins on met d'éléments sur une page web, moins c...
Les fonctionnalités 2/3 :<br />La fonctionnalité de recherches est l’une de celles qui apporte le plus de valeur ajoutée :...
Les fonctionnalités 3/3 :<br />De nos jours il n’est plus possible d’ignorer les réseaux sociaux, vos blogs comme votre si...
Upcoming SlideShare
Loading in …5
×

La web ergonomie, un concept centre sur l'utilisateur visual project

3,459 views
3,360 views

Published on

Les outils du web 2.0 permettent à la plupart des entreprises de s’approprier les nouvelles fonctionnalités du net.

De nos jours les sites sont nativement dotés de multiples fonctionnalités et permettent une actualisation aisée, une optimisation pour le référencement optimum, une ouverture sur les réseaux sociaux … Néanmoins l’accompagnement marketing reste incontournable pour une communication efficace.
Je décris ici quelques notions en ergonomie web :

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,459
On SlideShare
0
From Embeds
0
Number of Embeds
435
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

La web ergonomie, un concept centre sur l'utilisateur visual project

  1. 1. La web ergonomie, un concept centré sur l’utilisateur.<br />Présentation par : Sophie DucqAhnine<br />http://www.visualproject.com/agence-webmarketing/creation-de-sites-internet-montpellier.html<br />http://twitter.com/VisualProject - http://www.facebook.com/visualproject<br />
  2. 2. Pour créer un site il suffit de :<br />Un nom de domaine,<br />Un hébergement, <br />Un éditeur de pages web, <br />Un programme de création graphique, <br />Un logiciel de transfert par FTP …<br />Et l’ergonomie dans tout ça ?<br />info@visualproject.com - http://twitter.com/VisualProject.com - http://facebook.com/visualproject.com<br />
  3. 3. Une ergonomie attractive et cognitive permet :<br />D’éviter de forts taux de rebond <br />(% d'internautes qui arrivent sur le site et le quittent aussitôt)<br />D’activer les leviers d’une bonne communication auprès de vos visiteurs,<br />De fidéliser vos internautes existants,<br />info@visualproject.com - http://twitter.com/VisualProject.com - http://facebook.com/visualproject.com<br />
  4. 4. Les principales règles ergonomiques selon Jackob Nielsen qui en fut le pionner : <br />« Simplifier les sites web pour en augmenter l'utilisabilité pour les internautes. »<br />info@visualproject.com - http://twitter.com/VisualProject.com - http://facebook.com/visualproject.com<br />
  5. 5. Jackob Nielsen propose entre autres de :<br />Résumer et expliquer clairement le but d'un site sur la page d'accueil,<br />Offrir un contenu adapté aux besoins de l'utilisateur,<br />Donner des réponses brèves aux questions des navigateurs,<br />Maintenir une approche minimaliste et éviter les images trop lourdes,<br />Offrir un maximum d'éléments fondamentaux compréhensibles.<br />
  6. 6. La web ergonomie est un concept centré sur l’utilisateur, <br />Elle répond à des caractéristiques<br /><ul><li>Physiologiques
  7. 7. Perceptives
  8. 8. Cognitives</li></li></ul><li>Quelques principes ergonomiques fondamentaux d’un site Internet :<br />
  9. 9. L’accessibilité : <br />
  10. 10. L’accessibilité :<br />Utilisation d’url simple et intuitif <br />Temps de chargement des pages réduit (40% des visiteurs quittent votre site s’il met plus de 3 secondes à s’afficher)<br />Technologies accessibles par tous et qu'elle que soit le type de machine connectée.<br />Conformité aux usages d'Internet habituels. <br />Un ensemble homogène favorisant l’accès aux informations recherchées.<br />
  11. 11. Le design :<br />
  12. 12. Le design :<br />Une charte graphique au reflet de l’image de l’entreprise et adapté à sa communication,<br />De 3 à 6 couleurs maximum,<br />Une typo simple et sobre entre 9 et 12 pour le corps du texte,<br />Eviter les majuscules elles ralentissent la lecture de 13 à 20%<br />
  13. 13. La navigation :<br />
  14. 14. La navigation 1/2 :<br />Une page d’accueil sachant aller à l’essentiel : (elle n’aura que 30 secondes pour séduire ses internautes). <br />Une arborescence limitant les efforts cognitifs de l’utilisateur, <br />Une navigation intuitive permettant de réduire le temps d’accès à l’information recherchée.<br />
  15. 15. La navigation 3/3 :<br />une hiérarchisation des rubriques et sous rubriques cohérente. <br />Les éléments internes facilitant une navigation descendante et transversale<br />L’internaute doit savoir en permanence où il est, où il va et d’où il vient. <br />
  16. 16. La navigation 2/3 :<br />Sources :Techniques et bonnes pratiques pour écrire sur le web de Luc Legay<br />
  17. 17. La lecture hypertextuelle :<br />
  18. 18. La lecture hypertextuelle 1/4 :<br />La lecture est sur écran 4 fois plus difficile que sur papier : <br />Ménagez vos lecteurs !<br />
  19. 19. La lecture hypertextuelle 2/4 :<br />La lecture hypertextuelle demande beaucoup d’efforts cognitifs, vos lecteurs devront à la fois :<br /><ul><li>Lire des informations,
  20. 20. En vérifier leur pertinence,
  21. 21. Choisir leur parcours de lectures. </li></li></ul><li>La lecture hypertextuelle 3/4 :<br />Sens de la lecture hypertextuelle :<br />Les études d'eye-tracking(ou oscillométriques) démontrent que la lecture d'une page web suivent un chemin en E.<br />
  22. 22. La lecture hypertextuelle 4/4 :<br />En "F" dans le fameux triangle d'or de Google. <br />
  23. 23. Le contenu textuel :<br />
  24. 24. Le contenu textuel 1/2 :<br />« Le lecteur fait une lecture rapide sans prélèvements d’informations. Il ne s’attarde pas sur le contenu ».<br />André Tricot reconnu en psychologie cognitive et en sciences de l'information et de la communication.<br />
  25. 25. Le contenu textuel 2/2 :<br />Une rédaction à partir de phrases et de paragraphes courts, <br />Une mise en avant de vos phrases clés en gras, <br />Des titres et sous titres explicites. <br />Ces techniques sont également recommandées pour le référencement du site.<br />
  26. 26. Les fonctionnalités<br />
  27. 27. Les fonctionnalités 1/3 :<br />Moins on en met, plus c'est facile :<br />Moins on met d'éléments sur une page web, moins cette dernière est difficile à appréhender mentalement. <br />Le plus difficile reste bien sûr d'obtenir un bon équilibre... <br />
  28. 28. Les fonctionnalités 2/3 :<br />La fonctionnalité de recherches est l’une de celles qui apporte le plus de valeur ajoutée :<br />Plus vos visiteurs perdent du temps à fouiller votre site, plus vous augmentez votre taux de rebond.<br />C’est à l’information souhaitée de se présenter pas l’inverse.<br />
  29. 29. Les fonctionnalités 3/3 :<br />De nos jours il n’est plus possible d’ignorer les réseaux sociaux, vos blogs comme votre site se doivent de proposer vos accès à Facebook, Twitter …<br />
  30. 30. Votre site à partir de 490 €, par Visual Project:<br />Choix de votre nom de domaineou transfert du nom de domaine existant.<br />Site évolutif avec intégration et paramétrage de la dernière version du C.M.S WordPress<br />Hébergementsur un serveur sécurisé.<br />Intégration de votre logo<br />Référencement :<br />Module d’optimisation pour les outils de recherche (All in One SEO Pack) <br />Module Google XML Sitemappour une parfaite indexation sur google.<br />Lancement de votre 1ère campagne de liens sponsorisés Google Adwords*<br />*Offre complémentaire<br />Exemple de modules complémentaires à l’offre : <br />Intégration du bouton "J'aime" de Facebook sur les pages ou articles de votre choix (Facebook Like Box)<br />Bookmarks pour partager vos pages et articles en un clic sur les réseaux sociaux de votre choix (SexyBookmarks) (by Shareaholic)<br />Sans abonnement ni engagement, vous êtes autonome et indépendant<br />04 67 59 51 23<br />
  31. 31. E-marketing <br />& Statégies social media<br />http://www.visualproject.com/agence-webmarketing/creation-de-sites-internet-montpellier.html<br />info@visualproject.com<br />http://twitter.com/VisualProject.com<br />http://facebook.com/visualproject.com<br />

×