Ce document traite de l'ergonomie des sites web en mettant l'accent sur l'importance d'une conception centrée sur l'utilisateur. Il souligne des éléments clés pour une homepage efficace, notamment la clarté des informations, la hiérarchisation du contenu et l'utilisation d'éléments visuels appropriés. On y aborde également la nécessité d'une navigation intuitive et la mise à jour régulière du contenu pour maintenir l'engagement des utilisateurs.

1. Ergonomie des sites Web

2. Attention ! Si vous ne devez retenir qu’une chose de cette présentation … Halte à l’amateurisme !

3. L’importance de l’ergonomie Site = utile et utilisable Centrer le site sur l’utilisateur Public cible et attentes de ce public? Services offerts par l’entreprise? -> faire correspondre les 2 ! Sur Internet, c’est l’utilisateur qui est aux commandes Plusieurs millions de sites disponibles : l’utilisateur ne perdra pas son temps sur un site dont l’ergonomie est défaillante Sauf cas exceptionnel : ne jamais faire de pari sur la configuration de l’ordinateur du client , ni sur la connaissance technique du client Penser au commerce classique et à la vie de tous les jours!

4. La homepage Homepage: on n’a qu’une occasion de séduire. C’est la page la plus importante du site, l’image de l’entreprise devant le monde ! Objectifs: identifier clairement l’entreprise identifier clairement les services proposés montrer la valeur ajoutée pour l’utilisateur fournir des liens pour encourager la visite Métaphore: couverture de magazine ou dos de couverture d’un livre Privilégier les structures « portail » ... Sauf par exemple pour des sites spécifiques (événements, etc.)

5. Rendre une homepage utile et utilisable - 1 Prévoir une phrase de sous-titre présentant ce que fait l’entreprise et le site Mettre le nom de l’entreprise dans la balise méta « title » Grouper les informations sur l’entreprise à un endroit Mettre en évidence les priorités et plus-values du site (ce que les vis i teurs y font !) Prévoir une zone de recherche (en haut) Donner des exemples de ce qu’il y a à l’intérieur du site, en valorisant le meilleur et le plus récent

6. Rendre une homepage utile et utilisable - 2 Placer des mots clés dans les liens , si possible comme premiers mots Faciliter l’accès aux éléments les plus récents de la page d’accueil Ne pas sur-formater et sur-illustrer les zones importantes (les utilisateurs se concentrent sur ce qui a l’air utile) Utiliser des illustrations et graphiques utiles (il vaut mieux montrer la photo d’une vraie personne que celle d’un modèle)

7. Bien réussir sa page d’accueil (ou au moins essayer) Professionnel, gai, attractif Adapté au profil de l’entreprise Design spécifique , juste milieu entre classicisme et originalité (unité dans la variété) Centrée sur le point de vue de l’utilisateur Hiérarchisée Utilisation optimale de l’espace (adaptation à l’écran) Penser aux méta-tags -> Standards Web: XHTML/CSS

8. Bien rater sa page d’accueil Absence du nom de l’entreprise Trop lourde à charger ou trop longue (scrolling) Frames (cadres) Trop de publicités (confusion avec le contenu) Page tunnel (sauf obligation légale) : flash sans valeur, mot de bienvenue, etc. Pages graphiques « sapin de Noël » Informations parasites (browser, stats, etc.) Textes trop longs, liens ambigus ou mal rédigés, etc.

9. La meilleure place est réservée à une information sans véritable intérêt Ce qui est important est presque caché! Ont-ils vraiment envie que l’on cherche !

10. Frames en 800/600

11. En 1280/1024, le contenu occupe 30 % de l’espace !

12. Trouvé sur la homepage du site de la DGATLP … ???

13. Pages intérieures : règles de base - 1 Quelques règles à suivre: Créer un standard et s’y tenir: c harte graphique cohérente et systématique -> fidélisation et facilité d’usage Longueur: ni trop long (trop d’infos), ni trop court (pas assez d’infos). Paginer si nécessaire Réserver l’espace au contenu! Séparer le contenu de la forme -> Standards Web: XHTML/CSS

