Interfaces Homme/Machine et ergonomie d un site web Apprendre à réaliser une interface Homme/Machine web en HTML 5 et CSS 3.0, à la structurer et à optimiser son ergonomie Retrouvez ce cours sur http://iut.e-concept-applications.fr
STRUCTURE ET OBJECTIFS DU COURS 1) HTML 5 ET CSS 3.0 1.1) HTML et CSS : A quoi ça sert? 1.2) Principe général du HTML 1.3) Différencier sémantique de l information et aspect visuel 1.4) Structure globale d une interface web 1.5) Principe général de CSS 1.6) Apprendre le HTML 5 et CSS 3.0 2) OUTILS NÉCESSAIRES 2.1) Editeurs visuels 2.2) Editeurs de code 2.3) Mode direct ou Serveur web 2.4) Navigateurs web 2.5) Diversité des systèmes : Attention à la compatibilité de l affichage! 2.6) Validation du code 3) ERGONOMIE WEB 3.1) Lecture d un site web : En F / en Z 3.2) Choix des couleurs 3.3) Accessibilité du contenu 3.4) Ergonomie du contenu 3.5) Aller plus loin dans l ergonomie web 3.6) Outils d assistance à la mise en page Interfaces Homme/Machine et ergonomie d'un site web Dernière mise à jour : 30/09/2015 2
1) HTML 5 et CSS 3.0 3
1.1) HTML et CSS : A quoi ça sert? 4
1.1) HTML ET CSS : A QUOI ÇA SERT? HTML : Créé en 1991, HTML 5 depuis 2009 Sert à structurer un contenu sur internet et à définir sa sémantique Ne doit JAMAIS être utilisé pour mettre en forme un contenu!!! CSS : Créé en 1996, CSS 3 dès1999, répandu depuis les années 2010 Sert à mettre en forme le contenu d un site web Attention à la compatibilité des navigateurs! 5
1.2) Principe général du HTML 6
1.2) PRINCIPE GÉNÉRAL DU HTML Le HTML est un langage fonctionnant avec des balises Une balise se présente sous la forme d un mot-clef encadré par des chevrons. Par exemple : <html> est la balise indiquant le début d un fichier HTML Deux types de balises : Balise en paire : Toute balise ouverte doit être fermée. Pour fermer une balise, on recopie celle-ci en mettant un slash juste avant le mot-clef : <html>[ code ]</html> Balise orpheline : Balise indiquant un élément ponctuel, tel qu une image ou un saut de ligne. Elle n encadre aucun contenu. Par exemple, un saut de ligne : <br /> Cette balise possède un espace suivi d un slash juste avant son chevron fermant. 7
1.2) PRINCIPE GÉNÉRAL DU HTML Une balise HTML peut être paramétrable. On peut lui définir des «attributs» selon la syntaxe suivante : <mabalise nomattribut1="valeurattribut1" nomattribut2="valeurattribut2"> Certains attributs n ont pas de valeur particulière. Leur simple présence suffit à indiquer le paramètre à la balise. Par exemple : <mabalise unattributavecvaleur="valeur" monattributsansvaleur> Les balises, tout comme leurs attributs, s écrivent TOUJOURS en minuscule 8
1.2) PRINCIPE GÉNÉRAL DU HTML Les balises en HTML respectent le principe DEPS (Ou LIFO en anglais) : «Dernier Entré, Premier Sorti» Exemple : <html> <head> </head> <body> </body> </html> Correct <html> <head> <body> </head> </body> </html> Faux 9
1.3) Différencier sémantique de l information et aspect visuel 10
1.3) DIFFÉRENCIER SÉMANTIQUE DE L INFORMATION ET ASPECT VISUEL Chaque balise a un rôle bien précis, qui doit être respecté indépendamment du rendu visuel que lui donne le navigateur Exemple : La balise <strong> permet de mettre en valeur un élément du texte. La plupart des navigateurs afficheront un texte encadré par <strong> en gras. Le rôle de cette balise est d indiquer que le mot concerné est important, pas de le mettre en gras! Il est possible de modifier librement l aspect visuel des balises avec les CSS. 11
1.4) Structure globale d une interface web 12
1.4) STRUCTURE GLOBALE D UNE INTERFACE WEB Une interface web, qu il s agisse d un simple site internet ou d une interface de gestion de contenu, contient généralement les éléments suivants : Un menu permettant de naviguer entre les différentes parties de l interface Une page d accueil, présentant le rôle et la structure de l interface. Il est également possible d y indiquer des informations de synthèse dans le cadre d une interface d administration Des pages internes, qui vont présenter les différents contenus à gérer. 13
1.4) STRUCTURE GLOBALE D UNE INTERFACE WEB Il est très important de structurer convenablement l ensemble des textes, à l instar d une dissertation ou d un compte rendu, rapport, etc. Faites attention à la navigation entre vos pages. L utilisateur doit pouvoir trouver l information qu il cherche facilement, et autant que faire se peut, en 3 clics maximum. Accessibilité : L utilisateur doit pouvoir accéder à n importe quelle partie de l interface depuis n importe quelle page. 14
1.5) Principe général de CSS 15
1.5) PRINCIPE GÉNÉRAL DE CSS Les feuilles de style en cascade (Cascading Style Sheets : CSS) servent à mettre en forme les pages de votre interface web. Une CSS peut s écrire sur plusieurs supports : Dans un fichier indépendant, qui pourra être réutilisé sur plusieurs pages Dans une balise <style> dans le flux HTML Directement dans l attribut «style» d une balise HTML Ces trois supports sont dans leur ordre de priorité (du plus faible au plus fort) 16
1.5) PRINCIPE GÉNÉRAL DE CSS Exemple d une déclaration CSS : strong { font-weight: normal; } Ici, on indique que pour la balise <strong>, on veut un texte normal, pour être sûr que le navigateur n affichera pas le texte en gras. Intérêt de cet exemple : Permet de mettre en valeur des mots-clefs pour les moteurs de recherche sans affecter le visuel. 17
1.6) Apprendre le HTML 5 et CSS 3.0 18
1.6) APPRENDRE LE HTML 5 ET CSS 3.0 Un cours complet est disponible à l adresse suivante : http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3 Même si vous connaissez HTML, lisez attentivement l ensemble du cours. Il détaille entre autre les normes à respecter en HTML 5 et CSS3.0, ainsi que les principes de structuration de votre code et de votre contenu. Un ou deux QCM «surprises» seront effectués au cours de ce module (Pas de date fixée). Un projet sera à réaliser lors de la dernière séance. 19
2) Outils nécessaires 20
2.1) Editeurs visuels 21
2.1) EDITEURS VISUELS Pour concevoir une interface web, il existe des éditeurs visuels, généralement appelés éditeurs «WYSIWYG» : «What You See Is What You Get». Par exemple : Dreamweaver, Nvu, Kompozer, etc. Ces éditeurs présentent malgré tout de nombreux inconvénients : Ils sont généralement payant (et chers), la quasi-totalité ne respecte pas les standards de programmation et la sémentique du code. Ces éditeurs seront formellement interdits dans ce module! 22
2.2) Editeurs de code 23
2.2) EDITEURS DE CODE L autre façon de concevoir une IHM web est d utiliser un éditeur de texte. Le plus basique suffit : Bloc-Note sous Windows, vi sous Linux. Attention! Pas d éditeurs de textes «enrichis» tels que Word, LibreOffice Writer, etc! Il existe de nombreux éditeurs de textes spécialisés dans l édition de code : Sous Windows : Notepad++, PsPad, etc. Sous Linux : Emacs, gedit, Sublime Text, etc. 24
2.2) EDITEURS DE CODE Les éditeurs de codes vont proposer notamment les fonctionnalités suivantes, qui vous seront très utiles pour la clarté de votre code : Indentation automatique et coloration syntaxique : améliore la lisibilité de votre code Complétion automatique des mots-clefs et des fonctions Complétion automatique des caractères d encadrement : (), {}, [], <>, etc. Ces éditeurs, malgré leurs options, génèrent toujours un fichier texte brut, condition indispensable pour qu une IHM web fonctionne! (Idem pour PHP) 25
2.2) EDITEURS DE CODE Les éditeurs de code, grâce à la coloration syntaxique, permettent notamment de distinguer les commentaires du code : Documentez votre code HTML et CSS Permet de communiquer lors d un travail à plusieurs Plus facile pour reprendre un code après une longue absence. Commentaire HTML : <!-- Un commentaire --> Commentaire CSS : /* Un commentaire */ 26
2.3) Mode direct ou Serveur web 27
2.3) MODE DIRECT OU SERVEUR WEB Mode direct : Placez vos fichiers.html et.css dans un dossier, et accédez à votre page principale depuis le navigateur en indiquant le chemin du fichier. Mode serveur : Nécessite un serveur web. Placez vos fichiers à la racine du serveur web (ou dans un sous-dossier), et accédez au serveur web (généralement «http://localhost» si le serveur est sur votre propre machine). Le fichier par défaut sur un serveur web doit s appeler «index.html»! 28
2.3) MODE DIRECT OU SERVEUR WEB Utiliser le serveur web de l IUT : La racine du serveur web pour votre compte est dans le répertoire suivant : /nfs1/web/votre_login/public_html/ Rendez-vous sur http://www-etu.iut-bm.univ-fcomte.fr/~votre_login/ pour afficher la page web Si vous placez vos fichiers dans des sous-répertoires différents, pensez à compléter l URL en conséquence. 29
2.3) MODE DIRECT OU SERVEUR WEB Utiliser un serveur web local : Sous Windows : Vous pouvez installer facilement un serveur web grâce à WAMP : http://wampserver.com Sous Linux : Installez Apache pour disposer d un serveur web. La configuration par défaut est normalement suffisante pour afficher des pages web. Pour plus de détails sur la configuration d Apache : http://doc.ubuntu-fr.org/apache2 30
2.4) Navigateurs web 31
2.4) NAVIGATEURS WEB Il existe de nombreux navigateurs internet. Parmi les plus connus : Internet Explorer : Windows et Windows Phone uniquement Firefox (et sa variante Debian «Iceweasel») : Windows & Linux Opera : Windows, Linux, Mac OS, Android, Symbian, Windows Phone, etc. Safari : Mac OS et ios. Une version Windows a existé, mais est désormais abandonnée. Google Chrome : Windows, Mac OS, Linux, Android, ios 32
2.5) Diversité des systèmes : Attention à la compatibilité de l affichage! 33
2.5) DIVERSITÉ DES SYSTÈMES : ATTENTION À LA COMPATIBILITÉ DE L AFFICHAGE! La diversité des navigateurs web, mais aussi des terminaux (PC Windows, Linux, Mac, Smartphones, tablettes, etc.) pose régulièrement problème, notamment si le code n est pas conforme aux standards Pensez à vérifier le rendu de vos IHM sur plusieurs navigateurs. Il est recommandé de valider au moins Firefox, Google Chrome et Internet Explorer. En effet, Opera et Safari utilisent pratiquement le même moteur de rendu que Chrome, et les différences d affichage seront donc très rares. 34
2.6) Validation du code 35
2.6) VALIDATION DU CODE Il est important de vérifier que son code est conforme aux standards du web. Pour vérifier votre code HTML : http://validator.w3.org Note : En HTML5, vous aurez toujours un warning indiquant que vous utilisez un langage expérimental. Ce sera le seul warning toléré lors des projets. Pour vérifier votre code CSS : http://jigsaw.w3.org/css-validator/ 36
EXERCICE Une fois la 1 ère partie du cours HTML/CSS terminée (Les bases de HTML5), créez une page web en HTML 5 présentant votre CV. Le code HTML de la page devra être structuré avec les balises adéquates. Une fois la 2 e partie du cours terminée (Mise en forme avec CSS), améliorez le rendu visuel de votre CV à l aide des CSS. A l issue de la 3 e partie (Mise en page du site), travaillez la structure visuelle de votre CV pour obtenir un rendu équivalent à un traitement de texte. 37
3) Ergonomie web 38
3.1) Lecture d un site web : En F / en Z 39
3.1) LECTURE D UN SITE WEB : EN F / EN Z Des études ont déterminé que selon les situations, deux types de parcours sont observés chez les utilisateurs. Lors d une navigation «classique», l utilisateur va généralement effectuer un parcours en F : L œil commence par regarder le haut de la page, de gauche à droite. L œil continue ensuite de haut en bas sur la gauche, en observant la droite des éléments accrocheurs. 40
LECTURE EN F SCHÉMATISATION La bande verticale extrême gauche n est que peu perçue L œil effectue un décrochement vers la droite s il rencontre un élément accrocheur Image originale : UseIt.com 41
3.1) LECTURE D UN SITE WEB : EN F / EN Z Comment exploiter la lecture en F? Présentation en liste : Les puces accrochent le regard. Utilisez-les dès que vous avez une énumération à effectuer pour la mettre en valeur Les titres de page et paragraphes sont importants et attirent l œil. Mettez-les en valeur judicieusement. Placez des titres intermédiaires sur les textes longs. Cela permet de conserver l attention du lecteur et d avoir rapidement une vue d ensemble du contenu. 42
3.1) LECTURE D UN SITE WEB : EN F / EN Z Le principe de lecture en Z se produit généralement lorsqu une personne découvre un site web totalement inconnu pour elle. L utilisateur parcours la ligne supérieure de gauche à droite, puis redescend vers le coin bas gauche de l écran en diagonale, avant de refaire un second balayage vers la droite. 43
VISIBILITÉ DES ZONES POUR UNE LECTURE EN Z Impact des zones pour un œil neuf Utilisation recommandée des zones pour un œil neuf 44
3.2) Choix des couleurs 45
3.2) CHOIX DES COULEURS Gardez des couleurs cohérentes Utilisation des couleurs complémentaires Faites attention au contraste de vos éléments : Un élément bien contrasté attire l œil Trop d éléments contrastés provoque l effet inverse! Attention à la signification des couleurs, et notamment leur température! Pour des éléments de très grande importance, vous pouvez exploiter en complément des effets visuels, comme le clignotement. 46
3.3) Accessibilité du contenu 47
3.3) ACCESSIBILITÉ DU CONTENU Faites en sorte que votre contenu soit lisible sur tous types de terminaux (Principe du «responsive») Travaillez de préférence en taille relative, pour que votre site puisse s adapter si l utilisateur définit une taille de police de base supérieure à la normale. Tenez compte des contraintes techniques qui peuvent exister. Votre site doit pouvoir fonctionner et être lisible sans CSS et sans JavaScript! 48
3.3) ACCESSIBILITÉ DU CONTENU Attention à l accessibilité de votre contenu. Un vocabulaire trop technique ou trop pompeux fera fuir les visiteurs (sauf si votre contenu est volontairement technique, car s adressant exclusivement à un public connaisseur) Comme dit dans la 1 ère partie, vérifiez vos rendus sur les différents navigateurs du marché Pensez au poids de vos pages! Tout le monde ne dispose pas d une connexion internet de plusieurs Mbp/s. 49
3.3) ACCESSIBILITÉ DU CONTENU Détecter un affichage mobile ou tablette : http://www.tutomobile.fr/apprendre-a-detecter-les-mobiles-tutoriel-webappsn%c2%b01/07/08/2010/ Détection simplifiée via PHP : http://netmacom.fr/blog/webdesign/detecter-lesterminaux-mobiles-avec-la-classe-php-mobile-detect.html Plus de détails sur les règles Media Queries : https://developer.mozilla.org/fr/docs/web/css/media_queries http://media-queries.aliasdmc.fr/media-queries-live.php 50
3.3) ACCESSIBILITÉ DU CONTENU Forcer la taille d affichage d une page sur les terminaux mobiles pour permettre l utilisation des Media Queries : <meta name="viewport" content="width=device-width, initial-scale=1.0, maximumscale=1.0, user-scalable=0"> width=device-width : Force le navigateur à utiliser la résolution de l appareil, et non une résolution fictive pour adapter le contenu des sites non-responsive. initial-scale, maximum-scale, user-scalable : Paramétrage du zoom de la page. Plus d infos sur : http://www.alsacreations.com/article/lire/1490-comprendre-leviewport-dans-le-web-mobile.html 51
3.4) Ergonomie du contenu 52
3.4) ERGONOMIE DU CONTENU Travaillez la mise en page de vos contenus : Définissez clairement les titres, chapeaux (introductions), paragraphes, etc. Evitez des zones de texte trop larges : Le lecteur risque de perdre la ligne en cours, et lira plus difficilement votre contenu. Dans ce cas, exploitez par exemple les dispositions multi-colonnes. Exploitez les éléments visuels pour mettre en valeur des éléments : encadrés, figures légendées (plus d impact qu une image seule) 53
3.4) ERGONOMIE DU CONTENU Faites attention à la lisibilité de vos textes : Evitez les grandes portions de texte soulignées. Cela rend plus difficile la lecture sur un écran, et peut prêter à confusion, le soulignement correspondant souvent à un lien. Structurez votre texte. Un «pavé» mononbloc fera fuir vos lecteurs! Rappelez-vous que vous disposez de 6 niveaux de titres en HTML5, ce qui est largement suffisant. Evitez les éléments superflus : Smilies, animations, images à tort et à travers, etc. Réfléchissez à la pertinence de chaque élément visuel 54
3.4) ERGONOMIE DU CONTENU Travaillez vos menus : Chaque section du site doit être facilement accessible. Utilisez les regroupements par thématique pour structurer votre menu. A l inverse, évitez d avoir trop de sous-menus, cela rendra plus difficile la recherche d éléments dans votre menu de navigation Pensez à mettre un plan de votre site, soit sur une page dédié, soit en pied de page si le plan reste de petite taille. Cela permettra à l utilisateur d avoir un «GPS» pour se repérer, plus lisible qu un menu déroulant, par exemple. 55
3.5) Aller plus loin dans l ergonomie web 56
3.5) ALLER PLUS LOIN DANS L ERGONOMIE WEB Retrouvez l ensemble de ces informations, et plus encore, sur le site suivant : http://www.mon-design-web.com/ Quelques précisions toutefois sur ce site : Le site date de quelques années. Certaines informations sont donc obsolètes. (Détails diapo suivante) 57
3.5) ALLER PLUS LOIN DANS L ERGONOMIE WEB Concernant le chargement des pages, si les débits mentionnés dans le site ont augmenté depuis, les minimas restent malgré tout existants, et sont à prendre en compte. Pour les design fluides, le site recommande de s appuyer au maximum sur la propriété CSS «float» pour gérer la mise en page : CSS 3.0 offre suffisamment de possibilités pour permettre de ne pas abuser des «float». 58
3.5) ALLER PLUS LOIN DANS L ERGONOMIE WEB Toujours dans la partie mise en page, la solution évoquée pour s adapter aux différents écrans est de réaliser plusieurs designs Vous disposez maintenant des Media Queries en CSS 3.0 pour effectuer cela avec un seul et même design. Partie Ergonomie, concernant les polices : Vous pouvez désormais sortir des polices standards grâce au téléchargement de police avec CSS 3.0. Attention toutefois au poids engendré par les fichiers de police! 59
3.5) ALLER PLUS LOIN DANS L ERGONOMIE WEB Partie «Accessibilité» : «Ne pas se reposer entièrement sur les CSS» Cette partie est à relativiser, car CSS 3.0 apporte un grand nombre de possibilités qui n existaient pas en CSS 2.1. Toutefois, la remarque reste pertinante! Partie «Problèmes et solutions» : La technique de centrage présentée avec une marge négative est à proscrire formellement, sauf s il est indispensable de bénéficier d un centrage sur IE 5 et 5.5. I6 supporte les marges automatiques, mais à condition d avoir un code valide! 60
3.5) ALLER PLUS LOIN DANS L ERGONOMIE WEB Toujours dans «Problèmes et solutions» : Les techniques pour les menus fixes et déroulants sont obsolètes. Pour des exemples, cherchez simplement «Menu CSS 3.0» sur votre moteur de recherche préféré. 61
EXERCICE Prenez plusieurs sites web connus de votre choix, et essayez d analyser la façon de présenter les éléments, comment sont gérées les mises en valeurs. Observez également les dispositifs mis en œuvre pour gérer les différents terminaux. 62
3.6) Outils d assistance à la mise en page 63
3.6) OUTILS D ASSISTANCE À LA MISE EN PAGE Bootstrap : Permet de simplifier la mise en page CSS Fonctionne sur un principe de grille : La page est décomposée en x lignes et y colonnes, et vous alignez vos éléments en vous servant de cette grille Apprendre à utiliser Bootstrap : http://openclassrooms.com/courses/prenez-en-main-bootstrap 64
3.6) OUTILS D ASSISTANCE À LA MISE EN PAGE Avertissements concernant Bootstrap : Chaque nouvelle version de Bootstrap apporte de nouvelles fonctionnalités, mais change aussi régulièrement le comportement de certains éléments! Attention si vous mettez à jour Bootstrap sur un site! Il y aura certainement du code à reprendre! 65
3.6) OUTILS D ASSISTANCE À LA MISE EN PAGE Avertissements concernant Bootstrap : Bootstrap n est PAS valide CSS 3.0, mais fonctionne sur la plupart des navigateurs. Les erreurs CSS correspondent à des fonctions CSS spécifiques aux différents navigateurs, qui sont implémentées notamment pour prendre en charge les anciennes versions de navigateurs. Faites toutefois en sorte de conserver vos propres CSS toujours valides. Le validateur du W3C ne doit sortir QUE les erreurs de Bootstrap. 66
3.6) OUTILS D ASSISTANCE À LA MISE EN PAGE D autres frameworks CSS existent : Web Starter Kit : Outil créé par Google Foundation : très (très!) complet, mais peut-être pas le plus simple Skeleton Pure : Ultra léger (seulement 4,4ko) Une liste plus complète est disponible sur : http://blog.nicolashachet.com/ergonomie-design/les-frameworks-css-responsive-design/ 67
3.6) OUTILS D ASSISTANCE À LA MISE EN PAGE Titanium : Il s agit d un cas particulier. Cet outil permet de développer des interfaces d applications mobiles, autant pour Android que pour ios, Windows Phone, BlackBerry et HTML 5 Cet outil vous permet d unifier votre interface sur différents terminaux pour des usages applicatifs. Plus d infos sur leur site : http://www.appcelerator.com/titanium/ 68