Un site Web de qualité

1,105 views

Published on

Support de cours d'andré Blavier pour le module "Ergonomie des sites Web" du cours de veille technologique en TIC en 2ème master IG HEC-ULg 2008/2009

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,105
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
62
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Un site Web de qualité

  1. 1. Ergonomie des sites Web
  2. 2. Attention ! <ul><li>Si vous ne devez retenir qu’une chose de cette présentation … </li></ul><ul><li>Halte à l’amateurisme ! </li></ul>
  3. 3. Valider votre site Web en 30 points * <ul><ul><li>Identifier les objectifs </li></ul></ul><ul><ul><li>Qui fait quoi? -> Rassembler un équipe </li></ul></ul><ul><ul><li>Affecter les priorités aux projets </li></ul></ul><ul><ul><li>Gérer le calendrier </li></ul></ul><ul><ul><li>Trouver l’équilibre entre « visuel » et « fonctionnel » </li></ul></ul><ul><ul><li>Eviter la page d’accueil « de la mort » </li></ul></ul><ul><ul><li>Privilégier la vitesse </li></ul></ul><ul><ul><li>Eliminer les erreurs … notamment « 404 » </li></ul></ul><ul><ul><li>Proposer un plan de site et des FAQs </li></ul></ul><ul><ul><li>Tester sur des êtres vivants ;-) </li></ul></ul><ul><li>* Adapté de Jim Sterne </li></ul>
  4. 4. Valider votre site Web en 30 points <ul><ul><li>Viser la cohérence </li></ul></ul><ul><ul><li>Améliorer le référencement </li></ul></ul><ul><ul><li>Optimiser la publicité </li></ul></ul><ul><ul><li>Utiliser et maîtriser l’e-mail </li></ul></ul><ul><ul><li>Améliorer votre newsletter </li></ul></ul><ul><ul><li>Faire de la promotion en ligne hors ligne </li></ul></ul><ul><ul><li>Adopter un autre point de vue sur votre site </li></ul></ul><ul><ul><li>Eviter la déception des anticipations </li></ul></ul><ul><ul><li>Respecter le modèle mental de l’utilisateur </li></ul></ul><ul><ul><li>Maîtriser ses coûts </li></ul></ul>
  5. 5. Valider votre site Web en 30 points <ul><ul><li>Rester dans le coup </li></ul></ul><ul><ul><li>Faire vivre le site </li></ul></ul><ul><ul><li>Intégrer le contenu généré par les utilisateurs </li></ul></ul><ul><ul><li>Ecouter les utilisateurs </li></ul></ul><ul><ul><li>Connaître et segmenter les utilisateurs </li></ul></ul><ul><ul><li>Aider les utilisateurs à atteindre leurs objectifs </li></ul></ul><ul><ul><li>Surveiller votre réputation </li></ul></ul><ul><ul><li>Fournir une « expérience utilisateur » </li></ul></ul><ul><ul><li>Mesurer la fréquentation et les résultats marketing </li></ul></ul><ul><ul><li>Surveiller la concurrence </li></ul></ul>
  6. 6. Eviter une Bérézina à votre site Web
  7. 7. Ne pas nuire au client !!! <ul><ul><li>Ne jamais perdre les données qu’il introduit ! -> panne du serveur, « personne de fait ça », demande de l’informaticien, ... : mauvaises excuses </li></ul></ul><ul><ul><li>Aucune excuse valabe ! -> le client déçu ne vous excusera jamais ! </li></ul></ul><ul><ul><li>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 ! </li></ul></ul><ul><ul><li>Enlever toutes les pages inutiles et les intro « Flash » </li></ul></ul><ul><ul><li>Minimiser les premières demandes d’infos et les pré-enregistrement </li></ul></ul><ul><ul><li>Vérifier que la recherche et la navigation fonctionnent ! </li></ul></ul><ul><ul><li>Réserver les photos et animations aux produits ! </li></ul></ul>
  8. 8. L’importance de l’ergonomie <ul><ul><li>Site = utile et utilisable </li></ul></ul><ul><ul><li>Centrer le site sur l’utilisateur </li></ul></ul><ul><ul><ul><li>Public cible et attentes de ce public? </li></ul></ul></ul><ul><ul><ul><li>Services offerts par l’entreprise? </li></ul></ul></ul><ul><ul><ul><li>-> faire correspondre les 2 ! </li></ul></ul></ul><ul><ul><li>Sur Internet, c’est l’utilisateur qui est aux commandes </li></ul></ul><ul><ul><li>Plusieurs millions de sites disponibles : l’utilisateur ne perdra pas son temps sur un site dont l’ergonomie est défaillante </li></ul></ul><ul><ul><li>Ne pas faire de pari sur la configuration de l’ordinateur du client , ni sur la connaissance technique du client </li></ul></ul><ul><ul><li>Penser au commerce classique et à la vie de tous les jours! </li></ul></ul>
  9. 9. La homepage <ul><li>Homepage: on n’a qu’une occasion de séduire. -> l’image de l’entreprise devant le monde ! </li></ul><ul><li>Objectifs: </li></ul><ul><ul><li>identifier clairement l’entreprise </li></ul></ul><ul><ul><li>identifier clairement les services proposés </li></ul></ul><ul><ul><li>montrer la valeur ajoutée pour l’utilisateur </li></ul></ul><ul><ul><li>fournir des liens pour encourager la visite </li></ul></ul><ul><li>Métaphore: couverture de magazine ou dos de couverture d’un livre </li></ul><ul><li>Privilégier les structures « portail » ... Sauf par exemple pour des sites spécifiques (événements, etc.) </li></ul>
  10. 10. Une homepage utile et utilisable <ul><ul><li>Charte graphique adaptée au profil de l’entreprise </li></ul></ul><ul><ul><li>Design spécifique , classique/original unité/variété </li></ul></ul><ul><ul><li>Centrée sur le point de vue de l’utilisateur </li></ul></ul><ul><ul><li>Phrase de sous-titre (baseline) présentant ce que fait l’entreprise et le site </li></ul></ul><ul><ul><li>Méta-tags (par exemple le nom de l’entreprise dans la balise méta « title ») </li></ul></ul><ul><ul><li>Grouper les informations sur l’entreprise </li></ul></ul><ul><ul><li>Hiérachie correcte -> éléments récents, promos, plus-values du site (ce que les vis i teurs y font !) </li></ul></ul><ul><ul><li>Zone de recherche (en haut) </li></ul></ul><ul><ul><li>Exemples de ce qu’il y a à l’intérieur du site -> valoriser le meilleur et le plus récent </li></ul></ul><ul><ul><li>Mots clés dans les liens -> premiers mots </li></ul></ul><ul><ul><li>Utiliser des illustrations et graphiques utiles (vraies photos par exemple) </li></ul></ul>
  11. 11. Wouaaa ... Pas mal ! ... Et pourtant !
  12. 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. 13. Bien rater sa page d’accueil <ul><ul><li>Absence du nom de l’entreprise </li></ul></ul><ul><ul><li>Trop lourde à charger ou trop longue (scrolling) </li></ul></ul><ul><ul><li>Frames (cadres) </li></ul></ul><ul><ul><li>Trop de publicités (confusion avec le contenu) </li></ul></ul><ul><ul><li>Page tunnel (sauf obligation légale) : flash sans valeur, mot de bienvenue, etc. </li></ul></ul><ul><ul><li>Pages graphiques « sapin de Noël » </li></ul></ul><ul><ul><li>Informations parasites (browser, stats, etc.) </li></ul></ul><ul><ul><li>Textes trop longs, liens ambigus ou mal rédigés, etc. </li></ul></ul>
  14. 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. 15. Frames en 800/600
  16. 16. En 1280/1024, le contenu occupe 30 % de l’espace !
  17. 17. Screenshot le ... 18/02/2009 !!!
  18. 18. Pages intérieures : règles de base <ul><ul><li>Créer un standard et s’y tenir -> c harte graphique cohérente et systématique </li></ul></ul><ul><ul><li>Longueur: ni trop long (trop d’infos), ni trop court. Le poids a moins d’importance qu’avant ! </li></ul></ul><ul><ul><li>Réserver l’espace au contenu </li></ul></ul><ul><ul><li>Séparer le contenu de la forme </li></ul></ul><ul><ul><li>Pas de frame (cadres) </li></ul></ul><ul><ul><li>Affichage correct pour tous les browsers standards (Explorer, Firefox, Safari, etc . ) </li></ul></ul><ul><ul><li>Images et animations -> réfléchir en terme de convivialité et de plus-value !! </li></ul></ul><ul><ul><li>Couleur de fond -> le mieux reste le blanc (couleur du texte = noir) </li></ul></ul><ul><ul><li>Blocs cohérents </li></ul></ul><ul><ul><li>« ho rt t ogra ff e  » !!! </li></ul></ul><ul><li>-> Standards Web: XHTML/CSS </li></ul>
  19. 19. Tout est en bleu… où sont les liens
  20. 20. Navigation <ul><li>L’utilisateur doit toujours savoir : </li></ul><ul><ul><li>où il est </li></ul></ul><ul><ul><li>d’où il vient </li></ul></ul><ul><ul><li>où il peut aller </li></ul></ul><ul><ul><li>Afficher un chemin de navigation </li></ul></ul><ul><ul><li>Textes non-ambigus et utilisant toujours le même vocabulaire </li></ul></ul><ul><ul><li>Ne pas « débrayer » les fonctionnalités du browser </li></ul></ul>
  21. 21. Faire vivre le contenu <ul><li>La création du site est la phase la plus simple… </li></ul><ul><li>… ensuite il faut le faire vivre: </li></ul><ul><ul><li>contenu mis à jour </li></ul></ul><ul><ul><li>animations, interactivité, </li></ul></ul><ul><ul><li>impliquer le personnel et désigner des responsables </li></ul></ul><ul><ul><li>service 24 heures sur 24 </li></ul></ul><ul><ul><li>intégration avec le back-office (exemple : une promotion, mais plus de stock !) </li></ul></ul><ul><ul><li>le site n’est pas « un truc » à côté de l’entreprise </li></ul></ul><ul><ul><li>gestion des liens </li></ul></ul><ul><ul><li>etc. </li></ul></ul>
  22. 22. Prévoir un outil de recherche performant <ul><ul><li>Moteur de recherche : indispensable </li></ul></ul><ul><ul><li>… mais à la limite , mieux vaut rien qu’un mauvais moteur de recherche </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>Complément logique d’un catalogue </li></ul></ul><ul><ul><li>Regarder Google </li></ul></ul><ul><ul><li>Tester, tester ... et tester </li></ul></ul><ul><ul><li>Modèle ASP (Application Service Provider) </li></ul></ul>
  23. 23. Moteur de recherche : page de recherche <ul><li>Page d’accueil et pages intérieures : </li></ul><ul><ul><li>Facilement accessible (coin supérieur droit) </li></ul></ul><ul><ul><li>Simple, large, bien indiquée, bouton clair </li></ul></ul><ul><ul><li>Lien vers une page de recherche plus avancée </li></ul></ul><ul><ul><li>Éviter la confusion avec d’autres zones </li></ul></ul><ul><li>Page de recherche spécifique : </li></ul><ul><ul><li>Liaison entre les mots clés </li></ul></ul><ul><ul><li>Sélection de certaines rubriques spécifiques </li></ul></ul><ul><ul><li>Critères (date de mise en ligne, etc.) </li></ul></ul>
  24. 24. Moteur de recherche : résultats <ul><ul><li>Nombre de résultats trouvés et de pages </li></ul></ul><ul><ul><li>Rappel des mots recherchés </li></ul></ul><ul><ul><li>Liste de suggestions vers des raccourcis </li></ul></ul><ul><ul><li>Accès direct à chaque page de résultats (liste numérotée, page actuelle mise en évidence) </li></ul></ul><ul><ul><li>Titre de la page trouvée + lien </li></ul></ul><ul><ul><li>Description de la page trouvée </li></ul></ul><ul><ul><li>Adresse directe de la page </li></ul></ul><ul><ul><li>Date de dernière mise à jour </li></ul></ul><ul><ul><li>Nom de la rubrique globale (et lien) </li></ul></ul><ul><ul><li>Etc. </li></ul></ul>
  25. 25. Les liens hypertextes <ul><ul><li>Le lien hypertexte est l’essence du Web </li></ul></ul><ul><ul><li>3 types principaux de liens : </li></ul></ul><ul><ul><ul><li>vers une autre page du site </li></ul></ul></ul><ul><ul><ul><li>vers l’intérieur de la même page </li></ul></ul></ul><ul><ul><ul><li>vers un autre site </li></ul></ul></ul><ul><ul><li>Lien auto-descriptif (éviter le « cliquez ici »). Le lien permet de structurer la page </li></ul></ul><ul><ul><li>Texte plus efficace que l’image </li></ul></ul><ul><ul><li>Pas de lien vers la page courante </li></ul></ul><ul><ul><li>Respecter les règles standards des liens: </li></ul></ul><ul><ul><ul><li>en bleu </li></ul></ul></ul><ul><ul><ul><li>s oulignés </li></ul></ul></ul><ul><ul><ul><li>… on peut parfois déroger, mais il faut réserver ces règles aux liens </li></ul></ul></ul><ul><ul><li>Rédaction claire indiquant de manière synthétique vers où on va et ce que l’on va trouver comme information </li></ul></ul>
  26. 26. Ecrire pour le Web - 1 <ul><ul><li>Page = structure de base du Web </li></ul></ul><ul><ul><li>Titre : élément fondamental -> doit être signifiant </li></ul></ul><ul><ul><li>Hiérarchiser et structurer le contenu : </li></ul></ul><ul><ul><ul><li>2 à 3 niveaux de titre (lecture rapide) </li></ul></ul></ul><ul><ul><ul><li>liens hypertextes </li></ul></ul></ul><ul><ul><ul><li>listes à puces et numérotées </li></ul></ul></ul><ul><ul><ul><li>mises en évidence (gras, italique, souligné) </li></ul></ul></ul><ul><ul><ul><li>utiliser les ressources XHTML (blocs, tableaux, etc.) </li></ul></ul></ul><ul><ul><li>Etre bref et commencer par la conclusion </li></ul></ul><ul><ul><li>On ne lit pas un site comme un livre (l’internaute perd 25% de ses capacités de lecture -> lecture par balayage) </li></ul></ul><ul><ul><li>L’internaute s’intéresse d’abord au texte , et notamment aux titres, pour voir si la page l’intéresse </li></ul></ul><ul><ul><li>Mots clés </li></ul></ul><ul><ul><li>Attention aux nouveaux utilisateurs « peu éduqués » </li></ul></ul>
  27. 27. Penser à demain : mobile
  28. 28. Questions et réponses <ul><li>[email_address] </li></ul><ul><li>mastertic.blogspot.com </li></ul><ul><li>www.delicious.com/mastertic </li></ul>

×