Your SlideShare is downloading. ×
Hec Ergonomie
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Hec Ergonomie

1,048
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,048
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Ergonomie des sites Web
  • 2. Attention !
    • Si vous ne devez retenir qu’une chose de cette présentation …
    • Halte à l’amateurisme !
  • 3. L’importance de l’ergonomie
      • Site = utile et utilisable
      • Centrer le site sur l’utilisateur
        • Public cible et attentes de ce public?
        • Services offerts par l’entreprise?
        • -> 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!
  • 4. La 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.)
  • 5. Rendre 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 vis i teurs 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
  • 6. Rendre 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)
  • 7. Bien réussir sa page d’accueil (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
  • 8. Bien 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.
  • 9. 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 !
  • 10. Frames en 800/600
  • 11. En 1280/1024, le contenu occupe 30 % de l’espace !
  • 12. Trouvé sur la homepage du site de la DGATLP … ???
  • 13. Pages intérieures : règles de base - 1
    • Quelques règles à suivre:
      • Créer un standard et s’y tenir: c harte 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
  • 14. Pages 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
      • « ho rt t ogra ff e  » !!!
  • 15. Tout est en bleu… où sont les liens
  • 16. Navigation
    • 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
  • 17. Faire vivre le contenu
    • La création du site est la phase la plus 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.
  • 18. Pré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)
  • 19. Moteur 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.)
  • 20. Moteur 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.
  • 21. Les liens hypertextes - 1
      • Le lien hypertexte est l’essence du Web
      • 3 types principaux de liens :
        • vers une autre page du site
        • vers l’intérieur de la même page
        • 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
  • 22. Les liens hypertextes - 2
      • Respecter les règles standards des liens:
        • en bleu
        • s ouligné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
  • 23. Ecrire 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:
        • être bref (réduire de moitié)
        • permettre une lecture rapide
        • utiliser les liens hypertextes pour organiser les pages
      • Attention aux nouveaux utilisateurs « peu éduqués »
  • 24. Ecrire 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:
        • 2 niveaux de titre (3 maximum)
        • liens hypertextes
        • commencer par la conclusion
        • listes à puces et numérotées
        • mises en évidence (gras, italique, souligné)
        • limiter la longueur (éviter « le scrolling »)
    • -> Utiliser les ressources XHTML
  • 25. Penser à demain : mobile
  • 26. Questions et réponses
    • [email_address]
    • mastertic.blogspot.com
    • www.delicious.com/mastertic