SlideShare ist ein Scribd-Unternehmen logo
1 von 79
Ergonomiede sites Web :les 60 points clés M1 Multimédia Année 2010/2011 Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané
A. Aspects techniques et fonctionnels
A.1 Vitesse de téléchargement Chargement du site trop long http://hf3.coca-cola.com/
A.2 Les pages épousent elles bien l’écran? Mauvaise résolution http://www.liberation.fr/
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/
A.3 Adaptation du site au navigateur Incompatibilité IE http://www.microsoft.com/france/windows/internet-explorer/telecharger-ie8.aspx
A.3 Adaptation du site au navigateur Compatibilité Firefox http://www.microsoft.com/france/windows/internet-explorer/telecharger-ie8.aspx
A.4 Utilisation des techno standards Full flash > réduction de la cible  http://www.citroen.fr/home/#/home/
A.4 Utilisation des techno standards html/JavaScript > cible large http://www.w3.org/
A.5 Dysfonctionnements apparents Mauvaise redirection d'un lien http://www.numbersusa.com/content/404.html
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
A.7 Sécurisation du site https > authentication sécurisée  http://www.bnpparibas.net/banque/portail/particulier/HomePage?type=site
B. Navigation
B.8 Une page d’accueil incitative Le Carousel incite clairement à écouter les nouveautés. http://www.deezer.com
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/
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.
B.11 Segmentation de la zone de navigation Le classement segmenté de la zone de navigation est bien apparent ici. http://wordpress.org/showcase/
B.12 L’architecture de l’information http://wordpress.org/
B.13 L’équilibre largeur-profondeur http://www.crous-bordeaux.fr/
B.14 Les accès réservés L’interface permet l’accès réservé aux membres inscrits http://bv.u-bordeaux.fr/
B.15 Des liens hypertextes efficaces http://fr.wikipedia.org
B.16 Images-liens justifiées ? Balise ALT présente sur cette image http://fr.wikipedia.org
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
B.18 Un site relié à la toile De nombreux liens renvoient vers des sites extérieurs. http://www.fubiz.net/
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/
B.20 Les outils d’aide à la navigation L’interface propose des accès rapides aux contenus http://www.siteduzero.com/
C. Design Graphique
C.21 Une qualité graphique pro www.storyville.com
C.22 Un design léger Stocker des fichiers sonores facilement www.tracychapman.com
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
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
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
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
C.24 L’intérêt des visuels Des images àl’esthétiquetravaillée ! www.carls.no www.jaegermeister.de
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.
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.
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
C.26 L’utilité des appli x-média Des vidéos pour mieux comprendre un produit www.lancel.com
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/
C.28 Le site fidèle à l’image http://www.rolex.com
C.29 Une typographieefficace et cohérente www.thewildernessdowntown.com
D. Contenu
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
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/
D.32 Informationscrédibles Site institutionnel  de la Guinée Equatoriale http://www.ceiba-guinea-ecuatorial.org/
D.33 Contextualisation du contenu http://fr.fotolia.com/ http://www.phonotheque.org/
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/
D.35 Versions étrangères 17 Nationalités http://www.laredoute.com/ Uniquement en français http://www.gouvernement.fr/
D.36 Écriture web « Nul n'est censé ignorer la loi », même avec Légifrance… http://www.legifrance.gouv.fr
D.37 Les contenusexploitent-ils internet? Catalogue interactif d’Ikéa http://www.ikea.com/ms/en_US/rooms_ideas/ckl/default.html
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
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/
D.40 Contenujuridiquement acceptable ,[object Object]
Les règles relatives à la protection des données personnelles
Les aspects de la propriété intellectuelle et le droit d’auteur
Règles de venteswww.amazon.fr
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
E. Interactivité
E.42 Contacter l’éditeur Coordonnées complètes http://marbreriemdg.com/contacts/
E.42 Contacter l’éditeur Pas de coordonnées, juste un formulaire  http://www.lefigaro.fr/contact/contact.php
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
E.44 Témoigner de l’interactivité  Commentaires, témoignages de l'interactivité http://www.marmiton.org/Recettes/Recette-avis_soupe-chinoise_13856.aspx
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
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
E.46 Autres espaces interactifs Autre espace interactif > Ebuddy, le MSN à partir d'internet http://www.ebuddy.com/
E.46 Autres espaces interactif  Application iPhone pour Facebook http://www.applicationiphone.com/2009/01/application-iphone-facebook/
E.47 La news letter Bonnes promotions, mais fréquence parfois trop soutenue  http://www.voyage-prive.com/campaign/reg/paillote/google-brand/10
E.48 La personnalisation Compte Amazon personnalisable http://www.amazon.fr/
E.48 La personnalisation Gestion du profil Amazon http://www.amazon.fr/
E.49 Base de données conviviales Recherche et brainstorming avec Catalyst sur le site de Getty Images http://www.gettyimages.fr/Catalyst/
E. Marketing
E.50 Formulairesfaciles  Les différents champs sont clairement définis http://www.deezer.com
E.51 Facilité des commandes Une commande en trois étapes clairement identifiées http://www.laredoute.fr/
E.52 Le site communique-t-il ce qu’il a à offrir? http://discover.sonystyle.com/piiq/#/product/menu
E.53 Statistiques http://www.ingridbdesign.com/
E.54 Autres outils de mesure http://www.monet2010.com/fr#/home/ Questionnaire de satisfaction
E.55 Formats publicitaires http://www.leboncoin.fr/ Bannière publicitaire pointant vers des concurrents indirects, mais concurrents tout de même!
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 !
E.56 Optimisation du référencement Balises <title>  et  <meta> mal renseignées http://www.mas.asso.fr/

