Dossiers

décembre 2 2015

10 pièges à éviter sur une One-page [tuto]

Frédéric Galliné Dossiers, Wordpress onepage 3

Suite à notre dossier sur les sites One-Page, il nous a paru important de faire un point sur les erreurs d’ergonomie à éviter. Il y a 3 points primordiaux à respecter : les polices, les couleurs, les effets.

C’est pas parce qu’on peut tout faire qu’il faut tout faire – @fred

Imaginons que sur un plan de travail nous ayons de la viande rouge, de la blanche, du poisson, une 15ene d’épices, des légumes et fruits différents. Un bon cuisinier prendra seulement les ingrédients nécessaires pour que la recette soit bonne. Il n’essaiera pas de TOUT utiliser, sans quoi cela risque d’être indigeste. Pour un site web c’est pareil.

Aujourd’hui, la majorité des thèmes wordpress sérieux propose des centaines de webfonts, des panels de couleurs, d’effets divers et variés : parallax, fullwith, fulleight, background vidéo, transition …etc. Comment ne pas se perdre ?

Voici quelques tuyaux, qui je l’espère, pourront vous aider à repenser « l’interface utilisateur » et « Expérience Utilisateur » (UI et UX).

Les couleurs d’un site one page

Souvent les gens se perdent dans leur charte graphique et utilisent un tas de couleurs, couleurs pas ou peu assorties. Une des méthodes les plus simples est d’utiliser un générateur de couleurs. Je vous propose Kuler de Adobe. Vous trouverez tout un tas de coordonnées, mais vous pourrez également en créer vous même en important une photo par exemple.

Sur l’exemple ci-contre, Kuler est allé choisir 5 tonalités que nous utiliserons sur le site pour l’assortir à l’établissement (ici un restaurant).

Les polices du site (Webfont)

Pour les polices, c’est relativement simple. Pour votre site, vous avez 1 police pour les textes (paragraphe) et 6 polices pour les titres (H1, H2, H3, H4, H5, H6).

Dans un premier temps, il vous faudra choisir un style et vous y tenir pour toutes vos polices : Serif ou Sans Serif (on peut mélanger les 2 mais c’est un jeu d’équilibriste pour que ce soit cohérent, donc évitez).

Pour la couleur des textes, évitez le noir si vous avez un fond blanc et préférez un gris.
Pour les titres, restez dans ce même gris ou choisissez une couleur de votre nuancier « Kuler ».

L’erreur « couleur » à ne pas faire : Ne jamais mettre des couleurs dans le texte manuellement comme ça ! Vous pensez que c’est beau ou que ça va améliorer la lecture mais c’est une erreur. Dans le corps du texte, seuls : les liens, le gras et l’italique sont tolérés.

L’erreur « taille » à ne pas faire : On ne change jamais une taille de texte manuellement. On utilise les formats : titre 1, titre 2, etc … ou tout autre format lié à un fichier CSS, ça perturbe la lecture et ça devient illisible sur mobile.

L’erreur MICROSOFT WORD : c’est la pire de toute. On ne copie JAMAIS un texte de Word vers son site. Word ajoute tout un tas de ~~merdouilles~~ codes qui va faire planter l’affichage de votre site. Si vous êtes obligé de faire ce copier/coller de Word, copiez en passant par l’onglet « texte » puis revenez sur « visuel ».

L’erreur longueur de texte : Si votre page n’a pas de sidebar (barre latérale), évitez de faire des blocs textes qui traversent toute la page. Les phrases trop longues sont très dures à lire. Essayez autant que possible de faire des colonnes ou de couper la page en alternant texte + image.

L’erreur Webfont : Il faut choisir une police de caractère pour les titres 1 et 2 et une police simple pour tout le reste. En plus de ne pas perturber visuellement votre lecteur, vous gagnerez en temps de chargement de votre page en évitant de charger toutes ces polices.

Les animations d’un site one-page

En ce moment, il y a pas mal d’effets spéciaux pour l’affichage : fondu, rebond, glissé …etc. Il faut vraiment les utiliser avec parcimonie. En choisir 1 ou 2 et rester sur cette thématique d’animation pour l’ensemble du site. Pensez à désactiver (si votre thème le permet) les animations sur mobile, le rendu est souvent décevant.

Le fullWith

Le fullwith est très à la mode en ce moment. On peut parler de « pleine largueur d’écran ». Le fullwith, c’est quand le fond d’écran (background) va d’un bout à l’autre du navigateur.

L’erreur Fullwidth à ne pas faire : c’est de mettre le contenu en fullwidth. En effet, seul le background doit être en plein écran, les textes et photos seront « boxed » (sauf si la photo est en background).

Le parallax

