Please enable JavaScript.

Coggle requires JavaScript to display documents.

Ergonomie des applications et site web (12 règles de l'ergonomie WEB…

- - - - Réponds aux besoins de la persona
      - Objectif business : Satisfaction utilisateur, ventes et taux de conversion, actions utilisateurs, trafic de qualité, nombre de visites, fonctionnalités utilisées.
- - - - Savoir-faire
      - Savoir-être
      - Savoir
- - - - Attention aux erreurs Texte souligné = lien Éléments arrondi + relief = bouton
      - Favoriser les contrastes positifs = blanc sur un fond foncé
      - La lisibilité
- - - - Rythmer le texte avec des titres, des puces, signes, images pour aider à la lecture et indiquer le progrès
  - - - Éviter le trop plein d'infos, diviser la quantité de mots par deux, supprimer les intéractions inutiles - cf Loi de Gestalt - Mise en avant des informations importantes - Jouer sur le contraste - limiter le nombre de call to action sur la page.
  - - - Qui vous êtes ? Logo Ce que vous faites ? Tagline Ce que vous proposez ? Navigation
      - Infos ponctuelles
        
        Où se situe le user ? fil Ariane À quoi correspondent les éléments ? libellés les formulaires Infos additionnelles ? avantages, réassurance, comparaisons Information sur ce qui est en cours ? Information sur ce qui va se passer ?
        
        Répondre à l'user
        
        Donner du feedback
        
        À chaque action autre que le click sur lien
        
        Lors des process et des résultats d'actions
        
        Apporter de l'authenticité
        
        Permet de rassurer l'user quand il arrive sur le site avec des logos, etc.
        
        Témoignage d'autre users
    - - Impossible de faire un site qui parle à tout le monde
  - - - Éléments affordants doivent être cliquables
      - Utiliser les verbes à l'infinitif ou l'impératif
      - Les champs de saisie (non remplis, blanc sur fond de couleur ou foncé
      - Éléments de formulaires (case à cocher, menu, etc.)
      - Guider l'utilisation des formulaires
        
        Accompagner l'user tout au long du remplissage
        
        Indiquer clairement quand l'user est actif (focus)
        
        Indiquer ce qu'on attend de lui au moment où le champ est actif
        
        Indiquer les erreurs dès la sortie du champ (blur) et à la validation du formulaire (submit)
        
        Conserver les informations du formulaire si vous rechargez la page
  - - - Protéger l'user des erreurs
      - L'aider à les surmonter
      - Erreur = point de rupture dans une tâche, déception, frustration
      - Utiliser des tailles de champ adaptées et suggérant le contenu
      - Utiliser les bons input
      - Faciliter le repérage de l'erreur
      - Fournir une explication
      - Être courtois
  - - - Éviter les actions inutiles
      - Proposer des outils efficients (achat en 1 clic, whish list, auto-complétion)
  - - - Utiliser l'attribut ALT
      - Aucun contenu en CSS ou en Javascript
      - Lien pertinents utilisant l'attribut TITLE si nécessaire
      - Navigation avec les attributs TABINDEX et ACCESSKEY
      - Modération texte/image
      - Contraste suffisant
      - Taille relative des caractères (Base : 16)
    - - Sous-titrer les vidéos
      - Transcrire le contenu audio
    - - Ne pas bloquer la navigation clavier
      - Proposer des alternatives à la navigation 100% souris
      - Être attentif aux zones cliquables
    - - Menus clairs
      - Arborescence logique
      - Récupération Login et mot de passe
      - Fil d'Ariane
      - Augmenter hauteur de ligne
      - Séparer correctement les titres et les contenus
    - - Ancien navigateur
      - Bas débit
      - Plug-in absent
      - Solutions
        
        Ne pas rendre le contenu dépendant de la technique
        
        Utiliser le principe de dégradation élégante