Weitere ähnliche Inhalte

Ähnlich wie 60 points clés d'ergonomie

Audit site web
Audit site webAudit site web
Audit site webscavaille
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Mohammed JAITI
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14FullSIX Group
 
Standardisation du developpement Web
Standardisation du developpement WebStandardisation du developpement Web
Standardisation du developpement Webcl3m
 
Cd C Fcinewii30072008
Cd C Fcinewii30072008Cd C Fcinewii30072008
Cd C Fcinewii30072008Alain Robert
 
Flupa test a11y_16_05_2016s0f2
Flupa test a11y_16_05_2016s0f2Flupa test a11y_16_05_2016s0f2
Flupa test a11y_16_05_2016s0f2vincent aniort
 
Rendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapesRendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapesConFoo
 
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressL'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressYannick Pavard
 
Atelier e-stratégies 2012
Atelier e-stratégies 2012Atelier e-stratégies 2012
Atelier e-stratégies 2012SID-Networks
 
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...Flupa
 
RMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMSRMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMSYannick Pavard
 
Erellis- Agence en communication interactive
Erellis- Agence en communication interactiveErellis- Agence en communication interactive
Erellis- Agence en communication interactiveERELLIS
 
Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014ALTER WAY
 
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPatelier111
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitaleChris Gaillard
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALLaribi Aicha
 

Ähnlich wie 60 points clés d'ergonomie (20)

Ergonomie 60 points clefs
Ergonomie 60 points clefsErgonomie 60 points clefs
Ergonomie 60 points clefs
 
Audit site web
Audit site webAudit site web
Audit site web
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
Webdesign
WebdesignWebdesign
Webdesign
 
Standardisation du developpement Web
Standardisation du developpement WebStandardisation du developpement Web
Standardisation du developpement Web
 
Cd C Fcinewii30072008
Cd C Fcinewii30072008Cd C Fcinewii30072008
Cd C Fcinewii30072008
 
Flupa test a11y_16_05_2016s0f2
Flupa test a11y_16_05_2016s0f2Flupa test a11y_16_05_2016s0f2
Flupa test a11y_16_05_2016s0f2
 
Rendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapesRendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapes
 
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressL'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
 
Bloggybusiness Presentation
Bloggybusiness PresentationBloggybusiness Presentation
Bloggybusiness Presentation
 
Atelier e-stratégies 2012
Atelier e-stratégies 2012Atelier e-stratégies 2012
Atelier e-stratégies 2012
 
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
 
RMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMSRMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMS
 
Erellis- Agence en communication interactive
Erellis- Agence en communication interactiveErellis- Agence en communication interactive
Erellis- Agence en communication interactive
 
Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014
 
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitale
 
Business plan
Business planBusiness plan
Business plan
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 

Kürzlich hochgeladen