Le parallax est un effet qui « ralentit » une image de fond par rapport au défilement normal de la page. Cela donne un effet 3d assez joli.

L’erreur Parallax à ne pas faire : c’est d’enchaîner plusieurs sections avec fonds en parallax. Une section en parallax doit être encadrée de 2 sections avec fonds « uni ». Le rendu 3D sera ainsi optimum et ne donnera pas la nausée à vos lecteurs.

L’erreur image trop lourde : mettre des images en fond sur une section veut dire « image de grande taille ». Donc un passage dans photoshop (ou autre) est nécessaire pour les alléger au maximum. Sans quoi votre site ne chargera pas correctement.

En résumé

Définir une charte graphique et s’y tenir (ne pas dépasser 5 couleurs).
On ne change pas les couleurs de texte manuellement.
On ne change pas la taille d’un texte manuellement.
On ne copie pas de MS Word à WordPress.
On ne fait pas de paragraphes qui traversent tout l’écran.
On évite d’utiliser trop de polices différentes.
On n’applique pas tous les effets spéciaux que propose le thème (c’est un site, pas Star Wars).
On n’utilise le fullwidth que pour les backgrounds (couleur, image ou vidéo) et jamais pour le contenu.
On encadre une section parallax entre 2 sections au background « uni ».
On compresse les images avant de les insérer.

N’hésitez pas à poster vos questions ou préconisations en matière d’interface dans les commentaires. Partagez vos réalisations en matière de site One-Page. Mon petit exemple ici

juillet 18 2015

Soyez fainéant, trouvez de nouveaux clients !

Frédéric Galliné Dossiers, ecommerce Google, Mailchimp, zapier 0

Aujourd’hui plus que jamais, les services web s’unifient, se parlent … s’aiment. Le Cloud, qui initialement servait « juste » de dématérialisation, est en train de se transformer en intelligence artificielle. La question que tout le monde se pose (oui oui), peut-on profiter de cette intelligence pour automatiser – voire prospecter – à notre place ?

Pour cet exercice, nous allons utiliser quelques services web et les faire parler entre eux pour prospecter à notre place.

Je vous propose d’utiliser Google Forms, Mailchimp et Zapier afin d’organiser une petit jeu et faire gagner par exemple un pourcentage de réduction à ceux qui voudront bien participer. Au passage, nous allons collecter quelques précieux mails qui vous serviront par la suite pour vendre vos produits.

Etape 1 – Créer le jeu

Pour cela, nous allons utiliser Google Forms et faire un petit formulaire. Vous avez créé plusieurs questions, il vous faut maintenant collecter le précieux sésame : le mail du prospect !

Procédez comme cela

Vous pouvez avoir un aperçu de votre formulaire en appuyant sur « afficher le formulaire en ligne » dans le menu.

Vous devriez obtenir quelque chose de la sorte.

Etape 2 – Collecter les mails

En bon élève, vous avez répondu à votre propre jeu et appuyé le bouton « envoyer », voyons ce qui s’est passé. Revenez dans Google Forms et cliquez le bouton « Afficher les réponses », Google vous ouvre son tableur maison « spreadsheets » et vous devriez vous retrouver avec ça :

Étape 3 – Utiliser les mails dans Mailchimp

C’est là que ça devient intéressant pour vous, car vous vous retrouvez avec des mails de prospects « qualifiés » qu’il va falloir exploiter, maintenant ou plus tard … L’idéal étant de les mettre dans Mailchimp (si vous avez opté pour ce prestataire pour vos mails marketing).

Et là, vous allez me dire : « royal, un bon vieux « copier/coller » dans une liste et c’est bon » … ET BIEN NON !! Ce serait bien trop fatiguant pour le manipulateur d’intelligence artificielle que vous êtes.

Nous allons utiliser Zapier qui fera ça beaucoup mieux que nous (et surtout sans nous) !

En 2 mots pour ceux qui n’auraient pas suivi, Zapier est un service qui interconnecte les services cloud entre eux. Exactement ce qu’il nous faut.

C’est parti, on crée un « New Zap » et on choisit les services en question :

Jusqu’ici tout va bien, jusqu’ici tout va bien … on continue !

Vous allez devoir connecter votre compte Google à Zapier ainsi que votre Mailchimp, il suffit de dire OK.

Une fois fait, vous allez devoir choisir les données que vous voulez extraire de spreadsheets, et préciser où vous voulez les envoyer dans Mailchimp. Il faut faire comme ceci :

Et pour Mailchimp

Etape 4 – verdict

Maintenant il va falloir vérifier si notre petit robot savant a bien fait le boulot. On appuie le « test this zap » pour voir ce qu’il se passe.

Si on a bien travaillé, notre liste Mailchimp devrait s’alimenter automatiquement à chaque inscription et nous permettre, dans le futur, de pouvoir relancer ces fameux prospects venus vous tendre les bras.

