Il ne faut que quelques secondes pour qu’un internaute juge de la pertinence et de l’attractivité d’un site. Si votre site n’est pas convaincant, vous avez peu de chance de faire de bonnes ventes. Pour évaluer votre site, les visiteurs se basent sur plusieurs facteurs :

La simplicité

« Don’t make me think », voilà ce que demande le cyber-acheteur. Internet est avant tout un moyen de faire ses achats de manière simple. Ce n’est pas parce que l’on utilise parfois des technologies compliquées, que l’utilisateur de votre site doit se confronter à une navigation complexe. Restez donc simple.

Simple mais fonctionnel

Il ne faut cependant pas oublier les fonctionnalités essentielles au bon déroulement du processus d’achat de vos clients. D’autant plus que certains utilisateurs un peu plus avancés en demanderont plus que les autres. Il faut pouvoir répondre aux besoins de ces derniers sans nuire à la demande générale de simplicité.

La vitesse

On aurait de plus en plus de temps libre mais de moins en moins le temps. Ce qui est sûr, c’est qu’un internaute n’acceptera plus d’attendre 30 secondes pour voir sa page s’afficher comme aux débuts d’Internet. Le poids des fichiers que vous placez sur votre page et ainsi le temps de chargement n’est pas qu’un détail. C’est un des éléments décisifs qui va faire que vos visiteurs resteront ou non.

Libellés et organisation des éléments

Une hiérarchie claire de vos produits avec des noms de catégories pertinents permet d’orienter le client dans le bon sens. Il serait dommage qu’un visiteur qui cherche un de vos produits ne le trouve pas à cause d’un mauvais choix de termes. N’oubliez pas non plus le moteur de recherche interne qui peut s’avérer très utile quand un client se perd. Pensez à ce propos aux tags, ces petits mots clés qui en disent long sur vos produits.

Lisibilité

Deux phrases courtes valent souvent mieux qu’une phrase longue. Lire sur un écran devient vite fatiguant. Allez à l’essentiel sans négliger le choix de la typographie.

Esthétique

Le design de votre site annonce la couleur. On se rend rapidement compte de la qualité d’un site avec son design. Sans parler de « beau » ou de « laid », il s’agit de faire quelque chose de soigné et adapté à la thématique du site.

Les internautes se basent sur leur expérience et leurs émotions pour prendre leur décision. Il faut donc bien connaître sa cible pour répondre à leurs attentes.

Source : Blog Adviso

Thème du conseil : Référencement

Conseil n°21 :

« Pour une navigation fluide et améliorer son référencement naturel, il est fortement conseillé de placer un fil d’ariane (chemin de navigation de type : Accueil > Chaussures enfant > Converse) sur toutes ses pages. »

A propos
WiziShop propose chaque jour, à 11h, un conseil pratique pour les e-commerçants. Retrouvez un nouveau conseil ecommerce dès demain ou téléchargez l’ensemble de nos 365 conseils en PDF !

Suite de notre dossier « Monter un projet e-commerce ». Aujourd’hui, nous allons nous intéresser aux Wireframes.

Le wireframe est un document de travail qui permet d’avoir un premier aperçu de notre futur site. Le wireframe est au web ce que le story board est au film.

Un Wireframe est aussi connu sous le terme de maquette fonctionnelle ou maquette ergonomique. Sa création est indispensable pour définir l’organisation de vos pages, ainsi que l’ergonomie de votre site. Il sera d’une aide précieuse en vous permettant à la fois de vous poser les bonnes questions, et d’avoir une vision globale du projet.
Son objectif, est de préparer le futur design. Ce document doit être simple et dépourvu d’éléments graphiques, un wireframe trop recherché pourrait contraindre la créativité de votre graphiste, il faut donc privilégier l’utilisation de formes simples (carrés, rectangles).

Dès cette étape vous devez être capable de définir une taille approximative de vos blocs.
Lorsque l’on démarre un site E-commerce la plus grosse erreur est de commencer par penser en terme de « graphisme », il faut rester fixé sur son premier objectif: Vendre.
C’est là que la conception d’un wireframe se voit essentielle.

Lors de l’élaboration de ce document il faut penser en terme de conversion:

Où vais-je placer mon moteur de recherche ? Mon panier ? Mes partenaires ?

Grâce à votre Wireframe vous êtes assurés de ne rien oublier. Vous devez commencer par la structure des blocs en définissant : leur taille, le nombre de colonnes.

