Hec Ergonomie
Upcoming SlideShare
Loading in...5
×
 

Hec Ergonomie

on

  • 1,537 views

 

Statistics

Views

Total Views
1,537
Views on SlideShare
1,456
Embed Views
81

Actions

Likes
0
Downloads
20
Comments
0

1 Embed 81

http://formationwordpress.com 81

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hec Ergonomie Hec Ergonomie Presentation Transcript

    • Ergonomie des sites Web
    • Attention !
      • Si vous ne devez retenir qu’une chose de cette présentation …
      • Halte à l’amateurisme !
    • 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!
    • 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.)
    • 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
    • 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)
    • 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
    • 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.
    • 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 !
    • Frames en 800/600
    • En 1280/1024, le contenu occupe 30 % de l’espace !
    • Trouvé sur la homepage du site de la DGATLP … ???
    • 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
    • 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  » !!!
    • Tout est en bleu… où sont les liens
    • 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
    • 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.
    • 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)
    • 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.)
    • 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.
    • 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
    • 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
    • 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 »
    • 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
    • Penser à demain : mobile
    • Questions et réponses
      • [email_address]
      • mastertic.blogspot.com
      • www.delicious.com/mastertic