Conception de sites Web,  utilisabilité et design Saïd Radhouani Université de Genève mars 2005
Site Web = Système d'information 28/01/12 Données (contenus) Traitements (programmes, ...) Interface Utilisateur Pour l'utilisateur l'interface est le   système
L’ergonomie Web Qu'est ce qui fait que certains sites web deviennent des succès et que d'autres, proposant des services similaires, sont au contraire des échecs ? Une campagne de publicité de plusieurs millions va drainer les internautes vers votre site MAIS … qu'est-ce qui va les faire revenir ?  Comment fidéliser les internautes ? Il n'y a pas de secret, mais il faut que votre site possède les qualités qui vont assurer son succès ...  Voici quelques éléments d'ergonomie
Un site utile Permettre à l’utilisateur de faire ce qu’il a besoin de faire acheter un billet de train, trouver la description d’un appareil, … Les internautes viendront en priorité sur votre site parce que celui-ci fournit du contenu et des services présentant ces qualités : contenu à jour, qui se renouvelle régulièrement (date de dernière mise à jour) pages réservant un maximum de surface au contenu utile Réduire l'espace alloué aux éléments de navigation Eviter l'abus de bandeaux de publicité Du contenu dans chaque page Eviter les écrans d'introduction (splash-screens) inutiles
Un site rapide Sur le Web, les temps de réponses sont difficilement prédictibles vitesse du serveur connexion du serveur à Internet embouteillages sur Internet connexion de l’utilisateur vitesse de rendu sur la machine de l’utilisateur  D’après une étude faite en 1968 par Robert Miller 0.1 seconde = temps maximum pour que l’utilisateur ait l’impression que le système répond instantanément 1 seconde = limite pour que le flot de pensée de l’utilisateur reste ininterrompu 10 secondes = limite pour garder l’attention de l’utilisateur sur le dialogue
Un site rapide Plus les pages sont petites (taille de fichier), mieux c’est (inférieure à 30Ko) Eviter des tableaux imbriqués avec trop de niveaux d'imbrication Pensez au GIF ou au JPEG progressif : les images s'affichent avant d'être complètement chargées Pour un téléchargement, l'accès à une grande image, prévenir l'utilisateur en donnant la taille, ou mieux une estimation du temps de transfert en fonction de son type de connexion Les utilisateurs sont plus tolérants quant aux délais s’ils s’attendent à ce que ce soit lent    les informer quand un lien pointe vers une ressource de grande taille, potentiellement lentes à charger
Un site simple Une tentation courante dont la majorité des sites sont victimes : faire des sites magnifiques utilisant les dernières technos et riches en graphismes et en multimédia Les internautes viennent en premier pour le  contenu Evitez ce qui peut nuire à la rapidité du site et ce qui le rend moins accessible ou lisible Evitez les animations GIF animés Animations Flash balise BLINK (clignotement de texte) balise MARQUEE (défilement de texte)
Un site simple Eviter ce qui demande un plug-in Impose un probable téléchargement du plug-in Problème potentiel de configuration sur le poste client Eviter la "high-tech" pour le plaisir Les applets Java Javascript : attention aux problèmes de compatibilité CSS : la page doit être lisible même pour un navigateur ne supportant pas CSS La vidéo, le son La 3D Eviter de faire "riche" Trop d'images, images trop grandes Trop de couleurs Pages surchargées
Un site familier Comme tout le monde, l'internaute a ses habitudes. Si vous ne les prenez pas en compte, vous lui compliquez la tâche... Respect de l'apparence standard des liens Liens non-visités en bleus et liens visités en rouge Réservez ces couleurs aux liens liens toujours soulignés. Réservez le soulignement aux liens Pas de liens qui se révèlent en tant que tels que si le curseur souris passe dessus Identification du site (logo) en haut à gauche Eléments de navigation en haut et à gauche
Un site universel Pour que votre site soit utilisable par le maximum d'internautes, il doit être accessible par tous : Matériel, Logiciel, Personnes Fonctionne quelque soit le type de navigateur (Microsoft, Netscape, Opéra...) Fonctionne quelque soit la version du navigateur Une version met environ 2 ans à se reprendre universellement gérez au moins une version précédente (Ex. IE5 et IE4) Utilisable avec des navigateurs en mode texte Renseignez l'attribut «ALT» sur les images
Un site universel Fonctionne quelque soit l'écran utilisé Résolution graphique Nombre de couleurs Pensez aux autres type d'accès Accès mobile : WAP, PDA... Accessibilité pour les handicapés, particulièrement les malvoyants Pensez à fournir une version imprimable des documents ou articles mis à disposition
Un site lisible L'écran rend la lecture difficile et la lisibilité du contenu est très importante Utilisez un style direct, simple, concis Pas de style ampoulée, de phrase longue Pas de blabla marketing Utilisez les listes à points Mettre en évidence les points importants Mots importants en gras (recommandé) ou italique Titres immédiatement compréhensibles en dehors du contexte Les informations importantes doivent être en haut de la page
Un site lisible Polices et  couleurs Choisir une police de caractères adaptée au Web (Verdana, Tahoma...) Choisissez des couleurs de texte et de fond donnant un bon contraste. Idéalement, noir sur fond blanc Si la couleur de fond est plus sombre que la couleur de texte, mettre les caractères en gras Si vous  écrivez  en blanc sur fond noir, pensez que l'utilisateur aura des difficultés à �  imprimer la page Proscrire les fonds avec des motifs graphiques qui gênent la lecture PAS DE TEXTE EN MAJUSCULES, C'EST MOINS LISIBLE Défilement Limiter le défilement vertical Proscrire le défilement horizontal
Un site lisible Évitez la fonction de clignotement (BLINK) Évitez   les textes trop longs. Il n'est pas très agréable de lire sur un  écran Au-delà de 500 mots, la lecture d'une page web devient pénible En cas de longs textes, cré � ez des ruptures (sous-titres, ic ô � nes) Si le texte est destiné  �à   � être imprimé, tout mettre sur une seule page Les   pages ne contenant que deux lignes de texte sont ridicules Évitez  plusieurs sujets sans rapport entre eux sur une m ê � me page (R �è gle: 1 sujet = 1 page) Évitez  aussi de concevoir votre site pour une résolution d'écran bien précise. Si vous pensez que le visiteur va changer la résolution de son  écran  juste pour voir votre site, vous r êvez ! mauvais exemple: Killing wave ( http://membres.lycos.fr/killingwave/ )
Un site ouvert Votre site est un site parmi d'autres sur le web ==> il faut vous inscrire dans ce «monde» avec harmonie D'autres sites créent des liens sur vos pages Evitez de changer les URL de vos documents Chaque page doit identifier clairement votre site (présence systématique du logo du site) Les URL de vos documents doivent si possible être explicites, sans caractères spéciaux, pour faciliter la mémorisation et éviter les erreurs Les internautes accèdent à votre site par les moteurs de recherche Mettez des mots-clés sur vos pages (méta tag keywords) Donnez des descriptions à vos pages (méta tag description) Référencez votre site dans les moteurs Votre site mène vers d'autres sites ... Vérifier périodiquement que les liens restent valides
Un site navigable L'utilisateur ne doit jamais se perdre! Il devrait toujours pouvoir retourner  �à  la page d'accueil d'un seul clic Le principe de base du Web est la navigation ==> il faut exploiter ce principe au mieux Sur chaque page, indiquer à l'internaute où il est : Où il est dans le Web : identification claire du site et de sa fonction Où il est dans le site : indiquez la position de la page par rapport à l'arborescence principale Où il a déjà été : les liens sur les documents déjà parcourus doivent apparaître en rouge
Un site navigable Sur chaque page, indiquer à l'internaute où il peut aller : Eléments de navigation par rapport à l'arborescence principale : sous-rubriques, rubrique mère, rubriques "soeur » Utilisez les liens titrés (ancre significative) Indiquez clairement les liens induisant un téléchargement Signalez éventuellement les liens menant à un autre site Évitez  un cheminement linéaire. Un site Web n'est pas un livre. Attention toutefois  �  ne pas perdre le visiteur
Un site navigable Donnez à l'internaute un moteur de recherche et un plan du site (quand le nombre de page devient important - 100) => Conséquence : une page doit toujours contenir au moins un lien pour la raccrocher au reste du site, par exemple en mettant en bas de la page un bouton permettant de revenir  �  la page qui la précède logiquement Il est possible qu'un internaute "tombe" sur une page via un moteur de recherche et s'y retrouve ainsi bloqué, n'ayant aucun lien sur lequel cliquer Un visiteur doit pouvoir deviner o ù �  un lien le conduira avant m ê me de cliquer dessus Un mauvais exemple: les archives d'Archimède ( http://archives.arte-tv.com/hebdo/archimed/archi_f.html )
Cycle de développement Analyse des besoins Modèles de l’utilisateur et des t âches Outils Conception du système (site) Plan du futur site Interface : règles ergonomiques Noyau fonctionnel : modèles de données, traitements, etc. Réalisation Technologies : HTML, XML, Java, PHP, ASP, scripts, bases de données, serveurs, etc. Evaluation - Test Expérimentation avec des utilisateurs Mise en ligne Maintenance et mise à jour
Analyse des besoins - Questions préliminaires Quel est l'objectif visé? Que souhaitez-vous présenter? � à qui  s'adressera votre site? Quel nombre de pages pr �é voyez-vous de produire? Quelle doit  être  l'apparence des pages? Avez-vous une idée concrète ou des pages d'exemples? Qui est le responsable du projet ? S'il y en a plusieurs, quelle sera la t � â che de chacun? Est-il prévu d'apporter par la suite des modifications ou de faire des mises  �  jour? Qui devra s'en charger? Quel est le budget? etc.
Analyse des besoins Définition de la raison d’ être du système (site) Résumer en une phrase la motivation du travail Fixer des objectifs et critères de succès Modélisation  de l’utilisateur des tâches Difficulté Ne pas viser trop court (limité) Ne pas viser trop long (trop général) Résoudre le bon problème
Modèles de l’utilisateur Classification Novice Débutant avancé Compétent (élabore des stratégies) Efficace (choisit la bonne stratégie) Expert (agit inconsciemment et globalement) Eléments de catégorisation Compétence Dans le domaine du site En informatique Autres (langue, etc.) Biométrie (taille,  âge, sexe, etc.) Fréquence d’utilisation
Modèle des t âches Techniques d'identification Immersion dans l'environnement Observation Interview Suivre une personne (shadow) Faire le travail etc.
Quand il n’y a pas d’utilisateur Il y en a peut-être tout de même un, chercher! Inventer un utilisateur Jeff Hawkins, the inventor of the Palm Pilot, was said to  have carried a small block of wood around in his shirt pocket ...  As various everyday situations arose, he would take out the  block of wood and imagine how he would use the device.  Sato and Salvador, interactions 6(5)
Modèle des t âches Exemple : liste des t âches d’un système de messagerie écrire un message lire un message recevoir un message envoyer un message répondre à un message enregistrer un message transmettre un message joindre un document à un message gérer le carnet d’adresses …
Tâches et cas d'utilisation UML Emprunter un livre Réserver un livre Payer la cotisation Consulter le catalogue Enregistrer un  nouvel utilisateur Chercheur Utilisateur externe Type d’utilisateur <--> Services offerts par le système (site) Bibliothécaire
T âches et scénarios Client Fournisseur Institution de Carte de Crédit Acheter un article Vérifier payement Consulter catalogue Commander articles Scénario
Les outils Un éditeur de pages web : Netscape Navigator (Composer), Claris HomePage, Frontpage, Adobe Golive, Dreamweaver, Web Construction Kit (shareware) Un logiciel de traitement d'images : Mac: Photoshop, GraphicConverter (shareware), PC : Paint Shop Pro Un scanner Pour des sites plus interactifs, des livres sur javascript, java, Flash, DHTML, php, etc. Et, bien sur… se documenter à �  propos d'Internet
Conception du site Précision sur les rapports entre &quot;pages Web&quot;, &quot;site Web&quot; et &quot;page d'accueil&quot; :  un  site Web  est en quelque sorte une publication constituée d'un certain nombre de  pages Web Parmi ces pages, la  page d'accueil  occupe une place de choix, puisqu'elle fait office de couverture pour cette publication sur le Web La visite d'un site commence généralement par cette page de démarrage La conception des pages individuelles est très importante car c’est ce que l’utilisateur voit en premier Un site bien conçu va aider les utilisateurs à trouver les pages pertinentes structure compréhensible pour l’utilisateur navigation Il ne faut pas que l’utilisateur ait besoin d’un mode d’emploi pour utiliser le site
Faire un plan du futur site Structurez, hiérarchisez votre site!  Faites sur papier un schéma de la structure du site Reliez les pages par des flèches La maintenance en sera plus aisée et votre site aura une certaine logique qui facilitera le surf une (petite) partie du sché � ma du site du Lycé � e cantonal de Porrentruy Source :  http://www.apprendre-en-ligne.net/
Faire un plan du futur site Faites des croquis de l'aspect qu'auront les pages avant de vous lancer dans la réalisation Sur votre ordinateur, vous regrouperez dans des dossiers les pages et images appartenant à �  un  m ême  sujet  vous devrez  éviter  les longs noms de dossier, car cela rallongera l'adresse URL de la page Source :  http://www.apprendre-en-ligne.net/
La page d’accueil est très importante Vitrine du site Devrait contenir : logo + nom de l’organisation/entreprise/association => permet à l'internaute tout de suite o ù �  il se trouve exemple:  www.cff.ch indications sur ce que le site propose liens vers parties principales éventuellement une partie « actualité » selon le site
La page d'accueil est très importante Devrait être relativement courte si l’utilisateur doit faire défiler le texte, il aura de la peine à avoir une vue d’ensemble de ce qui est disponible  Ne devrait pas dire uniquement « le site est en construction » Elle doit  être  attrayante graphiquement, rapide, sans fautes d'orthographe et elle doit donner une bonne idée du contenu du site Mettez les informations les plus importantes en haut de la page
La page d'accueil est très importante Évitez  les pages d'accueil tellement charg �é es que l'on ne sait plus o ù  donner de la t ê � te Appelez toujours la page d'accueil &quot;index.html&quot;, cela raccourcit l'adresse URL. En effet, la page index.html est choisie par dé � faut, ce qui veut dire que l'on peut supprimer le &quot;index.html&quot;  �à  la fin d'une adresse Il est utile de mettre sur la page d'accueil une table des mati �è res et/ou un moteur de recherche priv �é  (par exemple  www.x-recherche.com ) Évitez  d'ouvrir automatiquement des fen êtres  supplémentaires pour la pub ou autre Évitez   les pages produisant automatiquement des sons. Il est pr �é fé � rable de laisser au visiteur le choix d'entendre la musique ou non mauvais exemple :  http://www.philagora.net/occitan/occnoel.htm
« Splash screens » Certains sites font d’abord apparaître une image ou une animation, avant d’afficher la page d’accueil Ce genre de technique est diversement apprécié connexion lente pas le plugin nécessaire A n’utiliser que dans certains cas pour des sites de style plutôt récréatif pour des entreprises du domaine « graphisme », pour montrer un exemple des technologies proposées pour pr �é venir le visiteur que le contenu du site peut le choquer (sites é � rotiques), proposer une langue,  permettre de choisir entre une version rapide et une version lente A éviter surtout dans des sites de référence que les utilisateurs sont appelés à utiliser souvent Deux exemples:  www.tunisie-foot.com  et  www.loups-garous.com
Page d’accueil vs. pages internes La page d’accueil correspond un peut à la couverture d’un magazine    peut être assez tape-à-l’œil Les pages intérieures d’un site seront plus basées sur le contenu les utilisateurs peuvent ne pas avoir passé par la page d’accueil  => ajouter des informations d’identifications (ex: logo et nom du site)
Répartition de l’espace disponible L’espace de l’écran est rempli avec différents éléments la fenêtre du navigateur avec ses différentes barres d’outils barres de navigations dans la page Web éventuellement : bannières publicitaires contenu ! L’utilisateur est principalement intéressé par le contenu Selon Nielsen: Contenu : minimum 50% de l’espace (si possible    80 %) Navigation : maximum 20% (sur une page intérieure)
Liens Types de liens Dans le texte : « plus d’informations sur ce point particulier » utile d’ouvrir la destination dans une autre fenêtre pour permettre à l’utilisateur de poursuivre la lecture du passage Structurels : pour naviguer dans la structure du site Associatifs : « voir également », pour indiquer des ressources similaires ou ayant un lien avec la page courante Eviter les pages « cul de sac » en ajoutant au minimum un lien vers la page d’accueil
Liens Texte de l’ancre explicite (pas « cliquez ici » !) pour l’utilisateur pour certains moteurs de recherche comme Google Longueur de l’ancre (2-4 mots) Explication du lien pour éviter à l’utilisateur d’activer le lien juste pour voir à quoi il correspond Titre du lien permet de faire apparaître une petite étiquette quand l’utilisateur passe le curseur sur l’ancre <A HREF=&quot;http://cui.unige.ch&quot; TITLE=&quot;Centre Universitaire d ’Informatique&quot;>CUI</A>
Liens Couleur des liens En HTML, il est très facile de changer la couleur des liens  <BODY LINK=... VLINK=... ALINK=...> Problème pour l’utilisateur : que signifient ces couleurs Dans certains sites, la même couleur est utilisée pour les liens non visités et les lien visités esthétiquement, c’est parfois plus joli pour l’utilisateur, c’est une perte d’information Lien ayant pour ancre le nom d’une personne => ambigu Mailto ? Page personnelle ?
Liens Liens vers autre site Rien ne distingue visuellement les liens internes à un site des liens pointant vers d’autres sites On peut les distinguer en écrivant une petite annotation dans la page Utilisation d’un titre de lien
Liens Liens qui viennent de l’extérieur Bonne source de trafic pour le site (publicité gratuite) Nécessite des URLs stables pour éviter des déceptions Les liens de l’extérieur pointent souvent vers des pages individuelles et non vers la page d’accueil chaque page du site devrait permettre d’aller vers la page d’accueil chaque page devrait correspondre à une unité d’information relativement indépendante (pour éviter de se retrouver au milieu d’un texte)
Frames Casse le modèle original du Web, où une page = ce que l’utilisateur voit à l’écran une unité de navigation une URL une unité de stockage (mis à part les images et autres objets insérés) A n’utiliser qu’en cas de nécessité Impression plus difficile Problèmes avec les moteurs de recherche certains n’indexent pas les frames liste des résultats pointent parfois vers une partie du frame seulement
Frames Discutable du point de vue des droits d’auteur peut donner l’impression qu’un document fait partie d’un site alors que ce n’est pas le cas Utiles pour Naviguer à l’intérieur d’une page très longue ex: http://www.unige.ch/eti/reglements/regetudes-main.html Une page qui commente d’autres page ex: pour un commentaire sur l’utilisabilité de pages
Typographie Alignement De préférence aligné à gauche (y compris les titres et sous-titres) pour une meilleure lisibilité Utiliser les feuilles de style Espacement Les utilisateurs ont tendance à ne pas lire le texte en détail  => espace entre les paragraphes bienvenus Il est aussi possible d’indenter le texte (feuille de style)
Typographie Police de caractères sur papier, les polices avec empattement (serif) sont considérées comme les plus lisibles la faible résolution des écrans par rapport à l’impression sur papier fait que les empattement ne sont pas très nets, surtout pour des caractères de petite taille    il peut être avantageux d’utiliser une police comme Verdana, Trebuchet, Arial ou Georgia en tous les cas, limiter le nombre de polices différentes dans la même page proposer une liste de polices plutôt que police seule Couleurs s’assurer qu’il y a un bon contraste entre le texte et la couleur de fond éviter les couleurs fatigantes ou à problème
Typographie Mise en évidence gras : en général bon choix italique : à utiliser avec modération car peu lisible à l’écran souligné : peut être confondu avec un lien texte en couleur : peut également être confondu avec un lien, surtout si les mots colorés sont à l’intérieur du texte Majuscules : fatigue le lecteur si utilisé en grande quantité raison : on reconnaît les mots en parcourant la moitié supérieure des mots indentation et espacement : efficaces
Découpage Il ne faut obligatoirement simplifier le contenu. S’il y a beaucoup de choses à dire, il faut les dire Une bonne technique peut être de découper le texte en plusieurs pages le découpage devrait faire en sorte que chaque nouvelle page ait une certaine unité de sens s’il s’agit simplement de découper un texte selon les numéros de pages de la version imprimée, cela n’a pas beaucoup de sens décourage l’établissement de liens vers les pages en question complique la tâche de l’utilisateur qui veut lire le texte en entier
Découpage - Liens internes Pour une page très longue, l’utilisation de liens internes peut faciliter le repérage des informations (sorte de table de matières locale) Permet d’établir des liens vers un point précis de la page depuis d’autres pages Pose un problème d’utilisabilité : en général, en cliquant sur l’ancre d’un lien on s’attend à atterrir sur une autre page le bouton back reste également sur la même page
Titres Un bon titre est un élément primordial c’est la première chose que l’utilisateur voit quand il charge la page il est utilisé par les moteurs de recherche pour la liste des résultats il apparaît dans les bookmarks il apparaît dans l’historique Titres qui ont du sens nom du site sujet de la page Eviter de donner le même titre à plusieurs pages
Menus Composition selon décomposition des tâches 7 +/- 2 éléments ou sous-menus Ordre alphabétique, fréquence, logique Libellés verbes uniquement ou substantifs uniquement
Sous sites Des sites de grande taille, traitant de sujets multiples, peuvent avantageusement être divisés en sous-sites permet de séparer les différents sujets peut alléger la page d’accueil générale chaque sous-site pourra avoir une page d’accueil spécifique les sous-sites peuvent avoir une présentation différente, mais il est utile de garder quand même une certaine unité créer un lien vers la page d’accueil de niveau supérieur Exemple : www.unige.ch
Outils de recherche interne Selon Nielsen plus de 50% des utilisateurs préfèrent utiliser un moteur de recherche interne à la navigation ~20% préfèrent la navigation Pour les grands sites, il est donc très utile de fournir une fonction de recherche Cette fonction devrait être accessible depuis toutes les pages du site Ne pas proposer de rechercher sur le Web en entier
Evaluation - Test Votre site ne doit pas plaire à votre directeur (ou à vos investisseurs...), il doit être utile, utilisable, fiable pour des millions d'internautes Vérification fonctionnelle le système fait-il tout ce qui est prévu ? Détection d'erreurs dans l'interface les utilisateurs arrivent-ils à faire ce qui est prévu ? efficacement ? Choix entre plusieurs alternatives de conception
Exemple : évaluation d'un site web Choisir les tâches utilisateur à tester Trouver un livre dans le catalogue Commander un livre Le livre X est-il disponible cette semaine ? Quels sont les livres écrits par Y ? Comparer le prix de deux articles
Test du site Tests techniques Testez chaque fonction au travers de scénarios de tests pré-définis Testez les temps de réponse en simulant des montées en charge Testez avec plusieurs navigateurs, plusieurs OS, plusieurs machines, plusieurs écrans ... Tests d'ergonomie Sélectionnez des utilisateurs-tests représentatifs Observez-les utiliser le site, en résistant à la tentation de les &quot;aider&quot; Prenez en compte leurs remarques
Test du site Vérifiez que tous les liens aboutissent bien sur les pages souhaitées. En particulier, peut-on revenir facilement à �  la page d'accueil? Vérifiez que toutes les images apparaissent Vérifiez et revérifiez l'orthographe! Etc.
Mise en ligne Hébergement :  Pour les sites privés, il y a des hébergeurs gratuits (malheureusement pollués par la publicité) Sinon, on peut trouver des prix raisonnables Outils pour transférer vos fichiers sur un serveur (FTP, etc.) Choisissez bien le nom de votre site pour qu'il soit facile  �  mémoriser Veillez à �   être  bien référencé dans les annuaires les plus connus Une fois le site mis en ligne, testez la version en ligne
Maintenance et mises  �  jour Si vous avez des liens avec d'autres sites, vérifiez p �é riodiquement que ces sites sont toujours accessibles Ne changez pas les noms de vos fichiers HTML! Pensez aux gens qui ont peut- � ê tre mis cette adresse dans leurs signets (favoris) Vous pouvez observer la fréquentation de vos pages gr âce   �à  des compteurs d'accès et en tirer des conclusions Vérifiez que toutes les informations que vous donnez sont  �  jour! Un site doit  � ê tre vivant! Un site qui ne subit pas de mises à �  jour r �é guli �è res et qui contient trop d'informations obsolètes sera vite délaissé par les visiteurs Gardez toujours une copie intégrale du site sur votre ordinateur personnel. On ne sait jamais ce qui peut arriver au serveur!