Après quoi vous devez inclure vos éléments : les images, les formulaires, le moteur de recherche, le panier… bien sur toujours sous des formes simples.

Les pages importantes à définir sont les suivantes:

• Accueil
• Liste produits
• Fiche Produit
• Panier

Quels outils utiliser pour construire mes Wireframes ?

Pour ma part la première étape est incontestablement le brouillon papier, une feuille (ou plus ) et un crayon, et c’est parti, vous pouvez commencer à placer vos éléments.

Après, si vous vous sentez à l’aise de vous passez de l’étape brouillon papier libre à vous.

La seconde étape dépend de vos compétences, bien sur vous pouvez utiliser Photoshop ou un autre logiciel de création graphique mais je recommanderai à tous l’utilisation de logiciels spécialisés dans le wireframe, ils permettent un gain de temps considérable.

Exemple réalisé avec Balsamiq Mockup

En attendant pour ceux qui veulent s’essayer aux wireframes j’ai testé pour vous:

Balsamiq Mockup : Ce logiciel est gratuit en utilisation web, la version bureau 79$, prise en main très rapide. Son coté «  handwritting » lui donne un côté ludique.

Pencil : C’est un add-on Firefox, il a peu de composants, mais peut être pratique pour un brouillon rapide (gratuit)

Axure : Prise en main un peu plus complexe. Cependant il possède de très nombreuses possibilités notamment celle de pouvoir grouper des objets. Son coût : 589$

D’autres ressources très intéressantes pour les wireframes :

• Le top 20 des wireframes selon Garmashis
• Une liste des ressouces wireframes par smashing magazine

Vous pouvez aussi faire appel à des agences web spécialisée en E-commerce pour vous accompagner dans la construction de vos wireframes.

D’ici quelques jours vous pourrez découvrir le troisième volet de ce dossier dont le thème principal sera le header (entête de vos pages).

Bonjour à tous, voici une petite revue de presse des faits marquants de cette semaine. Bonne lecture !

1. Comment lutter contre les abandons de panier ?
Article très intéressant sur les éventuelles causes des abandons au panier, le tout enrichi de multiples conseils pour lutter contre ces abandons…

2. Comment segmenter un marché ?
Un billet qui nous aide à mieux comprendre comment segmenter un marché et ainsi avoir toutes les données en main pour mieux vendre son produit…

3. L’e-commerce, un enjeu majeur, une chance pour la France
Très bon article paru dans Les Échos.fr sur le dynamisme du e-commerce en France et sur l’esprit entrepreneurial français…

4. L’e-commerce sur iphone : mythe ou réalité ?
Le blog Marketing-digital.fr propose un billet qui met en avant le potentiel du e-commerce mobile et plus précisément sur iphone…

5. Ergonomie : le moindre détail compte toujours
Capitaine Commerce nous fait part de l’expérience utilisatrice de sa mère pour mettre en garde sur les « superflu ergonomiques » et le manque d’efficacité…

Une étude de Jakob Nielsen sur l’attention que portent les internautes aux textes des pages web a été publiée et montre que notre façon de lire du contenu web est assez particulière.

Nous lisons plus attentivement les textes courts

Effectivement, selon cette étude, nous accordons une meilleure qualité de lecture aux textes courts (de moins de 111 mots). Généralement nous lisons un mot sur deux dans un texte court.

Nous survolons les textes longs

Cette étude montre également que pour un texte de 600 mots en moyenne, nous n’en lisons qu’environ 20%. Et de surcroît, on ne passe que 4,4 sec de plus par tranche de 100 mots supplémentaires (il faudrait 25 sec pour en lire 100 en moyenne) alors que 4,4 sec représente le temps nécessaire pour lire environ 18 mots.

Vous comprendrez donc qu’il est important, sur internet, d’accorder beaucoup d’attention aux textes et leur mise en forme, afin que l’internaute ne passe pas à côté de l’information importante ou que l’on souhaite véhiculer.

Le processus de lecture est complexe

D’ailleurs, certaines études ont été réalisées afin de montrer que notre lecture suivait un chemin logique en fonction de la disposition, des couleurs et des espaces entre les éléments présents sur la page.

