COMMUNICATION VISUELLE ERGONOMIE ACCESSIBILITÉ OBJECTIF DU COURS : Être sensibilisé dans ces 3 domaines pour améliorer son site.

Présentation au sujet: "COMMUNICATION VISUELLE ERGONOMIE ACCESSIBILITÉ OBJECTIF DU COURS : Être sensibilisé dans ces 3 domaines pour améliorer son site."— Transcription de la présentation:

1 COMMUNICATION VISUELLE ERGONOMIE ACCESSIBILITÉ OBJECTIF DU COURS : Être sensibilisé dans ces 3 domaines pour améliorer son site

2 DEFINITIONS COMMUNICATION VISUELLE Communiquer en utilisant des codes, signes visuels design innovant ERGONOMIE Adapter au mieux l’environnement à l’homme Rendre l’utilisation confortable, plus facile, intuitive ACCESSIBILITÉ Ensemble de règles à respecter pour permettre aux personnes atteintes de certains handicaps d’utiliser un matériel COMM. VIS. ERGO. ACCESS.

3 COMMUNICATION VISUELLE Ancien mode de communication Transmettre une information par le biais de : Codifications, signes et symboles, Images, dessins et schémas, Couleurs Symbolique des couleurs : http://www.code-couleur.com/signification/index.htmlhttp://www.code-couleur.com/signification/index.html COMM. VIS.

4 COMMUNICATION VISUELLE La communication visuelle peut être détaillée selon 3 grands types de supports : PAPIER – Impression (documents et entêtes, cartes de visites, flyers, brochures, plans, …) WEB - Site (pages et sites web, animations, couleurs …) 3D – Objets (totems, aménagements urbains, intérieurs et extérieurs…) COMM. VIS.

5 COMMUNICATION VISUELLE Pour le WEB : créer un environnement harmonieux (ensemble de formes, de couleurs, d’images, de polices et de graphismes) qui véhicule une identité propre  charte graphique Compromis entre respecter la charte graphique de la société rester ergonomique et efficace COMM. VIS.

6 COMMUNICATION VISUELLE Le but est d’utiliser autre chose que l’écriture pour communiquer / transmettre une information IMAGES – GRAPHISMES : = représentation, signe visuel dans lequel on reconnait une réalité (phénomènes physiologiques et mentaux) Pertinents et adéquats (éviter polysémie : sens multiples) Exemples sites : http://www.noveaweb.fr/realisations-sites-internet.html http://www.noveaweb.fr/realisations-sites-internet.html Références graphisme / design : http://www.pixelcreation.frhttp://www.pixelcreation.fr COMM. VIS.

7 EXEMPLES DE SITES UTILISANT LA COMMUNICATION VISUELLE Aujourd’hui : le web design interactif http://www.jonathanyuen.com http://jwilouvres.com.au/ http://www.ouverture-facile.com/ http://www.yamaha.co.jp/design/milano_salone_2007/ http://www.slideshare.net/newsyntax/design-interactif20 http://adventureworld.net.au http://www.karbone14.com http://www.jonathanyuen.com http://jwilouvres.com.au/ http://www.ouverture-facile.com/ http://www.yamaha.co.jp/design/milano_salone_2007/ http://www.slideshare.net/newsyntax/design-interactif20ttp://adventureworld.net.au http://www.karbone14.com

8 ERGONOMIE DEFINITION POUR LE WEB : Rechercher une adaptation optimale entre les fonctionnalités d'un site Internet et ses utilisateurs …proposer un mode de navigation aisé et intuitif permettant aux visiteurs une prise en main rapide des fonctionnalités ERGO.

9 ERGONOMIE POUR LE WEB : - utilisation facile/ simple, - intuitif, - adapter au mieux le site pour tout visiteur (le + grand nombre), - confort, - fonctionnalités faciles/évidentes - satisfaction ERGO.

10 CONCEPTS ERGONOMIQUES / CRITERES traitement des informations / vitesse mémoire de travail / saturation Efficacité : l'utilisateur peut-il réaliser ce qu'il désire faire ? Efficience : l'utilisateur aboutit-il rapidement et avec le moins d'erreurs possibles ? Satisfaction / confort : le site est-il agréable à utiliser ?