Conclusion

Il semblerait que cela marche plutôt bien. Notre liste s’est incrémentée toute seule, vous n’avez plus qu’à écrire « via mailchimp » à vos prospects pour leur communiquer les résultats du sondage ou essayer de leur vendre un de vos fameux produits.

J’espère que ce petit tuto vous inspirera, et allègera votre todolist.

Pour ceux qui veulent voir le formulaire (qui n’a aucun intérêt en soit) c’est ici : formulaire Jeu

Ps1 : J’ai rien compris mais ça m’intéresse : par ici

Ps2 : Et si vraiment vous avez aimez .. n’hésitez pas à partager.

juin 10 2015

Quel hébergement pour mon site ?

Frédéric Galliné Dossiers, ecommerce, Wordpress 0

Avec les nouvelle exigences de Google en matière de temps de réponse d’un site et de la compatibilité mobile, vous envisagez peut-être de créer ou faire une refonte complète de votre site.

Naturellement, la question de votre hébergement est une de vos préoccupations majeures dans ce processus, car elle va influencer votre budget mais également le retour sur investissement de votre projet. Car comme tout un chacun sait, la partie technique d’un site a des répercussions énormes sur le référencement naturel, et donc sur le trafic de votre site, et par conséquence sur votre chiffre d’affaire.

Nous venons de mettre en ligne un dossier qui pourrait vous aider à faire le meilleur choix en matière d’hébergement et en estimer les coûts annuels.

Voir le dossier : Choisir son hébergement ?

juillet 9 2014

Construire un bon site « one page »

Frédéric Galliné Dossiers, News ecommerce, onepage, parallax, responsive, website 2

Une des tendances lourdes du web ces dernières années est sans doute les sites « One Page« . C’est quoi, comment et pour qui ce style sont-ils fait ? Nous allons tout vous expliquer à travers ce dossier.

Un site « One Page » est un site où toute l’information, comme son nom l’indique, est rassemblée sur une seule page. Au-delà de ça, c’est un vrai style graphique qui use et abuse du Call to Action, du responsive, du fullwith et du parallax pour transformer vos lecteurs en clients … Nous reviendrons plus tard sur ces termes barbares.

Un site ONE PAGE pour qui ?

Avant d’aller plus loin, à qui s’adresse un site « one page » ? Un site one page est fait pour vendre UN seul produit ou UNE seule prestation. Si vous avez un produit avec plusieurs variantes ou plusieurs forfaits, vous pouvez envisager ce type de site. Si vos prestations sont diverses, ou si vous avez un catalogue trop vaste, évitez ce style de présentation et travaillez au contraire une arborescence simple et intuitive qui puisse éventuellement renvoyer sur des -one page- pour chaque produit ou prestation.

Comment fait-on ?

Une one page est un site tout en longueur. Il doit être clair, explicite et rassurant pour convaincre. Pour cela, il y a quelques méthodes et règles à respecter.

Votre page va être longue verticalement, il faut donc qu’elle soit agréable à lire, aérée et rassurante.

Une -one page- se décompose en lignes superposées. On appelle « ligne » ou « bloc » un groupe d’idées. Sur l’illustration de gauche, vous remarquerez que chaque « ligne » a une couleur d’arrière-plan (background) différente.

La structure d’une one page est donc un empilement de blocs ayant chacun UNE fonction et qui au fur et à mesure de la lecture vont inciter votre lecteur à appuyer sur un « call to action », un appel à l’action en français.

Un Call to Action est une phrase incitative avec un bouton (d’action) qui renverra le plus souvent vers un formulaire de contact ou une page d’achat de produits. N’oublions pas que que vous n’avez qu’une seule page pour vendre. Il faut donc aller droit au but et respecter certaines règles.

Composition classique d’une One Page

L’accroche et la marque

Comme nous l’avons vu précédemment, une one page est composée de lignes (rows) qu’il faut empiler pour vanter un produit. Les premières lignes à créer vont forcement être une présentation de votre marque et de votre produit : votre logo, un slogan accrocheur (base line) et une belle photo, le plus souvent très large et en arrière plan. Oubliez les menus, liens internes ou externes … Votre prospect ne doit avoir qu’un seul choix sur votre page, ce sera votre/vos call to action.

La promesse

Vous avez installé la marque avec votre logo et votre slogan, maintenant il faut expliquer et valoriser votre produit ou vos services.

Généralement, un bloc avec 3 colonnes de texte, décrivant les points forts de votre produit , fonctionne très bien. Là encore, il faut être convainquant ; chaque colonne doit expliquer brièvement UN avantage.

Le call to action :

