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)



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



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


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.


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


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


Structure de page :


Structure de page :

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


Respect des conventions :


Respect des conventions :

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

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


É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


Évidence des éléments cliquables :


É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


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


Tunnel de conversion :


Tunnel de conversion :

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


Réservoir de confiance :


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…


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 :


Charge cognitive :

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


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


À 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

Documents

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