Conception de sites Web

  • 1.
    Conception de sitesWeb, utilisabilité et design Saïd Radhouani Université de Genève mars 2005
  • 2.
    Site Web =Système d'information 28/01/12 Données (contenus) Traitements (programmes, ...) Interface Utilisateur Pour l'utilisateur l'interface est le système
  • 3.
    L’ergonomie Web Qu'estce qui fait que certains sites web deviennent des succès et que d'autres, proposant des services similaires, sont au contraire des échecs ? Une campagne de publicité de plusieurs millions va drainer les internautes vers votre site MAIS … qu'est-ce qui va les faire revenir ? Comment fidéliser les internautes ? Il n'y a pas de secret, mais il faut que votre site possède les qualités qui vont assurer son succès ... Voici quelques éléments d'ergonomie
  • 4.
    Un site utilePermettre à l’utilisateur de faire ce qu’il a besoin de faire acheter un billet de train, trouver la description d’un appareil, … Les internautes viendront en priorité sur votre site parce que celui-ci fournit du contenu et des services présentant ces qualités : contenu à jour, qui se renouvelle régulièrement (date de dernière mise à jour) pages réservant un maximum de surface au contenu utile Réduire l'espace alloué aux éléments de navigation Eviter l'abus de bandeaux de publicité Du contenu dans chaque page Eviter les écrans d'introduction (splash-screens) inutiles
  • 5.
    Un site rapideSur le Web, les temps de réponses sont difficilement prédictibles vitesse du serveur connexion du serveur à Internet embouteillages sur Internet connexion de l’utilisateur vitesse de rendu sur la machine de l’utilisateur D’après une étude faite en 1968 par Robert Miller 0.1 seconde = temps maximum pour que l’utilisateur ait l’impression que le système répond instantanément 1 seconde = limite pour que le flot de pensée de l’utilisateur reste ininterrompu 10 secondes = limite pour garder l’attention de l’utilisateur sur le dialogue
  • 6.
    Un site rapidePlus les pages sont petites (taille de fichier), mieux c’est (inférieure à 30Ko) Eviter des tableaux imbriqués avec trop de niveaux d'imbrication Pensez au GIF ou au JPEG progressif : les images s'affichent avant d'être complètement chargées Pour un téléchargement, l'accès à une grande image, prévenir l'utilisateur en donnant la taille, ou mieux une estimation du temps de transfert en fonction de son type de connexion Les utilisateurs sont plus tolérants quant aux délais s’ils s’attendent à ce que ce soit lent  les informer quand un lien pointe vers une ressource de grande taille, potentiellement lentes à charger
  • 7.
    Un site simpleUne tentation courante dont la majorité des sites sont victimes : faire des sites magnifiques utilisant les dernières technos et riches en graphismes et en multimédia Les internautes viennent en premier pour le contenu Evitez ce qui peut nuire à la rapidité du site et ce qui le rend moins accessible ou lisible Evitez les animations GIF animés Animations Flash balise BLINK (clignotement de texte) balise MARQUEE (défilement de texte)
  • 8.
    Un site simpleEviter ce qui demande un plug-in Impose un probable téléchargement du plug-in Problème potentiel de configuration sur le poste client Eviter la &quot;high-tech&quot; pour le plaisir Les applets Java Javascript : attention aux problèmes de compatibilité CSS : la page doit être lisible même pour un navigateur ne supportant pas CSS La vidéo, le son La 3D Eviter de faire &quot;riche&quot; Trop d'images, images trop grandes Trop de couleurs Pages surchargées
  • 9.
    Un site familierComme tout le monde, l'internaute a ses habitudes. Si vous ne les prenez pas en compte, vous lui compliquez la tâche... Respect de l'apparence standard des liens Liens non-visités en bleus et liens visités en rouge Réservez ces couleurs aux liens liens toujours soulignés. Réservez le soulignement aux liens Pas de liens qui se révèlent en tant que tels que si le curseur souris passe dessus Identification du site (logo) en haut à gauche Eléments de navigation en haut et à gauche
  • 10.
    Un site universelPour que votre site soit utilisable par le maximum d'internautes, il doit être accessible par tous : Matériel, Logiciel, Personnes Fonctionne quelque soit le type de navigateur (Microsoft, Netscape, Opéra...) Fonctionne quelque soit la version du navigateur Une version met environ 2 ans à se reprendre universellement gérez au moins une version précédente (Ex. IE5 et IE4) Utilisable avec des navigateurs en mode texte Renseignez l'attribut «ALT» sur les images
  • 11.
    Un site universelFonctionne quelque soit l'écran utilisé Résolution graphique Nombre de couleurs Pensez aux autres type d'accès Accès mobile : WAP, PDA... Accessibilité pour les handicapés, particulièrement les malvoyants Pensez à fournir une version imprimable des documents ou articles mis à disposition
  • 12.
    Un site lisibleL'écran rend la lecture difficile et la lisibilité du contenu est très importante Utilisez un style direct, simple, concis Pas de style ampoulée, de phrase longue Pas de blabla marketing Utilisez les listes à points Mettre en évidence les points importants Mots importants en gras (recommandé) ou italique Titres immédiatement compréhensibles en dehors du contexte Les informations importantes doivent être en haut de la page
  • 13.
    Un site lisiblePolices et couleurs Choisir une police de caractères adaptée au Web (Verdana, Tahoma...) Choisissez des couleurs de texte et de fond donnant un bon contraste. Idéalement, noir sur fond blanc Si la couleur de fond est plus sombre que la couleur de texte, mettre les caractères en gras Si vous écrivez en blanc sur fond noir, pensez que l'utilisateur aura des difficultés à � imprimer la page Proscrire les fonds avec des motifs graphiques qui gênent la lecture PAS DE TEXTE EN MAJUSCULES, C'EST MOINS LISIBLE Défilement Limiter le défilement vertical Proscrire le défilement horizontal
  • 14.
    Un site lisibleÉvitez la fonction de clignotement (BLINK) Évitez les textes trop longs. Il n'est pas très agréable de lire sur un écran Au-delà de 500 mots, la lecture d'une page web devient pénible En cas de longs textes, cré � ez des ruptures (sous-titres, ic ô � nes) Si le texte est destiné �à � être imprimé, tout mettre sur une seule page Les pages ne contenant que deux lignes de texte sont ridicules Évitez plusieurs sujets sans rapport entre eux sur une m ê � me page (R �è gle: 1 sujet = 1 page) Évitez aussi de concevoir votre site pour une résolution d'écran bien précise. Si vous pensez que le visiteur va changer la résolution de son écran juste pour voir votre site, vous r êvez ! mauvais exemple: Killing wave ( http://membres.lycos.fr/killingwave/ )
  • 15.
    Un site ouvertVotre site est un site parmi d'autres sur le web ==> il faut vous inscrire dans ce «monde» avec harmonie D'autres sites créent des liens sur vos pages Evitez de changer les URL de vos documents Chaque page doit identifier clairement votre site (présence systématique du logo du site) Les URL de vos documents doivent si possible être explicites, sans caractères spéciaux, pour faciliter la mémorisation et éviter les erreurs Les internautes accèdent à votre site par les moteurs de recherche Mettez des mots-clés sur vos pages (méta tag keywords) Donnez des descriptions à vos pages (méta tag description) Référencez votre site dans les moteurs Votre site mène vers d'autres sites ... Vérifier périodiquement que les liens restent valides
  • 16.
    Un site navigableL'utilisateur ne doit jamais se perdre! Il devrait toujours pouvoir retourner �à la page d'accueil d'un seul clic Le principe de base du Web est la navigation ==> il faut exploiter ce principe au mieux Sur chaque page, indiquer à l'internaute où il est : Où il est dans le Web : identification claire du site et de sa fonction Où il est dans le site : indiquez la position de la page par rapport à l'arborescence principale Où il a déjà été : les liens sur les documents déjà parcourus doivent apparaître en rouge
  • 17.
    Un site navigableSur chaque page, indiquer à l'internaute où il peut aller : Eléments de navigation par rapport à l'arborescence principale : sous-rubriques, rubrique mère, rubriques &quot;soeur » Utilisez les liens titrés (ancre significative) Indiquez clairement les liens induisant un téléchargement Signalez éventuellement les liens menant à un autre site Évitez un cheminement linéaire. Un site Web n'est pas un livre. Attention toutefois � ne pas perdre le visiteur
  • 18.
    Un site navigableDonnez à l'internaute un moteur de recherche et un plan du site (quand le nombre de page devient important - 100) => Conséquence : une page doit toujours contenir au moins un lien pour la raccrocher au reste du site, par exemple en mettant en bas de la page un bouton permettant de revenir � la page qui la précède logiquement Il est possible qu'un internaute &quot;tombe&quot; sur une page via un moteur de recherche et s'y retrouve ainsi bloqué, n'ayant aucun lien sur lequel cliquer Un visiteur doit pouvoir deviner o ù � un lien le conduira avant m ê me de cliquer dessus Un mauvais exemple: les archives d'Archimède ( http://archives.arte-tv.com/hebdo/archimed/archi_f.html )
  • 19.
    Cycle de développementAnalyse des besoins Modèles de l’utilisateur et des t âches Outils Conception du système (site) Plan du futur site Interface : règles ergonomiques Noyau fonctionnel : modèles de données, traitements, etc. Réalisation Technologies : HTML, XML, Java, PHP, ASP, scripts, bases de données, serveurs, etc. Evaluation - Test Expérimentation avec des utilisateurs Mise en ligne Maintenance et mise à jour
  • 20.
    Analyse des besoins- Questions préliminaires Quel est l'objectif visé? Que souhaitez-vous présenter? � à qui s'adressera votre site? Quel nombre de pages pr �é voyez-vous de produire? Quelle doit être l'apparence des pages? Avez-vous une idée concrète ou des pages d'exemples? Qui est le responsable du projet ? S'il y en a plusieurs, quelle sera la t � â che de chacun? Est-il prévu d'apporter par la suite des modifications ou de faire des mises � jour? Qui devra s'en charger? Quel est le budget? etc.
  • 21.
    Analyse des besoinsDéfinition de la raison d’ être du système (site) Résumer en une phrase la motivation du travail Fixer des objectifs et critères de succès Modélisation de l’utilisateur des tâches Difficulté Ne pas viser trop court (limité) Ne pas viser trop long (trop général) Résoudre le bon problème
  • 22.
    Modèles de l’utilisateurClassification Novice Débutant avancé Compétent (élabore des stratégies) Efficace (choisit la bonne stratégie) Expert (agit inconsciemment et globalement) Eléments de catégorisation Compétence Dans le domaine du site En informatique Autres (langue, etc.) Biométrie (taille, âge, sexe, etc.) Fréquence d’utilisation
  • 23.
    Modèle des tâches Techniques d'identification Immersion dans l'environnement Observation Interview Suivre une personne (shadow) Faire le travail etc.
  • 24.
    Quand il n’ya pas d’utilisateur Il y en a peut-être tout de même un, chercher! Inventer un utilisateur Jeff Hawkins, the inventor of the Palm Pilot, was said to have carried a small block of wood around in his shirt pocket ... As various everyday situations arose, he would take out the block of wood and imagine how he would use the device. Sato and Salvador, interactions 6(5)
  • 25.
    Modèle des tâches Exemple : liste des t âches d’un système de messagerie écrire un message lire un message recevoir un message envoyer un message répondre à un message enregistrer un message transmettre un message joindre un document à un message gérer le carnet d’adresses …
  • 26.
    Tâches et casd'utilisation UML Emprunter un livre Réserver un livre Payer la cotisation Consulter le catalogue Enregistrer un nouvel utilisateur Chercheur Utilisateur externe Type d’utilisateur <--> Services offerts par le système (site) Bibliothécaire
  • 27.
    T âches etscénarios Client Fournisseur Institution de Carte de Crédit Acheter un article Vérifier payement Consulter catalogue Commander articles Scénario
  • 28.
    Les outils Unéditeur de pages web : Netscape Navigator (Composer), Claris HomePage, Frontpage, Adobe Golive, Dreamweaver, Web Construction Kit (shareware) Un logiciel de traitement d'images : Mac: Photoshop, GraphicConverter (shareware), PC : Paint Shop Pro Un scanner Pour des sites plus interactifs, des livres sur javascript, java, Flash, DHTML, php, etc. Et, bien sur… se documenter à � propos d'Internet
  • 29.
    Conception du sitePrécision sur les rapports entre &quot;pages Web&quot;, &quot;site Web&quot; et &quot;page d'accueil&quot; : un site Web est en quelque sorte une publication constituée d'un certain nombre de pages Web Parmi ces pages, la page d'accueil occupe une place de choix, puisqu'elle fait office de couverture pour cette publication sur le Web La visite d'un site commence généralement par cette page de démarrage La conception des pages individuelles est très importante car c’est ce que l’utilisateur voit en premier Un site bien conçu va aider les utilisateurs à trouver les pages pertinentes structure compréhensible pour l’utilisateur navigation Il ne faut pas que l’utilisateur ait besoin d’un mode d’emploi pour utiliser le site
  • 30.
    Faire un plandu futur site Structurez, hiérarchisez votre site! Faites sur papier un schéma de la structure du site Reliez les pages par des flèches La maintenance en sera plus aisée et votre site aura une certaine logique qui facilitera le surf une (petite) partie du sché � ma du site du Lycé � e cantonal de Porrentruy Source : http://www.apprendre-en-ligne.net/
  • 31.
    Faire un plandu futur site Faites des croquis de l'aspect qu'auront les pages avant de vous lancer dans la réalisation Sur votre ordinateur, vous regrouperez dans des dossiers les pages et images appartenant à � un m ême sujet vous devrez éviter les longs noms de dossier, car cela rallongera l'adresse URL de la page Source : http://www.apprendre-en-ligne.net/
  • 32.
    La page d’accueilest très importante Vitrine du site Devrait contenir : logo + nom de l’organisation/entreprise/association => permet à l'internaute tout de suite o ù � il se trouve exemple: www.cff.ch indications sur ce que le site propose liens vers parties principales éventuellement une partie « actualité » selon le site
  • 33.
    La page d'accueilest très importante Devrait être relativement courte si l’utilisateur doit faire défiler le texte, il aura de la peine à avoir une vue d’ensemble de ce qui est disponible Ne devrait pas dire uniquement « le site est en construction » Elle doit être attrayante graphiquement, rapide, sans fautes d'orthographe et elle doit donner une bonne idée du contenu du site Mettez les informations les plus importantes en haut de la page
  • 34.
    La page d'accueilest très importante Évitez les pages d'accueil tellement charg �é es que l'on ne sait plus o ù donner de la t ê � te Appelez toujours la page d'accueil &quot;index.html&quot;, cela raccourcit l'adresse URL. En effet, la page index.html est choisie par dé � faut, ce qui veut dire que l'on peut supprimer le &quot;index.html&quot; �à la fin d'une adresse Il est utile de mettre sur la page d'accueil une table des mati �è res et/ou un moteur de recherche priv �é (par exemple www.x-recherche.com ) Évitez d'ouvrir automatiquement des fen êtres supplémentaires pour la pub ou autre Évitez les pages produisant automatiquement des sons. Il est pr �é fé � rable de laisser au visiteur le choix d'entendre la musique ou non mauvais exemple : http://www.philagora.net/occitan/occnoel.htm
  • 35.
    « Splash screens » Certainssites font d’abord apparaître une image ou une animation, avant d’afficher la page d’accueil Ce genre de technique est diversement apprécié connexion lente pas le plugin nécessaire A n’utiliser que dans certains cas pour des sites de style plutôt récréatif pour des entreprises du domaine « graphisme », pour montrer un exemple des technologies proposées pour pr �é venir le visiteur que le contenu du site peut le choquer (sites é � rotiques), proposer une langue, permettre de choisir entre une version rapide et une version lente A éviter surtout dans des sites de référence que les utilisateurs sont appelés à utiliser souvent Deux exemples: www.tunisie-foot.com et www.loups-garous.com
  • 36.
    Page d’accueil vs.pages internes La page d’accueil correspond un peut à la couverture d’un magazine  peut être assez tape-à-l’œil Les pages intérieures d’un site seront plus basées sur le contenu les utilisateurs peuvent ne pas avoir passé par la page d’accueil => ajouter des informations d’identifications (ex: logo et nom du site)
  • 37.
    Répartition de l’espacedisponible L’espace de l’écran est rempli avec différents éléments la fenêtre du navigateur avec ses différentes barres d’outils barres de navigations dans la page Web éventuellement : bannières publicitaires contenu ! L’utilisateur est principalement intéressé par le contenu Selon Nielsen: Contenu : minimum 50% de l’espace (si possible  80 %) Navigation : maximum 20% (sur une page intérieure)
  • 38.
    Liens Types deliens Dans le texte : « plus d’informations sur ce point particulier » utile d’ouvrir la destination dans une autre fenêtre pour permettre à l’utilisateur de poursuivre la lecture du passage Structurels : pour naviguer dans la structure du site Associatifs : « voir également », pour indiquer des ressources similaires ou ayant un lien avec la page courante Eviter les pages « cul de sac » en ajoutant au minimum un lien vers la page d’accueil
  • 39.
    Liens Texte del’ancre explicite (pas « cliquez ici » !) pour l’utilisateur pour certains moteurs de recherche comme Google Longueur de l’ancre (2-4 mots) Explication du lien pour éviter à l’utilisateur d’activer le lien juste pour voir à quoi il correspond Titre du lien permet de faire apparaître une petite étiquette quand l’utilisateur passe le curseur sur l’ancre <A HREF=&quot;http://cui.unige.ch&quot; TITLE=&quot;Centre Universitaire d ’Informatique&quot;>CUI</A>
  • 40.
    Liens Couleur desliens En HTML, il est très facile de changer la couleur des liens <BODY LINK=... VLINK=... ALINK=...> Problème pour l’utilisateur : que signifient ces couleurs Dans certains sites, la même couleur est utilisée pour les liens non visités et les lien visités esthétiquement, c’est parfois plus joli pour l’utilisateur, c’est une perte d’information Lien ayant pour ancre le nom d’une personne => ambigu Mailto ? Page personnelle ?
  • 41.
    Liens Liens versautre site Rien ne distingue visuellement les liens internes à un site des liens pointant vers d’autres sites On peut les distinguer en écrivant une petite annotation dans la page Utilisation d’un titre de lien
  • 42.
    Liens Liens quiviennent de l’extérieur Bonne source de trafic pour le site (publicité gratuite) Nécessite des URLs stables pour éviter des déceptions Les liens de l’extérieur pointent souvent vers des pages individuelles et non vers la page d’accueil chaque page du site devrait permettre d’aller vers la page d’accueil chaque page devrait correspondre à une unité d’information relativement indépendante (pour éviter de se retrouver au milieu d’un texte)
  • 43.
    Frames Casse lemodèle original du Web, où une page = ce que l’utilisateur voit à l’écran une unité de navigation une URL une unité de stockage (mis à part les images et autres objets insérés) A n’utiliser qu’en cas de nécessité Impression plus difficile Problèmes avec les moteurs de recherche certains n’indexent pas les frames liste des résultats pointent parfois vers une partie du frame seulement
  • 44.
    Frames Discutable dupoint de vue des droits d’auteur peut donner l’impression qu’un document fait partie d’un site alors que ce n’est pas le cas Utiles pour Naviguer à l’intérieur d’une page très longue ex: http://www.unige.ch/eti/reglements/regetudes-main.html Une page qui commente d’autres page ex: pour un commentaire sur l’utilisabilité de pages
  • 45.
    Typographie Alignement Depréférence aligné à gauche (y compris les titres et sous-titres) pour une meilleure lisibilité Utiliser les feuilles de style Espacement Les utilisateurs ont tendance à ne pas lire le texte en détail => espace entre les paragraphes bienvenus Il est aussi possible d’indenter le texte (feuille de style)
  • 46.
    Typographie Police decaractères sur papier, les polices avec empattement (serif) sont considérées comme les plus lisibles la faible résolution des écrans par rapport à l’impression sur papier fait que les empattement ne sont pas très nets, surtout pour des caractères de petite taille  il peut être avantageux d’utiliser une police comme Verdana, Trebuchet, Arial ou Georgia en tous les cas, limiter le nombre de polices différentes dans la même page proposer une liste de polices plutôt que police seule Couleurs s’assurer qu’il y a un bon contraste entre le texte et la couleur de fond éviter les couleurs fatigantes ou à problème
  • 47.
    Typographie Mise enévidence gras : en général bon choix italique : à utiliser avec modération car peu lisible à l’écran souligné : peut être confondu avec un lien texte en couleur : peut également être confondu avec un lien, surtout si les mots colorés sont à l’intérieur du texte Majuscules : fatigue le lecteur si utilisé en grande quantité raison : on reconnaît les mots en parcourant la moitié supérieure des mots indentation et espacement : efficaces
  • 48.
    Découpage Il nefaut obligatoirement simplifier le contenu. S’il y a beaucoup de choses à dire, il faut les dire Une bonne technique peut être de découper le texte en plusieurs pages le découpage devrait faire en sorte que chaque nouvelle page ait une certaine unité de sens s’il s’agit simplement de découper un texte selon les numéros de pages de la version imprimée, cela n’a pas beaucoup de sens décourage l’établissement de liens vers les pages en question complique la tâche de l’utilisateur qui veut lire le texte en entier
  • 49.
    Découpage - Liensinternes Pour une page très longue, l’utilisation de liens internes peut faciliter le repérage des informations (sorte de table de matières locale) Permet d’établir des liens vers un point précis de la page depuis d’autres pages Pose un problème d’utilisabilité : en général, en cliquant sur l’ancre d’un lien on s’attend à atterrir sur une autre page le bouton back reste également sur la même page
  • 50.
    Titres Un bontitre est un élément primordial c’est la première chose que l’utilisateur voit quand il charge la page il est utilisé par les moteurs de recherche pour la liste des résultats il apparaît dans les bookmarks il apparaît dans l’historique Titres qui ont du sens nom du site sujet de la page Eviter de donner le même titre à plusieurs pages
  • 51.
    Menus Composition selondécomposition des tâches 7 +/- 2 éléments ou sous-menus Ordre alphabétique, fréquence, logique Libellés verbes uniquement ou substantifs uniquement
  • 52.
    Sous sites Dessites de grande taille, traitant de sujets multiples, peuvent avantageusement être divisés en sous-sites permet de séparer les différents sujets peut alléger la page d’accueil générale chaque sous-site pourra avoir une page d’accueil spécifique les sous-sites peuvent avoir une présentation différente, mais il est utile de garder quand même une certaine unité créer un lien vers la page d’accueil de niveau supérieur Exemple : www.unige.ch
  • 53.
    Outils de rechercheinterne Selon Nielsen plus de 50% des utilisateurs préfèrent utiliser un moteur de recherche interne à la navigation ~20% préfèrent la navigation Pour les grands sites, il est donc très utile de fournir une fonction de recherche Cette fonction devrait être accessible depuis toutes les pages du site Ne pas proposer de rechercher sur le Web en entier
  • 54.
    Evaluation - TestVotre site ne doit pas plaire à votre directeur (ou à vos investisseurs...), il doit être utile, utilisable, fiable pour des millions d'internautes Vérification fonctionnelle le système fait-il tout ce qui est prévu ? Détection d'erreurs dans l'interface les utilisateurs arrivent-ils à faire ce qui est prévu ? efficacement ? Choix entre plusieurs alternatives de conception
  • 55.
    Exemple : évaluationd'un site web Choisir les tâches utilisateur à tester Trouver un livre dans le catalogue Commander un livre Le livre X est-il disponible cette semaine ? Quels sont les livres écrits par Y ? Comparer le prix de deux articles
  • 56.
    Test du siteTests techniques Testez chaque fonction au travers de scénarios de tests pré-définis Testez les temps de réponse en simulant des montées en charge Testez avec plusieurs navigateurs, plusieurs OS, plusieurs machines, plusieurs écrans ... Tests d'ergonomie Sélectionnez des utilisateurs-tests représentatifs Observez-les utiliser le site, en résistant à la tentation de les &quot;aider&quot; Prenez en compte leurs remarques
  • 57.
    Test du siteVérifiez que tous les liens aboutissent bien sur les pages souhaitées. En particulier, peut-on revenir facilement à � la page d'accueil? Vérifiez que toutes les images apparaissent Vérifiez et revérifiez l'orthographe! Etc.
  • 58.
    Mise en ligneHébergement : Pour les sites privés, il y a des hébergeurs gratuits (malheureusement pollués par la publicité) Sinon, on peut trouver des prix raisonnables Outils pour transférer vos fichiers sur un serveur (FTP, etc.) Choisissez bien le nom de votre site pour qu'il soit facile � mémoriser Veillez à � être bien référencé dans les annuaires les plus connus Une fois le site mis en ligne, testez la version en ligne
  • 59.
    Maintenance et mises � jour Si vous avez des liens avec d'autres sites, vérifiez p �é riodiquement que ces sites sont toujours accessibles Ne changez pas les noms de vos fichiers HTML! Pensez aux gens qui ont peut- � ê tre mis cette adresse dans leurs signets (favoris) Vous pouvez observer la fréquentation de vos pages gr âce �à des compteurs d'accès et en tirer des conclusions Vérifiez que toutes les informations que vous donnez sont � jour! Un site doit � ê tre vivant! Un site qui ne subit pas de mises à � jour r �é guli �è res et qui contient trop d'informations obsolètes sera vite délaissé par les visiteurs Gardez toujours une copie intégrale du site sur votre ordinateur personnel. On ne sait jamais ce qui peut arriver au serveur!

Notes de l'éditeur

  • #5 On a vu l’autre fois le critère de l’utilisabilité.
  • #36 Récréatif -&gt; loisir
  • #46 Indenter : Décaler une partie de texte à droite ou à gauche, par rapport au texte environnant.
  • #47 L&apos;empattement d&apos;une lettre est le trait sur lequel repose la lettre.