11 ANALYSE DE SITES NOTE GLOBALE DE DEPART / 1 ER RESSENTI ACTION A REALISER (observé, chronométré, nb clics) NB COULEURS : nb teintes différentes / nb de dégradés utilisés / dominante NB CLICS INFOS TEXTUELLES : nature / typographie / NB d’infos textuelles différentes / disposition ELEMENTS VISUELS : animations ? Images ? Taille et positionnement NAVIGATION : simple / perd la navigation ? NOTE GLOBALE APRES ANALYSE ERGO.

12 Comprendre le « fonctionnement » d’un visiteur Anticiper les comportements des visiteurs 2 modèles cognitifs : Théorie de l’action Modèle du processeur humain APPORTS PSYCHOLOGIE COGNITIVE ERGO.

13 Modèle du processeur humain : L’utilisateur est représenté comme un ordinateur : -Entrées de données = perception (système sensoriel) -Traitement des données (système cognitif) -Actions résultantes = sorties (système moteur) APPORTS PSYCHOLOGIE COGNITIVE ERGO. http://deptinfo.cnam.fr/Enseignement/CycleSpecialisation/IHM/annee67/correction_ed_SC_Ergo.pdf http://jacques.bapst.home.hefr.ch/ihm1/cours/ergo1_03.pdf

14 Mémoire à court terme = mémoire de travail Traitement des informations / opérations cognitives Dépend de la complexité des informations, le genre d’informations, l’expérience et le savoir des individus Mémoire à long terme Stockage des connaissances (apprentissage, expérience…) APPORTS PSYCHOLOGIE COGNITIVE ERGO.

15 REGLES ERGONOMIQUES 1/3 Proximité : éléments rapprochés / éloignés Similarité : objets similaires = associés Cliquabilité : + éléments petits et éloignés + il est difficile d’utiliser le site Dispersion : éviter de disperser les liens, plutôt les regrouper Homogénéité : même taille, couleur, forme, police Que l’essentiel : + on a de choix, + il est difficile de prendre une décision trop de liens = trop de choix = lenteur traitement et prise de décision Architecture du site : structurer l’information dans des rubriques Organisation visuelle : mise en évidence des infos importantes, équilibrer le rapport images / texte, codes couleurs – homogénéité ERGO.

16 REGLES ERGONOMIQUES 2/3 Règle 3 clics / Navigation compréhensible et intuitive Couleurs entre 4 et 7 maxi. / jouer sur saturation et dégradés / codes de couleurs Éléments graphiques & animations Disposition / emplacement Différents types d’infos équilibre informations textuelles, graphiques-visuelles, animées, sonores Sens de lecture / priorité Confort de lecture : police, zones colorées en filigrane ERGO. http://www.lesmachines-nantes.fr/

17 REGLES ERGONOMIQUES 3/3 Interface rapide : temps de chargement et emplacement des liens Aide pour formulaires : vérification des champs de saisie, préférer les listes et cases à cocher Retour d’informations Aide (ALT=«…») / messages de confirmation ou avertissement Design adapté aux visiteurs (cible) : quel est le public qui viendra sur votre site ? Niveau / profil ? ERGO.

18 LES HABITUDES… Les visiteurs ont acquis des habitudes : Barre de navigation principale en haut de l’écran Lien de retour page d’accueil sur logo en haut à gauche Zone de recherche en haut à droite Terminologie : accueil, contact, recherche, panier… Iconographie des boutons : icône et/ou libellé Scrolling : oui si informations importantes immédiatement visibles et informations secondaires placées en bas d’écran ERGO.

19 EXEMPLES ERREURS ERGO.

