Chapitre 1 : Conception de sites Web

Présentation au sujet: "Chapitre 1 : Conception de sites Web"— Transcription de la présentation:

1 Chapitre 1 : Conception de sites Web
M2-MIAGE Joëlle Coutaz, prof. UJF, équipe IIHM Alexandre Demeure, MdC UJF, équipe PRIMA Laboratoire d’Informatique de Grenoble (LIG)

2 Objectifs du chapitre Ce chapitre présente
une méthode les principes élémentaires d’ergonomie applicables à la conception de sites Web Les étudiants devraient éviter les erreurs de conception les plus courantes

3 Plan du chapitre Introduction
Etape définition (expression des requis) Etape conception

4 Introduction : Spécificité du Web …
Variabilité des ressources. Ce qui est rapide et lisible sur la station du concepteur ne l'est pas nécessairement dans le contexte d'utilisation. Une démo en interne ne suffit pas Dispositifs physiques : station de travail, assistant personnel, électroménager, automobile, salle d'immersion Bande passante réseaux Grande diversité des utilisateurs Difficulté de cerner l'utilisateur (tout public, internationalisation) Difficulté d'être accessible à tous (cas des mal-voyants par exemple, voir travaux W3C)

5 Introduction : Spécifité du Web …
Nécessité d'un développement rapide : cycle de développement extrêmement court Nécessité de fidéliser le visiteur (“sticky web site”) Raisons de revenir sur un site (enquête auprès d’utilisateurs) pour 75%, la qualité du contenu pour 66%, la facilité d’utilisation pour 58%, la vitesse de téléchargement

6 Introduction : Erreurs les plus fréquentes
Architecture de l’information Structurer le site à l’image de la structure interne de l’entreprise Au contraire, il convient de structurer le site à l’image de la tâche utilisateur Conception des pages Créer des pages somptueuses mais inefficaces (tps de réponse, bande passante) Au contraire, rester réaliste même si le résultat est moins « cool » Rédaction des pages Ecrire selon le style linéaire d’un ouvrage Au contraire, adopter un style qui va à l’essentiel suivi par un « pour en savoir plus » : principe de la pyramide inversée Stratégie des liens Considérer que votre site est le seul qui compte Au contraire, référencer les sites en relation avec le sujet Programmer avant de concevoir La conception de site Web, c'est plus que l'écriture de code c'est plus que la création de belles images animées

7 Introduction : en résumé
La valeur du contenu et sa structure sont centrales Un bon contenu => connaissance des besoins informationnels de l'utilisateur cible Une bonne structure de contenu => connaissance de la tâche de l'utilisateur et du contexte de réalisation de cette tâche Une bonne connaissance de l'utilisateur et de sa tâche implique une analyse de terrain ("Talking to users is not a luxury") La conception de site Web n’échappe pas à la règle On ne peut pas se dispenser de méthode !

8 Processus de conception : vue générale
Cahier des charges Dossier de conception Conception IHM abstraite IHM concrète Analyse de la concurrence

9 Organisation de l’équipe
Chef de projet Coordonne le projet, prend les décisions en cas de conflit Auteur Fournit le contenu informationnel Concepteur d'interaction Conçoit l'architecture interactionnelle du site, l'organisation des pages Développeur Est chargé de la mise en œuvre technique Expert en utilisabilité Aide à la conception du site (enquêtes) et à son évaluation Graphiste Produit les éléments graphiques, effets multimédia Règle clef : communiquer et former

10 Production du CDC Pour ECOM, le CDC doit impérativement inclure les spécifications suivantes Les objectifs généraux du site et les critères de succès Les utilisateurs cibles Les spécifications techniques de la (des) plate(s)-forme(s) d'accueil (Les requis non fonctionnels) La description des tâches les plus importantes (modèle de tâche) La modélisation des concepts du domaine La définition des scénarios / use case pertinents

11 Objectifs généraux du site
Indication explicite des motivations des bénéfices attendus (en accord avec le client) Pour tout objectif : au moins un critère de succès, si possible quantifié Améliorer la réussite des étudiants de 10% Permettre aux étudiants de suivre le cours à distance à 80% du temps Améliorer les ventes d’un site marchand de 20% Améliorer la connaissance d’une marque de 10% auprès des moins de 30 ans Définition des priorités (must, should, may) Intérêt : résolution des conflits (contraintes contradictoires pouvant survenir au cours du développement) de manière rationnelle

