Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,015
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
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