On peut ainsi voir au travers de ces études qu’il existe plusieurs phases de lecture d’une page. Cela est dû en grande partie au fait que l’information est souvent dispersée sur le web et que parmi les résultats retournés par un moteur de recherche, il faut effectuer un tri pour ne garder que les plus pertinents. Ainsi, dans un premier temps, le processus de lecture est de type « scan » et correspond davantage au type de lecture étudiée dans l’étude de Jakob Nielsen. Une fois cette étape de « scan » passée, le texte est alors lu à 75 % et non « parcouru ».

C’est tout aussi important sur les sites de e-commerce

Ceci montre qu’au delà de la qualité, du prix, des informations détaillées sur les produits proposés, un site de e-commerce doit avant tout retenir l’attention de l’internaute en apportant beaucoup de soin à la mise en forme des éléments et des textes afin que l’internaute sache rapidement en arrivant sur le site qu’il est au bon endroit et qu’il trouvera ce qu’il cherche. Il apportera alors davantage d’attention à la lecture et la visualisation du contenu du site.

L’eye-tracking, un bon moyen de tester son site

Afin de vérifier que son site est architecturé de manière à ce que l’internaute soit orienté vers l’information qu’on souhaite véhiculer il existe l’analyse par eye-tracking. Cette analyse permet de suivre le regard et de connaître le chemin logique suivit par l’œil lors de la lecture. Cela permet d’adapter son site en conséquence et ainsi obtenir par exemple un meilleur taux transformation.

Je vous propose une sélection d’articles sur le sujet pour aller plus loin :

• www.ergolab.net
• www.1ere-position.fr
• www.ojr.org
• blog.60questions.net
• www.laminutedugeek.net
• www.lergonome.org

Benoit vient de me contacter pour m’annoncer la sortie de la nouvelle version de Look Zippy, sa boutique en ligne de T-Shirt qui avait déjà fait l’objet d’une étude de cas.

Benoit m’a demandé mon avis sur son nouveau site, j’en profite donc pour vous livrer publiquement mes petites remarques…

Je passe rapidement sur le fait que le design est réussi, que de nombreuses améliorations rendent la visite plus agréable (notamment le tri par couleur et taille !) et que les produits sont bien mis en valeur. Le changement est pour le moins radical ! D’ailleurs on peut s’interroger. Est-ce une bonne chose ? (je n’ai pas réellement de réponse à cette question mais le débat est ouvert ).

Si je publie ce billet aujourd’hui, c’est surtout pour mettre le doigt sur quelques petits points qui me semblent importants à améliorer et qu’il est difficile de repérer sans le recul nécessaire. J’espère que cela aidera Look Zippy.

Ma première remarque concerne la page d’accueil. Quel dommage de n’afficher que 3 visuels de Tee-Shirt sans indiquer qu’il y en a d’autres ! A première vue, j’avais vraiment l’impression qu’il n’y avait que ces 3 références en stock… Il faudrait au moins ajouter un petit lien sous les visuels du style « Découvrez tous les modèles ». De la même façon, c’est très destabilisant de ne pas arriver sur la fiche produit du Tee-Shirt lorsqu’on clique sur un visuel de la page d’accueil. Il faut deux clics pour y accéder, dommage.

Au niveau de la liste des T-Shirts, la navigation horizontale ne me dérange pas car elle est bien aidée par un bandeau en bas affichant un grand nombre de produits.

Première remarque : on ne sait pas où on en est par rapport au catalogue total. Je pense qu’il serait intéressant d’ajouter le nombre de produits (exemple 24 à 27 / 88).

Deuxième point : si on fait un tri (couleur par exemple), le bandeau du bas permettant de se repérer et de naviguer est grisé. La navigation change et le visiteur doit s’adapter (il est possible de faire défiler les différents modèles à l’aide des flèches sur le coté mais là, encore plus que dans le précédent exemple, nous n’avons aucune idée de la grandeur du catalogue. Pire encore, je me demande si les visiteurs vont tous comprendre qu’il y a d’autres modèles !).

Autre point, la recherche. C’est un détail mais pourquoi ne pas afficher les visuels directement au lieu de simples liens ?

Enfin, une dernière petite remarque qui concerne la fiche produit. Les informations sont claires et nombreuses mais j’ai juste bloqué sur un point. Les outils « Zoom », « Visuel » et « Tee-Shirt » sont très importants et sont mal mis en valeur. Les pictos les représentant sont gris et plats et à première vue, cela m’a fait penser à des outils grisés, non disponibles sur cette page ! Il faudrait peut être changer légèrement la couleur pour éviter cette sensation…

