Excellent article (ou première partie de dossier)
Je l’avais mis en favoris/de coté, pour le lire plus tard, il va y rester ^^
Vivement la 2e partie

[...] de Taillac propose sur son blog un excellent article sur l’ergonomie des formulaires. A lire [...]

Très beau thème

Le formulaire est un élément primordial pour l’utilisateur car il est souvent le point d’entrée d’un site/application mais peut malheureusement rapidement se transformer en porte de sortie.
Le formulaire, c’est l’étape où l’on demande gentiment à l’utilisateur de nous fournir des informations en échange de lui fournir un service ou des informations par la suite.

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

Soigner son référencement (Partie 1: Structure et réferencement naturel) » Emmanuel de Taillac .fr…

dsf sd gd ds dsg sdg…

Ahhhhhh, je viens de comprendre ce qu’est le footer, en réflechissant à ce que ça pouvait bien être. [in petto] Footer, footer, je ne connais que le header *clarté*

J’ai vu la Vierge, quoi… (150 ans après la petite Bernadette, hum, c’est un signe, ça?).

Bon allez, bravo bravo, il est superbe ton blog.

Amicalement.

Al.

J’aime po l’alignement à gauche Je trouve que la navigation est moins évidente et intuitive en plus avec ça à gauche (pas habitué quoi )

Par contre j’aime bien les couleurs, c’est clair et ça donne envie de lire

Le décalage en haut à gauche me choque pas, mais comme ont dit certains mettre un “contenu” à la place du vide ferait mieux IMO

Merci à vous tous pour vos remarques et vos avis.

En le regardant à tête reposé de nouveau aujourd’hui, je n’ai rien à redire (mis à part le décalage dans la sidebar dont je te parlais) :
- l’attention aux petits détails,
- l’originalité (alignement à gauche),
- le footer très réussi,
- etc.

Congrats !

Je préfère complètement, même si l’alignement à gauche ça fait bizarre

En effet, comme Romain, je trouve choquant le petit décalage, ça ressemble à un bug CSS…
Pourquoi ne pas mettre un petit effet graphique moins “vide” ?

Sympa
Il y a un décallage du champ de recherche en haut, et dans la sidebar avec la section : “a lire”

J’aime bien l’esprit très minimaliste

Tout d’abord, félicitation pour ce thème.
Ce que j’aime:
- Clarté de l’ensemble
- footer
- mariage des couleurs

Ce que j’aime moins:
- Alignement à gauche
- bug sur la page de contact (forcément ^^)

Enfin bon dans l’ensemble, je trouve ce thème meilleur que l’ancien

J’ai connu ton blog en cherchant un thème pour le mien, y’a environ 1 an. J’avais déjà beaucoup aimé tes thèmes. Celui-là est vraiment top, y’a pas à dire, t’as vraiment du talent pour le design web ! Bravo

L’ensemble est une réussite totale avec un faible pour le footer également même si j’avais une préférence pour l’ancien header ! Bravo et félicitations pour ce travail remarquable …

@Flavien: Merci pour ces ptis bugs.
Il me restera en effet la page de contact et la 404 à remettre à neuf.
Thx

Bonsoir !

Je trouve ce thème très réussi, surtout le footer !

Seulement quelques petites choses:
- la page de contact ne s’affiche pas
- il y a un petit bug avec la page d’erreur
- il y a une petite faute de conjugaison( pas bien grave) au dessus du formulaire de commentaire : “vous pouvez trackbackEZ”, l’orthographe correcte est “trackbackER” !

Bonne soirée !

Flavien

Ah oui c’est pas mal, plus lumineux, plus clair, c’est cocooning, je vais peut être m’y installer :p

Emmanuel de Taillac change de Thème et repart pour une nouvelle année!
En effet, l’été a été l’occasion de penser à une nouvelle refonte de ce blog, et j’en suis arrivé à ce résultat qui me satisfait plutôt bien.

Cette refonte a été l’occasion d’alléger encore un peu le layout et de privilégier une mise en valeur du contenu.

Ce thème est cette fois-ci aligné à gauche et la colonne latérale ne sert plus à naviguer mais elle apporte des infos contextuelles et rappelle le contenu à mettre en valeur.

Tout ça pour vous demander maintenant ce que vous en pensez et corriger ce qu’il ne vous plairait pas…

PS: Merci encore à Romain pour son feedback régulier et peut-être penserez-vous comme lui que le décalage de la colonne en hauteur est choquant…
Je l’explique par la volonté de donner un ordre de lecture qui commencerait par le contenu avant la colonne…

Merci pour vos retours…

Bonjour,

A propos de musique, je profite de cet article parlant de Spool.fm pour vous annoncer la sortie du site RCM (radio locale de l’est de la france).
Je vous propose aussi de passer nous faire une visite pour écouter le flux (www.rcmlaradio.fr) et aussi (pourquoi pas) de laisser un petit mot sur le tchat (ça nous fera très plaisir).

Amicalement,

60 modèles de navigation web…

Le livre dePatricia Gallot-Lavallée est bien connu des travailleurs du web. Il propose une liste quasi-exhaustive des modèles de navigation sur les sites web en présentant leurs avantages et inconvénients. “Donne moi ce que je veux” peut désor…

“Internet donne moi ce que je veux” ou plutôt “60 modèles de navigation pour satisfaire vos internautes” écrit par Patricia Gallot-Lavallée est désormais consultable dans son intégralité et gratuitement.

En effet, l’auteur explique qu’après son succès commercial, celle-ci compte sensibiliser plus de monde et récolter plus de feedback en vue de la prochaine édition.

En bref, ce bouquin, c’est quoi ?
Un très bon recueil de bonnes pratiques pour le Web qui passe en revue des notions d’ergonomie, de navigation, d’expérience utilisateur, des outils et éléments de construction d’un site WEB… en gros, un joli tour d’horizon indispensable!

N’hésitez donc pas à aller vous cultiver et échanger vos impressions sur chacune des pages… c’est fait pour !

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

Je ne vous avais pas encore fait de retour sur ce RailsCamp qui s’est déroulé samedi à la cantine.
En résumé, le feedback est très positif grâce entre autres à:

• Une très bonne organisation (cadre, ambiance, confort, pizzas, tee-shirt…)
• Des participants très sympathiques et hétéroclites (Passionnés, professionnels, développeurs, étudiants ou simples curieux)
• Des interventions et intervenants de qualité

Bref, on attend avec impatience la deuxième édition de ce RailsCamp après le succès rencontré par celui-ci.
Pour information, avant une deuxième édition, il semblerait qu’un RubyCamp soit dans les tiroirs pour bientôt mais je vous tiendrai au courant.

Pour terminer ce feedback, juste envie de faire partager la présentation qu’a tenu Olivier Gutknecht.
Cette présentation explique pour moi avec synthèse et simplement ce qu’est Rails.
Si seulement ces gens là pouvait trouver le temps d’enseigner dans nos écoles…