20 QUELQUES OUTILS ERGO. HARMONIE DES COULEURS http://www.colorblender.com http://paletton.com ou https://kuler.adobe.com/create/color-wheel/ http://paletton.comhttps://kuler.adobe.com/create/color-wheel/ Générateur de templates compatible : http://www.initializr.com/http://www.initializr.com/ BONNES PRATIQUES http://checklists.opquast.com/fr/opquastv2 VALIDATION DE SCRIPTS W3C pour HTML et XHTML : http://validator.w3.org/http://validator.w3.org/ W3C pour CSS : http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/ W3C complet : http://www.w3.org/QA/Tools/http://www.w3.org/QA/Tools/

21 IMPORTANCE DISPOSITION ERGO. TEXTE + IMAGES

22 COMMENT TESTER UN SITE ? TESTS VISITEURS : ENQUETE / QUESTIONNAIRE SATISFACTION EN LIGNE CHRONOMETRER ACTIONS TYPES STATISTIQUES HEBERGEUR AVIS SPECIALISTE : EVALUATION HEURISTIQUE ET COGNITIVE OUTILS DE VALIDATION EN LIGNE W3C VALIDATORS EYE-TRACKING ERGO.

23 EYE-TRACKING / SIMULATEUR Permet d’analyser le mouvement des yeux (parcours de la page Web) http://www.feng-gui.com http://trinity-advise.com/eye-tracking-ergonomie-web- explications-oculometrie-e-marketing/#Introduction http://trinity-advise.com/eye-tracking-ergonomie-web- explications-oculometrie-e-marketing/#Introduction http://www.vincentabry.com/le-eyetracking-une-nouvelle- methode-d-optimisation-408 http://www.vincentabry.com/le-eyetracking-une-nouvelle- methode-d-optimisation-408 ERGO.

24 ACCESSIBILITE Mettre le Web et ses services à la disposition de tous les individus quel que soit : leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, leurs aptitudes physiques ou mentales ACCESS.

25 HANDICAPS FAMILLES DE HANDICAPS MOTEURS SENSORIELS MENTAUX ACCESS. DEFICIENCE VISUELLE Légère Modérée Grave Totale - +

26 DEFICIENCE VISUELLE LEGERE SOLUTIONS : MODIFICATIONS SYSTEME OU LOGICIEL Paramètres d’affichage Windows / résolution Navigateur : augmenter la taille du texte ACCESSOIRES INTEGRES WINDOWS Loupe Reconnaissance vocale ACCESS.

27 DEFICIENCE VISUELLE GRAVE OU TOTALE SOLUTIONS LOGICIELS / OUTILS SPECIALISES A intégrer dans les pages Web : ReadspeakerReadspeaker Logiciel associé au système / synthèse vocale : JAWS, Supernova, RP Mouse … JAWS MATERIELS : Plage braillePlage braille Vidéo : Accessibilité : comment structurer ses pages Vidéo Vidéo : Quand une personne aveugle surfe sur Internet Vidéo Vidéo : L’ordinateur des aveugles : les outils mobiles Vidéo Lien DANIEL : http://www.nouvo.ch/2010/09/sur-le-web-les-yeux-ferm%C3%A9s ACCESS. La plate-forme étant hébergée chez ReadSpeaker, il suffit au webmestre d'insérer un tag dans chaque page de son site correspondant à un bouton « Lis-moi ». Après avoir sélectionné à la souris le texte qu'il souhaite entendre (sans sélection, la page est lue en entier), l'internaute clique sur ce bouton ; le contenu HTML est alors aiguillé vers les serveurs de ReadSpeaker, où la synthèse vocale est effectuée à la volée grâce à la technologie de partenaires comme Elan ou Rhetorical.

28 REUSSIR SON SITE QUELS OBJECTIFS ? BESOINS REVELES CLIENT (INFORMATIONS) BESOINS ANTICIPES VISITEURS (ACTIONS) QUEL PUBLIC ? REPONDRE VISITEUR SPECIFIQUE CONSIDERER TOUT TYPE VISITEUR COMPROMIS DE CONCEPTION : DESIGN / VISUEL CONTENU / INFORMATIONS TECHNIQUE / OUTILS ERGONOMIE ACCESSIBILITE ANALYSE DES BESOINS MAQUETTAGE CONCEPTION DEVELOPPEMENT TESTS TESTS INTEGRATION TESTS UTILISATEURS