so Chouette » Ergonomie

Vlan… E-commerce et ergonomie

admin — Tue, 06 Dec 2011 23:55:53 +0000

Via Capt’ain Commerce

Usabilla.com pour tester vos créations

admin — Fri, 25 Nov 2011 13:32:49 +0000

Un outil en ligne plutot simple et pratique pour tester un projet graphique :

- vous proposez 1 ou plusieurs visuels a comparer avec un visuel existant (A/B)
- vous determinez les questions qui correspondent a chaque serie de visuels (questions fermées)
- vous soumettez l’enquete a vos contacts (dommage pas de service permettant de soumettre les questions à des contacts qui pourraient etre achetes à l’exemple de ce que propose Creatests)

et vous tirez les conclusions qui s’imposent…s’il y en a.

Ici un test pour un site de vente de bois de chauffage:

Où allez vous poser vos yeux ?

admin — Thu, 03 Nov 2011 12:58:42 +0000

La réponse est ici

Ecommerce : Optimiser le processus d’achat

admin — Tue, 11 Oct 2011 15:16:32 +0000

Tres beau récapitulatif video de Converteo sur les bonnes pratiques en matiere e-commerce concernant le processus d’achat :

Optimiser le processus d'achat d'un site… par converteo

Pourquoi utiliser l’eye tracking et fausses croyances

admin — Thu, 10 Jun 2010 22:35:23 +0000

Une bonne presentation de Harry Brignull

What you need to know about Eye Tracking (New version)

View more presentations from Harry Brignull.

Les 7 erreurs à éviter pour créer une bonne page d’atterrissage (« landing pages »)?

admin — Wed, 22 Jul 2009 23:45:33 +0000

Voici une rapide retranscription de cette video en Anglais de Tim Ash proposée par Google Adwords
:

- Pourquoi s’interesser aux landing pages ?
Parce qu’elles impactent tres fortement les performances des campagnes

- Les erreurs a éviter:

* Ne pas indiquer clairement ce que doit faire ke visiteur => un « call to action » clair

* Proposer trop de choix => Categoriser, ne pas mettre de details

* Demander trop d’information => Se demander si l’info est absolument nécessaire pour faire aboutir la conversion. Quelle est la valeur que l’utilisateur va en tirer. Si elle n’est utile que pour l’equipe marketing elle pourra etre demandée plus tard.

* Trop de texte => Se focaliser sur les titres. Couper le texte en évitant de faire des phrase.

* Ne pas respecter les promesses de l’annonce => La page doit respecter le contexte de l’annonce, elle doit satisfaire les attentes qui ont généré le click.

* Eviter les distractions visuelles => Pas de photos inutiles, pas d’images qui detournent l’attention du bouton d’action.

* Manquer de crédibilité => Préciser pourquoi le client devrait vous faire confiance (afficher des logos liés a la securite du site, témoignages clients..)

Et Tim nous rappelle qu’il est facile (et gratuit) de tester l’impact de vos landings pages avec Google Optimizer. Une bonne facon de passer de la theorie à la pratique pour mesurer les améliorations.

Détente…

admin — Mon, 06 Jul 2009 21:48:58 +0000

Couleurs : Faciliter la lecture sur le Web

admin — Mon, 01 Dec 2008 14:38:15 +0000

Suite à la réception de ce que je crois être la newsletter de Miratech, je me permets de reprendre dans ce post un article dans son intégralité car il m’a semblé intéressant. Il traite un sujet aussi basique que peu étudié : les couleurs d’une page web.

« Sur une page web, les utilisateurs ont le temps de lire au mieux 28% des mots. Ils scannent les pages d’un site. Comment mettre en avant l’information ? Comment faciliter au maximum la lecture à l’écran ?

Nous avons acquis des réflexes de lecture peu adaptés à l’écran. Les résultats montrent que la lecture à l’écran est 25% plus lente que sur papier. Il est alors nécessaire d’optimiser les caractéristiques perceptives des informations des sites Internet afin d’en faciliter la lecture.

L’utilisation de la couleur

La couleur améliore-t-elle les performances des utilisateurs ? En réalité, la couleur apporte peu au niveau du traitement de l’information (vitesse de lecture, mémorisation des informations…). Si la couleur encourage la lecture, elle n’aide pas toujours à comprendre le contenu. On réservera donc la couleur quand cela représente un intérêt pour la compréhension de l’information, par exemple pour illustrer la hiérarchie de contenu.

Il est important de réduire le nombre de couleurs différentes : plusieurs couleurs peuvent représenter une surcharge informationnelle, et compliquer le traitement mental de la page. On constate que l’emploi de 3 couleurs est une moyenne idéale, avec un maximum de 6.

Quelles couleurs choisir

Pour mieux les distinguer, il est préférable d’utiliser des couleurs qui ne sont pas adjacentes dans le spectre des couleurs. Le cercle chromatique, représentation circulaire des couleurs, permet de représenter leurs interactions :

Un cercle chromatique

Par ailleurs, sous l’angle plus global de la charte graphique du site, des couleurs voisines sur le diagramme chromatique créent une sensation d’équilibre pour l’œil, dû à l’absence de contraste. Pour choisir des couleurs harmonieuses :

- Sélectionner des couleurs de même teinte dont les tons sont proches,

- Ou mêler des couleurs complémentaires. Pour deux couleurs, choisir celles diamétralement opposées sur le cercle chromatique ; pour trois couleurs, elles formeront un triangle équilatéral sur le cercle, …

Vous utiliserez des couleurs identiques pour grouper des éléments et des couleurs différentes pour distinguer des éléments fonctionnellement différents.

Evitez d’utiliser le rouge et le vert pour définir les limites entre des objets : 8% de la population ont des troubles visuels concernant la distinction de ces deux couleurs.

