Conception de sites Web

  • 1,578 views
Uploaded on

Website, Usability, Design

Website, Usability, Design

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,578
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
74
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • On a vu l’autre fois le critère de l’utilisabilité.
  • Récréatif -> loisir
  • Indenter : Décaler une partie de texte à droite ou à gauche, par rapport au texte environnant.
  • L'empattement d'une lettre est le trait sur lequel repose la lettre.

Transcript

  • 1. Conception de sites Web, 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'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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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)
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 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 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
  • 16. 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
  • 17. 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
  • 18. 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 )
  • 19. 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
  • 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 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
  • 22. 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
  • 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’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)
  • 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 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
  • 27. 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
  • 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 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
  • 30. 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/
  • 31. 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/
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. « 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
  • 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’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)
  • 38. 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
  • 39. 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>
  • 40. 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 ?
  • 41. 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
  • 42. 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)
  • 43. 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
  • 44. 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
  • 45. 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)
  • 46. 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
  • 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 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
  • 49. 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
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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
  • 56. 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
  • 57. 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.
  • 58. 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
  • 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!