Maintenant la question à se poser, c’est comment correctement construire un formulaire, comment optimiser sa forme, et comment trouver le bon compromis entre qualité des données récupérées et complexité de saisie.

Ce premier billet va se concentrer sur ces problématiques et sera suivi d’un autre qui s’attardera sur les contrôles, le comportement et les interactions avec l’utilisateur.

Evitez la soupe de HTML

On voit encore trop souvent des formulaires sans aucune valeur sémantique alors que le HTML met à votre disposition les éléments qui vont bien.

Les <label> associent un libellé à un champ du formulaire et apportent de base des fonctionnalités intéressantes.
Si le label est cliqué, la saisie se positionne sur le champ en question ou bien la checkbox est cochée…
Les <label> maximise l’accessibilité de votre formulaire en fournissant aux lecteurs d’écran des informations relationnelles.

La balise <fieldset> vous servira a regrouper de façon thématique un ensemble de champs.
Celle ci pourra être complétée par un champ <legende> afin de libeller ce regroupement.

Penser à utiliser à bon escient l’attribut size et maxlength de vos champs, celui-ci donne une idée concrète à l’utilisateur du format de donnée attendue et vous évitera d’ailleurs que l’utilisateur soit confronté à un contrôle sur la longueur du champ saisi.

Ex: Un numéro ISBN aura une taille fixe et moins importante qu’un champ Titre du livre par exemple. L’utilisateur pourra alors cerner très rapidement ce qui est attendu.

Quels champs choisir selon la donnée visée ?

Sur ce point là, je vous invite à consulter la traduction de “Should I use a drop-down ? Four steps for choosing form elements on the Web” de Sarah Allen et Caroline Jarrett.

Cet article vous explique la méthodologie pour choisir tel ou tel élément dans un formulaire.

Regrouper l’information

Afin d’améliorer la lisibilité et la clarté d’un formulaire, il est important de regrouper les informations qui vont ensemble et de définir un ordre logique dans lequel on va afficher ces regroupements.
Les champs doivent donc être regroupés dans des catégories basées sur la nature sémantique des éléments.
On peut alors faire apparaître des coupes dans le processus afin de morceler la saisie.
Les champs dont la probabilité de remplissage est moindre ou optionnels, peuvent être groupés dans une dernière catégorie à la fin du formulaire.

Pour des formulaires avec un nombre de données assez important, on peut opter pour une pagination du formulaire et donc définir une séquence de différents formulaires.
Le formulaire est meilleur si l’utilisateur peut envisager la taille du formulaire d’un simple coup d’oeil (Evitez donc un effet de scroll trop important).

Le formulaire sous forme de “wizard” a cependant un inconvénient pour l’utilisateur: Celui d’ignorer la durée de renseignement réelle.
Dans le cas d’un formulaire paginé, on prend soin de faire figurer un fil d’Ariane (beadcrumb) ou une navigation par onglet afin de permettre à l’utilisateur de naviguer aisément entre les pages.

Indiquer les informations obligatoires

La lisibilité d’un formulaire passe aussi par sa capacité à discerner facilement les informations qui sont obligatoires de celles qui sont optionnelles.
Dans cette optique, on affiche clairement les champs obligatoires par une convention homogène à tout le site.

On utilise généralement l’astérisque (*) et l’on peut également le coupler avec une balise acronym:
<label for="login">Identifiant <acronym title="obligatoire">(*)</acronym></label>

On préférera positionner la légende avant le formulaire afin de respecter l’ordre de lecture de haut en bas.

Informer son visiteur sur le type de donnée attendue

Il ne faut pas hésiter à proposer des messages explicatifs clairs et détaillés avant toute action.
La prévention vaut mieux que la répression.
Un utilisateur bien informé de ce qu’il doit saisir fera mécaniquement moins d’erreurs dans son processus de remplissage.

Comment disposer ses champs et labels

On évoque ici la question existentielle que chacun se pose, et beaucoup d’ergonomes apportent des réponses variées. En ce qui concerne la disposition du label au dessus ou à coté du champ, je suis tenté de préférer une lecture linéaire ce qui place donc vos labels à gauche du champ de saisie.

Pour ce qui de l’alignement du label, pour ma part je retiendrai une seule méthode qui consiste à minimiser l’espace entre un label et le champ de saisi.

Si vos labels ont une taille relativement similaire, on pourra aligner les labels à gauche tandis que dans le cas contraire, on préféra aligner à droite les labels.

Les boutons primaires et secondaires

