Atelier A3 - De l’ergonomie web à l’expérience utilisateur
1ères rencontres du numérique en Haute Bretagne organisées par le Comité Départemental du Tourisme Haute Bretagne Ille & Vilaine au Domaine des Ormes. Présentation de Marc Levin de l'agence Mediaveille
Journée Nemo - présentation Caroline Pionnier à Fougeres
Atelier A3 - De l’ergonomie web à l’expérience utilisateur - Mediaveille
1. 1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
2. Sommaire :
-
L’ergonomie quésaco
Connaître vos utilisateurs
Les terminaux utilisés
Les résolutions d’écran
-
Principes d’ergonomie :
Structure de page
Hiérarchie visuelle
Respect des conventions
Évidence des éléments cliquables
Typographie
Formulaires
Tunnel de conversion
Réservoir de confiance
Charge cognitive
Fonctionnement et temps de réponse
-
À noter
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
3. L’ergonomie quésaco :
Un site web ergonomique est un site utile et facilement utilisable
L'objectif est d’améliorer l’architecture de l’information pour amener vos utilisateurs à convertir davantage.
Quelques notions à avoir en tête :
-
Votre utilisateur doit comprendre instantanément si le contenu de la page correspond à sa recherche
L'ergonomie d’un site doit penser à l'utilisateur le moins expérimenté
Tous les utilisateurs ne recherchent pas la même information et n’ont pas le même niveau d’exigence
Chaque utilisateur dispose d’un comportement acquis et d’un équipement précis
Votre utilisateur ne doit pas avoir à faire d’effort de réflexion pour comprendre l’interface
3 clics sans réfléchir valent mieux qu’un clic demandant réflexion
La finalité des actions d’ergonomie est d’augmenter la satisfaction de vos utilisateurs
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
4. Connaître vos utilisateurs :
L’ergonomie passe par la web analyse :
-
Pages d’entrée ?
Pages de sortie ?
Terminaux les plus utilisés par vos utilisateurs ?
Résolutions d’écran les plus utilisées par vos utilisateurs ?
Une solution d’analyse d’audience fiable doit être exploitée pour connaître ses utilisateurs
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
5. Les terminaux utilisés :
Trois grands type de terminaux sont actuellement utilisés : Ordinateur de bureau / Tablettes / Smartphone
Source : Adobe.com - Périmètre : Monde / Février 2013
84% de trafic sur Ordinateur de bureau & Ordinateur portable (en baisse)
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
6. Les terminaux utilisés :
Trois grands type de terminaux sont actuellement utilisés : Ordinateur de bureau / Tablettes / Smartphone
Source : Adobe.com - Périmètre : Monde / Juin 2007 à Février 2013
Les tablettes affichent une progression plus importante que les SmartPhones
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
7. Les terminaux utilisés :
Trois grands type de terminaux sont actuellement utilisés : Ordinateur de bureau / Tablettes / Smartphone
Source : Adobe.com - Périmètre : Monde / Février 2013
Les tablettes sont 2 fois plus utilisées en France que les SmartPhones
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
8. Les résolutions d’écran :
Un même site est susceptible de s’afficher sur de nombreux terminaux disposant de résolutions différentes :
Un site à forte audience s’affiche sur plus de 900 résolutions différentes.
Plus de 35 % des utilisateurs disposent d’une résolution de moins de 800pixels de haut.
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
9. Sommaire :
-
L’ergonomie quésaco
Connaître vos utilisateurs
Les terminaux utilisés
Les résolutions d’écran
-
Principes d’ergonomie :
Structure de page
Hiérarchie visuelle
Respect des conventions
Évidence des éléments cliquables
Typographie
Formulaires
Tunnel de conversion
Réservoir de confiance
Charge cognitive
Fonctionnement et temps de réponse
-
À noter
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
10. Principes d’ergonomie :
L’ergonomie est une discipline dont les règles dépendent du contexte et varient en fonction du site étudié. Il
existe, cependant, des principes de base permettant de s’assurer de la bonne compréhension d’un site Web.
Objectif : augmenter la satisfaction de vos utilisateurs
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
11. Structure de page :
-
Chaque utilisateur dispose d’un équipement précis, les pages doivent s’adapter en permanence aux
différentes résolutions d’écrans
Les principales lignes de flottaisons doivent être prises en compte dans le positionnement des blocs
Les sens de lecture [ de gauche à droite ] et [ de Haut en Bas ] doivent être respectés pour les éléments :
[Visuel – Descriptif – Bouton d’action]
La seule barre de défilement présente doit être celle de la fenêtre du navigateur (verticale)
Les zones chaudes doivent être occupées par des blocs directement lié aux objectifs primaires
Les zones cliquables doivent être adaptées au différents types de pointeurs (curseur & doigt)
Les survols souris ne doivent pas constituer une étape vers la conversion (pas de rollover sur tablette)
16x16
pixels
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
60x60
pixels
12. Structure de page :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
13. Structure de page :
Sens de lecture respecté
Lignes de flottaison gérées
Sens de lecture inversé
Lignes de flottaison pas étudiées
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
14. Hiérarchie visuelle :
-
Chaque bloc doit avoir une appartenance claire, un titre clair
Les éléments textuels doivent être hiérarchisés (titre page / titre bloc / texte)
Les éléments au premier plan / à l’arrière plan ne doivent pas se faire concurrence
Les gouttières doivent être de taille suffisante
La proximité des blocs/éléments ne doit pas prêter à confusion
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
15. Hiérarchie visuelle :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
16. Hiérarchie visuelle :
Problèmes d’appartenance et
de proximité des blocs
Appartenances claires.
Titres des blocs identifiables
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
17. Orientation :
-
Un logo et une base-line claire doivent être présents en haut à gauche de toutes les pages
Le titre de page doit constituer l’élément textuel le plus gros de la page
Un menu de navigation « persistant » doit permettre l’accès aux différentes catégories du site
Un indicateur graphique doit permettre à l’utilisateur de se situer parmi les catégories existantes
Un fil d’ariane doit être déployé.
Un plan de site doit être disponible en pied de page
…
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
18. Orientation :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
19. Orientation :
Logo + Base-Line + Titre de page +
Menu + fil d’ariane > OK
Pas de menu de navigation, pas de fil
d’ariane, pas de titre de page clair
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
20. Respect des conventions :
L’utilisation d’internet a créé chez les utilisateurs des réflexes et des automatismes. Lors de leurs visites sur un
site web, il ne faut pas bouleverser ces automatismes. Exemple de conventions :
-
Les fonctionnalités de connexion / déconnexion doivent être positionnées en haut à droite des pages
(convention de localisation)
La Home doit s’appeler « accueil » ou être identifiée par une « maison » (convention de vocabulaire)
Les liens doivent transformer le curseur « flèche » en « main » (convention d’interaction)
Les liens textuels doivent être soulignés (convention d’interaction)
…
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
21. Respect des conventions :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
22. Respect des conventions :
Accueil identifié. Fonctionnalités de connexion et de recherche en haut à droite
Mauvaise position des fonctionnalités de connexion et de l’espace abonné
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
23. Évidence des éléments cliquables :
-
Les liens textuels doivent être soulignés
Les points de conversions principaux doivent être accessibles par des « call-to-action »
L’affordance des Call-to-action doit être hiérarchisée
Le partage doit être une évidence (Facebook / Twitter / Google +)
Les rollover doivent être systématiques
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
24. Évidence des éléments cliquables :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
25. Évidence des éléments cliquables :
Call-to-action principal noyé parmi les
éléments graphiques
Le call-to-action principal est l’élément le plus
affordant de toute la page
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
26. Typographie :
-
La typographie textuelle utilisée doit être « sans empattement »
Le niveau de contraste des éléments textuels doit répondre aux recommandations d’accessibilité
L’interlignage des textes doit être suffisamment élevé (120% minimum)
La longueur des ligne ne doit pas être excessive
L’italique est à proscrire
La graisse doit être utilisée à bon escient
Le souligné ne doit pas être utilisé en dehors des liens
…
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
27. Typographie :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
28. Typographie :
Interlignage et niveau de contraste OK
Graisse sur-exploitée. Texte souligné.
Niveau de contraste trop faible
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
29. Formulaires :
-
Ajuster la proximité des libellés et des champs de saisie correspondants
Indiquer les champs de saisie obligatoires
Proposer une aide au focus
Si un formulaire possède de nombreux champs de saisie, adopter une mise en forme sur une colonne
S’assurer du fonctionnement clavier (touche TAB)
Adapter la taille des champs de saisie aux informations qu’ils doivent accueillir
Gestion de l’erreur : identifier chaque champs de saisie erroné
Utiliser un langage courtois et précis pour les messages d’erreur
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
30. Formulaires :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
31. Formulaires :
Mauvaise gestion de l’erreur :
Les champs erronés ne sont pas identifiés.
Bonne gestion de l’erreur.
Pas d’erreur possible entre libellés et input.
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
32. Tunnel de conversion :
-
Mise en quarantaine de l’utilisateur
Chemin de fer en haut de page avec étapes identifiées (terminées, en cours et restant à faire)
Réassurance services (modes de paiement, paiement sécurisé, retours, frais de port…)
N° de téléphone visible
Nombre d’étapes compréhensible et acceptable par l’utilisateur
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
33. Tunnel de conversion :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
34. Tunnel de conversion :
Pas de mise en quarantaine
Mise en quarantaine flagrante
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
35. Réservoir de confiance :
Plusieurs éléments contribuent à augmenter ou diminuer le réservoir de confiance d’un utilisateur au fil de sa
navigation sur un site Internet. Un utilisateur qui n’a pas confiance ne laissera jamais ses coordonnées sur
votre site. Plusieurs éléments de réassurance peuvent contribuer à augmenter le réservoir de confiance :
-
Réassurance sur la marque
Réassurance paiement sécurisé
N° de téléphone non surtaxé
Détail des services (livraisons, emballage, ..)
Qui sommes-nous ?
Certifications
Avis utilisateurs
…
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
36. Réservoir de confiance :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
37. Réservoir de confiance :
Aucune réassurance.
Perte du logo lors de la mise en quarantaine.
Paiement sécurisé, moyens de paiement, aide
proposée par mail ou téléphone…
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
38. Charge cognitive :
-
La charge cognitive est une théorie qui tend à expliquer les échecs, ou les réussites, des personnes en
activité d’apprentissage et en activité de résolution de problème.
Elle met en jeu la capacité de stockage d'informations en mémoire de travail et l'intégration de nouvelles
informations. Nous pouvons aisément la comparer aux capacités de calcul de nos ordinateurs.
Si un trop grand nombre d'informations demande à être traité, la charge cognitive sera trop importante
et cela aura comme effet l'échec de la tâche.
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
39. Charge cognitive :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
40. Charge cognitive :
Charge cognitive élevée
3 colonnes / nombreux éléments
Charge cognitive modérée
Peu d’éléments à l’écran
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
41. Fonctionnement et temps de réponse :
Le fonctionnement du site et le temps de réponse sont des éléments importants dans la satisfaction globale
d’un utilisateur vis-à-vis d’un site Internet :
-
Adapter l’architecture serveur en fonction des pics d’audience observés
Garantir l’affichage sur tous les navigateurs depuis IE7
Optimiser les images
Réduire les scripts html / css / javascript
Utiliser un cache serveur
…
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
42. Sommaire :
-
L’ergonomie quésaco
Connaître vos utilisateurs
Les terminaux utilisés
Les résolutions d’écran
-
Principes d’ergonomie :
Structure de page
Hiérarchie visuelle
Respect des conventions
Évidence des éléments cliquables
Typographie
Formulaires
Tunnel de conversion
Réservoir de confiance
Charge cognitive
Fonctionnement et temps de réponse
-
À noter
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
43. À noter :
L’ergonomie est présente à chaque étape du projet pour un support Web. Elle implique les chefs de projet, les
graphistes, les développeurs…
Pour proposer une ergonomie adaptée à vos utilisateurs, vous devez les connaître.
Un taux de conversion multiplié par deux peut :
- doubler le chiffre d’affaire généré par votre site
ou
- diviser par deux les coûts d’acquisition d’audience pour le même chiffre d’affaire
Vos concurrents travaillent l’ergonomie de leur site de façon permanente.
Toute intervention concernant l’ergonomie d’un site doit être justifiée, les effets de bords doivent être
anticipés et les résultats de cette intervention doivent être analysés.
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
44. 1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine