Petits détails d’ergonomie sur un champ de recherche.

Mettre une action en avant au bon moment.

En passant sur MailChimp, j’ai trouvé un petit détail très sympathique sur le champ de recherche. Sans interaction avec le champ une loupe est légèrement visible, mais dès que l’utilisateur clic dessus un fond coloré apparait derrière la loupe. L’animation et le renforcement du contraste permettent d’attirer l’attention sur cette zone. Je trouve ça très intelligent puisqu’au moment où une personne commence à entrer un terme de recherche, l’action suivante sera de lancer cette recherche. Vous pouvez voir l’avant-l’après ci-dessous : Mailchimp-ergonomie-champ-recherche-bouton-action

Simple et efficace, l’utilisateur est aidé même dans une action aussi simple.

Un champ qui s’adapte aux supports.

Ce n’est surement plus une nouveauté pour la plupart d’entre vous, mais avec le responsive webdesign qui devient de plus en plus présent j’apprécie cette fonction. Le champ adapte sa taille par rapport à l’espace disponible et à l’appareil utilisé. Viadéo, Mashable et d’autres utilisent ce procédé, tout comme DesignModo ci-dessous :

Designmodo-champ-recherche-ergonomie-responsive

On facilité la relecture d’un terme de recherche long et utilisé avec l’auto-complétion ce système permet de rendre la navigation toujours plus agréable. Hésitez pas à partager vos remarques, ou d’autres détails d’ergonomie que vous avez appréciés sur les champs de recherche. Je profite de ce petit post pour vous souhaiter une superbe année 2013, une bonne santé et une excellente conversion !

Mise à jour avec un commentaire de @Prestarocket sur la sauvegarde des anciennes recherches. Peu utilisé aujourd’hui et parfois bien pratique :

 

Partager sur facebook
Facebook
Partager sur pocket
Pocket
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Articles en relation :

Newsletter

Recevez les 10 meilleures actualités autour du CRO tous les mois: articles, process, outils, conférences, ...

Vous voulez savoir où et comment démarrer l'optimisation de votre site ?

Je peux détecter vos opportunités d'optimisation et vous délivrer les recommandations à appliquer, mais êtes-vous prêt ?

3 Comments

Aurélien · 7 janvier 2013 at 19 h 06 min

Astucieux effectivement.

Bien vu !

Thierry · 8 janvier 2013 at 12 h 26 min

Je serais tenté dans le 1er cas (Mailchimp), de faire disparaître « enter your seach » lorsque le curseur apparaît au clic, car sinon c’est troublant, on a presque envie de supprimer la consigne avant de taper sa propre recherche.

Et pour le 2nd cas (DesignModo), le clic pour ouvrir le champ de recherche me parait presque superflux. Je serais cette fois tenté d’afficher le champ de recherche au survol. Mais là, cela va dépendre des utilisateurs finaux en termes d’expérience et d’expertise propre.

Fauveaux Mathieu · 8 janvier 2013 at 12 h 58 min

Merci pour vos commentaires Aurélien et Thierry.

Concernant Mailchimp je suis bien d’accord avec vous Thierry, étrange que le texte ne s’efface pas au clic. L’exemple d’Asos est plaisant avec cette légère animation ( http://www.asos.fr/ ). En allant plus loin on pourrait aussi se demander pourquoi ne pas avoir mis une couleur différente du background ( orange, rouge, jaune.. ) pour mettre plus en avant cette fonction.

Pour le cas de DesignModo je partage aussi votre point de vue. J’ai même l’impression que c’est une idée qu’ils ont pu avoir sans la finir. Au survol le champ change couleur et juste après le mot « search » la barre clignote. Combien d’utilisateurs commencent à taper un mot ? Dommage !

L’idée du survol est intéressante mais ne doit pas être unique. Elle pose quelques problèmes pour le tactile. Ces techniques restent intéressantes mais ici d’autres points sont perfectibles. ( toujours en fonction des problématiques d’un site )

Le temps se fait rare en ce moment et j’avais traité ce billet plus comme une news qu’une analyse. Votre commentaire aura permis de remettre certaines choses dans l’ordre et je vous en remercie Thierry !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.