59
Conception de sites Web, utilisabilité et design Saïd Radhouani Université de Genève mars 2005

Conception de sites Web

Embed Size (px)

DESCRIPTION

Website, Usability, Design

Citation preview

Page 1: Conception de sites Web

Conception de sites Web, utilisabilité et design

Saïd RadhouaniUniversité de Genèvemars 2005

Page 2: Conception de sites Web

10/04/23 2

Site Web = Système d'information

Données(contenus)

Traitements(programmes, ...)

Interface

Utilisateur

Pour l'utilisateur l'interface est le système

Page 3: Conception de sites Web

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

Page 4: Conception de sites Web

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

Page 5: Conception de sites Web

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

Page 6: Conception de sites Web

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

Page 7: Conception de sites Web

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)

Page 8: Conception de sites Web

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

Page 9: Conception de sites Web

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

Page 10: Conception de sites Web

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

Page 11: Conception de sites Web

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

Page 12: Conception de sites Web

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

Page 13: Conception de sites Web

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

Page 14: Conception de sites Web

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/)

Page 15: Conception de sites Web

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

Page 16: Conception de sites Web

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

Page 17: Conception de sites Web

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

Page 18: Conception de sites Web

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)

Page 19: Conception de sites Web

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

Page 20: Conception de sites Web

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.

Page 21: Conception de sites Web

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

Page 22: Conception de sites Web

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

Page 23: Conception de sites Web

23

Modèle des tâches

Techniques d'identification

Immersion dans l'environnement

Observation

Interview

Suivre une personne (shadow)

Faire le travail

etc.

Page 24: Conception de sites Web

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)

Page 25: Conception de sites Web

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 …

Page 26: Conception de sites Web

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

ChercheurUtilisateur externe

Type d’utilisateur <--> Services offerts par le système (site)

Bibliothécaire

Page 27: Conception de sites Web

27

Tâches et scénarios

Client

Fournisseur

Institution deCarte de Crédit

Acheter un article

Vérifier payement

Consulter catalogue

Commander articles

Scénario

Page 28: Conception de sites Web

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

Page 29: Conception de sites Web

29

Conception du site

Précision sur les rapports entre "pages Web", "site Web" et "page d'accueil" :

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

Page 30: Conception de sites Web

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 PorrentruySource : http://www.apprendre-en-ligne.net/

Page 31: Conception de sites Web

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/

Page 32: Conception de sites Web

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

Page 33: Conception de sites Web

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

Page 34: Conception de sites Web

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 "index.html", 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 "index.html" �à 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

Page 35: Conception de sites Web

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

Page 36: Conception de sites Web

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)

Page 37: Conception de sites Web

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)

Page 38: Conception de sites Web

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

Page 39: Conception de sites Web

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="http://cui.unige.ch" TITLE="Centre Universitaire

d ’Informatique">CUI</A>

Page 40: Conception de sites Web

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ésesthétiquement, c’est parfois plus jolipour l’utilisateur, c’est une perte d’information

Lien ayant pour ancre le nom d’une personne => ambigu Mailto ? Page personnelle ?

Page 41: Conception de sites Web

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

Page 42: Conception de sites Web

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)

Page 43: Conception de sites Web

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

Page 44: Conception de sites Web

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 pageex: pour un commentaire sur l’utilisabilité de pages

Page 45: Conception de sites Web

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)

Page 46: Conception de sites Web

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

Page 47: Conception de sites Web

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

Page 48: Conception de sites Web

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

Page 49: Conception de sites Web

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

Page 50: Conception de sites Web

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

Page 51: Conception de sites Web

51

Menus

Compositionselon décomposition des tâches7 +/- 2 éléments ou sous-menus

Ordrealphabétique, fréquence, logique

Libellésverbes uniquement ou substantifs uniquement

Page 52: Conception de sites Web

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

Page 53: Conception de sites Web

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

Page 54: Conception de sites Web

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

Page 55: Conception de sites Web

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

Page 56: Conception de sites Web

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

"aider" Prenez en compte leurs remarques

Page 57: Conception de sites Web

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.

Page 58: Conception de sites Web

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

Page 59: Conception de sites Web

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!