13/03/2011

sommaire
Conception dun site web
Ciblage Structuration Organisation

Ergonomie des interfaces

Adil HADDI

Navigation web
Savoir se reprer Menus droulants Liens externe

Visualisation Page daccueil formulaire

Conception dun site web

Dmarche: 1. Ciblage du site dfinir les objectifs et contenu du site, coupler imprativement avec un ciblage des utilisateurs viss. 2. Structuration du site dfinir lorganisation des diffrentes rubriques et les protocoles de navigation, en fonction une fois encore des utilisateurs viss. 3. Finaliser limplmentation (chartre graphique, conception des interfaces, etc) en tenant compte de recommandations ergonomiques et en ayant recours des tests dutilisabilit.

Conception dun site web: CIBLAGE

IDENTIFICATION DU CONTENU ET DES USAGES 1. Dfinition du service et du public cibl (ge, catgorie socioprofessionnelle, exprience informatique et Internet) 2. Analyse des besoins interview auprs dun chantillon reprsentatif dutilisateurs appartenant la cible. 3. Tests dutilisabilit Ces tests peuvent conduire une remise en cause partielle du ciblage

13/03/2011

Conception dun site web: CIBLAGE

Quelle rponse cherchez-vous obtenir en consultant ce site ? Quattendez-vous en priorit de ce site ? Dans quel contexte tes-vous amens consulter ce site ? Utilisez-vous dj un autre site Web rendant ce type de service ? Quelles sont ses lacunes ? Dautres mdias vous offrent-ils ce type de service ? Quelles sont leurs limites, leurs points forts ? questions ouvertes : ne pas diriger lexpressions des besoins

Conception dun site web: STRUCTURATION

Larchitecture de communication est dcrit lensemble de linformation qui doit tre prsente sur le site Il reste organiser cette information pour la rendre accessible le plus aisment possible. NAVIGATION ET STRUCTURATION Considrer des contraintes de navigation : critres ergonomiques analogues ceux de la navigation par menus :
Minimiser la profondeur du site (3-4 niveaux maximum) Optimiser le nombre de sous-chemins par rubrique : 8 sousrubriques maximum Prfrer une arborescence en arbre plutt quen graphe

EVOLUTIVITE DU SITE ET STRUCTURATION

Statistiques dutilisation (pages consultes, liens suivis) : tests dutilisabilit grandeur nature pouvant conduire une refonte Mise jour rgulire du site : frquence accrue + rfrencement

Conception dun site web: STRUCTURATION

Conception dun site web: ORGANISATION

DISPOSITION DES INFORMATIONS Informations les plus importantes au centre vers le haut Regrouper les informations pour faciliter leur dtection et comprhension
Proximit: la vision regroupe les informations proches Similitude: on regroupe les images qui se ressemblent par leur forme Continuit : la vision regroupe les informations alignes

Jouer sur les imbrications (cadres) pour favoriser les regroupements

13/03/2011

Conception dun site web: ORGANISATION

Conception dun site web: ORGANISATION

Conception dun site web: ORGANISATION

Conception dun site web: ORGANISATION

13/03/2011

Conception dun site web: ORGANISATION

DISPOSITION DES INFORMATIONS Informations les plus importantes au centre vers le haut Regrouper les informations pour faciliter leur dtection et comprhension
Proximit: la vision regroupe les informations proches Similitude: on regroupe les images qui se ressemblent par leur forme Continuit : la vision regroupe les informations alignes

Navigation: SAVOIR SE REPERER

Jouer sur les imbrications pour favoriser les regroupements

Navigation: SAVOIR SE REPERER

Navigation: SAVOIR SE REPERER

AVOIR UNE VISION GLOBALE DU SITE Barre de navigation ou onglets permanents Carte du site

13/03/2011

Navigation: SAVOIR SE REPERER

VISION : RECOMMANDATION
QUELQUES RECOMMANDATIONS DE BON SENS Limiter la taille de la page (2 crans au maximum) Concevoir les pages pour un affichage 800x600 ou adapter automatiquement laffichage la configuration du systme Utiliser une chartre graphique homogne sur tout le site (.css) Tester laffichage sur les navigateurs les plus usuels (couleurs et tailles de caractres en particulier)
Taille de caractres fixe (feuille de style) Palette de couleur web-safe (256 couleurs)

VISION : POLICES DE CARACTRES

Casse

VISION : COULEUR
Respecter le sens quassocient les utilisateurs aux couleurs: analyser ce sens suivant la communaut dutilisateurs vise.
Arrt Danger En marche Perte Chaud

Utiliser les casses mixtes (majuscules et minuscules) pour les textes Utiliser les majuscules pour mettre en vidence un mot : les majuscules rendent la lecture plus difficile mais facilitent lidentification dun lment
Police

Les lettres droites sans empattement facilitent la lecture des lments textuels isols (menus) : Arial, Helvetica, Verdana Les lettres serifies, avec empattement (Times New Roman) crent une ligne virtuelle horizontal qui facilite la lecture des textes long viter sauf cas particulier (mise en vidence dun lment) les polices en italique. viter tout prix une inclinaison suprieure 45

Faire attention aux significations culturelles et sociales des couleurs tudier toujours la possibilit dun codage mixte couleur texte ON

Limiter le nombre de couleurs pour favoriser leur discrimination : 4 au maximum dans un display et 72 sur lensemble de linterface.

13/03/2011

VISION: MTHODOLOGIE DE CHOIX

1. Concevoir en premier linterface sans utiliser les couleurs 2. Classifier les types dobjets ou de donnes afficher 3. Regrouper ces types par niveaux dimportance donc de visibilit 4. Choisir les composantes couleurs pour chaque niveau dimportance
teinte : smantique de lobjet saturation et luminance : visibilit

