Please enable JavaScript.
Coggle requires JavaScript to display documents.
Ergonomie des applications et site web (Gilbert Nzeka) (Les 12 règles de…
Ergonomie des applications et site web (Gilbert Nzeka)
Introduction à l'ergonomie Web
Qu'est est ce que l'ergonomie ?
L'ensemble des connaissances scientifiques relatives à l'Homme nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité
3 notions importantes
Confort
Sécurité
Efficacité
Un site web ergonomique c'est
Un site utile
Utilisable
D'abord chercher ce que sont les besoins utilisateurs
Benchmarker ce qui se fait sur le marché
Connaitre les bonnes pratiques
Ordre de production : UX > UI
Chercher l'utilité, définir l'archi de l'info > Ergonomie > Tester > améliorer etc.
Utilité :
L'interface sert pour l'utilisateur
L'aspect humain :
Améliorer la sécurité, le confort, la santé etc.
Objectifs de l'ergonomie :
L'aspect business
Satisfaction utilisateurs
Ventes et taux de conversion
Actions utilisateurs (création de compte, inscription newsletters)
Trafic et sa qualité, nombre de visites, de pages vues, fonctionnalités utilisées
Selon une étude , 1$ investi dans l'UX génère 100$ en activité
Etre visible pour attirer
Fidéliser pour pérenniser son activité
Ce sont aussi des normes
Normes AFNOR Z67
Psychologie cognitive
Etude des fonctionnements de mécanismes mentaux qui sous-tendent les comportements humains
Chercher l'utilisation instinctive, sans explications
L'usabilité se mesure dans le fait de pouvoir utiliser un site/app sans explications, de façon intuitive
COGNITION
Processus d'acquisition, de stocjkage et de rappel des savoirs.
Continuité des informations affichées page à page
Savoir, Savoir-faire, Savoir être
Capitaliser sur la connaissance déjà acquise par les users
Ne pas chercher à révolutionner
Attention : sorte de normalisation
Stockage : Memorisation de l'user. Manipuler l'user, chercher l'influence pour leur faciliter la vie après
Rappel des savoirs : faire appel aux informations stockées par l'user
L'user ne doit jamais se poser de questions
générateur d'esprit critique
Processus en œuvre
Perception
Apprentissage
Langage
Mémoire
Attention
Résolution de problème
Email Gilbert :
pro@gilbertnzeka.com
Les lois à connaitre
Théories de la GESTALT
Lois de proximité
Tout ce que st proche est de la même famille
Exemple pratique
Rassembler les données par grands ensemble cohérent
Lois de similarité
Tout ce qui se ressemble est associé
Zones couleurs identiques pour infos identiques
chercher l'aspect graphique similaire
si trop de fioritures graphiques, perturbation de la lecture
Loi de clôture
Le cerveau reconstitue ce qui manque, et reconstitue des formes et ferme les formes
il y a une différence de perception entre les individus
LOIS DE FITTS
Moins on éloigne un objet plus il est accessible
Plus un element est gros, plus il attire le clic
Le temps nécessaire pour aller rapidement d’une position de départ à une zone finale de destination dépend de la taille et de la distance de la cible
T = k log2(D/S + 0.5), avec un facteur dépendant de la personne (~ 100 msec), D la distance de la cible et S la surface de la cible.
Loi de Hick et le nombre magique de Miller
La loi déclare que le temps ressui pour prendre une décision est une fonction du nombre d'alterbnatives possibles
Le nombre magique de Miller : Le nombre d'objets pouvant tenir dans la mémoire de travail moyen est de 7 plus ou moins 2
L'affordance
L'affordance est l'ensemble des caractéristiques d'un objet ou d'un milieu que peut utiliser un individu pour réaliser une action. Le nom vient de l'anglais " afford" qui signifie offrir ou être en capacité de faire quelque chose.
Faciliter la perception des gens pour les empêcher de réussir
Cliquez-moi
Interagissez avec moi
L'internaute doit savoir très vite, d'après l'apparence d'un objet, si ce dernier est cliquable, s'il peut le mener quelque part ou lui permettre de mener une action
La forme, la couleur, le libellé, localisation dans l'interface
Erreurs à ne pas faire (mouais) :
Souligner un texte est associé à un lien
Elements arrondis + relief = bouton
La lisibilité
Déchiffrer les caractères est en général plus lent et plus fatiguant sur un écran
Chercher les contrastes positifs (fond clair/ caractéristiques sombres) plus adéquat que le contraste négatif (fond sombre, écriture blanche)
Caractères, taille des caractères affichés, espacement des lettres, interlignage, choix typographique
Les 12 règles de l'ergo web
1 - Architecture de l'info
Le site est bien rangé
Une fois le besoin identifié
Un travail qui est séparé de la présentation de l"information
énumération des contenus
Catégorisation (mettre par groupe)
Structuration (hiérarchie)
Ensuite on génère l'arborescence
Outils de navigation qui respecte 3 critères
etnavigations principales
navigations transversales
navigations contextuelle
Rythmer le texte avec des titres, puces signes, images, actions (boutons signifiants), pas de fioritures. Barres de progression d'avancement lecture
Affichage du contenu progressif
exemple, déployez un formulaire peu à peu, en ne demandant pas trop de choses à l'utilisateur
Apporter du contexte, dans les actions, les associer
2 -Organisation visuelle
La page est bien rangée
Eviter le trop plein d'information
Diviser la quantité d'information par 2
Afficher uniquement les principaux éléments de navigation
Supprimer les éléments,ts d'interaction inutiles
Chercher l'homogénéité visuelle
Démultipliez le pixel carré : onglets accordéon, amenez du contenu progressif
Remplacement d'informations au rollover : attention, trop de fioritures
Images de fond, attention la lisibilité, la surcharge
Animations, boucles, qui peuvent retourner l'attention
Utiliser les lois de gestaltiste pour la hiérarchisation visuelle
Distinguer espaces de navigations, contenu, info complémentaires, prévoir différents niveaux d'importance pour les blocs, titres textes
Jouer sur les mises en avant
Jouer sur les contrastes pour mettre en avant les actions voulues
Limiter les bordures qui segmentent (loi de clôture)
Limiter le nombre de CTA sur la page
3 -Cohérence
Le site capitalise sur l'apprentissage interne au site
Capitaliser sur l'apprentissage interne : Localisations cohérentes
Navigation au même endroit
Les éléments de nav ne doivent pas disparaitre
Appellations cohérentes
même mort pour désigner un même élément
Distinction Titre, contenu, lien constante
Interactions cohérentes
Les mêmes items fonctionnent de manière identique
4 - Conventions
Le site capitalise sur l'apprentissage externe
Les gens préfèrent les sites conventionnels, où ils peuvent appliquer le fruit de leur expérience passée
Ascenseurs (sens de défilement)
Mais ça change ex. Konbini
formulaires
alertes
tunnel d'achat
on dit standard
: principe utilisé par plus de 80% des sites
convention
: principe utilisé par 50% à 79%
Conventions différentes selon les zones géograpbhiques
penser à se renseigner sur les standards locaux avant de lancer un site à l'étranger
Les conventions ne seront peut-être pas les mêmes qu'en France
5-Informations
Le site informe l'internaute et lui répond
Qui vous êtes : gagner la confiance : Mettre un logo
Ce que vous faites : baleine/tag line
Ce que vous proposez (navigation)
Informations ponctuelles
où se situe l'internaute
bouton cliquable visuellement
A quoi correspondent les éléments (libellé des formulaires)
Informations additionnelles (avantages, réassurance, comparaisons)
Informations sur ce qui est en cours (téléchargement)
Information sur ce qui va se passer
information sur la dispo des produits
Information pour persuader
Informer pour inciter à l'achat
Informer pour persuader / inciter à l'achat
Répondre à l'internaute
Donner du feedback
Tenir au courant l'internaute lors de process, et résultats d'actions
Attention lorsque 2 pages sont similaires
demander l'accord lors de la récolte d'information
Savoir a qui on parle
En fonction de la cible, ça définition le ton
Utilisation du tutoiement, ou du vouvoiement
Apporter de l'authenticité a ce que l'on présente
Cautions
Rassurer par des labels
C'est sécurisé, c'est bio etc. etc.
Créer de la réassurance
Témoignages clients
Les témoignages renforcent la confiance qu'on a dans votre service
6 - Compréhension
Les mots et symboles sont choisis minutieusement
Utiliser les mots autant se faire se peut
utiliser un vocabulaire simple, clair.
parler la langue de vos utilisateurs
n'utiliser jamais le jargon de votre métier
parler de ce qu'ils vont trouver derrière une action, au lieu de parler de fonctionnalité
"cliquez-ici" a éviter, parler du résultat, parler avantages
Donner du sens aux libellés
Les icônes
Choisir des icônes connues
possibilité des adaptions
respecter les usages culturels (rouge = alerte)
être compréhensible
https://fontawesome.com
Flaticon
7-assistance
Assistez l'utilisateur de A à Z
Utilisez des clics logiques
L'élément décisionnel doit être clivable
Utiliser l'affordance
Les actions doivent avoir de verbes à l'infinitif ou à l'impératif
Les visuels produits
Champs de saisie
Respecter l'affordance, délimiter les zones
Elements de formulaire
Donner envie (qualité photo etc.)
Gestion des erreurs
Rapidité
L'internaute ne perd pas son temps
Liberté
C'est l'internaute qui commande (ou lui donner cette impréhension)
Accessibilité
Un site facile d'accès pour tous
Satisfaction
https://goodui.org
DARK PATTERNS
https://www.youtube.com/watch?v=kxkrdLI6e6M
