Interface Homme- Machine. Interface pour le web

Transcription

1 Interface Homme- Machine Interface pour le web

2 Ergonomie du web : Importance Web U7lisateurs novices et nomades (accès libre) Ergonomie des interfaces Web 62% des acheteurs en ligne abandonnent au moins une fois en cours de transac7on 40% des consommateurs ne reviennent pas sur un site où leur première visite s est soldée par un échec Formulaires en ligne : 40% d incompréhension sur les sites d offre d emploi

3 Ergonomie du web : Importance Un exemple : site Web IBM (1998) Ancien site : bouton de recherche et d aide les 2 plus u7lisés Refonte du site : 120% d accès et 400 % de commandes en plus

4 ConcepBon d un site web

5 ConcepBon d un site web Démarche 1. Ciblage du site définir les objec7fs et contenu du site, à coupler impéra'vement avec un ciblage des u'lisateurs visés 2. StructuraBon du site définir l organisa7on des différentes rubriques et les protocoles de naviga7on, en fonc7on une fois encore des u7lisateurs visés 3. Finaliser l implémentabon (chartre graphique, concep7on des interfaces, etc.) en tenant compte des recommanda7ons ergonomiques et en ayant recours à des tests d u7lisabilité Tests d ublisabilité Tout au long de la concep7on et le plus tôt possible Avec des u7lisateurs novices correspondant à la cible visée Tests de percepbon sta7ques, sur des visuels d interface Tests d ublisabilité naviga7on sur un prototype significa7f

6 ConcepBon d un site web : ciblage IDENTIFICATION DU CONTENU ET DES USAGES 1.DéfiniBon du service et du public ciblé (âge, catégorie socioprofessionnelle, expérience informa7que et Internet ) 2. Analyse des besoins interview auprès d un échan7llon représenta7f d u7lisateurs appartenant à la cible Quelle réponse cherchez- vous à obtenir en consultant ce site? Qu a;endez- vous en priorité de ce site? Dans quel contexte êtes- vous amenés à consulter ce site? U'lisez- vous déjà un autre site Web rendant ce type de service? Quelles sont ses lacunes? D autres médias vous offrent- ils ce type de service? Quelles sont leurs limites, leurs points forts? 3. Tests d ublisabilité Ces tests peuvent conduire à une remise en cause par7elle du ciblage

7 ConcepBon d un site web : ciblage ANALYSE DES BESOINS ET TEST D UTILISIBILITE Évalua7on cri7que des sites Web concurrents (soit par vous- même, soit avec un échan7llon d u7lisateurs) Exemple : check- list d évaluabon rapide IBM (IBM Web Design Guidelines) L objec'f du site est- il clairement perçu? Le public ciblé peut- il clairement s iden'fier? Le site est- il u'le et per'nent pour ce public? Le site est- il intéressant et ajrant? De quel point de vue? Le site permet- il aux u'lisateurs de réaliser toutes les tâches qu ils veulent accomplir? Les visiteurs peuvent- ils facilement accomplir ces tâches? Le contenu et l organisa'on du site sont- ils cohérents avec l objec'f? Les informa'ons importantes sont- elles faciles à trouver? Les informa'ons présentées sont- elles claires, faciles à comprendre? Le visiteur sait- il toujours où il en est et comment faire pour aller ou il veut? Le graphisme est- il agréable?

8 ConcepBon d un site web : StructuraBon StructuraBon du site = facteur essenbel d ublisabilité

9 ConcepBon d un site web : StructuraBon L architecture de communica7on est établie et décrit l ensemble de l informa7on qui doit être présente sur le site Il reste à organiser ce^e informa7on pour la rendre accessible le plus aisément possible STRUCTURATION : METHODE DU TRI PAR CARTE Objec7f regrouper les différentes pages du site en rubriques et sous rubriques par une méthode empirique Décrire chaque grain d informa7on, qui correspondra à une page sur le site, par quelques mots- clés et une phrase de descrip7on Regroupement des cartes par similarité, avec possibilité de faire éventuellement des groupes de groupes (sous- rubriques) ü Plusieurs par7cipants (u7lisateurs ou concepteurs) ü Analyse compara7ve des différentes classifica7ons obtenues ü Se limiter à une cinquantaine de cartes + cartes blanches

10 ConcepBon d un site web : StructuraBon

