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) 2008-2009

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

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

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)

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

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

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 !

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

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

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

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

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

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)

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

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é

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.

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

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)

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

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

Requis non fonctionnels … Facteurs qualité de McCall

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

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". http://www.eye4u.com Si le site est un sous-site, quelles sont les dépendances en matière de charte de style, de services ?

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

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.

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)

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

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

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

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)

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

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)

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

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

Analyse du contenu Exemple : Polytech’

Analyse du contenu Exemple : UFR IMA

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

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

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

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

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

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”

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

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

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

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

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

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

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

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

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)

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

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?

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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

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 : http://www.csszengarden.com/ http://www.w3schools.com/css/css_intro.asp 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)

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)

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)

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

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

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

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

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

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

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

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)

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

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

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

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.

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

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

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

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

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 ! !

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

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

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

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

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

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

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.

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

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

Liens

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)

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

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

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

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.