12 Production du CDC Le CDC doit impérativement inclure les spécifications suivantes Les objectifs généraux du site et les critères de succès Les utilisateurs cibles Les spécifications techniques de la (des) plate(s)-forme(s) d'accueil Les requis non fonctionnels La description des tâches les plus importantes

13 Les utilisateurs cibles
Identifier les différentes catégories d'utilisateurs Pour cela : interviews, observation sur le terrain “Talking to users is not a luxury, it's a necessity" (Gould), "Early and continual focus on the user" (Schneiderman), "User centered design" (D. Norman)

14 Les utilisateurs cibles
Un bon questionnaire : pas si simple! La 1ere question est essentielle (facile à comprendre, facile à répondre - ne pas offenser la personne, intéressante, en liaison avec les objectifs du questionnaire) Activités dans la vie courante en relation avec le sujet du site (ses achats ds la vie courante) Activités sur Internet (ses achats sur Internet) Questions démographiques à la fin (non pas en 1er) Pas deux questions déguisées en une seule ou ambigües (NON : satisfait des performances et de l’utilisabilité du systeme?) Proposer des options de réponses (échelle de Likert), mais pas de quantificateurs vagues NON : jamais, rarement, quelquefois, souvent OUI : pas du tout, 1-3 fois par mois, plus d’une fois par jour, autre Tester le questionnaire

15 Les utilisateurs cibles
Si plusieurs catégories d'utilisateurs classement par ordre d'importance (1ère classe, 2ème classe, etc.). Intérêt de la catégorisation Facilite la résolution de conflits pouvant survenir au cours du développement, Permet d'identifier les utilisateurs représentatifs pour les scénarios et les tests d'utilisabilité

16 Les utilisateurs cibles
Eléments de catégorisation d'un groupe d'utilisateurs Ordre d'importance Compétence (cf Rasmussen) dans le domaine d'information du site en informatique (connaissance du Web, utilisation de stations de travail), Biométrie : taille, âge, sexe, déficiences (ex : 8% des hommes sont daltoniens), Milieu socioculturel : niveau de formation, nationalité, géographie, Fréquence envisagée d'utilisation du site : fréquent, occasionnel, rare.

17 Production du CDC Le CDC doit impérativement inclure les spécifications suivantes Les objectifs généraux du site et les critères de succès Les utilisateurs cibles Les spécifications techniques de la (des) plate(s)-forme(s) d'accueil Les requis non fonctionnels La description des tâches les plus importantes La modélisation des concepts du domaine

18 Spécifications techniques
Définition du matériel et du logiciel de la plate-forme Expression des dépendances entre matériel et logiciels aujourd ’hui demain (évolution, maintenance) Exemple : différence de comportement des butineurs Aspects sont souvent implicites (pb en cas de conflit)

19 Spécifications techniques
Définition du matériel et du logiciel de la plate-forme Système d'exploitation : Windows, Unix, MacOs Ordinateur : station de travail, assistant personnel, téléphone, automobile, etc. Ecran : taille et résolution Browser(s) (butineur) utilisés, version html, version Java, etc. Dépendance aux changements de version de Browser : au cours du développement, après la livraison Performances : temps de chargement des pages, etc. Sécurité Le site est-il un sous-site d'un site existant ? Si oui, veiller à son intégration (héritage de tâches, de guides de style).

20 Production du CDC Le CDC doit impérativement inclure les spécifications suivantes Les objectifs généraux du site et les critères de succès Les utilisateurs cibles Les spécifications techniques de la (des) plate-forme(s) d'accueil Les requis non fonctionnels La description des tâches les plus importantes La modélisation des concepts du domaine La définition des scénarios de conception

21 Requis non fonctionnels …
Facteurs qualité de McCall

