1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013 Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
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
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013 Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
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
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
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
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
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
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
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
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
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
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013 Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
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
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
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
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
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
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
Orientation :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013 Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
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
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
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
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
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013 Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
É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
É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
É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
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
Typographie :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013 Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
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
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
Formulaires :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013 Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
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
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
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
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
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
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
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
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
Charge cognitive :
1ères Rencontres du numérique en Haute Bretagne - 19 Novembre 2013 Comité Départemental du Tourisme Haute Bretagne Ille-et-Vilaine
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
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
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
À 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
Top Related