03 September 2010

Inscrivez-vous au Flux RSS

Design d’interface et critère ergonomique 2 : Lisibilité

Posté par jc-Qualitystreet le 4 août 2010

Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères qui sont valides pour tous les types d’interface. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement et les équipes Business.

Lisibilité : en quoi ça consiste ?

C’est faciliter la lecture et favoriser la compréhension de ce qui est affiché à l’écran. Ce critère ergonomique recouvre en effet deux dimensions : le processus physiologique de lecture mais aussi la compréhension de ce qui est lu.

Lisible et incitatif

Lisible et incitatif

La lisibilité va donc concerner les caractéristiques de présentation des informations sur l’écran pouvant entraver ou faciliter la lecture de ces informations : luminance des caractères, dimension des lettres, des lignes, espacement entre les mots, interlignes, couleurs et contrastes.

Quelques exemples de recommandations :

  • Utiliser une police sans serif (empattement), telles que Verdana, Arial ou Helvetica (ou leur équivalent), conçues pour la lecture à l’écran.
  • Assurer la lisibilité du texte en jouant sur le contraste avec l’arrière plan (valeur de contraste au minimum de 80 %)
  • Préférer un fond clair à un fond sombre
  • Favoriser le mode positif  avec Texte noir sur fond blanc / clair
  • Sur fond clair (blanc/ gris pâle), éviter le jaune, vert pâle ou cyan, le bleu, rouge, violet
  • Assurer un contraste constamment satisfaisant entre la page et la barre de navigation, entre les items de la barre de navigation et leur arrière plan

Deux mauvaises pratiques

Mauvais contraste

Mauvais contraste

Autre exemple

Une lecture très difficile !!!

Une lecture très difficile !!!

Quelques bons exemples … so GOOD !

Tout est dit !

Tout est dit !

Autre exemple:

Contenus lisibles et bien délimités. Bons Contrastes.

Contenus lisibles et bien délimités. Bons Contrastes.

Autre exemple:

Dans les deux cas : très lisible mais plus de douceur et moins de fatigue au quotidien avec le Gris

Dans les deux cas : très lisible mais plus de douceur et moins de fatigue au quotidien avec le Gris

Design d’interface et critère ergonomique 1 : l’Incitation

Posté par jc-Qualitystreet le

Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères qui sont valides pour tous les types d’interface. C’est une liste personnelle, affinée, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), et que je m’efforce de partager au quotidien avec les équipes de développement et les équipes Business.

Incitation : en quoi ça consiste ?

C’est accompagner l’utilisateur dans sa tâche, le renseigner sur le contexte dans lequel il se trouve, l’orienter, l’amener à effectuer des actions spécifiques tout en prévenant au maximum l’indécision. L’incitation est donc un critère essentiel pour l’utilisateur qui s’est renforcé d’un point de vue business autour des problématiques de marketing digital.

Tous les leviers de l'Ergonomie Incitative
Tous les leviers de l’Ergonomie Incitative

Éléments d’ergonomie incitative ou d’assistance sur formulaires, architecture de l’information simple et adaptée, fil d’Ariane, indicateur d’étape (pour une navigation guidée), identité visuelle par univers, autant d’éléments qui favorisent une bonne incitation.

Quelques exemple de recommandations …

  • Limiter les points d’entrée sur l’interface, les rendre descriptifs et « orientés-tâches »
  • Proposer un titre à chaque page, court et signifiant
  • Proposer sur chaque page du site des éléments de navigation et de repérage permettant à l’utilisateur de répondre à trois questions : Où suis-je ?, D’où viens-je ?, Où puis-je aller ?
  • S’assurer que le système de navigation principal indique visuellement à l’utilisateur dans quel menu ou rubrique il se trouve
  • Prévoir un fil d’Ariane sur toutes les pages intérieures, le positionner sous la barre de navigation globale, mais toujours au-dessus du titre de page
  • Proposer un indicateur d’étapes en cas de navigation guidée par exemple pour les processus dont la saisie est décomposée en plusieurs pages et / ou nécessite un écran « récapitulatif »

Deux mauvaises pratiques

Par où commencer ? Comment ça marche ?
Par où commencer ? Comment ça marche ?

Pas évident !!
Pas évident !!

Quelques bons exemples … so GOOD !

Rappel avant de démarrer et indicateur d'étapes

Rappel et Indicateur d'étapes

Autre exemple :

Invitation Claire

Aussitôt arrivé, aussitôt guidé !

Autre exemple:

Parfaite incitation