La partie la plus importante du site, puisque c’est la seule partie incitative. Elle propose au lecteur d’acheter votre produit.

« Commandez notre super produit révolutionnaire !! [bouton payer] »
« Demandez à notre expert de vous rappeler ! [bouton contact] »
« Connaître nos différentes formules ! [bouton vers grille de tarifs] »

Ces trois premiers « Blocs » sont la base d’introduction pour votre page. Certains prospects cliqueront ce premier « appel à l’action », d’autres non. Il va donc falloir les rassurer davantage et insérer d’autres lignes (ou blocs). Pensez à glisser un call to action différent entre chaque bloc, changez les accroches, les boutons mais pas la destination. Chaque bouton de votre page doit atteindre le même objectif : page de vente ou formulaire de contact.

Les blocs à empiler sur sa One Page

Témoignages

Il est fortement conseillé d’ajouter des témoignages clients. C’est très rassurant pour vos prospects de savoir que d’autres personnes utilisent vos produits et en sont contents. Essayez autant que possible d’avoir des témoignages de personnes connues ou reconnues dans votre secteur.

Nos clients

Si de grands noms ou marques utilisent vos produits, vous pouvez ajouter un bloc avec leur logo.

ATTENTION : même si c’est tentant, ne pas ajouter de liens sur les logos. Le but n’est pas de faire partir le prospect avant qu’il n’ait acheté votre produit ou laissé son mail. Le second cas est très important pour que vous puissiez le contacter ultérieurement (on reparlera Growth Hacking dans un prochain article).

Notre équipe

Ajouter un block « notre équipe » peut dans certains cas être une très bonne chose. Savoir à qui on a à faire, rassurera vos prospects et créera une relation de proximité avec vous. Le client potentiel sera plus enclin à vous faire confiance si vous brisez les barrières de l’anonymat.

Nous trouver

Si vous vendez un produit localisable ou que vous êtes un prestataire local : hôtel, restaurant, freelance, artisan … n’hésitez pas à situer votre entreprise à l’aide d’un insert google maps et de donner vos coordonnées complètes.

Portfolio

Vous êtes artisan, artiste, graphiste … mettre un portfolio est indispensable. Montrer votre savoir-faire est le meilleur argument de vente que vous puissiez avoir. Hôtelier, restaurant, producteur ? Montrer vos produits, vos chambres, vos plats … Valorisez votre activité. L’erreur à ne pas commettre : publier des photos « amateur ». Si vous n’êtes pas équipé ou pas doué en photo (on peut pas être bon en tout) … n’hésitez pas à recourir à un professionnel, le retour sur investissement sera beaucoup plus rapide.

Des chiffres !

Oui ça peut paraître bizarre, mais vos prospects adorent les chiffres ! N’hésitez pas à valoriser votre activité en chiffre : « x articles vendus en 2013 », « 14 chambres grand luxe », « 1523 clients satisfaits » …

Articles de blog

Si vraiment vous n’avez pas réussi à convaincre votre prospect et s’il a eu le courage d’arriver au bout de votre page, ne le laissez pas partir bredouille. Finissez votre page avec les derniers articles de votre blog. Si vous arrivez à le convaincre de venir lire un ou deux articles, vous augmentez vos chances qu’il like votre page fan ou s’inscrive à votre newsletter. Fidélisez au maximum vos prospects, ils ne sont pas vos clients aujourd’hui mais le seront peut-être demain.

Conclusion

Dossier un peu long mais il est souvent très difficile de faire simple, et la One Page confirme la règle. Avec ce genre de site, vous avez 2 minutes pour « pitcher » votre activité et convaincre.

Ouppss .. j’allais oublier de revenir sur les mots barbares :

« responsive » signifie que votre site s’adaptera automatiquement à tous supports : pc, smartphones, tablettes … indispensable pour une One Page !
« Fullwith » : vos blocs sont en pleine largeur. Vous l’avez sans doute remarqué, sur de nombreux sites « one page », l’image de fond ou couleur de fond du block va d’un bout à l’autre de l’écran (gauche droite). En différenciant l’aspect de chaque ligne, on isole les idées, ce qui les rend plus convaincantes.
« Parrallax » : l’effet parallax est plus difficile à expliquer mais en gros, lorsque l’on descend avec la souris sur la page, l’image de fond défile à une vitesse différente de celle du texte placé sur celle-ci. Cela donne un effet 3D très agréable mais surtout ça incite le visiteur à ralentir sur cette zone … c’est donc l’endroit idéal pour poser des arguments forts ou un call to action.

J’espère que cet article vous aidera à mieux concevoir vos pages et atteindre vos objectifs. Si vous rencontrez des difficultés mais êtes intéressé par ce type de conception, n’hésitez pas à utiliser le formulaire de contact.