• Save
Competitic   ergonomie site web - numerique en entreprise
Upcoming SlideShare
Loading in...5
×
 

Competitic ergonomie site web - numerique en entreprise

on

  • 1,230 views

 

Statistics

Views

Total Views
1,230
Views on SlideShare
1,224
Embed Views
6

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 6

http://www.scoop.it 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Competitic   ergonomie site web - numerique en entreprise Competitic ergonomie site web - numerique en entreprise Presentation Transcript

  • Rendez votre site attractifIntégrez les nouvelles règles d’ergonomie Jeudi 21 juin 2012
  • L’ergonomieDéfinition« Un site ergonomique est un site où l’utilisateur comprend trèsrapidement ce qu’il doit faire pour utiliser le site internet. L’internaute nedoit pas avoir besoin de chercher pendant plusieurs longues minutes etlire les textes d’aide pour arriver à ce qu’il cherche. » Source : www.ergonome.com
  • L’ergonomie 75% des internautes rencontrent encore «souvent» des difficultéspour trouver ce qu’ils cherchent sur les sites qu’ils consultent, et 58%sont «souvent» confrontés à des problèmes de navigation 66% trouvent les contenus des sites «souvent mal présentés» et 47%«l’allure de la page d’accueil souvent peu engageante». 7 internautes sur 10 ne reviennent pas sur un site où ils ontrencontré des problèmes de navigation ou d’orientation. Des chiffresnon négligeables et prouvant une fois de plus que le temps passé surl’analyse et la conception web n’est pas négligeable. Source : www.ergonome.com
  • Michèle Delacroix,Ergonome cognitiviste
  • Plan Ergonomie d’un site web en 2012 Ergonomie des IHM Utilisabilité Utilité Micro utilité Design émotionnel Persuasion Evolutions Des interaction IHM Des supports utilisés Des technologies Des utilisateurs Des sites
  • Plan Les principes d’ergonomie du Web Les règles d’ergonomie L’ergonomie de la page d’accueil Accessibilité Adaptation de la communication Communication et présence sur le web Responsive design Communication sur les réseaux sociaux pourquoi ? Conclusion Retour sur Investissement (ROI) Ergonomie du Web: mythes et vérités Pour finir… Pour en savoir plus…
  • Partie 1 -Ergonomie d’un site web en 2012
  • L’ergonomie d’un site web en 2012 Dépasse le domaine de l’accessibilité et de l’utilisabilité. Nécessité de rendre les sites attractifs.
  • L’ergonomie des IHMIHM : Interface Homme-MachineObjectif : rendre les interfaces • plus efficaces : réussir à faire ce que l’on souhaite faire • plus efficientes : rapidement et avec le moins d’erreur possible (à l’exception des jeux vidéos) • plus satisfaisantes : esthétisme, plaisirBase de l’Ergonomie pour un site web : Répondre aux critères d’utilité & d’utilisabilité
  • Utilisabilité« Un produit est dit utilisable lorsquil peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés, cherchant à atteindre des objectifs donnés, dans un contexte donné. » Norme ISO 9241
  • Utilité Va répondre à un besoinA quoi sert le site ? Quel est le service proposé ?Ex : Rechercher un artisan, acheter un livre, m’informer sur des modèlesde voiture…Micro-utilités : fonctionnalités qui aident et guident l’utilisateur http://livre.fnac.com/a3630498/Ethan-Marcotte-Responsive- web-design-smartphone-tablette-ou-Mac-PC
  • Utilité du site Barilla ?En tant que dirigeant, quel est l’objectif du site ? Améliorer l’image de marqueEn tant qu’internaute, pourquoi aurais-je besoin d’aller consulter lesite Barilla ? Acheter des pâtes ? Non Alors pourquoi ?
  • Utilité du site Barillahttp://fr.barilla.com/
  • Micro utilités
  • Design émotionnel Structurer l’écran pour donner une impression d’harmonie. Utilisation, du chiffre d’or : 1,618 (donne rectangle ou spirale d’or) quiserait le nombre du beau… Ex : 10 / 1,618 = 6,180http://www.culture-speecom.com/general/e-commerce/le-nombre-dor-secret-du-design-dapple-et-twitter/Animation sur la construction de la spirale d’or :http://therese.eveilleau.pagesperso-orange.fr/pages/truc_mat/textes/spirale_dor.html http://en.wikipedia.org/wiki/Rule_of_thirds
  • Design émotionnel Utilisation de grilleshttp://960.gs/
  • Design émotionnel Transmettre de l’humanité afin de créer de la proximité et del’empathie. Rendre agréable, original par des détail graphiques, fonctionnels : Ton particulier dans les textes, mascotte, Fonctionnalités amusantes, contrastes (univers) Mettre en avant les hommes http://kontestapp.com/fr/Peut se faire au fil de l’eau, par ajout de petites touches…
  • Exemples de design
  • PersuasionDimension sociale de l’expérience utilisateur. Eric Brangier, 2010Objectif : Modifier le comportement et l’attitude des utilisateurs Les amener à accomplir des actes qu’ils n’auraient pas spontanémentréalisés. Nouvelle dimension à prendre en compte durant la phase deconception et d’évaluation
  • PersuasionCrédibilité : avoir l’air fiable (ex : paiements sécurisé, références…)Privacité : sécuriser l’internaute (droits respectés, informationsgardées confidentielles)Personnalisation : internaute se sent ciblé, faire ressortir lesentiment d’appartenance à un groupe (ex : livres achetés pard’autres internautes, restaurants recommandés sur un secteur…)Attractivité : attirer émotionnellement (design), navigation baliséeet orientée.
  • Persuasion Sollicitation : inciter l’internaute à revenir régulièrement (ex : bons plans). Accompagnement initial : inciter (ex : inscription), guider. Engagement : maintien des interactions, tâches plus complexes (ex : renseigner son profil). Emprise : interactions irrépressibles et répétitives associées à une satisfaction profonde (ex : Facebook)Sources : http://www.slideshare.net/fullscreen/spromtep/infopresse-29fev2012-internet/3#btnNext http://www.adviso.ca/blog/2011/05/04/8-criteres-ergonomiques-pour-evaluer-la-persuasion-d%E2%80%99un- site/#more-6510
  • Persuasion Privacité Accompagnement initial : guider dans les premiers pas, encourager à continuer. Personnalisation : faire ressortir leCrédibilité : sentimentavoir l’air d’appartenance àfiable, un groupe.expertiselégitime. Sollicitation : moyens mis en place pour que l’internaute revienne régulièrement sur le site (curiosité).
  • Utilité et crédibilitéSi le site est perçu comme utile et crédible , alors l’internaute va : Rester plus longtemps sur le site, Avoir une satisfaction plus grande Ressentir du plaisir Source : Guilaine Robin, FLUPA UX Day, Mai 2012 http://www.slideshare.net/flupa/flupa-uxday-2012-lightning-talk-guilaine-robin
  • Utilité & utilisabilité, design émotionnel,persuasion
  • Partie 2 -Evolutions
  • Evolution : Type d’IHM / Manipulation Paradigme WIMP Manipulation (Windows, Icons, Menu, directe Pointing device)
  • Evolution : Supports utiliséshttp://www.iphone-entreprise.com/2012/05/lergonomie-des-applications- http://digitallife.neolabels.com/mobiles/?utm_source=twitterfeed&utm_medium=twitter
  • Evolution : Aspect TechnologiqueSource : http://blog.analystik.ca/2009/05/20-une- Source : http://digitallife.neolabels.com/ image-vaut-mille-mots/
  • Evolution : Utilisateurs
  • Evolution : Utilisateurs http://www.slideshare.net/fullscreen/spromtep/infopresse-29fev2012-internet/3 http://www.leprinceduweb.com/generation-x-y-et-c-3-visions-du-monde-differentes-1-meme-combat/ http://www.lalsace.fr/actualite/2012/04/08/comment-differencier-les-generations-x-y-ou-z
  • Evolution des sitesFévrier 2003 Juillet 2010 Juillet 2011 Juillet 2005
  • Evolution des sites 2007 2011 2008 2012
  • Partie 3 -Règles d’ergonomie
  • Les règles d’ergonomie du Web1. Feedback du système 8. Flexibilité2. Match avec les profils utilisateurs 9. Surcharge cognitive3. Sensation de contrôle 10. User Experience4. Cohérence et standard 11. Dialogue Homme-Machine5. Gestion des erreurs 12. Aide et documentation6. Optimisation des performances 13. Collaboration7. Organisation visuelle Retour Plan
  • Le Feedback du système• Informer l’internaute de l’état du système à tout moment Fournir un feedback suffisant pour qu’il puisse réaliser sa tâche dansles meilleures conditions, Le tenir informé des opérations sous-jacentes à ses actions même sicelles-ci ne modifient pas immédiatement l’interface.Comment peut-on sélectionner les produits ?Combien de temps faudra-t-il pour télécharger un fichier ?
  • Le Feedback du système
  • Match avec les profils utilisateurs Tenir compte des spécificités des utilisateurs auxquels on s’adresse. Particularités linguistiques ou culturelles, GénérationLe langage des messages d’erreurs est-il à la portée de l’utilisateur et évite-t-ille « jargon informatique » ?L’organisation de l’arborescence/des menus/des onglets reflète-t-elle un ordreclair et logique pour le public ?
  • Arborescence et tri de cartes
  • Sensation de contrôle• L’internaute ne doit pas douter du résultat de ses actions. Avoir l’impression de «maîtriser la situation». Savoir dans quelle partie du site on se trouve. Quelles fonctions sont à disposition et où aller chercher les contenusqui m’intéressent.Est-ce qu’on fournit suffisamment de repères visuels à l’internaute ?Petite vidéo explicative…
  • Cohérence et respect des standards Définir une charte graphique Noms des boutons, et tout autre élément présent à plusieursendroits doivent garder le même aspect, la même position et lemême nom pour ne pas dérouter l’utilisateur (ex : panier vs caddie). Respecter les standards Web connus et partagés par lesutilisateurs afin de ne pas les dérouter (ex : texte souligné =hyperlien)•Le titre de chaque page est-il cohérent avec les liens qui y amènent ?•Le logo (en haut à gauche) est-il un lien vers l’Accueil ?
  • Comment perturber son internaute ?http://www.matmut.fr/ http://www.matmut.fr/assurance/assurance-auto.asp Design des boutons différent… i bouton jaune n’est pas toujours un bouton !i Le
  • Gestion des erreurs Eviter les erreurs Ne pas laisser visibles des choix qui ne peuvent pas êtresélectionnés. Signaler clairement le fonctionnement d’une procédure (inscription,check-out…). Aider à comprendre et corriger facilement les éventuelles erreurscommises (ex. dans les formulaires).Lorsque possible, les champs de saisie/menus déroulants sont-ils pré-positionnés surle choix le plus probable ?Les éléments des menus et des onglets sont-ils entièrement cliquables (nonseulement le texte mais aussi le fond) ?
  • Ne pas induire en erreur…
  • Trop facile …
  • Ah non !
  • Mais, quoi alors ?!
  • Optimisation des performances Minimiser le nombre de clics et les actions superflues. Contenus clés faciles à rejoindre, faciles à lire et à comprendre. Plusieurs moyens disponibles pour atteindre au plus vite ses objectifs et avec le minimum d’efforts possibles.Toute information qui peut être calculée par le système est-elle placéeautomatiquement dans les champs des formulaires (ex. ville de lutilisateur, calculée àpartir du code postal) ?•Lorsque possible, des cases à cocher sont-elles préférées aux champs de saisie ?•Le site propose-t-il l’autocomplétion dans les champs de saisie ?•Si possible ou pertinent un historique des dernières pages visitées est-il présent ?
  • Pour aider son internaute
  • Organisation visuelle Distinguer facilement les différentes parties de chaque page-écran. Mise en page claire et bien organisée. Texte lisibleLes nombres de plus de trois chiffres sont-ils séparés par un point (ex.1.234) pour les sites francophones ,et par une virgule pour les sitesanglophones (ou par un espace vide, pour toutes les langues) ?La page daccueil ressemble-t-elle à une page daccueil (peu decontenu, beaucoup de liens) ?La structure visuelle de la page d’accueil aide-t-elle l’internaute àtrouver facilement les contenus les plus importants ?
  • Pourquoi tant de vide !!
  • Flexibilité S’adapter aux différents besoins des utilisateurs, novices et experts. Prendre en compte les préférences de chacun. Etre facilement accessible par clavier et par navigateur vocal, utilisé parles déficients visuels, et qui nécessitent le respect de lignes-guidespécifiques (WAI, …)La couleur est-elle associée à un autre moyen pour véhiculerl’information ?Dans les boîtes de dialogue est-il possible de se déplacer entre lesboutons avec Tab ou les flèches du clavier, et valider par <Enter> ?Si du flash est employé pour une intro, le site permet-il de le sauter ?
  • Laisser la main à son internaute…
  • Surcharge cognitive Ne pas submerger l’internaute par des contenus non pertinents outrop nombreux pour qu’il puisse tous les traiter de façon convenable. Trop d’information tue l’information, et trop de choix tue le choix.Le scrolling est-il évité au moins sur la page d’accueil et dans lesmenus déroulants ?Chaque zone de chaque page a-t-elle un sens clairement identifié ?Le nombre de choix est-il limité ?
  • Ne pas noyer son internaute…
  • User Experience Donner à l’utilisateur envie de continuer Design agréable et soigné = utilisation de l’IHM plaisante Interaction fluide = utilisabilitéLe tunnel de conversion (processus sous forme d’étape) est-il le pluscourt possible ?On privilégie l’inscription avec son adresse mail.On évite de « piéger » l’utilisateur avec une inscription obligatoire etabonnement à newsletters.
  • Faciliter la navigation de l’internaute
  • Dialogue Homme-Machine Respecter les règles de la communication homme-homme (Maximede Grice, 1975) afin de ne pas surprendre ou perturber l’utilisateur : lesliens ,les boîtes de dialogue, etc. Chaque contenu informatif est une forme de communication.Les actions qui ont des conséquences importantes et/ou non réversibles(ex. destruction du profil de lutilisateur) nécessitent–elles uneconfirmation de lutilisateur ?Les messages derreur fournissent–ils des explications quant à loriginedu problème et à sa solution ?
  • Dialogue Homme-MachineMaxime de Grice de qualité : « Ne dites pas ce que vous croyez être faux ».
  • L’évolution du message d’erreur
  • Aide et documentation Proposer des formes d’aide. Peuvent prendre plusieurs formes selon les besoins : glossaire, plandu site, tooltips. Rester faciles à trouver et exploiter.La rubrique "Aide" est-elle positionnée de façon visible etconventionnelle ?Des bulles d’aide expliquent-elles tous les éléments / widgetsdifficiles à comprendre ?Le plan du site est-il joignable de n’importe quelle page du site ?
  • Un peu d’aide ne nuit pas !
  • Collaboration Partager de l’information et collaborer entre utilisateurs.Lutilisateur a-t-il la possibilité de sexprimer (commentaires, avis,notes…) ?Des moyens de communication synchrones et/ou asynchrones sont-ils fournis ?
  • Comment partager facilement uneinformation ?
  • Comment donner son avis ?
  • L’ergonomie de la Page d’accueilA soigner particulièrement, c’est votre carte de visite. Elle doit : Refléter votre image de marque. Etre accessible de toutes le pages du site, sauf d’elle-même. Se montrer « vivante » (news, actualités…). Etre « connectée » à d’autres supports (blog, Twitter, FB,Youtube…). Véhiculer clairement et rapidement le contenu du site. Fournir un accès rapide aux contenus clés. Petite vidéo explicative : La minute conseil d’ergonomie, épisode 2 http://www.youtube.com/watch?v=7Cnin0YSnzI
  • Accessibilité Code : Points de contrôles Pour en savoir plus : http://www.accesskeys.org/# Outils : http://www.etre.com/tools/accessibilitycheck/Mais pas suffisants : Intitulés (notamment des liens) ne sont pas contrôlés S’assurer que les documents sont claires et simples (renvoi à l’utilisabilité) Vidéo : http://unice.fr/access-key/videos/des-liens-hypertextes- comprehensibles (nombreuses ressources sur ce site « access-key ») Visuelle : Vérifier la lisibilité, utiliser des couleurs adaptées pour nepas fatiguer l’œil. Contraste et brillance des couleurs entre le fond et la typographie Outils : http://www.etre.com/tools/colourcheck/
  • Partie 4 -Communication et présence sur leweb
  • Renault – Juin 2012 Réseau socialSite web Version mobile
  • Le Tanneur – Juin 2012 Réseau social = Etre sur une place etSite web essayer d’attirer l’attention= Inviter quelqu’un chez soi. des passants, Version mobile
  • Responsive design• Site conçu pour sadapter aux différentes tailles décran• Obtenir une information actualisée à partir de n’importe quel support Source : http://mediaqueri.es/Boîte à outil du responsive design :http://designspartan.com/info_generale/la-boite-a-outil-ultime-pour-le-responsive-design/
  • Partie 5 -Conclusion
  • Retour sur Investissement - ROIOn n’a pas 2 fois l’occasion de faire une première bonneimpression… 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 If you cant afford the time to do it right, how are you going to find the time to fix it up?
  • Pour terminer… mythes et vérités « Le seul principe qui compte est celui des 3 clics » FauxComme tous les principes, il est à utiliser avec précaution, car il se peut qu’il ne soit pas pertinent pour tous les sites. « Faire un site ergonomique c’est cher » FauxDes 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.
  • Pour finir …Un site en 2012 : N’est plus seulement une réponse à un besoin d’utilisation.Il doit : Susciter le besoin, Surprendre, séduire.
  • Continuons à échanger … : twitter.com/competitic : communauté competitic : lenumeriquepourmonentreprise.com
  • Découvrez les usages des TIC, les actualités,l’agenda des évènements et les entreprises de lafilière TIC régionale sur le « portail des usages » Consultez le support de cette présentation : www.lenumeriquepourmonentreprise.com
  • La prochaine action Accédez à tout moment à votre environnement professionnel en situation de mobilité 28 juin 2012 Espace InnovaTIC Marseille