Atelier A3 - De l’ergonomie web à l’expérience utilisateur - Mediaveille

1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013
Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine

 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


 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


 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


 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)



Source : Adobe.com - Périmètre : Monde / Juin 2007 à Février 2013

Les tablettes affichent une progression plus importante que les SmartPhones



Source : Adobe.com - Périmètre : Monde / Février 2013

Les tablettes sont 2 fois plus utilisées en France que les SmartPhones


 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.

 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


 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


60x60
pixels


Sens de lecture respecté
Lignes de flottaison gérées

Sens de lecture inversé
Lignes de flottaison pas étudiées


 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



Problèmes d’appartenance et
de proximité des blocs

Appartenances claires.
Titres des blocs identifiables


 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
…


 Orientation :


 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


 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)
…



Accueil identifié. Fonctionnalités de connexion et de recherche en haut à droite

Mauvaise position des fonctionnalités de connexion et de l’espace abonné

 É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



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


 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
…


 Typographie :


 Typographie :

Interlignage et niveau de contraste OK

Graisse sur-exploitée. Texte souligné.
Niveau de contraste trop faible


 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


 Formulaires :


 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.


 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



Pas de mise en quarantaine

Mise en quarantaine flagrante


 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
…



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…


 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.



Charge cognitive élevée
3 colonnes / nombreux éléments

Charge cognitive modérée
Peu d’éléments à l’écran


 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
…


 À 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.


Atelier A3 - De l’ergonomie web à l’expérience utilisateur - Mediaveille

Contenu connexe

Tendances

En vedette

Similaire à Atelier A3 - De l’ergonomie web à l’expérience utilisateur - Mediaveille

Plus de Ille & Vilaine Tourisme

Atelier A3 - De l’ergonomie web à l’expérience utilisateur - Mediaveille