VISION: CONTRAINTES PHYSIOLOGIQUES

Perception temporelle Temps de raction: 200ms pour initier lobservation Acuit visuelle Espace entre les lignes dtectable Recommandations Ne pas utiliser daffichage avec modification de cycle infrieur 1/10 seconds Ne souligner les textes (sauf pour marquer laccent)

5. Prototypage (i.e. validation exprimentale)

VISION: CONTRAINTES PHYSIOLOGIQUES

PARCOURS DUNE IMAGE Exploration : parcours en Z (culture occidentale) Image connue : recherche slective des positions qui lui semblent pertinentes

VISION: ORGANISATION DE LINTERFACE

RECOMMANDATIONS
Titres en haut gauche Zone de travail au milieu de lcran / fentre Organisation des zones de manipulation en fonction du sens de lecture (gauche-droite) et en fonction de la frquence dutilisation

13/03/2011

VISION: ORGANISATION DE LINTERFACE

PAGE DACCUEIL
UNE PAGE WEB BIEN PARTICULIERE Signature du site mais avant tout page qui doit retenir lattention de lutilisateur nomade en lui montrant ce qui peut lintresser Doit montrer et faire comprendre clairement les objectifs du site Doit dj donner quelques premiers lments dinformation pour accrocher lutilisateur Doit fournir des repres de navigation clairs : inciter lutilisateur aller voir plus loin Doit viter dutiliser une animation dintroduction, ou se contenter de prsenter une page vide de sens mais trs belle

PAGE DACCUEIL

FOURMULAIRES
UNE AUTRE PAGE WEB BIEN PARTICULIERE ! Saisie dinformation et non plus simple navigation Informations souvent personnelles et/ou paiement Sentiment de dterministe qui empche le retour en arrire Facteur de stress et cause principale dabandon sur le Web Montrer clairement lutilisateur que ses actions sont annulables EXEMPLES

13/03/2011

FOURMULAIRES

FOURMULAIRES

FOURMULAIRES
Recommandations

FOURMULAIRES

Titres et nom des champs explicites Instructions claires

rgle explicite dentre des donnes (Enter, TAB)

Prvention des erreurs

vrification de lintgrit des donnes Listes ou boutons de slections

Messages derreurs explicites

si possible, proposer une solution

Corrections facilite : ne pas ressaisir tout le formulaire Champs optionnels / obligatoires clairement marqus Signal de compltion finale : viter la compltion automatique

13/03/2011

MESSAGES DERREURS
Importance des erreurs
influence des messages derreur sur lacceptation du logiciel

MESSAGES DERREURS
Quand la prvention a chou Ne jamais condamner lutilisateur : pas de messages agressifs Lui offrir toujours une porte de sortie : viter les impasses Rdaction des message derreurs Messages informatifs: prcision et spcificit Messages constructifs Messages explicatifs (Month range from 1 to 12)

Prvention des erreurs

Griser les commandes non disponibles
Fournir les valeurs attendues (liste droulante,) BD: contraintes dintgrit pour limiter les erreurs de saisie Principe des erreurs commensurables: bien caractriser les erreurs en fonction de leur risque (pertes de donnes,) Dtecter au plus tt les erreurs: validation aprs chaque action

MESSAGES DERREURS
Messages informatifs et constructifs Ne pas condamner lutilisateur pour son erreur viter les termes techniques ds que possible Proposer si possible une solution (principe de guidage) Formulation naturelle des erreurs Ne pas rappeler lutilisateur quil nest pas informaticien Phrases plutt que mots cls Ne pas mettre en avant les informations techniques

MESSAGES DERREURS
Exemples: Messages informatifs /guidage

13/03/2011

MESSAGES DERREURS
Exemples: Messages naturels et constructifs

AIDES EN LIGNE
USAGES Laide en ligne est bien plus utilise pour la rsolution de problmes que comme outil dapprentissage AIDES AUX QUESTIONX DE TYPE QUEST-CE QUE ? Bulles daide : expliquent le rle des objets de linterface. Aide contextuelle Manuel en ligne : aide approfondie et dtaille rserve le plus souvent aux utilisateurs expriments. Aide statique. AIDES AUX QUESTIONX DE TYPE COMMENT ? Manuel en ligne : le manuel comporte le plus souvent une rubrique comment (cf. logiciels Microsoft). Trs utilise. Assistant : aide problmatique en terme dapprentissage Didacticiel : vritable outil de formation. Il est long et difficile de mettre en uvre un didacticiel prcis et complet.

AIDES EN LIGNE
Fournir une aide en ligne contextuelle
Quand les utilisateurs font appel l'aide en ligne, leur problme est souvent li la transaction en cours lorsque la fonction HELP a t appele; aussi est-il souvent dsirable d'afficher automatiquement l'cran ou la fentre d'aide associe la transaction courante; cette aide [contextuelle] permet d'viter l'utilisateur des recherches longues ou infructueuses dans les pages d'aide; les bulles daide permettent de pointer un objet ou un item de l'interface et d'obtenir une aide spcifique sur cet objet ou cet item.

AIDES EN LIGNE
Types dinformations sur lesquelles doit porter laide explication brve de la fonction de l'cran ou de la transaction descriptions des champs d'entre (dfinitions, units, formats, entres valides descriptions des champs de donnes de sorties (dfinitions, units, formats, mode de calcul des valeurs) dfinition des codes, des commandes et des abrviations utiliss; explication des messages derreurs et conseils pour les corriger allocation des touches fonction exemples de procdures, de commandes et de syntaxe correctes

10