11 ConcepBon d un site web : StructuraBon Organisation du contenu : Navigation Ne pas se limiter à une structura7on sta7que (contenu pur) Considérer des contraintes de naviga7on : critères ergonomiques analogues à ceux de la naviga7on par menus (largeur d abord) ü Minimiser la profondeur du site (3-4 niveaux maximum) ü Op7miser le nombre de sous- chemins par rubrique : 8 sous rubriques maximum ü Préférer une arborescence en arbre plutôt qu en graphe Evolutivité du site Sta7s7ques d u7lisa7on (pages consultées, liens suivis ) : tests d u7lisabilité grandeur nature pouvant conduire à une refonte Mise à jour régulière du site : fréquence accrue + référencement

12 Naviga7on web: Savoir se repérer Barre de naviga7on ou onglets permanents + inverse couleur Affichage du chemin de progression Indiquer le 7tre de la page

13 Naviga7on web: Savoir se repérer Exemples et contre- exemples

14 Naviga7on web: Savoir se repérer Exemples et contre- exemples

15 Naviga7on web: Savoir se repérer AVOIR UNE VISION GLOBALE DU SITE Barre de naviga7on ou onglets permanents Plan du site

16 Naviga7on web: Menus déroulants Menus Web déroulants réservés aux experts: prévoir un mode alterna7f

17 Page web : Organisa7on générale La plupart des sites commerciaux suivent le même schéma d organisa7on A^entes u7lisateur fortes : barre menu logiciels grands publics

18 Page web : Organisa7on générale Exemples et contre- exemples

19 Page web : Organisa7on générale Exemples et contre- exemples

20 Page web : Organisa7on générale VisualisaBon d une page web

21 Page web : Organisa7on générale Exemples et contre- exemples

22 Page web : Organisa7on générale DISPOSITION DES INFORMATIONS Informa7ons les plus importantes au centre vers le haut Regrouper les informa7ons pour faciliter leur détec7on et compréhension Proximité: la vision regroupe les informa7ons proches Similitude: on regroupe les images qui se ressemblent par leur forme Con7nuité : la vision regroupe les informa7ons alignées Jouer sur les imbrica7ons (cadres ) pour favoriser les regroupements

23 Page web : Visualisa7on Quelques recommanda7ons Limiter la taille de la page (2 écrans au maximum) Concevoir les pages pour un affichage 800x600 ou adapter automa7quement l affichage à la configura7on du système U7liser une chartre graphique homogène sur tout le site (.css) Tester l affichage sur les navigateurs les plus usuels (couleurs et tailles de caractères en par7culier) Taille de caractères fixe (feuille de style) Pale^e de couleur web- safe (256 couleurs)

24 Page d accueil UNE PAGE WEB BIEN PARTICULIERE Signature du site mais avant tout page qui doit retenir l a^en7on de l u7lisateur nomade en lui montrant ce qui peut l intéresser Doit montrer et faire comprendre clairement les objec7fs du site Doit déjà donner quelques premiers éléments d informa7on pour accrocher l u7lisateur Doit fournir des repères de naviga7on clairs : inciter l u7lisateur à aller voir plus loin Doit éviter d u7liser une anima7on d introduc7on, ou se contenter de présenter une page vide de sens mais très belle du moment que votre site n a pas une notoriété très forte ou n est pas des7né à des happy fews (plus besoin d anrer l u7lisateur dans les deux cas)

25 Page d accueil Exemples et contre- exemples

26 Formulaire UNE AUTRE PAGE WEB BIEN PARTICULIERE! Saisie d informa7on et non plus simple naviga7on Informa7ons souvent personnelles et/ou paiement Sen7ment de déterministe qui empêche le retour en arrière Facteur de stress et cause principale d abandon sur le Web Montrer clairement à l ublisateur que ses acbons sont annulables

27 Formulaire RecommandaBons Titres et nom des champs explicites Instruc7ons claires règle explicite d entrée des données (Enter, TAB ) Préven7on des erreurs vérifica'on de l intégrité des données Listes ou boutons de sélec'ons Messages d erreurs explicites si possible, proposer une solu'on Correc7ons facilitée : ne pas ressaisir tout le formulaire Champs op7onnels / obligatoires clairement marqués Signal de complé7on finale : éviter la complé7on automa7que