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


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 !


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


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


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


AW

T w

ww

.aw

t.b

e

Eviter une Bérézina à votre site WebEviter une Bérézina à votre site Web


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 !


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!


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


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)


AW

T w

ww

.aw

t.b

e

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


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 ?


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.


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 !


AW

T w

ww

.aw

t.b

e

Frames en 800/600


AW

T w

ww

.aw

t.b

e

En 1280/1024, le contenu occupe 30

% de l’espace !


AW

T w

ww

.aw

t.b

e

Screenshot le ... 18/02/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


AW

T w

ww

.aw

t.b

e

Tout est en bleu… où sont les liens


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


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.


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)


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


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.


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


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 »


AW

T w

ww

.aw

t.b

e

Penser à demain : mobilePenser à demain : mobile


AW

T w

ww

.aw

t.b

e

Questions et réponsesQuestions et réponses

[email protected]

mastertic.blogspot.com

www.delicious.com/mastertic

Un site Web de qualité

Education

Transcript of Un site Web de qualité