Points clés - ergonomie web

3,040 views

Published on

Points clés - ergonomie web

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

No Downloads
Views
Total views
3,040
On SlideShare
0
From Embeds
0
Number of Embeds
485
Actions
Shares
0
Downloads
84
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Points clés - ergonomie web

  1. 1. Ergonomie de sites Web :les 60 points clés<br />M1 Multimédia<br />Année 2010/2011<br />Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané<br />
  2. 2. A. Aspects techniques et fonctionnels<br />
  3. 3. A.1 Vitesse de téléchargement<br />Chargement du site trop long<br />http://hf3.coca-cola.com/<br />
  4. 4. A.2 Les pages épousent elles bien l’écran?<br />Mauvaise résolution<br />http://www.liberation.fr/<br />
  5. 5. A.2 Les pages épousent elles bien l’écran?<br />Non respect de la règle des trois A4, pagetrop longue pour un site.<br />http://www.liberation.fr/<br />
  6. 6. A.3 Adaptation du site au navigateur<br />Incompatibilité IE<br />http://www.microsoft.com/france/windows/internet-explorer/telecharger-ie8.aspx<br />
  7. 7. A.3 Adaptation du site au navigateur<br />Compatibilité Firefox<br />http://www.microsoft.com/france/windows/internet-explorer/telecharger-ie8.aspx<br />
  8. 8. A.4 Utilisation des techno standards<br />Full flash > réduction de la cible <br />http://www.citroen.fr/home/#/home/<br />
  9. 9. A.4 Utilisation des techno standards<br />html/JavaScript > cible large<br />http://www.w3.org/<br />
  10. 10. A.5 Dysfonctionnements apparents<br />Mauvaise redirection d'un lien<br />http://www.numbersusa.com/content/404.html<br />
  11. 11. A.6 Impression des pages<br />Impression facile de la page proposée<br />http://www.marmiton.org/Recettes/Recette_gateau-aux-pommes-de-mamie-charline_23404.aspx<br />
  12. 12. A.7 Sécurisation du site<br />https > authentication sécurisée <br />http://www.bnpparibas.net/banque/portail/particulier/HomePage?type=site<br />
  13. 13. B. Navigation<br />
  14. 14. B.8 Une page d’accueil incitative<br />Le Carousel incite clairement à écouter les nouveautés.<br />http://www.deezer.com<br />
  15. 15. B.9 Interface intuitive<br />L’utilisateur n’est pas perdu en arrivant devant ce type d’interface.<br />De plus les 3 boutons visuels du haut définissent clairement les 3 axes principaux du site.<br />http://www.alsacreations.com/<br />
  16. 16. B.10 Interface de navigation cohérente<br />http://www.lemonde.fr/<br />http://www.alsacreations.com/<br />Ces deux sites présentent un menu cohérent et concis sur toutes leurs pages.<br />
  17. 17. B.11 Segmentation de la zone de navigation<br />Le classement segmenté de la zone de navigation est bien apparent ici.<br />http://wordpress.org/showcase/<br />
  18. 18. B.12 L’architecture de l’information<br />http://wordpress.org/<br />
  19. 19. B.13 L’équilibre largeur-profondeur<br />http://www.crous-bordeaux.fr/<br />
  20. 20. B.14 Les accès réservés<br />L’interface permet l’accès réservé aux membres inscrits<br />http://bv.u-bordeaux.fr/<br />
  21. 21. B.15 Des liens hypertextes efficaces<br />http://fr.wikipedia.org<br />
  22. 22. B.16 Images-liens justifiées ?<br />Balise ALT présente sur cette image<br />http://fr.wikipedia.org<br />
  23. 23. B.17 Le navigateur fonctionne t’il correctement<br />Une URL propre, des liens renseignés (TITLE), fonctionnalités navigateur opérationnelle<br />http://www.pompage.net/pompe/de-la-vraie-typographie-pour-le-web<br />
  24. 24. B.18 Un site relié à la toile<br />De nombreux liens renvoient vers des sites extérieurs.<br />http://www.fubiz.net/<br />
  25. 25. B.19 Un moteur intégré<br />Les résultats du moteur de recherche sont affiché par rapport au mot clé ou au contenus du site<br />http://www.alsacreations.com/search/<br />
  26. 26. B.20 Les outils d’aide à la navigation<br />L’interface propose des accès rapides aux contenus<br />http://www.siteduzero.com/<br />
  27. 27. C. Design Graphique<br />
  28. 28. C.21 Une qualité graphique pro<br />www.storyville.com<br />
  29. 29. C.22 Un design léger<br />Stocker des fichiers sonores facilement<br />www.tracychapman.com<br />
  30. 30. C.23 Un design cohérent<br />Une première approche le regard se perd et ne sait plus où se poser réellement.<br />Ici, trop de typographies et de taille de typographies différentes perturbent la lecture!<br />www.laudividni.com<br />
  31. 31. C.23 Un design cohérent<br />Une seconde approche où le code couleur de la marque (le noir et le blanc) est mis en avant tout au long du site et offre alors une cohérence graphique.<br />www.chanel.com<br />
  32. 32. C.24 L’intérêt des visuels<br />Zoomer sur le produit<br />Des images présentables et utiles,apprécier et ressentir les matières.<br />www.3suisses.fr<br />www.laredoute.fr<br />
  33. 33. C.24 L’intérêt des visuels<br />A contrario, des images parfois de mauvaisequalité affectent de façon négative l’image professionnelle de la marque.<br />www.cinna.fr<br />
  34. 34. C.24 L’intérêt des visuels<br />Des images àl’esthétiquetravaillée !<br />www.carls.no<br />www.jaegermeister.de<br />
  35. 35. C.24 L’intérêt des visuels<br />Des mises en page aux icônes et aux paragraphesabsents.<br />www.dolcegabbana.it<br />www.ringroger.nu<br />La mise en forme<br />du règlement de cejeu rend sa lecture trèsdifficile et ne met pas l’utilisateur en confiance.<br />
  36. 36. C.25 Métaphoresintuitives<br />Partager un lieu et plonger dans l’univers de la marque<br />www.anythingbutordinary.saab.com<br />Après chaque clic sur un bureau, l'utilisateur se retrouve face à un « interlocuteur » et découvre alors de nouvelles caractéristiques sur la nouvelle Saab présentée.<br />
  37. 37. C.25 Métaphoresintuitives<br />Réutiliser les repères et les usages déjà connus par l’utilisateur<br />Devanture<br />de boutique<br />www.pillandpillow.com<br />Des produits mis en rayon…<br />Un plan du<br />magasin<br />comme plan du site<br />
  38. 38. C.26 L’utilité des appli x-média<br />Des vidéos pour mieux comprendre un produit<br />www.lancel.com<br />
  39. 39. C.27 Design adaptéà la cible<br />Parler le même langage que la cible, ici les enfants.<br />http://www.bbc.co.uk/cbeebies/bigandsmall/games/<br />
  40. 40. C.28 Le site fidèle à l’image<br />http://www.rolex.com<br />
  41. 41. C.29 Une typographieefficace et cohérente<br />www.thewildernessdowntown.com<br />
  42. 42. D. Contenu<br />
  43. 43. D.30 Actualité du contenu<br />Onglets pour hiérarchiser l’actualité :<br />- Sujets Brûlants<br />- Actualité<br />- Les plus consultés <br />http://europa.eu/index_fr.htm<br />
  44. 44. D.31 Valeurd’usage du contenu<br />Peu d’explication sur l’usage<br />http://atilf.atilf.fr/<br />Valeur d’usage de service (création d’un bonnet)<br />http://www.goldenhook.fr/customisation.html#/3/<br />
  45. 45. D.32 Informationscrédibles<br />Site institutionnel <br />de la Guinée Equatoriale<br />http://www.ceiba-guinea-ecuatorial.org/<br />
  46. 46. D.33 Contextualisation du contenu<br />http://fr.fotolia.com/<br />http://www.phonotheque.org/<br />
  47. 47. D.34 Degrèsd’activité des contenus<br />Proximité affective : l’amour<br />Proximité affective : la santé, l’environnement<br />http://www.edarling.fr<br />http://www.veolia.com/fr/<br />
  48. 48. D.35 Versions étrangères<br />17 Nationalités<br />http://www.laredoute.com/<br />Uniquement en français<br />http://www.gouvernement.fr/<br />
  49. 49. D.36 Écriture web<br />« Nul n'est censé ignorer la loi », même avec Légifrance…<br />http://www.legifrance.gouv.fr<br />
  50. 50. D.37 Les contenusexploitent-ils internet?<br />Catalogue interactif d’Ikéa<br />http://www.ikea.com/ms/en_US/rooms_ideas/ckl/default.html<br />
  51. 51. D.38 Contenu et stratégie<br />http://www.hm.com/fr/mode/fashionstudio__fashionstudio.nhtml<br />Une « wishlist », mais pas d’achat<br />http://www.adidas.com/campaigns/neo2010/content/Default.aspx?headerType=discreet&strCountry_adidascom=fr#/product<br />
  52. 52. D.39 Correspondancecontenu - annonce<br />Avenir et communication, création de sites internet…<br />http://avetco.fr/<br />Un nom de domaine sérieux, un site qui n’y correspond pas<br />http://www.marche-public.fr/<br />
  53. 53. D.40 Contenujuridiquement acceptable<br /><ul><li> Les mentions légales
  54. 54. Les règles relatives à la protection des données personnelles
  55. 55. Les aspects de la propriété intellectuelle et le droit d’auteur
  56. 56. Règles de ventes</li></ul>www.amazon.fr<br />
  57. 57. D.41 Les contenus importants en avant<br />http://fr.wikipedia.org<br />Deux encyclopédies et deux présentation de barre de recherche : <br />Universalis, contrairement à Wikipédia, choisit de la placer en grand format et au centre de la page.<br />http://www.universalis.fr<br />
  58. 58. E. Interactivité<br />
  59. 59. E.42 Contacter l’éditeur<br />Coordonnées complètes<br />http://marbreriemdg.com/contacts/<br />
  60. 60. E.42 Contacter l’éditeur<br />Pas de coordonnées, juste un formulaire <br />http://www.lefigaro.fr/contact/contact.php<br />
  61. 61. E.43 Les messages sont ils traités?<br />Choix de thématique > message non traité avant 24 h <br />http://www.lmde.com/index.php?id=1014<br />
  62. 62. E.44 Témoigner de l’interactivité <br />Commentaires, témoignages de l'interactivité<br />http://www.marmiton.org/Recettes/Recette-avis_soupe-chinoise_13856.aspx<br />
  63. 63. E.45 Intérêt du forum<br />Forum avec intérêt > sujet pas trop large Flux de visiteurs important > bonne modération <br />http://forum.alsacreations.com/forum.php<br />
  64. 64. E.45-bis Intérêt du blog<br />Blog avec intérêtcommentaires nombreux> rapports sur l'actualité <br />http://blog.rtl.fr/aphatie/index.html<br />
  65. 65. E.46 Autres espaces interactifs<br />Autre espace interactif > Ebuddy, le MSN à partir d'internet<br />http://www.ebuddy.com/<br />
  66. 66. E.46 Autres espaces interactif <br />Application iPhone pour Facebook<br />http://www.applicationiphone.com/2009/01/application-iphone-facebook/<br />
  67. 67. E.47 La news letter<br />Bonnes promotions, mais fréquence parfois trop soutenue <br />http://www.voyage-prive.com/campaign/reg/paillote/google-brand/10<br />
  68. 68. E.48 La personnalisation<br />Compte Amazon personnalisable<br />http://www.amazon.fr/<br />
  69. 69. E.48 La personnalisation<br />Gestion du profil Amazon<br />http://www.amazon.fr/<br />
  70. 70. E.49 Base de données conviviales<br />Recherche et brainstorming avec Catalyst sur le site de Getty Images<br />http://www.gettyimages.fr/Catalyst/<br />
  71. 71. E. Marketing<br />
  72. 72. E.50 Formulairesfaciles <br />Les différents champs sont clairement définis<br />http://www.deezer.com<br />
  73. 73. E.51 Facilité des commandes<br />Une commande en trois étapes clairement identifiées<br />http://www.laredoute.fr/<br />
  74. 74. E.52 Le site communique-t-il ce qu’il a à offrir?<br />http://discover.sonystyle.com/piiq/#/product/menu<br />
  75. 75. E.53 Statistiques<br />http://www.ingridbdesign.com/<br />
  76. 76. E.54 Autres outils de mesure<br />http://www.monet2010.com/fr#/home/<br />Questionnaire<br />de satisfaction<br />
  77. 77. E.55 Formats publicitaires<br />http://www.leboncoin.fr/<br />Bannière publicitaire<br />pointant vers des concurrents indirects,<br />mais concurrents tout de même!<br />
  78. 78. E.55 Formats publicitaires<br />http://www.sixt.fr<br />Une solution alternative<br />pour faire sa pub sur la toile!<br />Remplacer la bannière traditionnelle,<br />par plusieurs annonces (moins chères)<br /> sur Ebay !<br />
  79. 79. E.56 Optimisation du référencement<br />Balises <title> et <br /><meta> mal renseignées<br />http://www.mas.asso.fr/<br />
  80. 80. E.57 Popularité du site<br />http://www.advancedlinkmanager.com/<br />
  81. 81. E.58 URL percutants<br />Problème de choix d’URL : <br />www.PenIsland.net<br />www.ExpertsExchange.com/<br />
  82. 82. E.59 Comment le site fait il parler de lui ?<br />A l’aide des pages sur les réseaux sociaux, qui brassent des millions d’utilisateurs, des sites web (ici Deezer) peuvent améliorer leur image, leur e-réputation et leur référencement.<br />http://www.facebook.com/deezer<br />

×