14. Pages intérieures : règles de base - 2 Pas de frame (cadres) Affichage correct pour tous les browsers standards (Explorer, Netscape, Mozilla, Opera, etc . ) -> Attention aux versions !!! Pages légères (30k), même si l’ADSL progresse (pas trop d’images) Images et animations : réfléchir en terme de convivialité et de plus-value!! Couleur de fond : le mieux reste le blanc (couleur du texte = noir) Blocs cohérents « ho rt t ogra ff e » !!!

15. Tout est en bleu… où sont les liens

16. Navigation L’utilisateur doit toujours savoir : où il est d’où il vient où il peut aller Afficher un chemin de navigation Textes non-ambigus et utilisant toujours le même vocabulaire Ne pas « débrayer » les fonctionnalités du browser

17. Faire vivre le contenu La création du site est la phase la plus simple… … ensuite il faut le faire vivre: Contenu mis à jour Animations, interactivité, Impliquer le personnel et désigner des responsables Service 24 heures sur 24 Intégration avec le back-office (exemple : une promotion, mais plus de stock !) Le site n’est pas « un truc » à côté de l’entreprise Gestion des liens Etc.

18. Prévoir un outil de recherche performant Moteur de recherche : indispensable … mais à la limite , mieux vaut rien qu’un mauvais moteur de recherche Faciliter la vie de l’internaute : il entre instinctivement des mots clés en rapport avec son sujet d’intérêt et attend que le système lui donne les résultats adéquats Complément logique d’un catalogue Regarder Google Tester, tester ... et tester Modèle ASP (Application Service Provider)

19. Moteur de recherche : page de recherche Page d’accueil et pages intérieures : Facilement accessible (coin supérieur droit) Simple, large, bien indiquée, bouton clair Lien vers une page de recherche plus avancée Éviter la confusion avec d’autres zones Page de recherche spécifique : Liaison entre les mots clés Sélection de certaines rubriques spécifiques Critères (date de mise en ligne, etc.)

20. Moteur de recherche : résultats Nombre de résultats trouvés et de pages Rappel des mots recherchés Liste de suggestions vers des raccourcis Accès direct à chaque page de résultats (liste numérotée, page actuelle mise en évidence) Titre de la page trouvée + lien Description de la page trouvée Adresse directe de la page Date de dernière mise à jour Nom de la rubrique globale (et lien) Etc.

21. Les liens hypertextes - 1 Le lien hypertexte est l’essence du Web 3 types principaux de liens : vers une autre page du site vers l’intérieur de la même page vers un autre site Lien auto-descriptif (éviter le « cliquez ici »). Le lien permet de structurer la page Texte plus efficace que l’image Ne pas activer un lien vers la page courante

22. Les liens hypertextes - 2 Respecter les règles standards des liens: en bleu s oulignés … mais on peut parfois déroger! Réservez impérativement ces règles aux liens Rédaction claire indiquant de manière synthétique vers où on va et ce que l’on va trouver comme information

23. Ecrire pour le Web - 1 On ne lit pas un site comme un livre : l’internaute perd 25% de ses capacités de lecture. Lecture par balayage L’internaute s’intéresse d’abord au texte , et notamment aux titres, pour voir si la page l’intéresse Rédiger pour le Web -> 3 règles: être bref (réduire de moitié) permettre une lecture rapide utiliser les liens hypertextes pour organiser les pages Attention aux nouveaux utilisateurs « peu éduqués »

24. Ecrire pour le Web - 2 La page: structure de base du Web Titre de la page: élément fondamental de communication. Il doit être signifiant Hiérarchiser et structurer le contenu: 2 niveaux de titre (3 maximum) liens hypertextes commencer par la conclusion listes à puces et numérotées mises en évidence (gras, italique, souligné) limiter la longueur (éviter « le scrolling ») -> Utiliser les ressources XHTML

25. Penser à demain : mobile

26. Questions et réponses [email_address] mastertic.blogspot.com www.delicious.com/mastertic