Jeudi 16 Juin 2011
Prenez en compte les nouvelles
attentes de vos clients en terme d’ergonomie
Teresa COLOMBI
LudoTIC
contact@ludo-tic.com
Marlène KORSIA
CCIMP
Service Innovation & TIC
marlene.korsia@ccimp.com
Définitions
L’ergonomie a pour vocation d’adapter les objets,
le matériel pour que leur utilisation soit facile dans
la vi...
Définitions
L’ergonomie est une discipline qui varie :
- Selon le contexte
- En fonction du site étudié
- Selon les object...
Quelques règles de base
Source : minini.biz Amélie Boucher
Quelques règles de base
Accompagner l’internaute (guidage)
• Dans les différentes étapes
• Dans sa navigation (fil d’arian...
Objectifs
• Retenir l’internaute, vendre, fidéliser
Critères à analyser
• Attentes de l’utilisateur, habitudes, âge,
équip...
Quelques règles de base
Organiser sa page web :
• Supprimer tout ce qui est inutile
• Limiter le poids des pages (sauf si ...
Quelques règles de base
Soigner le texte :
• Privilégier le XHTML aux images pour le
texte
• Eviter l’usage d’images sous ...
L’evolution des outils
Adapter son site aux nouveaux terminaux
• Optimiser son site pour une utilisation sur
smartphones e...
Un site Internet aux normes W3C
(World Wide Web Consortium)
Pour une interopérabilité
• Une norme créée pour une compatibi...
Nouvelles Technologies de plus en plus puissantes et
“envahissantes”, alors que les utilisateurs sont de moins en
moins co...
Pourquoi a-t-on besoin d’ergonomes ?
Interface
Développeur /
Utilisateur
Développeur /
Utilisateur
Hier
Interface
Utilisat...
Définition d’ergonomie
•Les ergonomes contribuent à la conception et à l’évaluation de toute
sorte d’artefact, ayant pour ...
Le Retour sur Investissement
•Penser à améliorer l’ergonomie d’un produit seulement après avoir
constaté l’existence de pr...
ROI pour un Intranet
➚ Amélioration de la productivité et de son suivi
➚ Meilleure allocation des Ressources Humaines
➚ Sa...
ROI pour un site e-commerce
➚ Amélioration des ventes en ligne jusqu’à 80%
➚ Augmentation des parts de marché
➚ Augmentati...
ROI et moments d’intervention
•Le ROI varie en fonction du moment d’intervention:
 ROI de l’ergonomie de conception 1:100...
Quelques chiffres du ROI
conception réalisation déploiement
possibilités
IHM
coût
changements
Intervention sur logiciel de...
Les principes d’ergonomie Web: la grille LudoTIC
1. Feedback du système
2. Match avec les profils utilisateurs
3. Sensatio...
Le Feedback du système
•L’utilisateur doit être informé de l’état du système à tout moment,
l’interface doit lui fournir u...
Match avec les profils utilisateurs
•Le site tient compte des spécificités des utilisateurs auxquels il
s’adresse. Les spé...
Arborescence et tri de cartes
Sensation de contrôle
•L’utilisateur ne doit pas douter du résultat de ses actions. Il doit
toujours avoir l’impression de...
Cohérence et respect des standards
•Le site doit être cohérent, autrement dit les noms des boutons, la
charte graphique et...
Gestion des erreurs
•Le site évite de pousser l’utilisateur à commettre des erreurs en évitant par
exemple de laisser visi...
Optimisation des performances
•Le site minimise le nombre de clics et les actions superflues. Les contenus
clés sont facil...
Organisation visuelle
La mise en page de l’IHM est claire et bien organisée. Les différentes parties
de chaque page-écran ...
Flexibilité
•Le site s’adapte aux différents besoins des utilisateurs, novices et experts. Il
est également capable de pre...
Surcharge cognitive
•Trop d’information tue l’information, et trop de choix tue le choix. L’usager ne
doit pas être submer...
User Experience
L’utilisation de l’IHM doit être plaisante et donner à l’utilisateur envie de
continuer. Le design doit êt...
Dialogue Homme-Machine
Chaque contenu informatif est une forme de communication. Le site doit ainsi
respecter les règles d...
Aide et documentation
Même si l’IHM est claire et bien organisée, des formes d’aide doivent être
tout de même fournies. El...
Collaboration
De plus en plus de sites proposent différentes formes de partage
d’information et de collaboration entre uti...
L’ergonomie de la Page d’accueil
 La HP est à soigner particulièrement, c’est votre carte de visite
 Elle doit refléter ...
Perception et navigation sur 3 sites
 Etude comparative sur sites d’électroménager: Electrolux, Miele, LG
 18 participan...
Entretien des sols Cuisson Lavage Lave-vaisselle Froid Petit ménager Professionnel
Le Menu de Cannes
Suivez l'évènement, v...
Exploration libre page d’accueil (10 sec)
• La zone la plus regardée est
l’inscription publicitaire « Le
Menu de Cannes » ...
• 11 utilisateurs sur 17 ont fixé
d’abord l’inscription « Le Menu
de Cannes », 3 utilisateurs ont
fixé comme premier éléme...
Miele.fr
Recherche sur www.miele.fr:
Offres et Nouveautés Les services ...Trouvez le vôtre ! Miele Projets Immobiliers
Asp...
• Les zones les plus regardées :
- le visage de la femme au
centre (figure humaine)
- le menu sur la gauche
- les images e...
La première zone vue :
• 9 utilisateurs sur 18 ont fixé d’abord l’image de la femme au centre, 6 utilisateurs ont
fixé com...
Lg.fr
La page d’accueil du site LG.fr contient beaucoup d’images dynamiques en flash qui
apparaissent séquentiellement. Cela sem...
• Les zones les plus regardées :
- menu sur la gauche
- titre du texte à coté de
l’image publicitaire du
téléphone
- image...
La première zone vue :
• 8 utilisateurs sur 18 ont fixé d’abord le logo LG en haut sur la gauche, 6 utilisateurs ont
fixé ...
Pour terminer… mythes et vérités
« le seul principe qui compte est celui des 3 clics »
faux
Comme tous les principes, il e...
Pour terminer… mythes et vérités
« faire un site ergonomique c’est cher »
Vrai et faux
Des techniques comme le tri de cart...
Pour terminer… mythes et vérités
« On a de très bons designers, donc notre site est
ergonomique »
faux
Le design influence...
Merci de votre attention
Teresa COLOMBI
LudoTIC
contact@ludo-tic.com
Marlène KORSIA
CCIMP
Service Innovation & TIC
marlene...
La prochaine action
« Identifiez les risques juridiques liés
au développement
et à l’administration d’un site Internet »
2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC
2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC
2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC
2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC
2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC
2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC
2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC
2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC
Prochain SlideShare
Chargement dans…5
×

2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC

1 008 vues

Publié le

Adaptez l'ergonomie de votre site Internet en fonction de vos objectifs. Prenez en compte les nouvelles attentes de vos clients en terme d'ergonomie : soigner sa page d'accueil, rester fidèle à l'image de son entreprise tout en captivant le visiteur.

Publié dans : Business
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 008
Sur SlideShare
0
Issues des intégrations
0
Intégrations
18
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Utilisabilité :
    - Régle des 3 clics
    Rapidité : temps d’affichage, optimisation d’images
  • Supprimer tout ce qui est inutile : plus une page web contient d'objets, plus elle sera difficile à intégrer mentalement.Limiter le poids des pages : le haut débit n'a pas résolu le problème d'attente lors du chargement de certaines pages web. Optimisez chacun des objets de votre page, en particulier les images et les animations.Dérogation : Si vos internautes viennent chercher un contenu de haute qualité, le rôle de votre site est de leur offrir cette qualité (ex : vidéo ou photo haute définition), et la recommandation ci-dessus devra bien entendu être adaptée.Créer une hiérarchie de lecture claire : on doit distinguer le message le plus important que vous souhaitez faire passer sur la page. Ce message doit visuellement se détacher du reste de la page.Prévoir quelques gabarits de page et s'y tenir afin de créer un "air de famille" commun à vos différentes pages. Cette cohérence facilite le travail d'appropriation mentale du site.Penser à l'espace écran réellement disponible ! S'adapter aux résolutions d'écran employées par les visiteurs du site, qui ne sont en général pas aussi élevées que celle utilisée par le concepteur. Faites l'effort de vérifier régulièrement la présentation de vos pages dans la résolution cible.Éviter au maximum le scroll horizontal de l'ensemble de la page, souvent peu visible et difficile à utiliser. Celui-ci peut être réservé à des blocs plus restreints dans la page. Il faut alors suggérer la présence du contenu caché, et faciliter l'usage des boutons de défilement.Le scroll vertical est largement autorisé, mais ne doit pas gêner la visibilité des éléments critiques de la page placez donc ces derniers au-dessus du seuil de scroll.Éviter tout "scroll stopper". Autrement dit, veillez à ne pas donner l'impression que la page est terminée alors qu'elle ne l'est pas. Cela peut arriver en présence d'un grand vide, d'autant plus s'il court sur toute la largeur de la page.Utiliser un design semi-élastique plutôt qu'entièrement élastique.Étirer seulement les colonnes de contenu, en leur fixant une largeur maximale acceptable. L'élasticité peut augmenter le confort (on profite de l'espace écran disponible), mais aussi le diminuer si elle n'est pas limitée.Utiliser le blanc pour aérer la page et permettre aux visiteurs de l'appréhender plus facilement. Mais attention à ne pas l'employer à outrance : limiter le nombre de blancs facilite l'activité de balayage visuelle et mental d'une page webBien distinguer les différents espaces de la page (barres de navigation, colonnes de contenu, infos complémentaires, etc.) en faisant varier les formats de présentation et en démarquant clairement les zones.
  • Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.
  • Bien, nous avons analysé le marché actuel des NTIC et défini l’ergonomie comme le croisement de plusieurs disciplines qui s’intéressent à l’homme. Mais pourquoi aujourd’hui il est si important de parler d’ergonomie? Si on regarde la situation passée, dans un « hier » qui se situe dans les années 50 par exemple, nous pouvons constater que les calculateurs existaient bien. En effet, ENIAC, le premier calculateur électronique est né en 1945 et ses successeurs étaient aussi complexes et difficiles à utiliser. Pourquoi alors il n’y avait pas d’ergonomes? Parce que les personnes qui construisaient ces machines en étaient également les utilisateurs finaux. Ceci signifie que même si ces machines étaient très complexes et très peu intuitives les personnes qui s’en servaient étaient parfaitement en mesure de le faire, dans la mesure où ces machines correspondaient à leurs besoins et à leurs compétences. Ce que ces ingénieurs mettaient dans la machine ils savaient le retrouver lorsqu’ils s’en servaient.
    La situation d’aujourd’hui est bien différente. Les machines sont tout aussi complexes, et nous avons toujours des spécialistes qui les créent. Cependant, de l’autre coté du schéma nous ne retrouvons plus un spécialiste de ces mêmes machines, mais plutôt un utilisateur lambda, souvent dépourvu des connaissances nécessaires.
  • Le ROI pour un site de commerce électronique ne se quantifie pas de la même façon. Puisque cette fois-ci il s’agit d’un support commercial, le premier point d’amélioration possible est celle des ventes en ligne qui peut atteindre 80%. Il faut savoir que 50% de transactions potentielles sur un site web sont perdues à cause d’une mauvaise organisation visuelle et une mauvaise structuration du cheminement de l’utilisateur. Je vais vous montrer un exemple de cela dans un instant.
    Un site ergonomique est également un site probablement meilleur que la concurrence, et ceci se traduit pas une augmentation des parts de marché
    L’augmentation du trafic est un autre indice, directement mesurable par le nombre de visiteurs sur le site
    Un site ergonomique est également un site qui bénéficiera d’une meilleure image de marque
    Enfin on pourra apprécier également une amélioration de la satisfaction et de la fidélisation des client mesurable par la diminution du nombre de réclamation auprès des services commerciaux, la réduction du nombre d'appels à la hotline, la durée de traitement des cas, le nombre de visiteurs qui s’abonnent à vos services et à votre newsletter, etc.
  • 2011 06 16 adaptez l'ergonomie de votre site internet by COMPETITIC

    1. 1. Jeudi 16 Juin 2011 Prenez en compte les nouvelles attentes de vos clients en terme d’ergonomie
    2. 2. Teresa COLOMBI LudoTIC contact@ludo-tic.com Marlène KORSIA CCIMP Service Innovation & TIC marlene.korsia@ccimp.com
    3. 3. Définitions L’ergonomie a pour vocation d’adapter les objets, le matériel pour que leur utilisation soit facile dans la vie de tous les jours Un site internet ergonomique conduit le plus simplement et le plus rapidement l’internaute vers l’information qu’il cherche
    4. 4. Définitions L’ergonomie est une discipline qui varie : - Selon le contexte - En fonction du site étudié - Selon les objectifs stratégiques à atteindre - Selon les internautes ciblés Chaque projet est unique
    5. 5. Quelques règles de base Source : minini.biz Amélie Boucher
    6. 6. Quelques règles de base Accompagner l’internaute (guidage) • Dans les différentes étapes • Dans sa navigation (fil d’ariane, changement de couleurs du texte, etc…) • Mise en avant de messages impliquant une action
    7. 7. Objectifs • Retenir l’internaute, vendre, fidéliser Critères à analyser • Attentes de l’utilisateur, habitudes, âge, équipements, niveau de connaissance Quelques règles de base
    8. 8. Quelques règles de base Organiser sa page web : • Supprimer tout ce qui est inutile • Limiter le poids des pages (sauf si justifié par une attente de l’internaute) • Avoir une hiérarchie de lecture claire • Créer une harmonie entre les pages • Proposer des pages aérées • Adapter les scrolls de page
    9. 9. Quelques règles de base Soigner le texte : • Privilégier le XHTML aux images pour le texte • Eviter l’usage d’images sous le texte • Utiliser une police de caractère suffisamment élevée (jamais en dessous de Arial 10 ou de Verdana 9) • Limiter le nombre de couleurs différentes • Faire des phrases courtes en faisant ressortir les mots clés
    10. 10. L’evolution des outils Adapter son site aux nouveaux terminaux • Optimiser son site pour une utilisation sur smartphones et tablettes • Améliorer les temps de téléchargement • Faciliter la navigation
    11. 11. Un site Internet aux normes W3C (World Wide Web Consortium) Pour une interopérabilité • Une norme créée pour une compatibilité des technologies • Comprend une charte de fonctionnement pour superviser le développement d’un ensemble de standard. www.w3.org
    12. 12. Nouvelles Technologies de plus en plus puissantes et “envahissantes”, alors que les utilisateurs sont de moins en moins compétents Logiciels avec de plus en plus de fonctions, mais moins de 40% sont réellement utilisées L’introduction de nouveaux dispositifs informatiques en entreprise correspond souvent à une baisse de la productivité Le paradoxe actuel
    13. 13. Pourquoi a-t-on besoin d’ergonomes ? Interface Développeur / Utilisateur Développeur / Utilisateur Hier Interface UtilisateurDéveloppeur Aujourd’hui ?
    14. 14. Définition d’ergonomie •Les ergonomes contribuent à la conception et à l’évaluation de toute sorte d’artefact, ayant pour but de les rendre compatibles avec les besoins, les compétences et les limites des êtres humains Les mots clés de l’ergonomie sont:  Efficacité  Efficience  Satisfaction
    15. 15. Le Retour sur Investissement •Penser à améliorer l’ergonomie d’un produit seulement après avoir constaté l’existence de problèmes ne permet pas de rattraper toutes les erreurs! •On n’a pas 2 fois l’occasion de faire une première bonne impression… If you can't afford the time to do it right, how are you going to find the time to fix it up?
    16. 16. ROI pour un Intranet ➚ Amélioration de la productivité et de son suivi ➚ Meilleure allocation des Ressources Humaines ➚ Satisfaction des équipes ➘ Réduction des coûts liés aux erreurs humaines ➘ Réduction des coûts d’entraînement et formation
    17. 17. ROI pour un site e-commerce ➚ Amélioration des ventes en ligne jusqu’à 80% ➚ Augmentation des parts de marché ➚ Augmentation du trafic ➚ Amélioration de l’image de marque ➚ Satisfaction des utilisateurs ➚ Fidélisation des clients
    18. 18. ROI et moments d’intervention •Le ROI varie en fonction du moment d’intervention:  ROI de l’ergonomie de conception 1:100 $  ROI de l’ergonomie de correction 1:10 $ •L’investissement à prévoir n’est évidement pas du même montant, mais son impact varie de façon considérable •Idéalement, 10% du budget du projet devrait être consacré à l’optimisation de l’interface
    19. 19. Quelques chiffres du ROI conception réalisation déploiement possibilités IHM coût changements Intervention sur logiciel de Traduction : Coût de l’étude ergo = 3.500€ Coût des modifications = 2.500€ Opérateurs = 30 requêtes/j, 5min chacune Gain temporel = 1min par requête 1min x 5 opérateurs x 30 requêtes x 220 jours ouvrés = 550 heures Economie : 550h x 22€/h = 12.100€ Gain : 6.100€ sur année N, 12.100€ sur N+1 et suivantes
    20. 20. Les principes d’ergonomie Web: la grille LudoTIC 1. Feedback du système 2. Match avec les profils utilisateurs 3. Sensation de contrôle 4. Cohérence et standard 8. Flexibilité 9. Surcharge cognitive 10. User Experience 5. Gestion des erreurs 12. Aide et documentation 11. Dialogue Homme-Machine 6. Optimisation des performances 7. Organisation visuelle 13. Collaboration
    21. 21. Le Feedback du système •L’utilisateur doit être informé de l’état du système à tout moment, l’interface doit lui fournir un feedback suffisant pour réaliser sa tâche dans les meilleures conditions, il doit être tenu informé des opérations sous-jacentes à ses actions même si celles-ci ne modifient pas immédiatement l’interface. Comment sélectionner les produits? Combien de temps il faudra pour télécharger un fichier?
    22. 22. Match avec les profils utilisateurs •Le site tient compte des spécificités des utilisateurs auxquels il s’adresse. Les spécificités en question peuvent concerner aussi bien des caractéristiques liées au métier des utilisateurs, qu’à leurs particularités linguistiques ou culturelles. •Le langage des messages d'erreurs est à la portée de l'utilisateur et évite le « jargon informatique » ? •L'organisation de l'arborescence/des menus/des onglets reflète un ordre clair et logique pour le public ?
    23. 23. Arborescence et tri de cartes
    24. 24. Sensation de contrôle •L’utilisateur ne doit pas douter du résultat de ses actions. Il doit toujours avoir l’impression de «maîtriser la situation» : savoir dans quelle partie du site il se trouve, quelles fonctions il a à disposition et où aller chercher les contenus qui l’intéressent. Est-ce qu’on fournit suffisamment de repères visuels à l’internaute ? Petite vidéo explicative…
    25. 25. Cohérence et respect des standards •Le site doit être cohérent, autrement dit les noms des boutons, la charte graphique et tout autre élément présent à plusieurs endroits doit garder le même aspect, la même position et le même nom pour ne pas dérouter l’utilisateur. Il doit également respecter les standards Web connus et partagés par les utilisateurs afin de ne pas les dérouter •Le titre de chaque page est cohérent avec les liens qui y amènent ? •Le logo (en haut à gauche) est-il un lien vers l’Accueil ?
    26. 26. Gestion des erreurs •Le site évite de pousser l’utilisateur à commettre des erreurs en évitant par exemple de laisser visibles des choix qui ne peuvent pas être sélectionnés ou en oubliant de signaler clairement le fonctionnement d’une procédure (inscription, check-out…). L’IHM doit également aider les usagers à comprendre et corriger facilement les éventuelles erreurs commises (ex. dans les formulaires). Lorsque possible, les champs de saisie/menus déroulants sont pré-positionnés sur le choix le plus probable ? Les éléments des menus et des onglets sont entièrement cliquables (non seulement le texte mais aussi le fond) ?
    27. 27. Optimisation des performances •Le site minimise le nombre de clics et les actions superflues. Les contenus clés sont faciles à rejoindre, faciles à lire et à comprendre. L’utilisateur dispose de plusieurs moyens pour atteindre au plus vite ses objectifs et avec le minimum d’efforts possibles. •Les chargements des pages sont rapides même en connexion à bas débit ? •Toute information qui peut être calculée par le système est placée automatiquement dans les champs des formulaires (ex. ville de l'utilisateur, calculée à partir du code postal) ?
    28. 28. Organisation visuelle La mise en page de l’IHM est claire et bien organisée. Les différentes parties de chaque page-écran sont faciles à reconnaître et distinguer. Le texte est lisible •Les nombres supérieurs à 999 sont séparés par un point (ex. 1.234) pour les sites francophones et par une virgule pour les sites anglophones (ou pas un espace vide, pour toutes les langues) ? •La page d'accueil ressemble à une page d'accueil (peu de contenu, beaucoup de liens) ? La structure visuelle de la page d’accueil aide l’internaute à trouver facilement les contenus les plus importants?
    29. 29. Flexibilité •Le site s’adapte aux différents besoins des utilisateurs, novices et experts. Il est également capable de prendre en compte les préférences de chacun. Il est enfin facilement accessible par clavier et par navigateur vocal, systèmes utilisés par les déficients visuels et qui nécessitent le respect de lignes-guide spécifiques (WAI…) La réalisation de tâches « simples » comme ajouter un ami sur FaceBook ou acheter un CD sur Fnac.com peuvent demander de 4 à 10 fois plus de temps à un non-voyant qu’à une personne sans handicap visuels. Des règles existent, il faut les appliquer…
    30. 30. Surcharge cognitive •Trop d’information tue l’information, et trop de choix tue le choix. L’usager ne doit pas être submergé par des contenus qui ne sont pas pertinents ou qui sont trop nombreux pour qu’il puisse tous les traiter de façon convenable. On évite le scrolling, au moins sur la HP et dans les menus déroulants ? Chaque zone de chaque page a un sens clairement identifié ? On limite au maximum le nombre de choix ?
    31. 31. User Experience L’utilisation de l’IHM doit être plaisante et donner à l’utilisateur envie de continuer. Le design doit être agréable et soigné. L’interaction doit être fluide et permettre à l’utilisateur une « user experience » positive et agréable, bénéfique en termes d’utilisabilité mais également pour favoriser la fidélisation à la marque Le tunnel de conversion est-il le plus court possible ? On privilégie le signup avec son adresse mail ? On évite de « piéger » l’utilisateur avec inscriptions obligatoires et abonnements à newsletters ?
    32. 32. Dialogue Homme-Machine Chaque contenu informatif est une forme de communication. Le site doit ainsi respecter les règles de la communication homme-homme afin de ne pas surprendre ou perturber l’utilisateur, en ce qui concerne les liens mais aussi les boîtes de dialogue, etc. Les actions qui ont des conséquences importantes et/ou non réversibles (ex. destruction du profil de l'utilisateur) nécessitent une confirmation de l'utilisateur ? Les messages d'erreur fournissent des explications quant à l'origine du problème et à sa solution ?
    33. 33. Aide et documentation Même si l’IHM est claire et bien organisée, des formes d’aide doivent être tout de même fournies. Elles peuvent prendre plusieurs formes selon les besoins (glossaire, plan du site, tooltips) mais elles doivent dans tous les cas rester faciles à trouver et exploiter. La rubrique "Aide" est positionnée de façon visible et conventionnelle ? Si le site dépasse les 3 niveaux de profondeur, un plan est disponible ?
    34. 34. Collaboration De plus en plus de sites proposent différentes formes de partage d’information et de collaboration entre utilisateurs. Ceci est très positif et pertinent, à condition que les outils fournis soient faciles à comprendre et utiliser et qu’ils correspondent aux besoins des utilisateurs. L'utilisateur a la possibilité de s'exprimer (commentaires, avis, notes…) ? Des moyens de communication synchrones et/ou asynchrones sont fournis ?
    35. 35. L’ergonomie de la Page d’accueil  La HP est à soigner particulièrement, c’est votre carte de visite  Elle doit refléter votre image de marque  Elle doit être accessible de toutes le pages du site, sauf d’elle-même  Elle doit se montrer « vivante » (news, actualités…)  Elle doit être « connectée » à d’autres supports (blog, Twitter, FB, youtube…)  Elle doit véhiculer clairement et rapidement le contenu du site  Elle doit fournir un accès rapide aux contenus clé
    36. 36. Perception et navigation sur 3 sites  Etude comparative sur sites d’électroménager: Electrolux, Miele, LG  18 participants en France, 18 en Italie  Objectifs : tester la perception de la page d’accueil, l’efficacité et l’efficience dans la réalisation des tâches et la mémorisation des contenus  Tâches « classiques » de recherche d’informations, produits d’entretien, numéro de téléphone du SAV  Données enregistrées : mouvements oculaires, clics, commentaires, dessins
    37. 37. Entretien des sols Cuisson Lavage Lave-vaisselle Froid Petit ménager Professionnel Le Menu de Cannes Suivez l'évènement, votez et vous pourriez nous rejoindre sur le tapis rouge au Festival de Cannes. Impliquez-vous Magnifiquement Bijou « L’espace limité est un défi pour beaucoup d'entre nous... » Compact sans se sentir à l'étroit, le design à prédominance blanche fait le meilleur usage de la lumière disponible. Les appareils noirs apportent une touche de contraste et l'éclat de la couleur du tapis assure l'harmonie de toute la pièce. En savoir plus "The 2nd Space Age":Cette année, les étudiants devront imaginer des solutions permettant de préparer et de conserver les aliments, de laver le linge et nettoyer la vaisselle dans les habitations de 2050! En savoir plus La gamme Green La gamme Green est une offre complète d'appareils respectueux de l'environnement. Découvrez la gamme Produits professionnels Vous aider à choisir Découvrez les produits Mon Electrolux Tirez le meilleur parti de vos Points de vente Entrez votre code postal et ACCUEIL PRODUITS INSPIRATION INNOVATION BOUTIQUE AIDE Trouver un magasin Accéder à Mon Electrolux S'identifier Recherche! Electrolux.fr
    38. 38. Exploration libre page d’accueil (10 sec) • La zone la plus regardée est l’inscription publicitaire « Le Menu de Cannes » sur la gauche de la page. • Les autres fixations sont reparties entre: - le menu graphique des produits - le logo. • Dans le menu textuel, l’élément le plus fixé est « Produits ». • Seulement 2 utilisateurs ont utilisé le scrolling de la page, donc la partie inférieure n’est pratiquement pas regardée. Parcours visuel:
    39. 39. • 11 utilisateurs sur 17 ont fixé d’abord l’inscription « Le Menu de Cannes », 3 utilisateurs ont fixé comme premier élément la zone de menu graphique, 1 utilisateur a fixé d’abord la zone « Inspiration » sur le menu textuel et 2 ont fixé la barre de l’adresse • Personne n’a regardé le logo en 1er (petit, au mauvais endroit) • Le moteur de recherche est également fixé très peu et très tard Exploration libre page d’accueil (10 sec.) Première zone vue:
    40. 40. Miele.fr Recherche sur www.miele.fr: Offres et Nouveautés Les services ...Trouvez le vôtre ! Miele Projets Immobiliers Aspirateurs Lave-vaisselle Machines à café Cuisson Froid Soin du linge Professionnel L'entreprise Miele Développement durable Miele France Electroménager Professionnel Les Services Trucs et astuces Cuisiner avec Miele Presse Galerie Miele Recherche revendeur La Boutique Accessoires uniquement les produits Envoyer Page d'accueil Contact Références Infos légales International
    41. 41. • Les zones les plus regardées : - le visage de la femme au centre (figure humaine) - le menu sur la gauche - les images en bas • Le parcours est dispersé car la page est plutôt compacte et plusieurs zones à la fois attirent l’attention • La plupart de sujets a rapporté que la page contient trop d’informations textuelles et que les caractères du menu sont trop petits Parcours visuel : Exploration libre page d’accueil (10 sec.) « Il y a trop de texte. Moi je préfère  quand il y a plus d’images. Ici il y a  beaucoup d’élements » • La majorité des participants ont rapporté que la page ne véhicule pas l’idée d’électroménager
    42. 42. La première zone vue : • 9 utilisateurs sur 18 ont fixé d’abord l’image de la femme au centre, 6 utilisateurs ont fixé comme premier élément le bandeau gris avec la marque en haut de la page, 2 utilisateurs ont fixé d’abord le « menu produits » en haut et 1 utilisateur la zone graphique « Les Services » (en bas de la photo)  La partie à gauche de la page contient des éléments importants (logo, menu principal et moteur de recherche), mais elle n’a pas été fixée d’abord. Cela peut résulter du fait que: - les caractères du menu sont très petits et peu visibles - les images et les caractères plus grands et colorés au centre de la page attirent plus d’attention Exploration libre page d’accueil (10 sec)
    43. 43. Lg.fr
    44. 44. La page d’accueil du site LG.fr contient beaucoup d’images dynamiques en flash qui apparaissent séquentiellement. Cela semble fait exprès pour attirer l’attention des utilisateurs sur les messages publicitaires. . Exploration libre page d’accueil (10 sec) 1 2 2 3 2 4 Les nombres identifient la séquence d’apparition des contenus.
    45. 45. • Les zones les plus regardées : - menu sur la gauche - titre du texte à coté de l’image publicitaire du téléphone - image du téléphone • Plusieurs zones à la fois attirent l’attention Parcours visuel : Exploration libre page d’accueil (10 sec)
    46. 46. La première zone vue : • 8 utilisateurs sur 18 ont fixé d’abord le logo LG en haut sur la gauche, 6 utilisateurs ont fixé comme premier élément la zone d’images au centre de la page (en particulier les images d’une lave-linge et d’une télé) et 4 ont fixé d’abord la barre de progression du chargement de la page.  Nous constatons une majorité de parcours en diagonal, entre 2 éléments graphiques qui attirent l’attention (logo et zone d’images). Le fait de fixer en premier le logo de LG permets aux internautes de reconnaître cette marque, bien connue par la plupart d’entre eux.  Cette page est la plus appréciée, parce que claire, moderne et simple Exploration libre page d’accueil (10 sec)
    47. 47. Pour terminer… mythes et vérités « le seul principe qui compte est celui des 3 clics » faux Comme tous les principes, il est à utiliser avec précaution, car il se peut qu’il ne soit pas pertinent pour tous les sites « de toute façon l’ergonomie se réduit à du bon sens » Vrai et faux Les règles que nous avons décrites sont souvent basées sur du bon sens, mais tout le monde n’en a pas… Des approches plus spécifiques nécessitent des compétences ad hoc
    48. 48. Pour terminer… mythes et vérités « faire un site ergonomique c’est cher » Vrai et faux Des techniques comme le tri de cartes ou les dessins sont à moindre coût, il suffit d’intégrer la démarche « centrée utilisateur ». Certes, l’ergonomie représente un budget, mais il faut voir le ROI, pas la dépense « L’accessibilité ? De toute façon les handicapés visuels ne viennent pas sur notre site » faux Le public des handicapés visuels est très vaste, et il passe énormément de temps sur le Web… c’est un marché à prendre
    49. 49. Pour terminer… mythes et vérités « On a de très bons designers, donc notre site est ergonomique » faux Le design influence l’appréciation du site, mais il n’a pas forcément d’impact sur l’efficacité et l’efficience dans la recherche d’informations… Ergonomie et design sont 2 choses différentes! « Bon, notre site n’est peut être pas au top de l’ergonomie, mais personne ne se plaint » faux Dans l’ère du Web 2.0 les internautes s’expriment et rien n’est à craindre plus que le mauvais Buzz…
    50. 50. Merci de votre attention Teresa COLOMBI LudoTIC contact@ludo-tic.com Marlène KORSIA CCIMP Service Innovation & TIC marlene.korsia@ccimp.com
    51. 51. La prochaine action « Identifiez les risques juridiques liés au développement et à l’administration d’un site Internet »

    ×