Points clés - ergonomie web

1. Ergonomie de sites Web :les 60 points clés M1 Multimédia Année 2010/2011 Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané

2. A. Aspects techniques et fonctionnels

3. A.1 Vitesse de téléchargement Chargement du site trop long http://hf3.coca-cola.com/

4. A.2 Les pages épousent elles bien l’écran? Mauvaise résolution http://www.liberation.fr/

5. A.2 Les pages épousent elles bien l’écran? Non respect de la règle des trois A4, pagetrop longue pour un site. http://www.liberation.fr/

6. A.3 Adaptation du site au navigateur Incompatibilité IE http://www.microsoft.com/france/windows/internet-explorer/telecharger-ie8.aspx

7. A.3 Adaptation du site au navigateur Compatibilité Firefox http://www.microsoft.com/france/windows/internet-explorer/telecharger-ie8.aspx

8. A.4 Utilisation des techno standards Full flash > réduction de la cible http://www.citroen.fr/home/#/home/

9. A.4 Utilisation des techno standards html/JavaScript > cible large http://www.w3.org/

10. A.5 Dysfonctionnements apparents Mauvaise redirection d'un lien http://www.numbersusa.com/content/404.html

11. A.6 Impression des pages Impression facile de la page proposée http://www.marmiton.org/Recettes/Recette_gateau-aux-pommes-de-mamie-charline_23404.aspx

12. A.7 Sécurisation du site https > authentication sécurisée http://www.bnpparibas.net/banque/portail/particulier/HomePage?type=site

13. B. Navigation

14. B.8 Une page d’accueil incitative Le Carousel incite clairement à écouter les nouveautés. http://www.deezer.com

15. B.9 Interface intuitive L’utilisateur n’est pas perdu en arrivant devant ce type d’interface. De plus les 3 boutons visuels du haut définissent clairement les 3 axes principaux du site. http://www.alsacreations.com/

16. B.10 Interface de navigation cohérente http://www.lemonde.fr/ http://www.alsacreations.com/ Ces deux sites présentent un menu cohérent et concis sur toutes leurs pages.

17. B.11 Segmentation de la zone de navigation Le classement segmenté de la zone de navigation est bien apparent ici. http://wordpress.org/showcase/

18. B.12 L’architecture de l’information http://wordpress.org/

19. B.13 L’équilibre largeur-profondeur http://www.crous-bordeaux.fr/

20. B.14 Les accès réservés L’interface permet l’accès réservé aux membres inscrits http://bv.u-bordeaux.fr/

21. B.15 Des liens hypertextes efficaces http://fr.wikipedia.org

22. B.16 Images-liens justifiées ? Balise ALT présente sur cette image http://fr.wikipedia.org

23. B.17 Le navigateur fonctionne t’il correctement Une URL propre, des liens renseignés (TITLE), fonctionnalités navigateur opérationnelle http://www.pompage.net/pompe/de-la-vraie-typographie-pour-le-web

24. B.18 Un site relié à la toile De nombreux liens renvoient vers des sites extérieurs. http://www.fubiz.net/

25. B.19 Un moteur intégré Les résultats du moteur de recherche sont affiché par rapport au mot clé ou au contenus du site http://www.alsacreations.com/search/

26. B.20 Les outils d’aide à la navigation L’interface propose des accès rapides aux contenus http://www.siteduzero.com/

27. C. Design Graphique

28. C.21 Une qualité graphique pro www.storyville.com

29. C.22 Un design léger Stocker des fichiers sonores facilement www.tracychapman.com

30. C.23 Un design cohérent Une première approche le regard se perd et ne sait plus où se poser réellement. Ici, trop de typographies et de taille de typographies différentes perturbent la lecture! www.laudividni.com

31. C.23 Un design cohérent 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. www.chanel.com

32. C.24 L’intérêt des visuels Zoomer sur le produit Des images présentables et utiles,apprécier et ressentir les matières. www.3suisses.fr www.laredoute.fr

33. C.24 L’intérêt des visuels A contrario, des images parfois de mauvaisequalité affectent de façon négative l’image professionnelle de la marque. www.cinna.fr

34. C.24 L’intérêt des visuels Des images àl’esthétiquetravaillée ! www.carls.no www.jaegermeister.de

35. C.24 L’intérêt des visuels Des mises en page aux icônes et aux paragraphesabsents. www.dolcegabbana.it www.ringroger.nu La mise en forme du règlement de cejeu rend sa lecture trèsdifficile et ne met pas l’utilisateur en confiance.

36. C.25 Métaphoresintuitives Partager un lieu et plonger dans l’univers de la marque www.anythingbutordinary.saab.com 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.

37. C.25 Métaphoresintuitives Réutiliser les repères et les usages déjà connus par l’utilisateur Devanture de boutique www.pillandpillow.com Des produits mis en rayon… Un plan du magasin comme plan du site

38. C.26 L’utilité des appli x-média Des vidéos pour mieux comprendre un produit www.lancel.com

39. C.27 Design adaptéà la cible Parler le même langage que la cible, ici les enfants. http://www.bbc.co.uk/cbeebies/bigandsmall/games/

40. C.28 Le site fidèle à l’image http://www.rolex.com

41. C.29 Une typographieefficace et cohérente www.thewildernessdowntown.com

