Your SlideShare is downloading. ×
Points clés - ergonomie web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Points clés - ergonomie web

2,250
views

Published on

Points clés - ergonomie web

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
2,250
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
66
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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/
  • 53. D.40 Contenujuridiquement acceptable
    • Les mentions légales
    • 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 ventes
    www.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