22 Requis non fonctionnels …
Objectifs qualité quantifiés centrés utilisateur Exemples (cf. référentiel de Scapin-Bastien) L'utilisateur doit toujours percevoir ce qu'il y a d'autre à explorer L'utilisateur doit toujours être capable de se situer (ex. quel chap. d'un cours), La recherche d'information doit être efficace (ex, en moins de 3 clics pour les tâches fréquentes) Au moins 95% des utilisateurs doivent être capables de percevoir ce qu'il y a d'autre à explorer Au moins 75% des utilisateurs doivent trouver l'information plus rapidement que sur le site X concurrent. Les utilisateurs nouveaux venus devront trouver l’information recherchée en moins de 2 mn; users experts (après 5 ou 6 visites) en moins de 30 sec. Pour une tâche donnée, les users iront visité pas plus de 3 pages « incorrectes » Au moins 75% des users qui mettent qq chose ds le panier, achèteront le produit Au moins 50% des users enregistrés visiteront le site au moins une fois par mois

23 Requis non fonctionnels …
Spécifier les "adjectifs clés" du site identifiés avec le client et les utilisateurs représentatifs. Ces qualités permettent de guider les choix subjectifs de conception tels que le style pictural, les couleurs. Exemple : "attrayant", "professionnel", "innovant". Si le site est un sous-site, quelles sont les dépendances en matière de charte de style, de services ?

24 Production du CDC Le CDC doit impérativement inclure les spécifications suivantes Les objectifs généraux du site et les critères de succès Les utilisateurs cibles Les spécifications techniques de la (des) plate-forme(s) d'accueil Les requis non fonctionnels La description des tâches les plus importantes La modélisation des concepts du domaine La définition des scénarios de conception

25 Procédure : un ensemble de sous-tâches liées par
Modèle de tâche … Tâche un but (état souhaité) procédure pour atteindre le but Procédure : un ensemble de sous-tâches liées par des relations de composition des relations temporelles Tâche élémentaire : tâche décomposable en actions physiques Action physique : opération sur un dispositif d’entrée/sortie qui provoque un changement d’état du dispositif clic souris ou clavier, déplacement de souris, énoncé vocal, etc. production d’un bip, affichage d’un cercle, etc.

26 Modèle de tâche ... Une structure arborescente Décoration des nœuds
Nœud : un but Sous-arbre : procédure pour atteindre le but Décoration des nœuds concepts du domaine = objets référencés (param. d’E/S, var. globales) préconditions (conditions d’entrée) postconditions (but) fréquence, complexité, criticité (niveau de danger, caractère irrévocable, sécurité ->solution technique et peiement sécurisé, par ex., protocole SSL (Secure socket Layer) pour sécuriser le protocole HTTP = https contraintes temporelles (durée maximale) acteur responsable de l’éxecution de la tâche (utilisateur et/ou système) autres (selon le domaine, must-should-may)

27 Modèle de tâches et notations
Formalismes et notations UAN CTT HTA MAD Use cases et diagrammes de séquences d’UML Ma notation : arbre et toutes ses décorations + opérateurs UAN

28 Modèle de tâches : ma notation
Utiliser le site * * * Gérer panier Gérer compte Trouver 1 produit Trouver 1 liste de produits intéressants * ; * * ; Choisir 1 produit Agir sur le produit ou ou Mettre ds panier Rechercher Par mots-clefs Voir en détail Donner avis Rechercher Ds le catalogue Rechercher Parmi les bons plans Voir les avis Décorations : pour chaque tâche, spécifier les concepts du domaine (diagrammes de classe UML) et les ordonner par ordre d’importance Tâches : Must, Should, May, Fréquence, Criticité, Optionalité, Répétition

29 Modèle de tâches : ma notation
Gérer panier * Traiter 1 article Passer cmd Vider panier * * ; Choisir 1 produit Agir sur le produit ou Supprimer Voir en détail Modifier Q

30 Modèle de tâche et notations : Use cases (UML)
Use case diagram et sequence diagram (diagramme de séquence) Le diagramme de séquence (OK pour tâches feuilles) décrit le comportement (y compris les cas d’exception) d’un nœud de use case exprime les concepts du domaine en entrée et en sortie (indique les concepts du domaine à rendre observables en sorte de réduire les distances d’exécution et d’évaluation - au sens de Norman)

31 Les tâches : comment s ’y prendre?
Exploration de la concurrence (évaluation summative) Sondages Focus group, personna, etc.

32 Les tâches : comment s ’y prendre?
Sondage exploratoire La méthode la moins chère Approche serveur web (mais les réponses doivent venir d’utilisateurs représentatifs) en face à face (bien choisir le lieu, heure, etc.) Questionnaire (voir plus haut à propos de l’utilisateur cible)

33 Production du CDC Le CDC doit impérativement inclure les spécifications suivantes Les objectifs généraux du site et les critères de succès Les utilisateurs cibles Les spécifications techniques de la (des) plate-forme(s) d'accueil Les requis non fonctionnels La description des tâches les plus importantes La modélisation des concepts du domaine La définition des scénarios de conception

34 Analyse du contenu Identifier les unités d'information
ces unités doivent satisfaire les objectifs du site techniques d’identification semblables à celles de l’analyse de tâche Grouper les unités en collections. Si besoin, utiliser la technique de tri de fiches Ecrire un sujet par fiche. Demander à trois ou quatre utilisateurs représentatifs (ou quelqu’un d’autre) de constituer ensemble les groupes. Technique du "thinking aloud" : les choix doivent être justifiés ; essayer d'identifier les raisons de conflit et de convergence. Etiqueter en quelques mots chaque groupe de fiches de manière non ambiguë Itérer jusqu'à ce qu'il n'y ait plus de fiches à classer et jusqu'à ce que l'intersection entre les groupes soit vide Produire les diagrammes de classes UML

35 Analyse du contenu Exemple : Polytech’

36 Analyse du contenu Exemple : UFR IMA

37 Production du CDC Le CDC doit impérativement inclure les spécifications suivantes Les objectifs généraux du site et les critères de succès Les utilisateurs cibles Les spécifications techniques de la (des) plate-forme(s) d'accueil Les requis non fonctionnels La description des tâches les plus importantes La modélisation des concepts du domaine La définition des scénarios

38 Les scénarios de conception
Un scénario (nominal/exception) décrit une situation représentative d'accomplissement de tâches avec le futur système Couverture tâches centrales fréquentes, et/ou critiques, pour chaque catégorie d'utilisateurs pour les contextes d'utilisation les plus fréquents A ce stade du développement, le scénario doit exprimer Le contexte général d'usage (situation professionnelle ou domestique) La valeur ajoutée en utilisant le système Les supports (PC, PDA) mais il ne doit pas faire référence aux actions physiques (pas de clic souris!)

39 Processus de conception : vue générale
Cahier des charges Dossier de conception Conception IHM abstraite IHM concrète Analyse de la concurrence

40 Production du dossier de conception
Concevoir l’IHM Abstraite Concevoir l’IHM Concrète Concevoir la présentation de la page d'accueil Concevoir la présentation des autres pages En parallèle, concevoir le noyau fonctionnel (NF) prototypage et évaluation formative

41 Du modèle de tâche à l’IHM abstraite
Tâche -> espace de travail qui doit rendre accessibles les concepts du domaine nécessaires à la tâche Relations entre tâches -> enchaînements entre les espaces de travail T1 T1 T2 T1 T2 T1 T2 T1 T2 T2 T2 T2 T1 T* = T1 ; T2 T* = T1 | T2 T = T1 <->T2

42 Du modèle de tâche à l’IHM abstraite
Pour tout espace de travail : inscrire les concepts du domaine pertinents Utiliser les concepts du domaine en décoration des tâches (les var psychologiques) Ou bien les concepts/attributs spécifiés dans les diagrammes de séquences (use Case, diagrammes de classe) Regroupement d’espaces de travail (raccourcir les trajectoires d’interaction) Tâches fréquentes accessibles d’emblée (ds “page” d’accueil) Vérifier la conformité des enchaînements avec le modèle de tâche (distance sémantique au sens de Norman) Ajoût des services d’utilité publique (couper, coller, undo/redo, valeurs par défaut, aide) ? UFR XX Filières Emploi du temps Services aux etudiants Stages … RICM1 RICM2 DESS-GI …. Emploi du temps Xx Yy Zz IHMA ou IHM “fil de fer”

43 Du modèle de tâche à l’IHM abstraite
Pour tout espace de travail : inscrire les concepts du domaine pertinents Utiliser les concepts du domaine en décoration des tâches (les var psychologiques) Ou bien les concepts/attributs spécifiés dans les diagrammes de séquences (use Case, diagrammes de classe) Regroupement d’espaces de travail (raccourcir les trajectoires d’interaction) Tâches fréquentes accessibles d’emblée (ds “page” d’accueil) Vérifier la conformité des enchaînements avec le modèle de tâche (distance sémantique au sens de Norman) Ajoût des services d’utilité publique (couper, coller, undo/redo, valeurs par défaut, aide) ?

44 Production du dossier de conception
Concevoir l’IHM Abstraite Concevoir l’IHM Concrète Concevoir la présentation de la page d'accueil Concevoir la présentation des autres pages prototypage et évaluation formative

45 IHMC-Mise en page Communication visuelle efficace :
Simplicité : ni plus, ni moins (s’appuyer sur l’IHMA- fil de fer) Cohérence : unité d’ensemble du site (commencer par la page d’accueil, puis les autres pages) Focus : être attentif aux points clefs de chaque page Ne pas oublier l’évolution du site (un bon concepteur sait envisager l’avenir) Dessiner un canevas (IHM semi-concrète) Page d’accueil, puis autres pages-clefs correspondant aux tâches fréquentes/critiques/must (par ex., panier, bon de commande, etc.) Analyser l’existant

46 IHMC-Mise en page Quelques principes de la théorie «Gestalt » (1920)
Notre système visuel construit des structures fondées sur les attributs visuels suivants Proximité Ressemblance, différence (éléments qui émergent du reste) Points de jonction ou de contiguïté Couleur, forme, mouvement

47 IHMC-Mise en page Quelques règles générales (théorie Gestalt, ICS)
Structure verticale : Essayer de réduire le nombre de colonnes (3 ou 4). Si la page a l’air encombré, vérifier les alignements verticaux Bon Moins bon

48 IHMC-Mise en page Quelques règles générales (suite)
Limiter le nombre d’éléments émergents sinon distraction, sauf cas précis Bon : items en caractères gras (résultat recherche “usability”) OK (idem pour le panier) Plutôt mauvais

49 IHMC-Mise en page Quelques règles générales (suite)
Disposition symétrique (site de Tulane) Équilibre naturel Facile à implémenter Plus facile à modifier Disposition asymétrique (site UJF,ou ci-contre) Originalité Moins facile pour site dynamique

50 IHMC-Mise en page Le problème de la largeur de page
Largeur variable : on ne contrôle pas toujours la mise en page, lecture rendue difficile Largeur fixe : on ne tire pas parti des possibilités des grands écrans Combinaison des deux Imposer une largeur minimale pour certaines parties de la page (texte principal) et permettre l’agrandissement de la page

51 IHMC -Contenu des pages
Métrique générale pour le contenu de page Contenu informationnel : entre 50% et 80% de la page Interacteurs de navigation : 20% au plus (sauf page d’accueil)

52 IHMC-Contenu des pages
Contenu informationnel Content is number one ! Chaque page doit offrir un contenu Utile Efficace Compréhensible … pour les utilisateurs cibles

53 IHMC-Contenu des pages
Contenu informationnel Utilitité L’étape amont d’analyse est déterminante Se souvenir que l’utilisateur se pose ces questions : What’s in it for me? How does this help my problem?

54 IHMC-Contenu des pages
Contenu informationnel utile : Contre-exemple Pixels perdus

55 IHMC-Contenu des pages
MapQuest plus tard : pas de pixels perdus + information située

56 IHMC-Contenu des pages
Contenu informationnel Efficacité Scrutabilité (scannability) Technique de la pyramide inversée et hypertexte : 79% users survolent conclusion/résumé d ’abord, puis développement/justifications qui conduisent à la conclusion, puis background/pour en savoir plus

57 IHMC-Contenu des pages
Exemple de Technique de la pyramide inversée

58 IHMC-Contenu des pages
Les utilisateurs utilisent peu le défilement vertical et encore moins le défilement horizontal Avant Ensuite Place de la publicité aux emplacements-clefs (haut et bas de page)

59 IHMC-Contenu des pages
Les utilisateurs utilisent peu le défilement vertical Page d’accueil au 2ème scroll Bas de la page d’accueil au 6ème “scroll” Place de la publicité aux emplacements-clefs

60 IHMC-Contenu des pages
Contenu informationnel Efficacité (suite) Scrutabilité (scannability) Technique de la pyramide inversée et hypertexte Enumérations Le Monde, en bas de page d’accueil

61 IHMC-Contenu des pages
Contenu informationnel Efficacité (suite) Scrutabilité Enumération Concision Une seule idée par paragraphe 50% de texte en moins qu’un texte classique Lecture à l’écran = 25% moins rapide que sur papier Les users scrollent peu Supprimer un élément à la fois, tester et si OK, itérer Ex: « Bienvenue sur le site … » : amical mais « bienvenue » est inutile Supprimer la publicité (si possible, bien sûr!)

62 IHMC-Contenu des pages
Contenu informationnel Efficacité (suite) Scrutabilité Concision Objectivité Seulement des faits Eviter les termes racoleurs, expressions culturelles (internationalisation) Attention à l’orthographe !

63 IHMC-Contenu des pages
Contenu informationnel Compréhension Respecter la terminologie de l’utilisateur cible Attention aux Ambiguïtés Mélanges Substantifs/verbes Mais aussi respecter la culture web (prop. Cohérence externe) Shopping cart/shopping sledge (magasin de sports d’hiver)! Imaginer que la page est visitée depuis un moteur de recherche : le visiteur doit savoir où il se trouve et où il peut aller Toutes les pages doivent contenir l’identification du site Lien vers la page d’accueil ou à la carte du site Barres de navigation Products and Store ne sont pas discriminants

64 IHMC-Contenu des pages
Zone de recherche et emplacements devenus usuels

65 IHMC-Contenu des pages
Cas des pages longues : table des matières en tête de page Le visiteur qui vient pour la première fois a une idée du contenu de chaque section Le visiteur qui revient peut naviguer plus aisément

66 IHMC-Contenu des pages
Cas des pages longues Table des matières de la Page = nav. locale

67 IHMC- Navigation Barre horizontale Barre verticale
Gain de place pour le contenu, mais passe mal à l’échelle Barre verticale Passe à l’échelle, mais pixels perdus Barres horizontale/verticale et HTML drop-menus or Cascading Menus de DHTML Combinaison de toutes ces techniques Page à grand contenu : pixels perdus en bas de page

68 IHMC- Navigation Onglets à plusieurs niveaux Barres niveaux 1 et 2
Search button Couleur&espace Onglets courants Niveau 3 et + : Breadcrumb trail

69 Production du dossier de conception
Concevoir la structure du site Concevoir la navigation au sein du site Concevoir le contenu des pages Concevoir la présentation de la page d'accueil Concevoir la présentation des autres pages

70 IHMC-Page d’accueil Conception détaillée de la page d'accueil avant les autres pages : les pages intérieures héritent les solutions choisies pour la page d’accueil en termes de : Look (image de marque) et requis non fonctionnels Impliquer le graphiste et/ou le spécialiste en rendu multimédia qui aidera à la mise en forme du « concept » Evaluer sur écran (le "papier crayon" ne marche pas en cette étape) Utiliser les CSS (Cascading Style Sheets, standard W3C, voir : Spécifications techniques de la plate-forme d'accueil Bande passante Taille écran : La taille de la page doit être fonction de la taille de la fenêtre (Plus des zones à taille minimale imposée) Ne pas imposer de défilement horizontal : c’est pire que le vertical ! Si scroll inévitable : placer à droite ce qui est moins important (culture occidentale)

71 IHMC-Page d’accueil Contenu
Doit expliquer et couvrir le contenu du site : cela doit être évident dès la première visite ! La 1ère impression est déterminante Un visiteur doit, dès la 1ère fois, être en mesure de répondre aux questions : Que m’offre le site? Quelles sont les options ? Comment je navigue ? Doit contenir le nom et un logo facilement repérables (en haut à gauche) Peut contenir les nouvelles ou promotions L’espace utile revient à la navigation globale à la ou aux tâches dominantes (achat titre de transport, par exemple) aux raccourcis (règle des 3 clics)

72 IHMC-Page d’accueil Contenu (suite)
Doit contenir un espace de recherche : users are search dominant (75% d’après Nielsen) Doit être accessible depuis toute page du site (se souvenir qu’un visiteur n’entre pas nécessairement par la page d’accueil)

73 IHMC-Page d’accueil Image de marque Explicatif Anticonformisme
Pixels perdus

74 Image de marque (suite)
IHMC-Page d’accueil Image de marque (suite) Site en 1997 Pixels perdus Non explicatif Trajectoire d’interaction allongée inutilement

75 Image de marque (suite)
IHMC-Page d’accueil Image de marque (suite) Site en oct. 2001 Valeur ajoutée : les grands événements

76 IHMC-Page d’accueil 1er contact avec le site
Honnêteté : unités de mesure !!!

77 Caractéristiques techniques : Cas de scroll horizontal
IHMC-Page d’accueil Caractéristiques techniques : Cas de scroll horizontal A droite, bandeau le moins important

78 Contenu de la page d’accueil
IHMC-Page d’accueil Contenu de la page d’accueil Les tâches les plus fréquentes Plan du site pour les autres tâches

79 Contenu de la page d’accueil
IHMC-Page d’accueil Contenu de la page d’accueil Nouvelles Raccourci pour client fidèle Tâche fréquente Raccourci saisie date

80 IHMC-Page d’accueil Pas de splash screen (page qui précède la page d’accueil) Ce n’est pas ce que le user recherche -> le client s’en va Utilité prétendue : expliquer ce qui va suivre mais cette explication devrait être intégrée dans la page d’accueil car un clic de trop ! Utilité véritable prévenir sur la nature du contenu (ex. pornographie) exprimer le soutien pour une cause politique (image de marque)

81 … sauf pour prévenir sur la nature du contenu
IHMC-Page d’accueil … sauf pour prévenir sur la nature du contenu

82 Production du dossier de conception
Concevoir la structure du site Concevoir la navigation au sein du site Concevoir le contenu des pages Concevoir la présentation de la page d'accueil Concevoir la présentation des autres pages

83 Règles générales d’ergonomie
Titres Textes Couleur Boutons Liens Animations etc.

84 Titres Chaque page doit avoir un titre (tag HTML <title>)
Le titre sert De bookmark (signet) A l’indexation. La plupart des moteurs de recherche utilisent les 200 premiers mots pour créer leur index.

85 Titres Refléter de manière claire et concise le contenu de la page
fait gagner du temps au lecteur et aide à se repérer doit présenter le macrocontenu en 40 ou 60 caractères au plus Commencer par le mot le plus important discrimination dans une liste présentée par ordre alphabétique (nom de la compagnie, nom de personne, nom de concept), User from anywhere supprimer les articles (le, la, les, etc.) Etre différent pour chaque page Etre semblable au nom du lien qui a mené à cette page N’est pas nécessairement en gros caractères séparé du reste du contenu de la page

86 Règles ergonomiques générales
Titres Textes Couleur Boutons Liens Animations etc.

87 Textes Le web n’est pas un support papier On ne lit pas le Web
Parcours erratique de page 16% lisent mot par mot sur le web la lecture à l’écran difficile

88 Textes Privilégier un style direct, concis, précis, en respectant les règles suivantes : 50% de mots en moins que dans le style écrit habituel une idée par paragraphe le principe de la pyramide inversée (commencer par la conclusion). mise en évidence d’idées/mots-clés importants (les liens hypertextes sont une forme de mise en évidence, choix de couleur, changement de style gras/italique) listes d’énumération choisir des sous-titres qui font sens

89 Textes Le texte doit être crédible Facteurs de crédibilité
Bonne écriture (attention aux fautes d’orthographe, au style publicitaire racoleur) Graphique de qualité Présence de liens vers d’autres sites (qui montrent que vous ne craignez pas de laisser partir vos visiteurs vers d’autres sites) Lisibilité du texte Polices sans sérif (par exemple Arial, Helvetica) : plus lisibles, mais choix de la police selon le « genre » du site Pas plus de 2 polices Actualité du contenu : date de dernière mise à jour. Contre exemple : l’étiquetage “ New ” et une date de mise à jour ancienne ! !

90 Textes Impression : s'assurer qu'une page tient dans le format A4
Vérifier que le message est clair pour l'utilisateur

91 Règles ergonomiques générales
Titres Textes Couleur Boutons Liens Animations etc.

92 Couleurs Texte : noir sur fond blanc
Texte à signification particulière (par exemple, alarme, priorité) : utilisation cohérente de la couleur. L'utilisateur doit comprendre sans se référer à la couleur Si peu de bande passante et si page chargée : pas de texture de fond Tester le design en niveaux de gris (pour vérifier les différences d’intensité) Un onglet sélectionné doit émerger par sa différence d’intensité Les récepteurs humains du bleu sont moins précis => éviter le bleu saturé pour des traits fins Attention à l’association de couleurs Rouge/vert, rouge/bleu : vibration sur les bords communs Réduction de l’effet de vibration : insérer un trait noir de séparation, jouer sur les différences d’intensité, mais attention au câlibrage des moniteurs

93 Règles ergonomiques générales
Titres Textes Couleur Boutons Liens Animations etc.

94 Boutons Libellé centré et explicite Suffixes
pas de Suivant, mais Vers chapitre 5 risque de ne pas faire sens pour celui qui vient d'un autre site Suffixes "…" ouverture d'une fenêtre avec saisie "> " ouverture d'un menu Eviter les boutons graphiques, mais graphique+texte (roll-over) Boutons de navigation: ne pas compter sur les boutons du navigateur

95 Règles ergonomiques générales
Titres Textes Couleur Boutons Liens Animations etc.

96 Liens Des liens qui permettent de prédire où l ’on va
Si une page est accessible depuis plusieurs liens : les noms de lien doivent être identiques (ou deux noms différents de lien ne doivent pas pointer sur la même page) Ecrire le texte comme s'il n'y avait pas de liens. Puis introduire les liens dans le texte Cliquer ici pour en savoir plus sur le DESS-CCI. Pour en savoir plus sur le DESS-CCI. l ’UFR IMA a une page d ’accueil l ’UFR IMA ... Hairong Li of the Missouri School of Journalism maintains The Internet Advertising Resource Guide, a wide-ranging collection of web commerce references.

97 Liens Le nom du lien doit être
Ni trop court : difficile à cliquer ou ne fait pas sens Ni trop long : une phrase sur plusieurs lignes ! < 80 caractères, rarement au-dessus de 60 caractères

98 Liens Liens de navigation Retour vers la page d'accueil
OUI : "Accueil nom du site" NON : « Accueil » (pour éviter la confusion avec le bouton Accueil du browser) Retour au sommet de page (cas des pages longues) lien ou bouton "Sommet de page » Lien “ bred crumb trail ” (petit-poucet)  bon pour l’expression du contexte

99 Liens

100 Ne pas faire clignoter (ou pire : faire défiler) un lien
Utiliser des Titres de liens (Link titles) : bulles qd on visite un lien Nom du site destination (si différent du site actuel) Nom du sous-site Ajout de détails utiles sur le contenu de la page destination (par ex. "user registration required" when linking to The New York Times)

101 Règles ergonomiques générales
Titres Textes Couleur Boutons Liens Animations etc.

102 Animation Attention à l'effet "Times Square" : distraction et agression sensorielle A utiliser avec discernement : quand l'objectif est d'attirer l'attention ou véhiculer du sens Ne pas utiliser de clignotement pour un hyperlien de petite taille

103 Règles générales Titres Textes Couleur Boutons Liens Animations
Temps de réponse etc.

104 Temps de réponse pour une interactivité à fort couplage (simulation) : 50 à 100 millisecondes changement de page : 1 sec. Au-delà de 1 seconde, le flux de la réflexion est interrompu Frustration : au-delà de 10 à 15 sec (WWW = World Wide Wait). Il faut que l’utilisateur puisse faire autre chose et soit averti du progrès d’avancement, et du temps d’attente prévu.