L’ergonomie du site Internet Laurent-Pierre GILLIARD – AEC – 30/05/2007

« Ergonomie » Utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) pour améliorer son environnement de travail. Sur le web : capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.

Utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) pour améliorer son environnement de travail.

Sur le web : capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.

A ttentes de l'utilisateur : tous les visiteurs du site ne recherchent pas la même information ou n'ont pas les mêmes exigences en terme de graphisme Habitudes de l'utilisateur : elles correspondent à des comportements acquis Age de l'utilisateur : il caractérise en général la capacité d'adaptation de l'utilisateur et sa rapidité de navigation Un problème : la diversité des profils des visiteurs

A ttentes de l'utilisateur : tous les visiteurs du site ne recherchent pas la même information ou n'ont pas les mêmes exigences en terme de graphisme

Habitudes de l'utilisateur : elles correspondent à des comportements acquis

Age de l'utilisateur : il caractérise en général la capacité d'adaptation de l'utilisateur et sa rapidité de navigation

Equipements : l'affichage du site pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la résolution d'affichage Niveau de connaissances : tous les visiteurs du site ne sont pas nécessairement des as de l'informatique. L'ergonomie du site doit être pensée pour l'utilisateur le moins expérimenté Un problème : la diversité des profils des visiteurs Exemple : http://travel.supertour.com/miamibeach.aspx Avant Après 1680x1050 640x480 1024x768

Equipements : l'affichage du site pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la résolution d'affichage

Niveau de connaissances : tous les visiteurs du site ne sont pas nécessairement des as de l'informatique. L'ergonomie du site doit être pensée pour l'utilisateur le moins expérimenté

Sobriété Lisibilité Utilisabilité Rapidité Interactivité Adaptabilité Adaptativité Accessibilité 8 c ritères d'ergonomie

Sobriété

Lisibilité

Utilisabilité

Rapidité

Interactivité

Adaptabilité

Adaptativité

Accessibilité

Simplicité : design lié aux tendances graphiques, à la mode un site web épuré renforcera la crédibilité de l'organisation Peu chargé : les images animées sont déconseillées. les animation doivent être privilégiées pour afficher des messages forts car elles attirent le regard de l'internaute. 1 - Sobriété

Simplicité :

design lié aux tendances graphiques, à la mode

un site web épuré renforcera la crédibilité de l'organisation

Peu chargé :

les images animées sont déconseillées.

les animation doivent être privilégiées pour afficher des messages forts car elles attirent le regard de l'internaute.

Clarté : il est plus dur de lire sur écran que sur papier (temps +25%) le texte devra être suffisamment aéré Structuration : le texte devra être structuré à l'aide de paragraphes et de titres de différents niveaux, afin d'en faciliter la lecture Organisation : hiérarchiser l'information par niveau d'importance. les éléments les plus importants doivent être en haut 2 - Lisibilité

Clarté :

il est plus dur de lire sur écran que sur papier (temps +25%) le texte devra être suffisamment aéré

Structuration :

le texte devra être structuré à l'aide de paragraphes et de titres de différents niveaux, afin d'en faciliter la lecture

Organisation :

hiérarchiser l'information par niveau d'importance. les éléments les plus importants doivent être en haut

Facilité de navigation : règle des 3 clics : toute information accessible en -de 3 clics Repérage à tout moment le visiteur doit pouvoir de se repérer logo présent sur toutes les pages, au même emplacement charte graphique uniforme sur l'ensemble des pages plan du site présent 3 - Utilisabilité (1/4)

Facilité de navigation :

règle des 3 clics : toute information accessible en -de 3 clics

Repérage

à tout moment le visiteur doit pouvoir de se repérer

logo présent sur toutes les pages, au même emplacement

charte graphique uniforme sur l'ensemble des pages

plan du site présent

Liberté de navigation possibilité de revenir à la page d'accueil et aux principales rubriques par un simple clic navigation dans le contenu selon des chemins transversaux pages d'introduction ou pages interstitielles à éviter car elles énerveront la plupart des visiteurs Visibilité de l'adresse URL de la page en cours (adresse) doit être visible 3 - Utilisabilité (2/4)

Liberté de navigation

possibilité de revenir à la page d'accueil et aux principales rubriques par un simple clic

navigation dans le contenu selon des chemins transversaux

pages d'introduction ou pages interstitielles à éviter car elles énerveront la plupart des visiteurs

Visibilité de l'adresse

URL de la page en cours (adresse) doit être visible

Liberté de navigation possibilité de revenir à la page d'accueil et aux principales rubriques par un simple clic navigation dans le contenu selon des chemins transversaux pages d'introduction ou pages interstitielles à éviter car elles énerveront la plupart des visiteurs Visibilité de l'adresse URL de la page en cours (adresse) doit être visible 3 - Utilisabilité (3/4)

Liberté de navigation

possibilité de revenir à la page d'accueil et aux principales rubriques par un simple clic

navigation dans le contenu selon des chemins transversaux

pages d'introduction ou pages interstitielles à éviter car elles énerveront la plupart des visiteurs

Visibilité de l'adresse

URL de la page en cours (adresse) doit être visible

Tangibilité de l'information informations qualifiées (date de mise à jour, auteur…) éviter les pages accrocheuses vers des pages en travaux Homogénéité de la structure les éléments de navigation doivent être situés au même endroit sur toutes les pages 3 - Utilisabilité (4/4)

Tangibilité de l'information

informations qualifiées (date de mise à jour, auteur…)