La nouvelle femme . pptx Film français
La   nouvelle   femme  . pptx  Film françaisLa   nouvelle   femme  . pptx  Film français
La nouvelle femme . pptx Film françaisTxaruka
 
Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfAmgdoulHatim
 
Cours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdfCours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdfachrafbrahimi1
 
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projetFormation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projetJeanYvesMoine
 
STRATEGIE_D’APPRENTISSAGE flee_DU_FLE.pdf
STRATEGIE_D’APPRENTISSAGE flee_DU_FLE.pdfSTRATEGIE_D’APPRENTISSAGE flee_DU_FLE.pdf
STRATEGIE_D’APPRENTISSAGE flee_DU_FLE.pdfGamal Mansour
 
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptxIntégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptxabdououanighd
 
Apolonia, Apolonia.pptx Film documentaire
Apolonia, Apolonia.pptx         Film documentaireApolonia, Apolonia.pptx         Film documentaire
Apolonia, Apolonia.pptx Film documentaireTxaruka
 
Les roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptxLes roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptxShinyaHilalYamanaka
 
les_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhkles_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhkRefRama
 
Cours Généralités sur les systèmes informatiques
Cours Généralités sur les systèmes informatiquesCours Généralités sur les systèmes informatiques
Cours Généralités sur les systèmes informatiquesMohammedAmineHatoch
 
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...Technologia Formation
 
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...Universidad Complutense de Madrid
 
Formation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptxFormation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptxrajaakiass01
 
La mondialisation avantages et inconvénients
La mondialisation avantages et inconvénientsLa mondialisation avantages et inconvénients
La mondialisation avantages et inconvénientsJaouadMhirach
 
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANKRAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANKNassimaMdh
 
Cours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdfCours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdfssuserc72852
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxikospam0
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...Nguyen Thanh Tu Collection
 
L application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptxL application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptxhamzagame
 
658708519-Power-Point-Management-Interculturel.pdf
658708519-Power-Point-Management-Interculturel.pdf658708519-Power-Point-Management-Interculturel.pdf
658708519-Power-Point-Management-Interculturel.pdfMariaClaraAlves46
 

Kürzlich hochgeladen (20)

La nouvelle femme . pptx Film français
La   nouvelle   femme  . pptx  Film françaisLa   nouvelle   femme  . pptx  Film français
La nouvelle femme . pptx Film français
 
Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdf
 
Cours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdfCours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdf
 
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projetFormation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
 
STRATEGIE_D’APPRENTISSAGE flee_DU_FLE.pdf
STRATEGIE_D’APPRENTISSAGE flee_DU_FLE.pdfSTRATEGIE_D’APPRENTISSAGE flee_DU_FLE.pdf
STRATEGIE_D’APPRENTISSAGE flee_DU_FLE.pdf
 
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptxIntégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptx
 
Apolonia, Apolonia.pptx Film documentaire
Apolonia, Apolonia.pptx         Film documentaireApolonia, Apolonia.pptx         Film documentaire
Apolonia, Apolonia.pptx Film documentaire
 
Les roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptxLes roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptx
 
les_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhkles_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhk
 
Cours Généralités sur les systèmes informatiques
Cours Généralités sur les systèmes informatiquesCours Généralités sur les systèmes informatiques
Cours Généralités sur les systèmes informatiques
 
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
 
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
 
Formation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptxFormation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptx
 
La mondialisation avantages et inconvénients
La mondialisation avantages et inconvénientsLa mondialisation avantages et inconvénients
La mondialisation avantages et inconvénients
 
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANKRAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
 
Cours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdfCours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdf
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
 
L application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptxL application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptx
 
658708519-Power-Point-Management-Interculturel.pdf
658708519-Power-Point-Management-Interculturel.pdf658708519-Power-Point-Management-Interculturel.pdf
658708519-Power-Point-Management-Interculturel.pdf
 

60 points clés d'ergonomie

  • 1. Ergonomiede 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
  • 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/
  • 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
  • 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/
  • 53.
  • 54. Les règles relatives à la protection des données personnelles
  • 55. Les aspects de la propriété intellectuelle et le droit d’auteur
  • 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
  • 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/
  • 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
  • 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