60 points clés d'ergonomie
-
Upload
mariemmartine -
Category
Education
-
view
1.734 -
download
2
Transcript of 60 points clés d'ergonomie
Ergonomie de sites Web :
les 60 points clés
M1 MultimédiaAnnée 2010/2011
Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané
A. Aspects techniques et fonctionnels
A.1 Vitesse de téléchargement
http://hf3.coca-cola.com/ Chargement du site trop long
A.2 Les pages épousent elles bien l’écran?
http://www.liberation.fr/
Mauvaise résolution
A.2 Les pages épousent elles bien l’écran?
http://www.liberation.fr/
Non respect de la règle des trois A4, page trop longue pour un site.
A.3 Adaptation du site au navigateur
http://www.microsoft.com/france/windows/internet-explorer/telecharger-ie8.aspx
Incompatibilité IE
A.3 Adaptation du site au navigateur
http://www.microsoft.com/france/windows/internet-explorer/telecharger-ie8.aspx
Compatibilité Firefox
A.4 Utilisation des techno standards
http://www.citroen.fr/home/#/home/
Full flash > réduction de la cible
A.4 Utilisation des techno standards
http://www.w3.org/
html/JavaScript > cible large
A.5 Dysfonctionnements apparents
http://www.numbersusa.com/content/404.html
Mauvaise redirection d'un lien
A.6 Impression des pages
http://www.marmiton.org/Recettes/Recette_gateau-aux-pommes-de-mamie-charline_23404.aspx
Impression facile de la page proposée
A.7 Sécurisation du site
http://www.bnpparibas.net/banque/portail/particulier/HomePage?type=site
https > authentication sécurisée
B. Navigation
B.8 Une page d’accueil incitative
http://www.deezer.com
Le Carousel incite clairement à écouter les nouveautés.
B.9 Interface intuitive
http://www.alsacreations.com/
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.
B.10 Interface de navigation cohérente
http://www.alsacreations.com/
http://www.lemonde.fr/
Ces deux sites présentent un menu cohérent et concis sur toutes leurs pages.
B.11 Segmentation de la zone de navigation
http://wordpress.org/showcase/
Le classement segmenté de la zone de navigation est bien apparent ici.
B.13 L’équilibre largeur-profondeur
http://www.crous-bordeaux.fr/
B.14 Les accès réservés
http://bv.u-bordeaux.fr/
L’interface permet l’accès réservé aux membres inscrits
B.16 Images-liens justifiées ?
http://fr.wikipedia.org
Balise ALT présente sur cette image
B.17 Le navigateur fonctionne t’il correctement
http://www.pompage.net/pompe/de-la-vraie-typographie-pour-le-web
Une URL propre, des liens renseignés (TITLE), fonctionnalités navigateur opérationnelle
B.18 Un site relié à la toile
http://www.fubiz.net/
De nombreux liens renvoient vers des sites extérieurs.
B.19 Un moteur intégré
http://www.alsacreations.com/search/
Les résultats du moteur de recherche sont affiché par rapport au mot clé ou au contenus du site
B.20 Les outils d’aide à la navigation
http://www.siteduzero.com/
L’interface propose des accès rapides aux contenus
C. Design Graphique
C.22 Un design léger
www.tracychapman.com
Stocker des fichiers sonores facilement
C.23 Un design cohérent
www.laudividni.com
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!
C.23 Un design cohérent
www.chanel.com
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.
C.24 L’intérêt des visuels
www.laredoute.fr
Des images présentables et utiles,apprécier et ressentir les matières.
www.3suisses.fr
Zoomer sur le produit
C.24 L’intérêt des visuels
www.cinna.fr
A contrario, des images parfois de mauvaise qualité affectent de façon négative l’image professionnelle de la marque.
C.24 L’intérêt des visuels
www.carls.no
Des images à l’esthétique travaillée !
www.jaegermeister.de
C.24 L’intérêt des visuels
www.ringroger.nu
www.dolcegabbana.it
La mise en formedu règlement de ce jeu rend sa lecture très difficile et ne met pas l’utilisateur en confiance.
Des mises en page aux icônes et aux paragraphes absents.
C.25 Métaphores intuitives
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.
Partager un lieu et plonger dans l’univers de la marque
C.25 Métaphores intuitives
Réutiliser les repères et les usages déjà connus par l’utilisateur
Un plan dumagasin
comme plan du site
Devanturede boutique
Des produits mis en rayon…www.pillandpillow.com
C.26 L’utilité des appli x-médiaDes 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.29 Une typographie efficace et cohérente
www.thewildernessdowntown.com
D. Contenu
Onglets pour hiérarchiser l’actualité :- Sujets Brûlants- Actualité- Les plus consultés
http://europa.eu/index_fr.htm
D.30 Actualité du contenu
Peu d’explication sur l’usagehttp://atilf.atilf.fr/
Valeur d’usage de service (création d’un bonnet)http://www.goldenhook.fr/customisation.html#/3/
D.31 Valeur d’usage du contenu
http://www.ceiba-guinea-ecuatorial.org/
Site institutionnel de la Guinée Equatoriale
D.32 Informations crédibles
http://fr.fotolia.com/
http://www.phonotheque.org/
D.33 Contextualisation du contenu
http://www.edarling.fr
http://www.veolia.com/fr/
Proximité affective : l’amour
Proximité affective : la santé, l’environnement
D.34 Degrès d’activité des contenus
http://www.laredoute.com/
http://www.gouvernement.fr/
17 Nationalités
Uniquement en français
D.35 Versions étrangères
http://www.legifrance.gouv.fr
« Nul n'est censé ignorer la loi », même
avec Légifrance…D.36 Écriture web
http://www.ikea.com/ms/en_US/rooms_ideas/ckl/default.html
Catalogue interactif d’Ikéa
D.37 Les contenus exploitent-ils internet?
http://www.adidas.com/campaigns/neo2010/content/Default.aspx?headerType=discreet&strCountry_adidascom=fr#/product
http://www.hm.com/fr/mode/fashionstudio__fashionstudio.nhtml
Une « wishlist », mais pas d’achat
D.38 Contenu et stratégie
http://avetco.fr/
Avenir et communication, création de sites internet…
http://www.marche-public.fr/
Un nom de domaine sérieux, un site qui n’y correspond pas
D.39 Correspondance contenu - annonce
• Les mentions légales•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 ventes
D.40 Contenu juridiquement acceptable
www.amazon.fr
D.41 Les contenus importants en avant
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://fr.wikipedia.org
http://www.universalis.fr
E. Interactivité
E.42 Contacter l’éditeur
http://marbreriemdg.com/contacts/
Coordonnées complètes
E.42 Contacter l’éditeur
http://www.lefigaro.fr/contact/contact.php
Pas de coordonnées, juste un formulaire
E.43 Les messages sont ils traités?
http://www.lmde.com/index.php?id=1014
Choix de thématique > message non traité avant 24 h
E.44 Témoigner de l’interactivité
http://www.marmiton.org/Recettes/Recette-avis_soupe-chinoise_13856.aspx Commentaires, témoignages de l'interactivité
E.45 Intérêt du forum
http://forum.alsacreations.com/forum.php
Forum avec intérêt > sujet pas trop large Flux de visiteurs important > bonne modération
E.45-bis Intérêt du blog
http://blog.rtl.fr/aphatie/index.html
Blog avec intérêtcommentaires nombreux> rapports sur l'actualité
E.46 Autres espaces interactifs
http://www.ebuddy.com/
Autre espace interactif > Ebuddy, le MSN a partir d'internet
E.46 Autres espaces interactif
http://www.applicationiphone.com/2009/01/application-iphone-facebook/
Application iPhone pour Facebook
E.47 La news letter
http://www.voyage-prive.com/campaign/reg/paillote/google-brand/10
Bonnes promotions, mais fréquence parfois trop soutenue
E.48 La personnalisation
http://www.amazon.fr/Compte Amazon personnalisable
E.48 La personnalisation
http://www.amazon.fr/
Gestion du profil Amazon
E.49 Base de données conviviales
http://www.gettyimages.fr/Catalyst/
Recherche et brainstorming avec Catalyst sur le site de Getty Images
E. Marketing
Les différents champs sont clairement définis
E.50 Formulaires faciles
http://www.deezer.com
http://www.laredoute.fr/
Une commande en trois étapes clairement identifiées
E.51 Facilité des commandes
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
Bannière publicitairepointant vers des concurrents indirects,
mais concurrents tout de même!
http://www.leboncoin.fr/
E.55 Formats publicitaires
http://www.sixt.fr
Une solution alternativepour 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
http://www.mas.asso.fr/
Balises <title> et <meta> mal renseignées
E.57 Popularité du site
http://www.advancedlinkmanager.com/
Problème de choix d’URL : www.PenIsland.netwww.ExpertsExchange.com/
E.58 URL percutants
E.59 Comment le site fait il parler de lui ?
http://www.facebook.com/deezer
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.