Le document fournit des recommandations sur l'ergonomie des sites web, visant à améliorer l'expérience utilisateur en équilibrant visuel et fonctionnalité. Il souligne l'importance de la validation du site à travers 30 points critiques, tels que la rapidité, la cohérence et l'accessibilité des informations. Enfin, il insiste sur la nécessité de maintenir un contenu actualisé et d'impliquer les utilisateurs dans le processus de conception et de gestion du site.

1. Ergonomie des sites Web

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

3. Valider votre site Web en 30 points * Identifier les objectifs Qui fait quoi? -> Rassembler un équipe Affecter les priorités aux projets Gérer le calendrier Trouver l’équilibre entre « visuel » et « fonctionnel » Eviter la page d’accueil « de la mort » Privilégier la vitesse Eliminer les erreurs … notamment « 404 » Proposer un plan de site et des FAQs Tester sur des êtres vivants ;-) * Adapté de Jim Sterne

4. Valider votre site Web en 30 points Viser la cohérence Améliorer le référencement Optimiser la publicité Utiliser et maîtriser l’e-mail Améliorer votre newsletter Faire de la promotion en ligne hors ligne Adopter un autre point de vue sur votre site Eviter la déception des anticipations Respecter le modèle mental de l’utilisateur Maîtriser ses coûts

5. Valider votre site Web en 30 points Rester dans le coup Faire vivre le site Intégrer le contenu généré par les utilisateurs Ecouter les utilisateurs Connaître et segmenter les utilisateurs Aider les utilisateurs à atteindre leurs objectifs Surveiller votre réputation Fournir une « expérience utilisateur » Mesurer la fréquentation et les résultats marketing Surveiller la concurrence

6. Eviter une Bérézina à votre site Web

7. Ne pas nuire au client !!! Ne jamais perdre les données qu’il introduit ! -> panne du serveur, « personne de fait ça », demande de l’informaticien, ... : mauvaises excuses Aucune excuse valabe ! -> le client déçu ne vous excusera jamais ! Utiliser correctement les infos du client -> je cherche un vol pour dans un mois, ne proposez pas une réservation d’hôtel pour ... Demain ! Enlever toutes les pages inutiles et les intro « Flash » Minimiser les premières demandes d’infos et les pré-enregistrement Vérifier que la recherche et la navigation fonctionnent ! Réserver les photos et animations aux produits !

8. 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 Ne pas 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!

9. La homepage Homepage: on n’a qu’une occasion de séduire. -> 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.)

10. Une homepage utile et utilisable Charte graphique adaptée au profil de l’entreprise Design spécifique , classique/original unité/variété Centrée sur le point de vue de l’utilisateur Phrase de sous-titre (baseline) présentant ce que fait l’entreprise et le site Méta-tags (par exemple le nom de l’entreprise dans la balise méta « title ») Grouper les informations sur l’entreprise Hiérachie correcte -> éléments récents, promos, plus-values du site (ce que les vis i teurs y font !) Zone de recherche (en haut) Exemples de ce qu’il y a à l’intérieur du site -> valoriser le meilleur et le plus récent Mots clés dans les liens -> premiers mots Utiliser des illustrations et graphiques utiles (vraies photos par exemple)

11. Wouaaa ... Pas mal ! ... Et pourtant !

12. Aucun lien, alors qu’on s’y attend Lien très peu intuitif Aucun lien, alors qu’on s’y attend Hiérarchisation du texte On s’en fout ! Pub Carrefour ;-) C’est quoi ? Qui a vu le ministre ?

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

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

15. Frames en 800/600

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

17. Screenshot le ... 18/02/2009 !!!

18. Pages intérieures : règles de base Créer un standard et s’y tenir -> c harte graphique cohérente et systématique Longueur: ni trop long (trop d’infos), ni trop court. Le poids a moins d’importance qu’avant ! Réserver l’espace au contenu Séparer le contenu de la forme Pas de frame (cadres) Affichage correct pour tous les browsers standards (Explorer, Firefox, Safari, etc . ) 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 » !!! -> Standards Web: XHTML/CSS

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

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

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

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

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

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

25. Les liens hypertextes 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 Pas de lien vers la page courante Respecter les règles standards des liens: en bleu s oulignés … on peut parfois déroger, mais il faut réserver 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

26. Ecrire pour le Web - 1 Page = structure de base du Web Titre : élément fondamental -> doit être signifiant Hiérarchiser et structurer le contenu : 2 à 3 niveaux de titre (lecture rapide) liens hypertextes listes à puces et numérotées mises en évidence (gras, italique, souligné) utiliser les ressources XHTML (blocs, tableaux, etc.) Etre bref et commencer par la conclusion 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 Mots clés Attention aux nouveaux utilisateurs « peu éduqués »

27. Penser à demain : mobile

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