Après avoir lu une étude sur comment faire apparaître vos boutons primaires et secondaires et comment les disposer, je vais donc vous résumer ce qu’il faut en retenir.
Disposer vos boutons dans le même alignement horizontal que vos champs afin de conserver un sens de lecture de haut en bas cohérent.

Dans le cas où vous utiliseriez plusieurs boutons, le bouton primaire (Ex: Valider) et le bouton secondaire (Ex: Annuler) doivent être disposés l’un à coté de l’autre ce qui évite d’emprunter un axe horizontal trop marqué.

Il est préférable de différencier visuellement vos 2 boutons afin que l’utilisateur détecte d’un simple coup d’oeil le bouton associé à l’action.
Pour cela, on pourra faire apparaitre ces 2 boutons de cette façon:

Erreurs à ne pas faire sur un formulaire

Evitez d’utiliser trop de menu déroulant dans la mesure du possible, car une étude a montré que l’utilisateur concentre d’abord son attention sur cet élément ce qui dans certains cas n’est peut être pas l’effet recherché.

Chassez définitivement l’idée de vouloir faire figurer un bouton Reset sur un formulaire.
J’en croise encore sur pas mal de formulaires, et ce bouton n’apportera rien à votre visiteur si ce n’est potentiellement une frustration énorme d’avoir effacé toutes ces données par erreur.

Évitez de trop ajaxifier vos processus de saisi!
En effet, ne connaissant pas le niveau d’expertise de l’utilisateur potentiel, il vaut mieux s’en remettre à des processus de saisi que l’utilisateur connaît et a l’habitude de manier.

Conclusion

En résumé, il faut garder en mémoire que le formulaire doit impérativement prendre en compte les problématiques de lisibilité et d’organisation visuelle afin de mettre en confiance l’utilisateur et de lui faciliter le processus de saisi.

Si vous voulez une astuce pour vérifier que votre formulaire respecte toutes ses règles de rendu et que celui ci semble correctement optimisé visuellement, pensez à appliquer un filtre de flou gaussien afin de vous imprégner d’une vision globale et vérifier que le découpage est correct.

Ressources complémentaires:

• Bonnes pratiques de la conception de formulaires web (1/2)
• L’ergonomie dans la conception d’un formulaire
• Rediscovering the button element
• Simple Tricks for More Usable Forms
• Web form design patterns sign-up forms
• Formulaires et bonnes pratiques

L’art du référencement n’est pas une science exacte, cependant, il est toujours bon de faire quelques rappels de notions essentielles quand on veut maximiser son référencement et positionnement naturels!

Pour cette première partie, je vais juste m’intéresser à la structure de votre site.
Certes, ces notions sont parfois évidentes pour certains, cependant, je voulais résumer toutes les bonnes pratiques à adopter pour se donner toutes les chances d’être bien référencé naturellement.

Pour espérer obtenir du trafic conséquent depuis les moteurs de recherche, il faut globalement apparaître dans les 3 premiers résultats pour une recherche précise.
Ces 3 premiers résultats (Triangle d’or) amène respectivement 30%, 15% et 7% du trafic.
Si vous voulez vous trouver dans ce triangle rapidement, prenez soin de vous référencer sur des termes ou des expressions clés sur lesquels la concurrence n’est pas encore fortement installée. N’ayez donc pas peur de vous positionner sur des requêtes spécifiques de types (2, 3, 4 mots clés).

Comment votre page peut-elle remonter dans les résultats ?

Le but du moteur de recherche est d’associer des mots clés à chacune de vos pages web.
A partir de ces associations et une pondération qui reste un “mystère” pour tous, le moteur est donc capable de fournir une liste de pages en résultat pour chacune des recherches.

Afin de pouvoir associer des mots clés à vos pages Web, chaque moteur va accorder un niveau de pertinence décroissant aux informations contenues dans:

1. Nom de domaine
2. URL
3. Titre de la page (Title)
4. Balises de titre (H1,h2…)
5. Texte en gras ou italique
6. 1er mots, 1er paragraphes
7. Le reste du contenu

Google ignore cependant:

• Vidéos
• Javascript
• applets
• les commentaires ()
• Les balises de style
• Les liens dupliqués
• Les liens vers la page courante

URL Rewriting:

• Pas plus de 4 niveaux de profondeur (http://www.exemple.com/post/web/web2/actu/etude/google -> Risque avant tout de vous nuire)

Title

• La taille max souhaitée pour le tag title est de 65 caractères en moyenne
• La balise est à placer le plus haut possible dans votre page
• Positionnez vos mots clés à la suite par importance décroissante
• Positionnez vous sur la bonne conjugaison (Les moteur sont sensibles au singulier/pluriel et masculin/féminin)
• Evitez les erreurs du style (Home, Accueil, bienvenue…) et (titre identique sur toutes les pages)

Headings

Pour optimiser son positionnement sur des mots clés différents, on peut adopter un H1 différent de son Title pour se positionner sur des mots clés aux sens très proches (Ex: title -> “Voitures de légende – Monblog” et h1 -> “Automobiles d’exception”)

Alt – Title

Ne pas oublier de les renseigner car les moteurs donnent du sens à vos images et vos liens grâce à ces attributs (De plus, vous améliorez l’accessibilité de votre site).

Les balises Metas

On sait actuellement avec certitude que seul la balise Meta description est considérée par les moteurs de recherche (La Meta keywords n’est plus tellement prise en compte).
Adoptez une taille moyenne de 150 à 200 caractères pour votre méta description.
Si vous voulez conserver la méta keywords, profitez en pour vous positionner sur des mots importants (singulier/pluriel) mais aussi sur ceux-ci mal orthographiés. Ne dépassez pas cependant une trentaine de mots clés.
Evitez de surcharger vos pages avec des balises inutiles.

Soignez le Linking interne de son site

Il faut par exemple sur votre page principale faire apparaître des liens vers vos pages importantes et faire apparaître sur les pages importantes des liens vers les pages secondaires…
Une arborescence sera bien pensée et efficace si toute page ou information est accessible à 2 clics maximum d’une page d’entrée du site (voire un grand maximum de 3 clics pour de gros sites).
Une arborescence avec une hiérarchie de classement logique et classique en rubriques et sous-rubriques permettra souvent d’éviter la duplication de contenu.
Pour améliorer l’effet de linking entre vos pages, vous pouvez opter pour la mise en place d’un BeadCrumb (Fil d’Ariane) et adopter une soumission intelligente des pages similaires.

Sitemap

Une sitemap n’est pas obligatoire, cependant, celle-ci peut aider à guider les robots pour crawler les différentes pages de votre site.
La sitemap n’est pas un outil de positionnement, elle sert juste à l’indexation.

En conclusion…

Toutes ces notions vues ici sont certes basiques, cependant elles ne sont pas encore tout le temps appliquées à la lettre.
Le référencement naturel, c’est souvent une question de bon sens et de logique, on le laisse parfois de côté alors que celui-ci pourrait vous être très favorable en termes de visibilité.

Vous êtes sur votre faim ?
Ne vous en faites pas, nous verrons dans d’autres billets comment aborder le référencement avec un peu plus d’astuces et d’actions à mener en parallèle.

Sources complémentaires:

• Search Engine Optimization (Conférence Intellicore Tech Talks)
• Réussir son référencement – Olivier Andrieu
• Blog d’Abondance
• MoteurZine

La typographie est sûrement la discipline la plus mystérieuse pour beaucoup de designer cependant elle est souvent déterminante dans l’ergonomie d’une interface Web.

A l’issue d’une étude réalisée par Vision Quest de Digital Web Magazine, on s’aperçoit que l’on assimile 30% moins d’information avec une lecture à l’écran plutôt que sur papier.
Il convient donc de ne pas faire chuter d’avantage ce ratio en délaissant certaines règles essentielles.
La typographie, n’est pas seulement le fait de choisir la “bonne police”, c’est également se poser de nombreuses questions telles que:
Comment hiérarchiser l’information, améliorer la lisibilité et le confort de lecture ?

La lisibilité se décompose en 2 parties:

• Lisibilité cognitive (Readability): Facilité d’un texte à être compris
• Lisibilité perceptive (Legibility): Facilité d’un texte à être lu (Uniquement la perception visuelle)

Nous allons nous intéresser ici à la lisibilité perceptive qui fait souvent énormément défaut sur certains sites alors que l’effort à fournir pour y remédier est souvent moindre.

Quelques règles générales

• Le confort de lecture dépend d’abord de la longueur de vos lignes de texte.
  On préconise de manière générale d’avoir des lignes de texte avec 52-78 caractères (espaces inclus).
• Le deuxième paramètre à prendre en compte est la valeur de votre interlignage (line-height) qui devra de manière générale être plus important que votre intermot (espace).
  De cette façon, l’oeil aura tendance à se déplacer le long des lignes plutôt que verticalement.
• L’espacement entre vos mots doit dépendre du premier paramètre (longueur de ligne).
  Plus vos lignes sont longues, plus votre espacement entre les mots doit être petit et inversement.
• Pour ne pas casser la mise en pratique de tous ces paramètres, il est conseillé de ne pas utiliser un alignement “justifié” de votre texte mais tout simplement une disposition “aligné à gauche” qui reste la disposition la plus lisible.
• Ne pas abuser de texte en lettres capitales (notamment pour de longs blocs de texte) ce qui rend la lecture difficile.

Contraste et lisibilité

Le choix d’un contraste positif (texte clair sur fond sombre), ou négatif (texte foncé sur fond clair) a des répercutions sur la lisibilité.

Su un fond sombre, on peut facilement se rendre compte que l’on doit appliquer des règles différentes afin de maximiser la lisibilité.
En effet, il faudra sûrement augmenter l’interligne, l’espace entre les lettres et réduire le graissage des caractères.

Pour s’en rendre compte, voici un exemple qui met en pratique ces différences:

Pour information, il n’est pas forcément souhaitable que le contraste soit maximal.
En effet, un fond clair sans être à 100% blanc (et inversement pou un fond sombre) est préférable. On peut alors aussi jouer sur la couleur de texte afin de diminuer le contraste (Ex: Couleur de police grise foncée au lieu de d’un noir profond).

De manière générale, le contraste positif n’est pas à proscrire, mais il trouve son utilité principalement pour l’affichage de textes courts, la mise en valeur d’images…
Il convient également de compenser sa moindre lisibilité par une augmentation de la taille des polices.

En conclusion…

Après cette réflexion générale sur la lisibilité perceptive, il faudra se pencher sur la mise en pratique de ces notions avec une utilisation correcte des règles CSS.
Si vous ne savez pas trop comment choisir et appliquer les règles CSS, je vous conseille cet article qui détaille une bonne utilisation des propriétés et leurs justifications.
Pour tester vous même vos règles, vous pouvez également vous rendre sur ce site et/ou celui-ci qui se chargeront de présenter le rendu et les règles CSS associées.

Si ce sujet vous a intéressé, je vous conseille de poursuivre votre lecture avec ces différents articles:

• The Elements of Typographic Style Applied to the Web
• sIFR 2.0: Rich Accessible Typography for the Masses
• Unitless line-heights
• Typographie Noir au Blanc | analyse comparée
• Web Design is 95% Typography
• How to Size Text in CSS

Toute une joyeuse troupe lance aujourd’hui un blog dédié à la musique !
SoundNation est né avec une seule ligne de conduite: Partager une passion commune pour la Musique!
Grâce à nos goûts musicaux très éclectiques, nous nous efforcerons donc de partager des moments musicaux en tous genres et de façon très régulière…

La joyeuse équipe de SoundNation.fr se compose donc de:

• aDr-
• Gonzague
• Hypno
• Jumbo
• Toli
• Et moi donc…

En espérant que certains trouveront leur bonheur ou leurs petits moments de détente, je vous dis à bientôt sur ce blog (Qui subira surement quelques petits bouleversements sous peu)…

Depuis la démocratisation de l’informatique grand public, de nombreux foyers ont équipé leurs foyers avec du matériel multimédia.
On sait aujourd’hui que 28% des foyers équipés sont composés de 2 PC ou plus!
Seulement, qui tire réellement parti de son réseau local pour centraliser, partager, sécuriser ou diffuser les données ?
C’est le défi que s’est lancé HP en lançant une nouvelle gamme de machine qui viendra faire le lien entre tous vos ordinateurs et périphériques de la maison!
À cette occasion, j’ai eu la chance de tester le HP MediaSmart Server qui arrivera sur le marché fin février!
La machine est avant tout destinée à un usage familial et celle-ci sera proposée aux tarifs de 600 euros (version 500Go) et 800 euros (version 1To).

Pourquoi besoin d’un serveur à la maison ?

Le HP MediaSmart Server est une machine autonome qui va gérer complètement votre réseau domestique!
Ses usages sont variés mais celle-ci saura par exemple gérer:

• Impression: gérer l’accès au(x) imprimante(s) de votre réseau
• Fichiers: Partager des données et mettre en place des autorisations d’accès selon les utilisateurs
• Stockage: Rendre accessible vos données de façon rapide et centralisée à toutes les machines de votre réseau
• Diffusion (streaming): Lire en continu vos contenus multimédias (musiques, vidéos, photos…) sur chacun de vos postes
• Sauvegarde: Programmer des sauvegardes régulières de toutes les machines de votre réseau
• Partager vos photos: Accéder de l’extérieur et consulter vos albums photos
• Connexion à distance: Accéder depuis l’extérieur à du contenu ou à une machine de votre réseau
• Partager vos contenus multimédias sur une télé grâce à un DMA, XBOX360, etc…(je n’ai pas pu le tester ici)

  

Pour les plus téméraires, sachez que la machine est capable de faire bien plus et peut se prêter à un usage domotique (Ex: contrôle de votre éclairage…)!
L’HP MediaSmart Server fonctionne avec la dernière version de Windows HomeServer de Microsoft et bénéficie donc d’une prise en main rapide et d’une configuration simplifiée!

La bête: petit mais costaud !

HP a fait un effort d’esthétique sur cette petite machine qui aura pour vocation de s’exposer dans le salon!
De taille assez réduite (équivalente à un gros barebone -> 25cm de haut), le MediaSmart Server tout de noir vêtu s’affiche comme une machine assez chic avec des petites LED bleues qui sont même réglables en intensité!
Pas besoin donc d’aller cacher le serveur dans un placard puisque celui-ci est également suffisamment silencieux pour ne pas vous gêner!
Fonctionnant grâce à un processeur AMD 1.8 GHZ 64-bit Sempron 3400+ et 512 Mb de mémoire vive, la machine est constituée de 4 racks SATA pour disques durs et l’ajout d’un nouveau dans un tiroir se fera sans difficulté!
Le MediaSmart Server consomme 60W en usage normal et sa capacité maximale de stockage peut atteindre un total de 7,5 To!
Niveau connectique, le MediaSmart Server est pourvu d’une connexion réseau 1Gbps, 4 ports USB et d’ un port e-Sata.
Vous pourrez donc raccorder vos périphériques afin de les rendre accessibles depuis votre réseau tel que Webcam, disque dur externe, …

Devenez administrateur de votre réseau !

Pour installer ce serveur, vous n’avez pas besoin d’être un geek averti: Tout a été fait pour être installé et configuré par un simple utilisateur!
Apres avoir installé l’ interface de gestion sur une ou plusieurs machines de votre réseau, vous voila paré pour configurer votre serveur!

Il vous reste maintenant à définir vos comptes utilisateurs.
Pour chacun d’eux, vous pouvez définir les autorisations de partage et activer ou non l’accès à distance aux ressources du réseau!
Désormais chacun des utilisateurs créés peut accéder aux ressources du serveur depuis la console ou un simple navigateur internet!

Sécurité:
Vous allez retrouver dans votre console les machines qui sont présentes sur le réseau.
On programme alors des sauvegardes sur chacune des machines et celles-ci seront sauvegardées chaque nuit par le serveur!

On a la possibilité de définir les dossiers, les disques et les machines qui devront êtres sauvegardés!
La restauration d’un état antérieur sur une des machines s’effectue également en 1 clic!
A titre d’exemple, une sauvegarde (ou restauration) de 35 Go de données s’est réalisée en 30 minutes sur mon réseau filaire!

Musique:
On a la possibilité de configurer un serveur de musique qui pourra fonctionner avec iTunes!
Cette fonctionnalité s’est révélée très intéressante même si on peut déjà partager une bibliothèque musicale sans forcément posséder un serveur!

Partage de photos:
Le mail ne se prêtant pas du tout à l’envoi de photos, à moins d’être un geek averti pour constituer une galerie en ligne, MediaSmart Server apporte ici une solution pour partager vos photos!
Depuis votre navigateur, vous avez la possibilité de créer des albums photos et de choisir les photos directement sur votre ordinateur pour les partager avec les utilisateurs que vous aurez définis!
Cependant, cette fonctionnalité ne m’a pas séduit!
En effet, la gestion des photos m’a semblé trop laborieuse pour pouvoir en faire un usage régulier (même des services onLine de partage sont plus accessibles et complets) !

Stockage:
La capacité de stockage maximum s’élevant à 7,5 To, on a le temps de voir venir!
Vous allez donc pouvoir concentrer vos disques durs dans une seule et même machine (fini les disques durs externes encombrants qui traînent à côté des machines)!
Pour alléger les supports de stockage sur les machines du réseau, on peut alors enregistrer les données sur les dossiers partagés du serveur!
Pour cela rien de plus simple, il suffira de choisir dans votre explorateur la possibilité de connecter un lecteur réseau!
A chaque redémarrage, vous pourrez accéder à ces disques durs virtuels et vous en servir comme s’ils étaient sur votre machine locale!
Pour ne pas faire de jaloux, sachez que le partage de données est complètement compatible avec d’autres Systèmes d’exploitation.
Par exemple, il suffira de se connecter au MediaSmart Server en un clic depuis Mac OS X et/ou de configurer le montage d’un disque dur réseau sur une distribution de type Linux!

Accès à distance:
La configuration de l’accès au réseau local depuis l’extérieur s’avère être la seule manip un peu compliquée!
En effet, il faut configurer la Box ADSL (Freebox, Livebox…) pour définir qu’un appel de votre réseau depuis l’extérieur soit redirigé vers le serveur!
Rien de bien compliqué pour les geeks qui sauront rediriger les bons ports, cependant, pour les néophytes, il faudra sûrement faire appel à quelqu’un de plus compétent ou alors compter sur la communauté d’utilisateurs qui sera prête à vous aider pour paramétrer celle-ci!
Une fois cette manip effectuée, l’interface vous propose de créer et d’associer votre serveur à un nom de domaine qui sera par exemple de la forme: votrenom.HPShare.net
A ce moment là, il vous suffira donc de taper cette adresse dans n’importe quel navigateur pour accéder à votre réseau!

Mes impressions

Je n’ai pas aimé:

• L’incapacité à pouvoir piloter le serveur depuis un autre OS que Windows (on peut pas tout avoir)
• La nécessité de devoir aller configurer les ports de ma freebox
• La fonctionnalité album photo pas assez aboutie
• Une interface Web pas forcément très fonctionnelle pour accéder à son réseau depuis l’extérieur
• Le serveur ne joue pas un vrai rôle dans la sécurité de votre réseau

J’ai aimé:

• Capacité de stockage évolutive accessible sur le réseau
• Le système de sauvegarde autonome et configurable
• Le look de la machine et son encombrement minime
• Les performances de la machine plutôt bonnes

Le HP MediaSmart Server, c’est certain, est bel et bien destiné à un usage familial voir semi pro (pour peu de machines)!
Sa facilité de déploiement, ses fonctionnalités variées et son look black et chic raviront les personnes soucieuses de mettre un peu d’ordre dans leur réseau informatique! Cette machine jouera très bien le rôle d’assistant dans la gestion de votre réseau local!
Personnellement, je suis convaincu que l’incursion d’un serveur dans les foyers va apporter confort et fiabilité sur les réseaux domestiques!
Cela permettra également dans un futur proche l’avènement de nouveaux usages comme par exemple le pilotage d’un plus grand nombre de périphériques et/ou d’appareils domestiques (domotique)!
Le HP MediaSmart Server débarque donc sur un marché encore tout frais et possède des atouts pour conquérir de nombreux foyers!
Petite ombre au tableau, je regrette seulement que le MediaSmart Server ne puisse pas faire office de passerelle Internet (firewall) et/ou ne centralise pas un antivirus pour toutes les machines du réseau!

NOTE du produit: 14/20

En France, la proportion de daltoniens est d’environ 8% chez les hommes et 0,45% chez les femmes.
Personnellement, je ne pensais pas que le daltonisme touchait une aussi grande partie de la population.

Il existe 3 grandes variantes de daltonisme:

• Deutéranopie (D): Incapacité à différencier le rouge du vert (Touche 5% des hommes)
• Protanopie (P): Sensibilité à la perception de la couleur verte diminuée (Touche 2,5% des hommes)
• Tritanopie (T): La couleur bleue est indétectable (Touche 0,5% des hommes)

Maintenant, échangeons les rôles et voyons un peu comment les daltoniens perçoivent nos sites Web!
Pour cela, il existe un logiciel multi plate-forme qui va vous assister dans cette expérience (Color Oracle).
Color oracle applique un filtre de couleur sur votre écran mais ne permet pas malheureusement de continuer à surfer quand le filtre est actif!
Cependant, ce logiciel, à l’inverse des autres alternatives, fonctionne également pour les sites en Flash.
À titre d’exemple, j’ai capturé ce que donne ce même blog (pas très parlant) ainsi qu’un logo qui vous est familier:

Maintenant, on comprend mieux comment les couleurs par défaut de nos interfaces ont été choisies (Ex: Bleu Navy pour les liens)

Et vous, l’expérience de daltonien est bonne de votre coté ?