Download - Un site Web de qualité
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e Ergonomie des sites WebErgonomie des sites Web
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Attention !Attention !
Si vous ne devez retenir qu’une chose de cette présentation …
Halte à l’amateurisme !
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Valider votre site Web en 30 points *Valider votre site Web en 30 points *
1. Identifier les objectifs2. Qui fait quoi? -> Rassembler un équipe3. Affecter les priorités aux projets4. Gérer le calendrier5. Trouver l’équilibre entre « visuel » et « fonctionnel »6. Eviter la page d’accueil « de la mort »7. Privilégier la vitesse8. Eliminer les erreurs … notamment « 404 »9. Proposer un plan de site et des FAQs10. Tester sur des êtres vivants ;-)
* Adapté de Jim Sterne
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Valider votre site Web en 30 pointsValider votre site Web en 30 points
11. Viser la cohérence12. Améliorer le référencement13. Optimiser la publicité14. Utiliser et maîtriser l’e-mail15. Améliorer votre newsletter16. Faire de la promotion en ligne hors ligne17. Adopter un autre point de vue sur votre site18. Eviter la déception des anticipations19. Respecter le modèle mental de l’utilisateur20. Maîtriser ses coûts
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Valider votre site Web en 30 pointsValider votre site Web en 30 points
21. Rester dans le coup22. Faire vivre le site23. Intégrer le contenu généré par les utilisateurs24. Ecouter les utilisateurs25. Connaître et segmenter les utilisateurs26. Aider les utilisateurs à atteindre leurs objectifs27. Surveiller votre réputation28. Fournir une « expérience utilisateur »29. Mesurer la fréquentation et les résultats marketing30. Surveiller la concurrence
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Eviter une Bérézina à votre site WebEviter une Bérézina à votre site Web
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Ne pas nuire au client !!!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 !
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
eL’importance de l’ergonomieL’importance de l’ergonomie
Site = utile et utilisable Centrer le site sur l’utilisateur
o Public cible et attentes de ce public?o Services offerts par l’entreprise?o -> 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!
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
La homepageLa 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.)
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Une homepage utile et utilisableUne 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 visiteurs 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)
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Wouaaa ... Pas mal !... Et pourtant !
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Aucun lien, alors qu’on s’y attend
Lien très peu intuitif
Aucun lien, alors qu’on s’y attend
Hiérarchisationdu texte
On s’en fout !
Pub Carrefour ;-)
C’est quoi ?
Qui a vu le ministre ?
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Bien rater sa page d’accueilBien 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.
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
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 !
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Frames en 800/600
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
En 1280/1024, le contenu occupe 30
% de l’espace !
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Screenshot le ... 18/02/2009 !!!
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Pages intérieures : règles de basePages intérieures : règles de base
Créer un standard et s’y tenir-> charte 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 « horttograffe » !!!
-> Standards Web: XHTML/CSS
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Tout est en bleu… où sont les liens
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
NavigationNavigation
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
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Faire vivre le contenuFaire vivre le contenu
La création du site est la phase laplus 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.
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Prévoir un outil de recherche performantPré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)
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Moteur de recherche : page de rechercheMoteur 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.)
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Moteur de recherche : résultatsMoteur 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.
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Les liens hypertextesLes liens hypertextes
Le lien hypertexte est l’essence du Web 3 types principaux de liens :
o vers une autre page du siteo vers l’intérieur de la même pageo 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:
o en bleuo souligné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
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Ecrire pour le Web - 1Ecrire pour le Web - 1
Page = structure de base du Web Titre : élément fondamental -> doit être signifiant Hiérarchiser et structurer le contenu :
o 2 à 3 niveaux de titre (lecture rapide)o liens hypertexteso listes à puces et numérotéeso mises en évidence (gras, italique, souligné)o 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 »
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Penser à demain : mobilePenser à demain : mobile
Veille technologique TIC – 2ème master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Questions et réponsesQuestions et réponses
mastertic.blogspot.com
www.delicious.com/mastertic