éviter les pages accrocheuses vers des pages en travaux

Homogénéité de la structure

les éléments de navigation doivent être situés au même endroit sur toutes les pages

Temps de chargement temps d'affichage d'une page doit être inférieur à 15s dépendant de la connexion du visiteur, de la taille de la page et de ses images, des capacités du serveur web Images optimisées optimiser la taille des images (<30 à 40 ko par image) sinon, lien vers image haute définition + poids de l’image 4 - Rapidité

Temps de chargement

temps d'affichage d'une page doit être inférieur à 15s

dépendant de la connexion du visiteur, de la taille de la page et de ses images, des capacités du serveur web

Images optimisées

optimiser la taille des images (<30 à 40 ko par image)

sinon, lien vers image haute définition + poids de l’image

Liens hypertextes interactivité web = liens hypertextes en mettre suffisamment entre les pages mais pas trop Découpage de l'information découper l'information pour mieux l’assimiler un texte d'accroche et un lien vers la suite de l'article Facilitation des échanges a minima, contact via email ou formulaire de contact 5 - Interactivité

Liens hypertextes

interactivité web = liens hypertextes

en mettre suffisamment entre les pages mais pas trop

Découpage de l'information

découper l'information pour mieux l’assimiler

un texte d'accroche et un lien vers la suite de l'article

Facilitation des échanges

a minima, contact via email ou formulaire de contact

L'adaptabilité caractérise la possibilité de personnaliser le site sur intervention de l'utilisateur (ex: redimensionner les tailles des textes) L'adaptativité caractérise la possibilité de personnaliser le site web automatiquement sans intervention de l'utilisateur (ex: langage en fonction de la provenance) 6-7 - Adaptabilité et Adaptativité

Universalité de l'accès l'accessibilité est la capacité du site à être consulté universellement, par tout type d'utilisateurs, y compris les malvoyants et non voyants, quelque soit la configuration logicielle et matérielle ou le handicap Interopérabilité le respect de standards ( W3C ) permet de garantir la la consultation du site par différents navigateurs 8 - Accessibilité (1/3) Charte régionale

Universalité de l'accès

l'accessibilité est la capacité du site à être consulté universellement, par tout type d'utilisateurs, y compris les malvoyants et non voyants, quelque soit la configuration logicielle et matérielle ou le handicap

Interopérabilité

le respect de standards ( W3C ) permet de garantir la la consultation du site par différents navigateurs

Transparence des formats les formats utilisés doivent préférentiellement être en mode texte. Ainsi le HTML sera utilisé préférentiellement au Flash les images ou animation ne doivent pas se soustraire aux informations textuelles (complément visuel) Légende une légende ou un texte de remplacement doivent être prévu en lieu et place des images (attribut alt ), pour permettre aux déficients visuels de comprendre le sens de l'image. 8 - Accessibilité (2/3)

Transparence des formats

les formats utilisés doivent préférentiellement être en mode texte. Ainsi le HTML sera utilisé préférentiellement au Flash

les images ou animation ne doivent pas se soustraire aux informations textuelles (complément visuel)

Légende

une légende ou un texte de remplacement doivent être prévu en lieu et place des images (attribut alt ), pour permettre aux déficients visuels de comprendre le sens de l'image.

Choix des couleurs les couleurs doivent laisser l'information lisible aux personnes ne distinguant pas les couleurs correctement Usage sain des feuilles de style l'information doit être accessible sans feuille de style Contraste adapté contraste entre couleur de fond et texte doit contrasté Taille des polices modifiable taille des polices adaptable par l’utilisateur 8 - Accessibilité (3/3)

Choix des couleurs

les couleurs doivent laisser l'information lisible aux personnes ne distinguant pas les couleurs correctement

Usage sain des feuilles de style

l'information doit être accessible sans feuille de style

Contraste adapté

contraste entre couleur de fond et texte doit contrasté

Taille des polices modifiable

taille des polices adaptable par l’utilisateur

Adresses web Support basé sur « Webmastering - Ergonomie d'un site web » issu de l' encyclopédie informatique Comment Ça Marche ( www.commentcamarche.net ) est mis à disposition sous les termes de la licence Creative Commons . SuperTour.com (balades virtuelles et plans) http://travel.supertour.com/miamibeach.aspx Les tendances graphiques Web2.0 http://www.macaroondesign.com/index.php?2007/02/21/86-webdesign-for-dummies-webdesign-pour-les-nuls Les tendances graphiques playskool http://www.macaroondesign.com/index.php?2006/10/19/62-playskool-style-pour-web20sign Archives du web http://www.archive.org/web/web.php http://web.archive.org/web/*/http://www.travelnevada.com/ Charte d’accessibilité du Conseil Régional Aquitaine http://charte-internet.aquitaine.fr/

Laurent-Pierre GILLIARD [email_address] MERCI

http://www.champtoceaux.fr/index.php3?cat_id=52

http://travel.supertour.com

http://travel.supertour.com/miamibeach.aspx

Ergonomie, design & mode Influences Tendance PlaySkool Tendance Web2.0

Ergonomie, design & mode Déclinaison

Ergonomie, design & mode

Ergonomie, design & mode Evolution 1996 – 1998 – 2000 – 2002 – 2004 – 2006

1996 – Début du web

1998 – Début du web design

2000 – Stratégie & design

2002 – Place à l’éditorial

2004 – Stratégie & design & marketing

2006 – Back to the future…

Ergonomie, design & mode Evolution

Crazy Egg Visualisation des visiteurs http://crazyegg.com