42. D. Contenu

43. D.30 Actualité du contenu Onglets pour hiérarchiser l’actualité : - Sujets Brûlants - Actualité - Les plus consultés http://europa.eu/index_fr.htm

44. D.31 Valeurd’usage du contenu Peu d’explication sur l’usage http://atilf.atilf.fr/ Valeur d’usage de service (création d’un bonnet) http://www.goldenhook.fr/customisation.html#/3/

45. D.32 Informationscrédibles Site institutionnel de la Guinée Equatoriale http://www.ceiba-guinea-ecuatorial.org/

46. D.33 Contextualisation du contenu http://fr.fotolia.com/ http://www.phonotheque.org/

47. D.34 Degrèsd’activité des contenus Proximité affective : l’amour Proximité affective : la santé, l’environnement http://www.edarling.fr http://www.veolia.com/fr/

48. D.35 Versions étrangères 17 Nationalités http://www.laredoute.com/ Uniquement en français http://www.gouvernement.fr/

49. D.36 Écriture web « Nul n'est censé ignorer la loi », même avec Légifrance… http://www.legifrance.gouv.fr

50. D.37 Les contenusexploitent-ils internet? Catalogue interactif d’Ikéa http://www.ikea.com/ms/en_US/rooms_ideas/ckl/default.html

51. D.38 Contenu et stratégie http://www.hm.com/fr/mode/fashionstudio__fashionstudio.nhtml Une « wishlist », mais pas d’achat http://www.adidas.com/campaigns/neo2010/content/Default.aspx?headerType=discreet&strCountry_adidascom=fr#/product

52. D.39 Correspondancecontenu - annonce Avenir et communication, création de sites internet… http://avetco.fr/ Un nom de domaine sérieux, un site qui n’y correspond pas http://www.marche-public.fr/

54. Les règles relatives à la protection des données personnelles

55. Les aspects de la propriété intellectuelle et le droit d’auteur

56. Règles de venteswww.amazon.fr

57. D.41 Les contenus importants en avant http://fr.wikipedia.org Deux encyclopédies et deux présentation de barre de recherche : Universalis, contrairement à Wikipédia, choisit de la placer en grand format et au centre de la page. http://www.universalis.fr

58. E. Interactivité

59. E.42 Contacter l’éditeur Coordonnées complètes http://marbreriemdg.com/contacts/

60. E.42 Contacter l’éditeur Pas de coordonnées, juste un formulaire http://www.lefigaro.fr/contact/contact.php

61. E.43 Les messages sont ils traités? Choix de thématique > message non traité avant 24 h http://www.lmde.com/index.php?id=1014

62. E.44 Témoigner de l’interactivité Commentaires, témoignages de l'interactivité http://www.marmiton.org/Recettes/Recette-avis_soupe-chinoise_13856.aspx

63. E.45 Intérêt du forum Forum avec intérêt > sujet pas trop large Flux de visiteurs important > bonne modération http://forum.alsacreations.com/forum.php

64. E.45-bis Intérêt du blog Blog avec intérêtcommentaires nombreux> rapports sur l'actualité http://blog.rtl.fr/aphatie/index.html

65. E.46 Autres espaces interactifs Autre espace interactif > Ebuddy, le MSN à partir d'internet http://www.ebuddy.com/

66. E.46 Autres espaces interactif Application iPhone pour Facebook http://www.applicationiphone.com/2009/01/application-iphone-facebook/

67. E.47 La news letter Bonnes promotions, mais fréquence parfois trop soutenue http://www.voyage-prive.com/campaign/reg/paillote/google-brand/10

68. E.48 La personnalisation Compte Amazon personnalisable http://www.amazon.fr/

69. E.48 La personnalisation Gestion du profil Amazon http://www.amazon.fr/

70. E.49 Base de données conviviales Recherche et brainstorming avec Catalyst sur le site de Getty Images http://www.gettyimages.fr/Catalyst/

71. E. Marketing

72. E.50 Formulairesfaciles Les différents champs sont clairement définis http://www.deezer.com

73. E.51 Facilité des commandes Une commande en trois étapes clairement identifiées http://www.laredoute.fr/

74. E.52 Le site communique-t-il ce qu’il a à offrir? http://discover.sonystyle.com/piiq/#/product/menu

75. E.53 Statistiques http://www.ingridbdesign.com/

76. E.54 Autres outils de mesure http://www.monet2010.com/fr#/home/ Questionnaire de satisfaction

77. E.55 Formats publicitaires http://www.leboncoin.fr/ Bannière publicitaire pointant vers des concurrents indirects, mais concurrents tout de même!

78. E.55 Formats publicitaires http://www.sixt.fr Une solution alternative pour faire sa pub sur la toile! Remplacer la bannière traditionnelle, par plusieurs annonces (moins chères) sur Ebay !

79. E.56 Optimisation du référencement Balises <title> et <meta> mal renseignées http://www.mas.asso.fr/

80. E.57 Popularité du site http://www.advancedlinkmanager.com/

81. E.58 URL percutants Problème de choix d’URL : www.PenIsland.net www.ExpertsExchange.com/

82. E.59 Comment le site fait il parler de lui ? 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. http://www.facebook.com/deezer