Nous n’avons pas encore analysé la question de Recherche dans ce blog. La fonctionnalité de recherche joue souvent un rôle important dans la transformation d’un visiteur en client. On peut dire que si un visiteur n’arrive pas à trouver ce qu’il recherche, votre site est mal parti!
Un développement intéressant des navigateurs Internet est celui qui permet l’intégration de la boîte de recherche directement dans la fenêtre du navigateur. Firefox est allé encore plus loin en proposant une sélection de moteurs de recherche différents. Pour le faire avec Firefox 2+:
- Cliquez l’icône Google à gauche de la boîte de recherche.
- Cliquez sur ‘Gérer Moteurs de Recherche’
- Vous pouvez changer l’ordre ou en rajouter un en cliquant sur ‘D’autres Moteurs de Recherche’.
Mais ce n’est pas que les grands moteurs de recherche qui peuvent proposer ce service. Peut-être votre site Internet possède un moteur de recherche que vos clients aimeraient accéder directement à partir de leurs navigateurs. Firefox vous explique sur le site comment intégrer votre propre moteur de recherche .
Si vous décidez de proposer ce service pour votre site, prenez note des approches intéressant que certains ont prit pour promouvoir ce service.
Pour commencer vérifiez si le visiteur utilise un navigateur qui possède ce genre de recherche intégrée. Pour ceux qui l’ont, utilisez un appel à l’action sous forme de graphique pour inciter une installation. Mettez-le en haut à droit de l’écran ci-dessous l’emplacement futur de la boîte de recherche. Faites attention de le créer d’une manière à ce que le visiteur peut le supprimer et qu’il ne s’affiche pas une fois installée.
Yahoo! était le premier à le faire. Yahoo! search avait Firefox installé d’avance mais ce n’était pas l’option par défaut. L’appel à l’action, pour Yahoo! était de changer pour Yahoo! search. Malin! La capture d’écran ci-dessus est d’Exalead search - qui ont un appel à l’action de ‘ajoutez Exalead à votre liste de moteurs de recherche’.
Un grand merci à Sébastien Billard qui nous a suggéré d’écrire un Yclick.it sur ce sujet!
Nous avons déjà analysé le sujet du processus de téléchargement: montrer comment télécharger, réduire le processus en un seul clic, utilisation du contraste pour le boutons et installation étape par étape.
Panic produit un nombre d’applications mac dont un est pour le développement web qui s’appelle Coda. Il y a un certain nombre de points à noter dans le processus de téléchargement. Si vous proposez des documents ou logiciels à télécharger, ces points peuvent être intégrés facilement à votre site.
D’abord, comme l’exemple ci-dessus, le processus est réduit à un seul clic, ceci est possible malgré le fait qu’il faut enregistrer le logiciel pour l’utiliser. Il fournit aussi de l’information sur le téléchargement (taille de fichier, format, besoins techniques etc.) à côté du bouton ‘téléchargement’ et non comme Firefox sur le bouton, mais plutôt avec un texte java script qui paraît lorsqu’on met le curseur sur le bouton télécharger.
En plus, quand vous cliquez sur le bouton, le fond s’assombrit et un autre texte est affiché. Celui-ci vous informe que le processus de téléchargement a commencé, que vous le trouverez dans votre dossier de téléchargement et enfin que vous pouvez l’essayer mais il faut l’acheter pour continuer l’utilisation. Cette façon d’assombrir l’écran et le texte superposé est un excellent moyen de focaliser l’attention surtout si vous voulez rendre le processus de téléchargement le plus simple que possible.
(Merci à Airbag pour son humour désabusé et pour le tuyau Panic!)
La semaine dernière nous avons regardé un exemple de comment le contraste peut être utilisé pour mettre en valeur certains éléments . Aujourd’hui nous allons continuer cette étude avec des exemples que j’ai trouvés depuis une semaine.
Couleur, Soulignement & Exclamation
Lighthouse est un service online de ‘issue tracking’. Dans la navigation, le site met en valeur l’appel à l’action ‘Inscription’ en le mettant dans une couleur différente - bleu foncé sur un texte de navigation blanc. Il est souligné et en plus il y a un point exclamation!
Taille, Ordre & Caractère Raquo
Icebrrg est un outil pour créer et gérer des formulaires Internet. La navigation est divisée en deux parties - Les liens normaux au dessus de l’horizon et les liens plus centrés aux produits en dessous. J’adore comment l’iceberg s’approche de l’horizon! Ce dernier a plus de contraste et une police plus grande. L’appel à l’action est mis en valeur avec le symbole ‘raquo’ (») à droite.
Ordre & Exclamation
Expression Engine est un système de gestion de contenu. Le site a la technique simple d’utiliser un point d’exclamation et de mettre l’appel à l’action à la fin de la liste afin de mettre en valeur ‘Buy Now’. Il y a un article avec beaucoup plus d’information sur son ‘redesign’ par le web designer Jesse Bennett-Chamberlain si cela vous intéresse.
Tester avec Google Website Optimizer
Les quatre exemples ci-dessus utilisent des changements très simples pour mettre en valeur l’appel à l’action : changement de couleur, point d’exclamation ou le symbole raquo . Ce sont précisément le type de modification que vous pouvez tester dans le nouveau Website Optimizer de Google. Cet outil vous permet de tester comment des variations de la même page affectent votre taux de conversion. Nous attendons avec impatience tester notre propre site dans les semaines à venir.
Grok Dot Com est un sites avec des bons conseils pour commencer avec Optimizer »
(Merci à Tim pour le lien Lighthouse …)
Problogger a réalisé un sondage informel pour établir les raisons des dés inscription d’un blog - information utile pour quelqu’un avec un blog. Les dix raisons les plus fréquents sont:
- Trop de billets (le niveau de publication est trop élevé).
- Pas assez de publication (ou le blog est en effet mort).
- Les fils RSS partiels.
- Le blog change de ‘focus’ (trop d’articles hors sujet).
- Trop de billets déjà vus ailleurs (plus d’actualité, plus de sens, répété ou simplement une information recyclée).
- Contenu sans intérêt.
- Contenu sans pertinence.
- L’ego du blogeur - Trop d’autopromotion.
- Contenu de mauvaise qualité.
- Trop de billets longs.
La question du contenu est cruciale: il faut de la bonne quantité, un sujet pertinent et intéressant. Les fils RSS partiels sont très mal perçus. S’il faut en avoir, n’oubliez pas de les rendre motivants.
Il y a encore beaucoup d’autres information intéressants à lire dans l’article (en anglais) »
Nous avons pas mal parlé des designs de 37signals dans le passé (1 & 2). La semaine dernière ’37signals’ a été lancé Highrise et comme d’habitude il y a pas mal de choses à voir! (’Keep in touch…’) et dans l’appel à l’action principale (’Take a tour’, ‘Sign up for free’).
Si on regarde le design sans être distrait par la couleur, nous pouvons voir plus clairement les tons (ombres) et contrastes qui sont employés. Par rapport au fond, le titre est le plus foncé. C’est aussi très clair d’un point de vue du design que ce n’est pas un lien. Donc si le visiteur va à la prochaine étape, il faut s’en aller.
Ensuite regardons les appels à l’action (’Take a tour’, ‘Sign up for free’). Quand nous regardons cette section en noir et blanc, nous pouvons voir pourquoi cette section a autant d’importance. Malgré que ce soit du texte rouge sur un fond jaune, les tons des deux couleurs sont assez foncés. En fait, ce fond jaune est la plus grande partie d’espace foncé de cette de la page. Il y a un fort contraste par rapport au fond.
Aussi il est intéressant de constater de quelle manière ‘Pricing & Sign up’ est mis en avant dans la navigation. Les liens dans la navigation ne sont que des simples. liens bleu soulignés . Dans ce cas, le contraste se fait en mettant ‘Pricing & Sign-up’ en caractères gras. Le fait de le placer à la fin de la liste le rend plus facile à remarquer.
Donnez au visiteur un message clair avec un chemin de progression simple à travers votre site. Le contraste peut être utilisé comme outil de design pour le faire. Il peut être utilisé pour mettre en avant les éléments les plus importants- dans ce cas pour les titres et les appels à l’action, mais aussi il peut être employé pour d’autres points comme les points de résolution ou références clients etc.
Pour vous, y a-t-il d’autres choses à noter sur le site Highrise?
C’est fatigant parfois de bouger sa souris et de cliquer sans cesse. Ce site Japonais a trouvé une façon géniale de montrer à quel point c’est pénible!
Si nous avons des lecteurs Japonais - peut être, vous pourriez nous en dire plus!
Merci Amélie pour le lien!
Nous avons parlé récemment du design pour une lecture superficielle et une lecture rapide le ’scanning’ et ’skimming’. Aujourd’hui nous avons deux autres exemples de sites qui utilisent le soulignement. Mais ces techniques sont utilisées pour attirer l’attention du visiteur à l’appel à l’action.
Le premier est sur 37signals jobs board. Un soulignement jaune foncé attire immédiatement votre attention et incite à publier une annonce. ‘Publier une annonce et trouver la bonne personne’ obligeant et rassurant le texte ci-dessous nous informe du coût et de la durée sans devoir cliquer.
Notez dans la liste de poste de quelle manière le titre est utilisé en tant que texte du lien. Cela aide à optimiser la page avec le lien pour ce texte, qui à son tour aide à trouver ceux qui font une recherche de travail sur Internet. Le résultat - plus de chance pour trouver la bonne personne!
Etre est une agence d’usabilité basée au UK. Je l’ai découvert lorsque j’ai regardé un vidéo qui présentait leur service de ‘eye tracking’/suivi des yeux. Très clairement en phase avec la page d’accueil , il souhaite que les visiteurs puissent trouver ce service.
‘Looking for Eye Tracking?’ est souligné en un jaune discret. Vu la nature des autres couleurs sur la page, cet élément est la chose le plus visible de toute la page. Cela met en avant les Mots Clés ‘eye tracking’ et en plus crée un lien pour en savoir plus.
Conclusion
Le soulignement peut être utilisé efficacement pour mettre en valeur un appel à l’action:
- L’utilisation de texte au lieu d’un graphisme facilite l’inclusion d’un texte spécifique et encore plus important Mots ‘trigger’ ou Mots Clés.
- Et l’utilisation d’un seul soulignement sur l’écran peut focaliser l’attention du visiteur instantanément sur un élément.
Pour le prouver il faudra probablement faire une analyse, mais je suis prêt à parier que etre doit en savoir quelque chose de toutes les analyses précédentes !
Ça y est le blog a été transféré à son nouveau domicile! Et nos lecteurs (c’est vous!) ont commencé à utiliser le nouveau fil RSS. Avec tout ce boulot, il n’y avait pas grande chose qui se passait sur le blog mais désormais ça va changer!
Mise à part le transfert de domicile, nous avons fait quelques changements sur notre façon de travailler sur Yclick.it. Si vous lisez ce billet dans votre lecteur RSS, sortez et venez voir!
D’abord, nous avons séparé les versions française et anglaise. Nous avons changé la mise en page pour donner plus d’espace aux billets. Suite à une analyse Yclick.it par nous-même, nous avons décidé d’inclure l’ensemble du billet sur la page d’accueil du blog. De cette manière, les visiteurs peuvent voir tout le contenu sans devoir faire ce clic supplémentaire!
La façon de voir le détail de la capture d’écran et la version plein écran a également changé. Notez la petite loupe en bas à droite de l’image ci-dessus. Quand vous y cliquez votre navigateur va ouvrir la capture d’écran à 100%. On avait mis de côté l’image pour un billet sur ‘Waiting for Your Cat to Bark: ‘ (UK) mais…voici Minna, le chat de Bennet!
Après-tout ce travail, on aimerait savoir ce que vous en pensez - laissez vos commentaires ci-dessous. Si jamais il y a des erreurs ou des oublis sur le site, ça peut arriver, merci de m’envoyer un e-mail à solutions at logicintuition dot com. Merci pour votre patience!
Un grand merci à Wordpress Lightbox Plugin et Sweetie icons.
Things have been pretty quiet here on the blog recently! In fact we have been busily working away on some major improvements to the blog. The most important change is that we have created two separate blogs for French and English speakers with two separate feeds.
To continue reading this blog in English, make sure to update the feed address in your feedreader:
http://feeds.feedburner.com/yclickit/en/
If you have any problems transferring or notice anything odd on the site, feel free to contact me on solutions at logicintuition dot com.
More details on the improvements and more importantly, more yclick.its next week! Thanks for reading!
flickr est un service pour stocker et partager des photos online. Le site propose un service de base mais aussi pour ceux qui ont une utilisation plus importante, un service ‘pro’. Le bouton sur la page version ‘pro’ on ne pas le rater!
Il est énorme avec du texte en rose. Il y a beaucoup d’information pour persuader le visiteur de cliquer: le prix, la durée et une liste de spécifications du service ‘pro’. En fait toute la section à partir du titre ‘Holy Smokes…’ jusqu’au bouton est un grand lien vers la page de commande.
Il est étrange qu’il ne propose pas un lien ’savoir plus’. D’accord, cette page est vue par ceux qui ont déjà un compte flickr, mais ça ne veut pas dire qu’ils sont au courrant des points forts ou de la valeur des ce service ‘pro’.
Notre Blog
Yclick.it est un blog qui s'intéresse à la question de comment le design d'un site web peut persuader un visiteur de devenir un client. Il est mis à jour hebdomadairement avec des nouvelles captures d'écrans, commentaires, et analyses sur le thème du langage, couleur, contraste et positionnement, utilisés pour obtenir ces importants clics.
Les deux fondateurs de
logic+intuition souhaitent développer, à travers de ce blog, une ressource incontournable pour tous ceux qui s'intéressent à la vie d'entrepreneurs online et à la promotion de leurs sites.
Pour en savoir plus ».
Restez au Courant
Resources
Les Blogs Que Nous Lisons
Archives
Visitez nos
archives des idées marketing perspicases que vous n'avez peut être pas vu.
