Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e Ergonomie des sites WebErgonomie des sites Web
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
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 – 5ème ingénieur HEC-Ulg 2007/2008
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
Sauf cas exceptionnel : ne jamais 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 – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
La homepageLa homepage
Homepage: on n’a qu’une occasion de séduire. C’est la page la plus importante du site, 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 – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Rendre une homepage utile et utilisable - 1Rendre une homepage utile et utilisable - 1
Prévoir une phrase de sous-titre présentant ce que fait l’entreprise et le site
Mettre le nom de l’entreprise dans la balise méta « title »
Grouper les informations sur l’entreprise à un endroit
Mettre en évidence les priorités et plus-values du site (ce que les visiteurs y font !)
Prévoir une zone de recherche (en haut) Donner des exemples de ce qu’il y a à l’intérieur du
site, en valorisant le meilleur et le plus récent
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Rendre une homepage utile et utilisable - 2Rendre une homepage utile et utilisable - 2
Placer des mots clés dans les liens, si possible comme premiers mots
Faciliter l’accès aux éléments les plus récents de la page d’accueil
Ne pas sur-formater et sur-illustrer les zones importantes (les utilisateurs se concentrent sur ce qui a l’air utile)
Utiliser des illustrations et graphiques utiles (il vaut mieux montrer la photo d’une vraie personne que celle d’un modèle)
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
eBien réussir sa page d’accueilBien réussir sa page d’accueil
(ou au moins essayer)(ou au moins essayer)
Professionnel, gai, attractif Adapté au profil de l’entreprise Design spécifique, juste milieu entre
classicisme et originalité (unité dans la variété) Centrée sur le point de vue de l’utilisateur Hiérarchisée Utilisation optimale de l’espace (adaptation à
l’écran) Penser aux méta-tags
-> Standards Web: XHTML/CSS
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
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 – 5ème ingénieur HEC-Ulg 2007/2008
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 – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Frames en 800/600
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
En 1280/1024, le contenu occupe 30
% de l’espace !
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
eTrouvé sur la homepage du siteTrouvé sur la homepage du site
de la DGATLP …de la DGATLP …
???
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Pages intérieures : règles de base - 1Pages intérieures : règles de base - 1
Quelques règles à suivre:
Créer un standard et s’y tenir: charte graphique cohérente et systématique -> fidélisation et facilité d’usage
Longueur: ni trop long (trop d’infos), ni trop court(pas assez d’infos). Paginer si nécessaire
Réserver l’espace au contenu! Séparer le contenu de la forme
-> Standards Web: XHTML/CSS
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Pages intérieures : règles de base - 2Pages intérieures : règles de base - 2
Pas de frame (cadres) Affichage correct pour tous les browsers standards
(Explorer, Netscape, Mozilla, Opera, etc.) -> Attention aux versions !!!
Pages légères (30k), même si l’ADSL progresse (pas trop d’images)
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 » !!!
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Tout est en bleu… où sont les liens
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
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 – 5ème ingénieur HEC-Ulg 2007/2008
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 – 5ème ingénieur HEC-Ulg 2007/2008
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 – 5ème ingénieur HEC-Ulg 2007/2008
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 – 5ème ingénieur HEC-Ulg 2007/2008
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 – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Les liens hypertextes - 1Les liens hypertextes - 1
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 Ne pas activer un lien vers la page courante
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Les liens hypertextes - 2Les liens hypertextes - 2
Respecter les règles standards des liens:o en bleuo soulignés… mais on peut parfois déroger!
Réservez impérativement 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 – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Ecrire pour le Web - 1Ecrire pour le Web - 1
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
Rédiger pour le Web -> 3 règles:o être bref (réduire de moitié)o permettre une lecture rapideo utiliser les liens hypertextes pour organiser les
pages Attention aux nouveaux utilisateurs « peu
éduqués »
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Ecrire pour le Web - 2Ecrire pour le Web - 2
La page: structure de base du Web Titre de la page: élément fondamental de
communication. Il doit être signifiant Hiérarchiser et structurer le contenu:
o 2 niveaux de titre (3 maximum)o liens hypertexteso commencer par la conclusiono listes à puces et numérotéeso mises en évidence (gras, italique, souligné)o limiter la longueur (éviter « le scrolling »)
-> Utiliser les ressources XHTML
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Penser à demain : mobilePenser à demain : mobile
Veille technologique TIC – 5ème ingénieur HEC-Ulg 2007/2008
AW
T w
ww
.aw
t.b
e
Questions et réponsesQuestions et réponses
mastertic.blogspot.com
www.delicious.com/mastertic
Recommended
