Un site Web de qualité

1 019 vues

Publié le

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

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 019
Sur SlideShare
0
Issues des intégrations
0
Intégrations
27
Actions
Partages
0
Téléchargements
62
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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>

×