Parfaite incitation

Autre exemple:

Choix limité

Choix limité

Autre exemple :

Droit au but !
Droit au but !

Autre exemple :

Suivez le guide !
Suivez le guide !

 

Ergonomie Web : 8 conseils pour mieux vendre sur Internet

Posté par jc-Qualitystreet le 7 avril 2009

Ou quelques éléments d’ergonomie et marketing web bien pensés proposés sur Smashing Magazine par Dmitry Fadeyev (Usability Post), conseils que je me suis permis de traduire et de commenter.
Inutile de vous dire que je bien en phase avec ces 8 conseils même si selon moi la combinaison Personas - Ergonomie incitative est trés largement facilitatrice et tout aussi déterminante.

 

Conseil 1 : Avant tout suggérer

L’art de la suggestion, du subliminal est depuis toujours une clé du marketing. Sur le web (comme dans d’autres contextes), il s’agit de véhiculer des valeurs, un message, des sensations, un sentiment par des images et par un ensemble de visuels. Peu d’espace, peu de temps: chez nous c’est le subtil boulot du DA (Directeur Artistique).

 

Conseil 2 : Prévenir l’indécision

C’est éviter de multiplier les options pour ne pas réveiller cette fameuse “paralysie du choix” qui nous guette tous ! Faciliter la vie du visiteur en réduisant donc le nombre d’options mais aussi en l’accompagnant, en le guidant dans son choix est plus que jamais nécessaire. D’autres formes sont possibles : mettre en avant les éléments les plus populaires, la recommandation ou encore un choix par défaut.
Ce conseil rejoint une loi que j’applique tous les jours en conception d’interface : la loi de Hick (”il est plus facile de décider parmi un nombre réduit d’éléments”)…
La concurrence est rude et l’internaute n’a pas de temps à perdre : allez à l’essentiel et simplifiez lui la vie !
highrise
 

Conseil 3 : Montrer le produit

Une image vaut plus que 10000 mots, cela semble évident mais ce n’est pas encore acquis… et pourtant l’apparence et le look restent toujours d’énormes critères de choix chez les acheteurs. Des boites comme 37 signals l’ont compris depuis longtemps … screenshots, demo feedback et bouche à oreille !
dashboard
 

Conseil 4 : Laisser les gens essayer

Dans d’autres contextes que le web,  c’est aussi une évidence. Essayer un produit, c’est engageant, au moins un minimum, et parfois l’essayer c’est l’adopter :)
basecamp
 

Conseil 5 : AIDA

A…I…D…A, c’est à dire capturer l’attention (levier incitatif), gagner son intérêt (explication, description) , générer un désir (les gains) et pousser à l’action (call to action).
AIDA c’est donc jouer sur toute une somme de leviers incitatifs (positionnement, orientation, visuels, forme, accroche, couleur, typo …), mis en scène, orchestrés dans un seul objectif : L’ACTION

Conseil 6 : Guider l’attention

Dans le prolongement du point précédent: c’est capturer l’attention puis la guider jusqu’à l’objectif final : la vente ! Cela se joue sur une page ou sur un enchaînement de pages par la définition de parcours clients ultra scénarisés.
businesscatalyst
 

Conseil 7 : Toujours proposer une suite, des moyens d’actions complémentaires

C’est tout simplement ne pas abandonner l’utilisateur au beau milieu du site, toujours travailler le flux pour ne jamis pas perdre son attention. L’idée est bien évidemment de lui proposer des actions à haute valeur ajoutée, en lien avec vos objectifs Business : S’inscrire, Commander, Avoir de l’info + poussée…

 

Conseil 8 : Guider le regard en exploitant le diagramme Gutenberg

Il y a bien une tendance de lecture (du haut à gauche en bas à droite) : c’est très occidental, mais trés juste : on lit de gauche à droite et de haut en bas. Alors certes il y a des zones d’accroche plus importantes que d’autres (cf Eye Tracking) mais il existe surtout un flux de lecture auquel on ne peut échapper.
Toute une mise en scène est donc à travailler en fonction de ce flux, avec un point de départ en haut à gauche, des points d’accroche intermédiaires dans la diagonale et une terminaison en fin de diagonale (l’action recherchée). L’exemple ci-dessous en est une parfaite illustration:
goodbarry_gutenberg

Au service de l’Expérience Utilisateur …

Posté par jc-QualityStreet le 20 avril 2008