Le choix des couleurs doit aussi correspondre aux conventions d’utilisation et aux symboliques associées dans la culture occidentale, pour être appropriées à la signification du message. Par exemple :
- le rouge = danger, donc veiller à l’utiliser seulement dans le cadre d’alerte,
- le jaune = attention, qui peut être utilisé dans une fenêtre d’avertissement,
- …

La signification occidentale classiquement associée aux couleurs

La gestion du contraste

Pour la distinction des détails, il est primordial de créer un contraste suffisant entre le fond et le texte de la page web. Le contraste maximum est obtenu avec des caractères noirs sur fond blanc : cette combinaison donne les meilleurs résultats. On peut l’atténuer avec un fond grisé.

Une impression négative (caractères blancs sur fond noir) est lue 10% plus lentement, d’après une étude de Wendt en 1994.

Le manque de contraste peut être compensé par des caractères passés en gras ou dans un corps de texte plus important – à réserver aux éléments à mettre en avant.

La police de caractère

Des études avancent que les polices sans serif rendent plus aisée la lecture à l’écran. Les empattements peuvent très vite devenir gênants pour la lecture. Il est alors préférable d’utiliser une police créée pour la lecture à l’écran, comme Verdana sans serif ou Arial. Georgia est la seule police à empattements adaptée au web. Dans une moindre mesure, on retrouve sur le Web les polices Trebuchet et Lucida Sans, souvent réservées aux titres.
Les polices génériques présentent l’avantage d’être reconnues et affichées par tous les navigateurs :

Les polices génériques utilisées sur le Web

Pour mettre en évidence un mot, passez-le en gras plutôt qu’en majuscules, qui signifient « crier » sur Internet et sont difficiles à lire. Une étude de Karen Schriver indique qu’un texte écrit en majuscules est lu 13 à 20% plus lentement :

De la même façon, n’utilisez pas le soulignement pour mette en avant une idée : dans les conventions web, le soulignement identifie les liens hypertextes.

Evitez également l’écriture italique, qui réduit la vitesse de lecture. Pour respecter l’usage conventionnel, par exemple pour des citations, il est alors conseillé d’augmenter le corps des caractères.

La taille du texte

La difficulté est de trouver une taille de texte qui convienne à tous les yeux. Dans la page, spécifiez la taille du texte en unités relatives, plutôt qu’en points ou en pixels. Il vaut mieux utiliser des pourcentages relatifs à la taille d’affichage spécifiée par le navigateur. Vous laissez ainsi le choix à l’utilisateur d’agrandir ou de rétrécir la taille du texte.

Deux icônes en entête d’article pour modifier la taille de caractères à l’écran (Source : L’Equipe.fr)

La gestion des blocs

La longueur idéale des lignes d’un texte semble se situer entre 55 et 100 caractères par ligne. Attention au design élastique en cas d’agrandissement de fenêtre, qui risque de créer des lignes illisibles car trop longues, sur les écrans larges.

Il est important d’aérer le contenu, avec des interlignes suffisamment importants, sans impression de flottement entre les lignes. Par défaut, les navigateurs web affichent un interlignage de 120 % par rapport à la taille du texte. Selon les typographes, un interlignage correct se situe entre 120 et 150 %.

Pour vérifier l’interlignage, repérez la rencontre des ascendantes et descendantes entre les lignes. Prêtez également attention aux capitales accentuées :

L’essentiel est de conjuguer ces facteurs et d’arbitrer par rapport à leur influence sur la lisibilité des textes. Vos choix seront déterminés par l’image de votre site, le type d’information à mettre en valeur et les caractéristiques et habitudes de l’utilisateur.

Miratech en bref
Miratech est une société d’études spécialisée en ergonomie du web et en conception centrée utilisateur. Elle utilise notamment la technologie eye tracking pour mesurer le regard des internautes sur un site et améliorer son efficacité.
www.miratech.fr »

Merci à Sonia pour son accord.

En vrac (comme moi)

admin — Sat, 02 Feb 2008 23:07:16 +0000

- Experience utilisateur : Cette folle de Linda a enchainé 87 inscriptions pour nous sortir des stats sur les infos généralement demandées. http://www.getelastic.com/registration-usability-tips-ecommerce/
Mais elle ne s’est pas arrêtée la puisque son analyse a ensuite porté sur les emails de confirmation.

- Pub sur les videos YouTube : Webdeux nous en dit plus sur le moyen qu’à trouver Google pour tenter de rentabiliser Youtube avec la publicité:
http://www.webdeux.info/les-videounits-google-adsense

- Convertir sur Internet : Les slides de l’intervention de Converteo au forum e-Marketing de cette semaine.
Les slides au format pdf sont ici
http://www.blog-conversion.com/5/blog-conversion/

- Liens sponsorisés : Google capterait 77% (rien de moins) de ce marché
http://liensponsorises.zeblog.com/291717-liens-sponsorises

Utilisabilité, ergonomie, accessibilité… le compte rendu de la journée mondiale de l’utilisabilité est en ligne

admin — Fri, 23 Nov 2007 01:50:21 +0000

Retrouvez les présentations et les vidéos de la Journée Mondiale de l’Utilisabilité qui a eu lieu à Paris le 08/11/07 sur SimpleWeb:
http://www.simpleweb.fr/index.php?page=compte-rendu

Voici notamment la présentation de Fred Cavazza sur les tendances de l’utilisabilité:
[slideshare id=166716&doc=wud-07-paris-quelles-tendances-pour-lutilisabilit-en-2007-119507409696401-5&w=425]

© " L'e-Marketing de Chouette", blog du webmarketing. | Pas de commentaire |
Post tags: accessibilité, Ergonomie, Utilisabilité