Hec Ergonomie

  • View
    1.101

  • Download
    5

Embed Size (px)

Transcript

  • 1. Ergonomie des sites Web

2. Attention !

  • Si vous ne devez retenir quune chose de cette prsentation
  • Halte lamateurisme !

3. Limportance de lergonomie

    • Site = utile et utilisable
    • Centrer le site sur lutilisateur
      • Public cible et attentes de ce public?
      • Services offerts par lentreprise?
      • -> faire correspondre les 2 !
    • Sur Internet, cest lutilisateur qui est aux commandes
    • Plusieurs millions de sites disponibles: lutilisateur ne perdra pas son temps sur un site dont lergonomie est dfaillante
    • Sauf cas exceptionnel : ne jamais faire de pari sur la configuration de lordinateur 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 na quune occasion de sduire.Cest la page la plus importante du site, limage de lentreprise devant le monde !
  • Objectifs:
    • identifier clairement lentreprise
    • identifier clairement les services proposs
    • montrer la valeur ajoute pour lutilisateur
    • fournir des liens pour encourager la visite
  • Mtaphore:couverture de magazine ou dos de couverture dun livre
  • Privilgier les structures portail... Sauf par exemple pour des sites spcifiques (vnements, etc.)

5. Rendre une homepage utile et utilisable - 1

    • Prvoir une phrase de sous-titreprsentant ce que fait lentreprise et le site
    • Mettre le nom de lentreprisedans la balise mta title
    • Grouper les informations sur lentreprise un endroit
    • Mettre en vidence les prioritset plus-values du site (ce que les vis i teurs y font !)
    • Prvoir une zone de recherche(en haut)
    • Donner des exemplesde ce quil y a lintrieur du site, en valorisant le meilleur et le plus rcent

6. Rendre une homepage utile et utilisable - 2

    • Placer des mots cls dans les liens , si possible comme premiers mots
    • Faciliter laccs aux lments les plus rcentsde la page daccueil
    • Ne pas sur-formater et sur-illustrer les zones importantes(les utilisateurs se concentrent sur ce qui a lair utile)
    • Utiliser des illustrations et graphiques utiles(il vaut mieux montrer la photo dune vraie personne que celle dun modle)

7. Bien russir sa page daccueil (ou au moins essayer)

    • Professionnel, gai, attractif
    • Adapt au profilde lentreprise
    • Design spcifique , juste milieu entre classicisme et originalit (unit dans la varit)
    • Centre sur le point de vue de lutilisateur
    • Hirarchise
    • Utilisation optimale de lespace(adaptation lcran)
    • Penser aux mta-tags
    • -> Standards Web: XHTML/CSS

8. Bien rater sa page daccueil

    • Absence du nomde lentreprise
    • Trop lourde charger ou trop longue(scrolling)
    • Frames(cadres)
    • Trop de publicits(confusion avec le contenu)
    • Page tunnel(sauf obligation lgale) : flash sans valeur, mot de bienvenue, etc.
    • Pages graphiquessapin de Nol
    • Informations parasites(browser, stats, etc.)
    • Textes trop longs, liens ambigus ou mal rdigs, etc.

9. La meilleure place est rserve une information sans vritable intrt Ce qui est important est presque cach! Ont-ils vraiment envie que lon cherche ! 10. Frames en 800/600 11. En 1280/1024, le contenu occupe 30 % de lespace ! 12. Trouv sur la homepage du site de la DGATLP ??? 13. Pages intrieures : rgles de base - 1

  • Quelques rgles suivre:
    • Crer un standard et sy tenir:c harte graphique cohrente et systmatique -> fidlisation et facilit dusage
    • Longueur:ni trop long (trop dinfos), ni trop court (pas assez dinfos). Paginer si ncessaire
    • Rserver lespace au contenu!
    • Sparer le contenu de la forme
    • -> Standards Web: XHTML/CSS

14. Pages intrieures : rgles de base - 2

    • Pas de frame(cadres)
    • Affichage correct pour tous les browsersstandards (Explorer, Netscape,Mozilla,Opera, etc . )-> Attention aux versions !!!
    • Pages lgres(30k), mme si lADSL progresse (pas trop dimages)
    • Images et animations: rflchir en terme de convivialit et de plus-value!!
    • Couleur de fond: le mieux reste le blanc (couleur du texte = noir)
    • Blocs cohrents
    • ho rt t ogra ff e !!!

15. Tout est en bleu o sont les liens 16. Navigation

  • Lutilisateur doit toujours savoir :
    • o il est
    • do il vient
    • o il peut aller
    • Afficher un chemin de navigation
    • Textes non-ambiguset utilisant toujours le mme vocabulaire
    • Ne pas dbrayer les fonctionnalitsdu browser

17. Faire vivre le contenu

  • La cration du site est la phase la plus simple
  • ensuite il faut le faire vivre:
    • Contenu mis jour
    • Animations, interactivit,
    • Impliquer le personnel et dsigner des responsables
    • Service 24 heures sur 24
    • Intgration avec le back-office (exemple : une promotion, mais plus de stock !)
    • Le site nest pas un truc ct de lentreprise
    • Gestion des liens
    • Etc.

18. Prvoir un outil de recherche performant

    • Moteur de recherche: indispensable
    • mais la limite , mieux vaut rien quun mauvais moteur de recherche
    • Faciliter la vie de linternaute: il entre instinctivement des mots cls en rapport avec son sujet dintrt et attend que le systme lui donne les rsultats adquats
    • Complment logique dun catalogue
    • Regarder Google
    • Tester, tester ... et tester
    • Modle ASP (Application Service Provider)

19. Moteur de recherche : page de recherche

  • Page daccueil et pages intrieures :
    • Facilement accessible (coin suprieur droit)
    • Simple, large, bien indique, bouton clair
    • Lien vers une page de recherche plus avance
    • viter la confusion avec dautres zones
  • Page de recherche spcifique :
    • Liaison entre les mots cls
    • Slection de certaines rubriques spcifiques
    • Critres (date de mise en ligne, etc.)

20. Moteur de recherche : rsultats

    • Nombre de rsultatstrouvs et de pages
    • Rappel des motsrecherchs
    • Liste de suggestionsvers des raccourcis
    • Accs direct chaque pagede rsultats (liste numrote, page actuelle mise en vidence)
    • Titre de la page trouve+ lien
    • Descriptionde la page trouve
    • Adresse directede la page
    • Date de dernire mise jour
    • Nom de la rubrique globale (et lien)
    • Etc.

21. Les liens hypertextes - 1

    • Le lien hypertexte est lessence du Web
    • 3 types principaux de liens :
      • vers une autre page du site
      • vers lintrieur de la mme page
      • vers un autre site
    • Lien auto-descriptif(viter le cliquez ici). Le lien