Ergonomie de sites Web :

les 60 points clés

Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané

M1 MultimédiaAnnée 2010/2011

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.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

http://bv.u-bordeaux.fr/

L’interface permet l’accès réservé aux membres inscrits

B.15 Des liens hypertextes efficaces

http://fr.wikipedia.org

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.21 Une qualité graphique pro

www.storyville.com

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.28 Le site fidèle à l’image

http://www.rolex.com

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.