Je donnais dans un précèdent billet une définition et ma vision de l’Ergonomie informatique, une vision partagée -et c’est heureux - par beaucoup…
Mes terrains de prédilection, les sites Internet, les applications web et les logiciels. Et, quand j’interviens en tant qu’ergonome sur un projet informatique, je suis avant tout au service de l’Expérience Utilisateur dans un registre qui peut être trés large.
Voilà pourquoi, je me retrouve complètement dans ce schéma de Jesse James Garrett, issu de “The elements of User Experience” : que je vous invite à redécouvrir et qui est un bon résumé de mes interventions “ergo”. A ce propos, n’hésitez pas à me dire s’il vous correspond aussi …


Jesse James Garrett’s Elements of User Experience: http://www.jjg.net/elements/

WAIT! There is more to read… read on »

Ergonomie Incitative et Personas … pour plus d’efficacité et d’efficience

Posté par jc-QualityStreet le 22 février 2008

L’un des premiers bénéfices des Personas est de proposer une vision partagée des Utilisateurs, mais les Personas permettent aussi d’orienter fondamentalement les choix d’interface…

Et c’est justement à ce niveau que l’Ergonomie Incitative (c’est à dire l’art de susciter un comportement, un désir) peut admirablement compléter, s’appuyer et appuyer, ainsi que prolonger la démarche engagée avec les Personas.

Quelques exemples:

ZYLOM

2 personas : Maria et Sophie dont les buts principaux sont de jouer en ligne, de récupérer une version du jeu pour pouvoir jouer offline et d’obtenir de l’aide si elles en ont besoin.

Impact sur le design d’interface : couleur, forme, taille, positionnement, agencement, structure de la barre de navigation

VISTAPRINT

2 personas : Nancy qui veut un site de confiance et un site où il lui est facile de créer ses outils marketing et Howard qui veut créer ses produits marketing le plus vite possible.

Impact sur le Design d’interface : Côté Nancy, couleur, forme, typographie, positionnement, promesse, visuel d’une personne pour se différentier et pour rassurer; côté Howard, une proposition structurée, une vue globale mais accessible, synthétique et visuelle de l’offre.

Les deux techniques, Personas et Ergonomie Incitative, sont trés complémentaires et toutes deux orientées buts / tâches: leur combinaison est donc plutôt efficace, quel que soit le degré d’incitation envisagé (fort, partiel ou par petites touches sur quelques éléments bien ciblés).

BANKWEST

MICROPLACE

Imaginons…

Vous avez 2 personas principaux dont vous devez satisfaire impérativement et en priorité les buts.

Votre démarche Persona, votre réflexion centrée buts et utilisateurs vous permettent d’identifier:

  • leurs buts principaux
  • ce qui va déclencher leurs actions
  • ce qui peut les influencer
  • ce qui peut les freiner ou les faire fuir
  • ce qui peut constituer la bonne surprise…

Vous disposez dés lors des éléments nécessaires pour construire une bonne ergonomie incitative source d’efficacité et d’efficience, et pouvez jouer sur les leviers “incitatifs” les plus pertinents dans votre contexte:

  • le positionnement, l’orientation,
  • la surface, la taille
  • la forme
  • les accroches, promesses, mots clés, phrases clés,
  • les visuels (notamment “humains” car suscitant plus facilement l’identification)
  • les couleurs et effets (caractère chaud / froid, saturation, luminosité, contraste …)
  • la typographie

En somme, vos personas vous permettent:

  • de définir quel comportement inciter
  • d’identifier quels éléments de l’interface mettre en avant (ou au contraire masquer)
  • et sur quoi s’appuyer pour susciter l’envie.

Ils vont guider vos choix de conception, à la fois sur la page d’accueil de votre service, tout au long d’un parcours Persona bien défini et sur les divers points d’entrée potentiels, pour au final maximiser l’efficience et assurer une fabuleuse expérience Utilisateur.

Cette pratique est résolument orientée Buts Utilisateurs … Les satisfaire, c’est pour beaucoup satisfaire ses propres objectifs business (susciter l’achat, l’adhésion), même si parfois, en fonction des contextes de communication, des arbitrages seront à réaliser sur le degré d’incitation souhaité.

Évidemment, l’ergonomie incitative n’a pas attendu les Personas pour peaufiner ses techniques, et se rendre indispensable dans l’univers Web actuel…

Voici donc pour terminer un petit “avant / aprés” au niveau des “boutons” d’action (appel à l’action typique) et quelques exemples de bonnes pratiques en la matière:

WAIT! There is more to read… read on »

Get Adobe Flash playerPlugin by wpburn.com wordpress themes