Je vous laisse visiter le site et, éventuellement, nous faire part de vos autres remarques. Je rassure Benoit, malgré ces quelques détails, je trouve le site réussi

Depuis quelques mois, je n’avais plus passé de site « à la moulinette ». Il est donc temps de reprendre les bonnes habitudes. L’étude de cas de la semaine se porte sur un site de vente en ligne de bière, nommé Saveur Bière.

J’ai décidé de découper cette étude en 3 partie :

1. Rassurer le client
2. Comment mettre le produit en avant
3. Du contenu sur un site de e-commerce

1. Rassurer le client

Cette phase est primordiale pour tout site de e-commerce ! Pour convertir un visiteur en client, il faut lui ôter toutes ses inquiétudes. L’exemple d’une boutique en ligne de bière est donc frappant. Imaginez les à priori que peut avoir le client. Que se passe t-il si mes bouteilles de bière cassent pendant le transport ? Comment savoir si cette bière va me plaire ? Ce fût est-il compatible avec telle tireuse ? Combien de bouteilles dois-je acheter pour être livré ?…

Pour rassurer le client il faut d’une part répondre à ses besoins et d’autre part répondre à ses questions…

Sur Saveur Bière, le visiteur va pouvoir se faire une idée sur le catalogue proposé en un coup d’œil. Le menu est explicite et déroule lors du survol de la souris. C’est un bon moyen pour montrer les différents choix possibles à son visiteur sans qu’il ait besoin de cliquer.

Mais d’un point de vue ergonomique, ce genre de menus peut être dangereux. Tout d’abord, dans le cas de Saveur Bière, les 6 menus ne déroulent pas tous. Voilà de quoi dérouter certains utilisateurs. Pour éviter cela, les menus déroulant sont marqués d’une petite flèche.

L’autre point faible de ce type de menu se situe au niveau de l’accessibilité. Si par exemple le visiteur n’autorise pas le javascript, le déroulé ne s’affichera pas. Si il clique sur Bières, le visiteur atterrira sur les bières à l’unité. Et là, ça peut poser problème… Les sous menus sont uniquement dans le menu déroulant et le visiteur ne pourra pas les retrouver à d’autres endroits… Donc un internaute qui n’aurait pas javascript (certaines entreprises peuvent l’interdire) ne pourra jamais acheter d’assortiment de bières ou de mini-fûts ! Ce n’est pas grand chose à modifier et je conseille donc toujours de doubler ce type de menu déroulant à une navigation plus traditionnelle pour une meilleure accessibilité. Sinon un autre moyen consisterait à proposer une page intermédiaire lorsque l’on clique sur le menu. Elle récapitulerait les différents choix possibles…

Une bière peut faire l’objet d’un cadeau original. Saveur Bière a fait le pari de donner à cet espace cadeau autant d’importance qu’à leur sélection de bières et de tireuses. Je trouve que c’est tout à fait approprié et que cela répond aux attentes des visiteurs. On va l’assister en lui mâchant le travail et en lui proposant de multiples offres (coffrets, assortiments, mètres de bières, chèques cadeaux…).

Pour faire sauter tous les freins à l’achat, Saveur Bière a mis le paquet. Je pense qu’il peut servir d’exemple pour beaucoup de cas. Dès l’entête de la page, on trouve une assistante en ligne et le logo d’un magazine connu. Cette association permet de bénéficier de l’image de marque du magazine, un bon moyen pour rassurer son visiteur et crédibiliser sa boutique.

Enfin, sur la droite de toutes les pages sont affichées, fièrement, toutes les garanties du site : délais de livraison, paiement sécurisé, témoignages clients, contact…

Si on veut aller chercher la petite bête, on peut juste regretter que toutes les garanties ne soient pas expliquées en détail. Il y a par exemple un lien sur le paiement sécurisé mais pas sur le fait que la commande soit traitée en 24h. Rien ne distingue les deux phrases ce qui est perturbant ou frustrant au choix.

On peut également regretter les doublons (notamment au niveau de la livraison). Peut être faudrait il regrouper tous les arguments sur ce sujet dans un seul pavé ? Enfin, pourquoi afficher les logos de CB et visa et ne pas mettre celui de la banque ?

En conclusion de ce premier chapitre, je dirais que Saveur Bière répond bien à la problématique étudiée. L’offre est immédiatement identifiable et le visiteur trouvera rapidement la réponse à ses questions. Deux critères indispensables pour réussir dans le commerce électronique…