Auteur/autrice : Margaux Bourlon

Posted on

3 avantages des wireframe (et comment en créer un)

Cher Lecteur,

Pour améliorer l’expérience utilisateur de vos clients, vous vous êtes lancé dans la refonte de votre site web ou le développement d’applications.

Au fil des coups de crayon, vous esquissez vos futures interfaces web, sans pour autant être convaincu du résultat.

Plusieurs questions se bousculent au sein de votre esprit : est-ce que vos futurs utilisateurs seront séduits par votre UI design ? Comment leur offrir une bonne expérience utilisateur ? Comment maquetter votre produit en étant centré sur l’utilisateur ?

Ne cherchez plus, nous avons la réponse à vos tourments : le wireframe.

Qu’est-ce qu’un wireframe ?

Signifiant « maquette fonctionnelle » dans la langue de Shakespeare, un wireframe est une maquette mettant en valeur l’architecture de l’information de vos futures interfaces-utilisateurs.

Centrée sur l’expérience utilisateur (et le ressenti-utilisateur), c’est la première étape pour améliorer l’ergonomie et le design de l’application. Le wireframe se situant bien avant le mock-up, le zoning ou le prototype fonctionnel, vous n’y verrez (presque) pas de couleurs.

Seules des nuances de gris, de blancs et de noirs sont utilisées, empilées dans des rectangles représentant l’architecture de vos pages. Exit donc les images, les textes lorem ipsum et tout ce qui peut distraire votre auditoire.

Par conséquent, n’espérez pas mener des tests utilisateurs en présentant un wireframe à vos panélistes. Réservez-le pour votre équipe en charge de la création de sites web et à votre agence de communication.

3 avantages du wireframing

Peu axé sur l’esthétique, non-fonctionnel… il peut être tentant de sauter l’étape du wireframing pour arriver à celle du prototypage.

Ne faites surtout pas ça.

Pourquoi ? Car créer un wireframe vous apporte une multitude d’avantages.

Un produit final prenant mieux en compte les besoins des utilisateurs et l’ergonomie web

Saviez-vous qu’en optimisant l’UX design et le parcours utilisateur de votre produit digital, vous augmenterez vos KPI de 83 %.

C’est énorme. Cela peut faire toute la différence entre vous et vos concurrents.

Et c’est là qu’entre en jeu votre wireframe : il vous permet d’axer la conception de votre user interface sur les attentes de l’utilisateur. Et non plus uniquement sur les fonctionnalités.

Ainsi, vous pourrez respecter la règle des 3 clics : tout contenu utile pour l’internaute doit être accessible en au plus 3 clics.

Honnêtement, n’avez-vous pas déjà cliqué plus de 3 fois sur l’interface graphique d’une application ou d’un site sans trouver ce que vous vouliez ? Si oui, vous savez à quel point c’est frustrant.

C’est si frustrant que c’est l’une des causes de refus de publication d’application sur l’App store les plus communes.

Grâce à un wireframe, vous pourrez designer clairement la structure de vos pages et leurs types de contenus. Vous ne serez pas distrait par des éléments de webdesign ou par des aspects techniques du type développement custom ou cms.

Une meilleure communication avec votre agence de développement web

Si vous avez déjà assisté à des réunions agiles, vous comprenez très vite l’importance d’avoir un support de communication.

En effet, pour développer votre application mobile ou créer votre site internet, vous aurez besoin de plusieurs profils :

  • un ou des développeurs web ;
  • des webdesigners ;
  • des experts du marketing et des stratégies de référencement naturel.

Naturellement, selon la complexité de votre projet de transformation digitale, votre équipe pourra compter d’autres personnes.

Imaginez un seul instant devoir animer une réunion avec tout ce beau monde pour leur expliquer en détail vos interfaces graphiques. Chaque élément graphique de votre interface Homme-machine risque de faire l’objet de longs débats.

Coupez-court (et évitez-vous des maux de têtes) : créer un wireframe et partagez-le à vos collaborateurs.

Avec une représentation graphique de ce que vous attendez, chacun saura exactement ce qu’il a à faire. De plus, vos développeurs web sauront plus à même de vous conseiller un site headless, custom ou sous CMS.

Une meilleure gestion budgétaire

Avez-vous remarqué à quel point à chaque fois que quelqu’un vous explique ce qu’il attend de vous, cela a l’air simple ?

Et pourtant, beaucoup de ces activités se révèlent à la fin chronophage et budgétivore.

Pourquoi nous en parlons ? Car il en va de même avec le budget que vous voulez consacrer à la création de votre produit final.

Ainsi, lorsque vous créez une maquette en fil de fer, vos équipes de dev et vous pouvez mieux estimer le temps nécessaire. Ce qui vous permet de maîtriser votre budget et de choisir le mode de facturation le plus adapté à votre besoin.

Comment créer un wireframe ?

Wireframe d'une page web

Impossible pour nous de terminer cet article sans vous donner quelques astuces pour créer votre maquette.

Sans plus tarder, les voici.

Définissez les éléments à inclure dans votre wireframe

Avant de vous jeter sur votre crayon sur votre logiciel de dessin vectoriel préféré, posez-vous la question : quels éléments doivent figurer sur mon site internet ?

À partir de là, armez-vous d’un crayon et d’une feuille et notez les éléments suivants :

  • quels seront les contenus qui seront présents sur vos interfaces-utilisateur?
  • quelle sera la structure de votre future application web/mobile ?
  • quelle sera la hiérarchie entre vos éléments ? Autrement dit, comment les présenterez-vous à vos usagers ?
  • quelles seront les fonctionnalités de l’application ?
  • comment les internautes vont interagir avec vos interfaces ?

Soyez surtout vigilant sur le dernier point : c’est à ce moment que vous aurez toutes les clés en main pour optimiser votre funnel de vente.

Créez des wireframes pour toutes les résolutions d’écrans

Ipad, montres connectées, smartphones, tablettes, phablettes, laptops, smart TV… les internautes peuvent accéder à votre app web/mobile depuis une variété d’écrans.

Vous ne voudriez pas perdre de précieux clients parce que vos interfaces ne sont pas responsive design, n’est-ce pas ?

Raison pour laquelle nous vous recommandons de créer des wireframes pour toutes les catégories de résolutions d’écrans qui existent.

Heureusement, si vous décidez de créer votre wireframe via des logiciels dédiés, vous serez aidé dans cette tâche. En voici quelques-uns :

  • Adobe XD ;
  • Photoshop ;
  • Figma ;
  • Sketch.

S’ils peuvent sembler complexes au premier abord, ne vous laissez pas influencer : avec les bons raccourcis claviers (Figma), les utiliser est un véritable jeu d’enfant.

Voilà, vous savez tout des wireframes. Que diriez-vous de discuter des vôtres et de vos interfaces graphiques avec l’un de nos chefs de projet dédiés ?

Écrivez-nous, et nous vous répondrons aussitôt.

Posted on

React Native ou Flutter en 2023 ?

Cher Lecteur,

Aujourd’hui, nous allons supposer que vous êtes le lead developper de votre entreprise, ou mieux le CTO.

Votre entreprise vous a ordonné de développer une application mobile fonctionnant sur les plateformes iOS et Android. Parmi votre équipe d’ingénieurs logiciel, certains vous recommandent le framework React Native, tandis que d’autres ne jurent que par Flutter.

Comment choisir le meilleur framework pour créer une application mobile multi-plateforme aussi performante qu’une application native ?

Voici quelques éléments qui pourront vous aider à choisir votre framework.

React Native ou Flutter : 8 critères pour trouver le framework qui vous conviendra le plus

Cher Lecteur,

Si vous côtoyez régulièrement des programmeurs informatiques, vous savez à quel point une discussion autour d’un outil peut vite devenir une guerre de tranchées.

Sceptique ? Demandez à quelques-uns si vous devez créer votre site d’e-commerce sur-mesure ou via un CMS, en headless ou à partir d’un template… et observez le feu que vous avez allumé brûler.

Le débat React Native vs Flutter ne fait pas exception à cette règle.

Pour vous permettre de trancher, nous allons comparer les deux cadres de développement sur 8 critères :

  1. Installation et configuration
  2. Composants de l’interface utilisateur
  3. Processus de développement
  4. Architecture
  5. Performance
  6. Documentation
  7. Communauté
  8. Tests

Mais avant, présentons les deux frameworks.

Présentation générale de Flutter et React Native

Flutter, ou le développement mobile selon Google

Google Ads, Alibaba, eBay, Groupon… les applications développées via Flutter sont légion sur la toile (et dans les app stores).

Pourtant, Flutter est assez récent. Lancé en 2017 par Google, Flutter est un SDK cross-plateforme Android et iOS open-source. La popularité de Flutter auprès des codeurs s’explique par deux raisons :

  • il utilise le langage de programmation orienté objet DART (qui est plus facile à utiliser que Java, mais moins que le JavaScript) ;
  • il dispose d’une quantité ahurissante de widgets prêts à l’emploi (parfait pour passer rapidement du wireframe à un MVP fonctionnel).

De plus, si vous souhaitez créer un site internet responsive au design épuré, vous pourrez utiliser Flutter for web.

React Native, le framework de Meta (ex-Facebook)

Créé par Facebook en 2015, React Native est aussi un framework open-source permettant de créer des applications mobiles cross-plateformes.

Sans surprise, dans la liste des applications utilisant React Native, bon nombre sont issues de la grande famille Meta : Facebook, Instagram, WhatsApp… mais aussi Netflix, Amazon, Uber et Viber.

Côté langage de programmation, React Native vous plonge dans des codes JavaScript et de React.js. Ce qui est un grand avantage si vous ne voulez pas avoir à réapprendre de nouveaux langages de programmation à partir de zéro.

Par rapport à Flutter, React Native a vu le jour un peu plus longtemps puisqu’il a été lancé en 2015. Les principaux avantages de React Native sont de vastes bibliothèques ainsi qu’un grand nombre de guides de formation.

Installation et configuration : +1 pour React Native

Ordinateur avec des lignes de codes informatiques
Ordinateur avec des lignes de codes informatiques

Commençons par React Native.

Vous avez deux méthodes plutôt simples pour installer le framework de Facebook :

  • via le Node Packet Manager (NPM) en installant directement une distribution sur votre système (n’oubliez pas de télécharger aussi Android SDK) ;
  • via l’environnement de développement ExpoGo (méthode la plus facile).

Honnêtement, les deux installations sont d’une facilité déconcertante (surtout si l’on compare à celle d’Android Studio et du JDK😥). Pour plus de détails, voici des tutoriels qui vous expliquent pas à pas comment configurer React via le NPM ou via ExpoGO.

Concernant Flutter, le processus d’installation vous demandera un peu plus d’effort.

En effet, vous devrez installer :

  • le JDK et l’Android SDK ;
  • Android Studio (si vous voulez créer une application Android) ou Xcode pour iOS ;
  • le SDK de flutter.

Voici un tutoriel qui présente l’installation de Flutter pas à pas, et c’est loin d’être simple. Preuve en est que vous devrez modifier la variable PATH de votre os, voire télécharger le code binaire de Flutter.

Notre verdict ? Si vous aimez les installations simples, optez pour React Native.

Composants de l’interface utilisateur : +1 pour flutter

Si vous souhaitez créer une application au design qui fera pousser un « wow » à vos utilisateurs, ce point est fait pour vous.

Et pour cause : en travaillant avec un webdesigner, vous obtiendrez des maquettes que vous devrez implémenter le plus fidèlement possible. L’objectif étant que le rendu final ressemble à s’y méprendre à celui d’une application native iOS ou Android.

Les composants natifs sont des composants implémentés directement par les concepteurs des plateformes (Google et Apple).

Et quand il s’agit de gérer les éléments natifs, Flutter gagne haut la main, voici pourquoi :

  • Flutter est livré avec une armée de widgets prêts à l’emploi et hautement personnalisable ;
  • Flutter continent des composants de rendu de l’interface utilisateur ;
  • il embarque l’accès aux API du périphérique ainsi que des composants de rendu ;
  • vous pouvez utiliser du code natif au sein de votre application Flutter.

Pour finir, Flutter dispose d’une foule de bibliothèques capables qui en font un véritable kit de développement logiciel complet.

De son côté, le framework React Native fournit uniquement le rendu de l’interface utilisateur et les API d’accès aux périphériques. Exit les accès intégrés aux modules natifs : vous devrez y accéder via des bibliothèques tierces.

Pour couronner le tout, React Native offre moins d’éléments graphiques que Flutter.

Processus de développement : match nul

Pour estimer le coût du développement d’un logiciel et déterminer le mode de facturation le plus adapté, mieux vaut un framework rapide.

Ici, difficile de départager les deux : ils sont équivalents.

En effet, qu’importe que vous jetiez votre dévolu sur React Native ou Flutter, vous utiliserez des modules prêts à l’emploi. En plus de leurs nombreux modules prêts à l’emploi, les deux vous offrent la fonction Hot Reload.

Elle permet aux codeurs d’introduire des changements dans le code de l’application sans avoir à la recompiler. Naturellement, le fait de pouvoir visualiser des changements à l’instant augmente l’efficacité et la vitesse de développement.

Architecture : match nul

En termes d’architecture de logiciel, Google et Facebook ont des approches radicalement différentes.

Chez Meta, le choix a été fait d’utiliser deux patterns principaux pour la conception d’application mobile : Flux et Redux. Leur particularité : stocker l’état de l’application globale dans un magasin central, rendant ainsi les composants de l’application sans état.

Côté Google, la solution la plus populaire est le BLoC (Business Logic Component), suivi de près par… le Flux et le Redux.

Maintenant, laquelle de ces architectures est la plus efficace ? Impossible à dire, à vous de trouver celle qui cadre le plus avec votre projet.

Performances : +1 pour flutter

Pour déterminer les performances – c’est-à-dire la vitesse d’exécution des codes compilés via ces frameworks – analysons les en détails.

Chez React Native, le code est écrit dans le langage JavaScript et en langage natif. Pour convertir le tout en code natif et interpréter le rendu des composants, React utilise un pont logiciel. Autrement dit, après avoir écrit votre code JavaScript, React va directement l’exécuter.

Conséquence : vous devrez attendre plus longtemps pour avoir le fichier .apk ou .ipa et vos animations seront plus lentes.

De son côté, Flutter compile l’ensemble de vos fichiers informatiques en code natif, sans avoir à passer par un pont.

Résultat : des performances de loin supérieures à celles de React et un rendu rapide.

Documentation : match nul

Cher Lecteur,

Imaginez un instant…

Après de longues heures confronté à un bug, vous vous rendez compte que le problème vient d’une fonction de votre framework.

À ce moment, vous vous ruez sur stackoverflow en quête de réponse, mais ne trouvez rien : vous devez lire la documentation.

Ici, clairement, vous serez avantagé si vous développez votre application avec le framework Flutter. Voici pourquoi :

  • Flutter dispose d’une documentation exhaustive ;
  • Flutter possède une variété d’outils dédiés aux développeurs ;
  • Dart, le langage informatique utilisé par Flutter, est très similaire à Java, Swift et Kotlin, ce qui permet de trouver des réponses assez facilement.

De son côté, React Native possède une documentation technique moins garnie, mais à l’avantage de carburer au JavaScript. De plus, sa communauté d’utilisateurs a produit de nombreux guides – éparpillés sur le web – ce qui vous assure de trouver une réponse rapidement.

Communauté : +1 pour React Native

Groupes de développeurs assis autour d'une table

Parfois, dans votre quête de réponse ou de patch contre les bugs, vous aurez besoin du soutien d’autres développeurs. Vous aurez besoin de la communauté d’aficionados du framework que vous utilisez.

Bonne nouvelle : React Native et Flutter disposent tous deux d’une vaste communauté de passionnés.

Mais, en termes de nombre de membres, React Native surpasse de loin Flutter. En cause : Flutter est sorti en premier et a été plutôt bien reçu par les adeptes du développement mobile.

Test et assurance-qualité : match nul

Saviez-vous que le moindre bug peut pousser Apple à rejeter votre demande de publication sur son App store ? Mieux vaut donc vous assurer que la version build de votre app que vous soumettrez n’en comporte aucun.

L’un des avantages du développement multi-plateforme est que vous réduisez le temps alloué aux tests unitaires par deux.

React Native brille par sa gestion des tests unitaires sous JavaScript. Par contre, lorsqu’il s’agit d’automatiser et de tester l’interface utilisateur, il y a encore des progrès à faire.

Quant à Flutter, sa particularité est qu’il dispose d’excellentes options pour tester les widgets hors-ligne, et à la vitesse des tests unitaires.

React Native ou Flutter : lequel des deux choisir pour ?

Au final, devez-vous choisir React Native ou Flutter ?

Difficile à dire. Cela dépend des attentes que vous avez envers votre application hybride.

De nombreux experts s’accordent à dire que l’intérêt croissant de Flutter lui conférera le leadership. D’autres par contre soutiennent que la stabilité, la fiabilité et la très forte communauté des pro-react native continueront d’augmenter sa popularité.

Pour résumer :

  • React Native utilise le JavaScript, ce qui le rend facile à prendre en main ;
  • Flutter développe de nouvelles fonctionnalités plus rapidement.

Souhaitez-vous trouver le meilleur framework de développement mobile ? Contactez l’un de nos experts pour lui parler de votre projet.

Posted on

Comment créer un site internet minimaliste ?

Ordinateur affichant un site web minimaliste

Vous êtes-vous déjà retrouvé totalement désorienté face à une page web ? À vous demander ce que vous devez faire ? Où se trouve l’information que vous cherchez ?

Sûrement que oui. Et ce d’autant plus si vous avez connu le web à ses premières heures.

En tant que propriétaire du site ou webmaster, avoir un site web incompris des internautes est le pire cauchemar qui puisse vous arriver.

Pourquoi ? Parce que très souvent, ces internautes s’en vont vers des sites avec une meilleure conception graphique. Généralement un site avec une mise en page minimaliste.

Et justement, aujourd’hui, nous vous proposons de voir ensemble comment créer un site internet avec un design minimaliste.

Qu’est-ce qu’un site web minimaliste ?

Un site web minimaliste est un site avec un design épuré de tous les éléments qui ne sont pas à 100 % utiles. Et ce, sans pour autant sombrer dans l’austérité comme le font encore certains sites vitrines.

L’objectif de la conception de sites web minimaliste est simple : transmettre efficacement votre message à l’internaute et l’aider à se concentrer uniquement sur ce qui compte.

Ainsi, si vous décidez d’adopter un design minimaliste, vous devrez constamment jongler entre esthétisme et fonctionnalité. D’emblée, sachez-le : si vous réussissez, vous aurez de nombreux avantages.

3 raisons d’opter pour un design épuré sur votre site web

Sans plus tarder, les voici.

1- Améliorer l’UX design et l’expérience utilisateur

S’il ne faut retenir qu’une raison, ce serait celle-ci : un site web avec un design épuré améliore grandement l’expérience utilisateur de vos internautes.

Sceptique ?

Voyez par vous-même à quel point la navigation du site de Airbnb est fluide. Vous savez exactement ce que le site attend de vous (et vous trouvez immédiatement le contenu qui vous intéresse).

Page d'accueil épuré du site de Airbnb
Page d’accueil épuré du site de Airbnb

Pouvez-vous dire la même chose lorsque vous atterrissez sur la page du site developpez.com ?

Page d'accueil du site de developpez.com
Page d’accueil du site de developpez.com

2- Améliorer vos taux de conversion

Vous verrez rarement une entreprise dire ouvertement à ses abonnés qu’elle procède à une refonte graphique de son site pour améliorer son taux de conversion.

Pourtant, c’est bien souvent l’une des raisons phares qui poussent les spécialistes du webmarketing à le faire.

En optant pour un site épuré, vous enlevez absolument tout ce qui peut distraire l’internaute de ce qui compte : vos boutons d’appel à l’action.

Car si vos internautes n’arrivent pas jusqu’à vos CTA, comment génererez-vous des ventes ? Comment augmenterez-vous votre base de données client ?

Raison pour laquelle la tendance des sites épurés fait fureur depuis tant d’années. Elle permet aux webdesigners de contourner la saturation publicitaire des internautes avec succès.

3- Améliorer les performances de votre site internet

Design épuré = moins de contenu.

Vous savez ce que cela signifie pour vous ? Que vos pages web chargeront moins d’éléments tels que des images, des fichiers de code JavaScript, HTML/CSS et des médias.

Conséquence : vous gagnerez plusieurs (précieuses) secondes de temps de chargement.

En prime, votre budget dédié à la maintenance de votre site web fondra comme neige au soleil. Souvenez-vous, vous aurez peu de contenu à mettre à jour et un site au design intemporel.

5 astuces pour créer un site web avec un design épuré

Enfin, nous y voilà dans le cœur de l’article : comment créer un site web avec un design minimaliste.

Sans plus tarder, voici 5 astuces qui vous permettront d’avoir un site web répondant aux codes esthétiques du minimalisme.

1 – Faites la part belle aux espaces vides ou blancs

Vous vous souvenez du site web de Airbnb présenté plus haut ?

Avez-vous remarqué le grand nombre de surfaces blanches ou vides ?

Sachez-le, c’est fait exprès : cela permet à vos yeux de se reposer, limitant ainsi la fatigue visuelle.

De plus, en insérant des espaces blancs dans vos pages web, vous améliorez l’architecture de vos pages. Alors pourquoi s’en priver ?

Toutefois, utilisez cette technique avec modération. Sinon, votre site web risque au final de ne rien contenir du tout.

Un exemple valant 1000 mots, voici exactement ce qu’il ne faut pas faire : la page d’accueil de Yahoo!

Page d'accueil de Yahoo!
Page d’accueil de Yahoo!

Voyez-vous le problème ?

Il y a tellement d’espaces blancs que vous êtes obligé de scroller… alors que vous n’avez encore presque rien lu.

2 – Limitez la quantité de boutons d’appel à l’action

Les boutons d’appel à l’action…

Pouvez-vous concevoir un site web sans penser à ses indispensables boutons ? Certainement pas.

Les CTA sont les passerelles qui vous permettent de faire avancer les internautes dans votre tunnel de vente marketing. De visiteur à lead puis prospect, votre utilisateur navigue sans cesse de CTA en CTA jusqu’à ce qu’il vous passe commande.

Alors une question se pose : combien de CTA devez-vous mettre sur l’interface de votre site web ?

Hélas, il n’y a pas de réponse figée dans le marbre.

Néanmoins, il existe quelques recommandations générales que vous devez absolument suivre :

  • évitez les appels à l’action agressifs et sur-optimisés, comme ces pop-ups qui empêchent de naviguer sur le site ;
  • ne mettez pas deux appels à l’action concurrents côte à côte ;
  • mettez un seul CTA sur votre page si l’utilisateur n’a pas à la faire défiler pour lire tout le contenu.

Ces recommandations peuvent sembler simples, et pourtant. Combien de fois êtes-vous arrivé sur des sites web où une armée de pop-ups tenaces vous attendaient de pied ferme ?

Combien de fois avez-vous été interrompu plusieurs fois alors que vous lisiez un contenu sur le web ?

Pour respecter les codes de la conception de sites minimaliste, évitez de vous retrouver dans l’une de ces catégories.

3 – Faites cohabiter le design et le contenu

Cette phrase peut sembler abstraite… jusqu’à ce que vous vous lanciez dans la création de site avec un webdesigner et un créateur de contenus.

En effet, ce créa passionné par l’esthétique, fera tout pour vous fournir des wireframes d’une beauté incomparable. Bien sûr, il intégrera de l’espace pour vos contenus sur chaque page, mais est-ce que les dimensions prévues seront-elles les bonnes ?

Par exemple, votre site intègre une page de vente et votre webdesigner vous fournit une maquette web avec deux blocs réservés aux textes. Arriverez-vous à faire tenir toutes les superbes promesses de votre produit à l’intérieur ?

Peut-être que oui. Peut-être que non.

De plus, votre créateur de contenus aura d’autres priorités que celles de votre graphiste web. Ainsi, à ses yeux, le référencement naturel SEO sera de loin plus important que la gestion du responsive design.

Sans surprise, l’ergonomie de votre site va en pâtir, ce qui est un mauvais signal pour les moteurs de recherche (et pour les utilisateurs).

Raison pour laquelle en tant qu’éditeur du site, vous devez absolument faire travailler votre graphiste et votre producteur de contenu ensemble. Ne vous contentez pas de remplir les espaces réservés aux textes avec du lorem ipsum.

Sinon, vous devrez réorganiser l’interface graphique de vos pages après-coup, et cela se ressentira négativement sur votre web-design.

4 – Respectez la règle des trois clics

La règle des trois clics stipule ceci : « tout contenu d’un site web doit être accessible en haut plus 3 clics à partir de la page d’accueil ».

Autrement dit, l’architecture de votre site et votre menu de navigation doivent être facilement compréhensibles et permettre de trouver rapidement toutes les pages. Ce qui peut vite devenir compliqué si votre site a beaucoup d’informations ou de pages de catégorie.

Mais la récompense en vaut la peine : rien ne rapproche plus un internaute de l’étape de fidélisation qu’un site web bien conçu. Et rien ne le chasse plus vite qu’un site mal organisé.

Pour être certain que votre site web respecte ce critère, rassemblez quelques personnes et faites des tests utilisateurs. Vous risquez d’être surpris par les résultats.

5 – Utilisez trois couleurs maximum

Si votre webdesigner vous présente une palette graphique avec un florilège de couleurs, prenez garde. Cela risque de rendre la navigation confuse et d’embrouiller vos futurs internautes.

Ainsi, votre schéma de couleur doit contenir :

  • la couleur principale, généralement une couleur vive ou neutre ;
  • une couleur secondaire, vive ou neutre également ;
  • optionnellement une couleur tertiaire que vous utiliserez beaucoup moins que les deux autres.

En respectant cette règle, vous êtes certain que votre utilisateur ne sera pas distrait et ira à l’essentiel.

Sceptique ? Regardez à quel point il est difficile de rater le bouton d’appel à l’action de la page d’accueil du site de redacteur.com.

Page d'accueil de redacteur.com
Page d’accueil de redacteur.com

Avez-vous réussi à repérer le bouton d’appel à l’action du site officiel de l’école d’art de Yale ?

Page d'accueil de l'école d'art de Yale
Page d’accueil de l’école d’art de Yale

En tout cas nous non.

Mais il y a au moins une chose que nous savons : si vous souhaitez éviter de voir votre site web finir dans une compilation des sites web les plus mal conçus de HubSpot, écrivez-nous.

Non seulement, nous pouvons vous aider à peaufiner votre webdesign, mais en plus, nous pouvons discuter de tout votre projet digital. Alors qu’attendez-vous pour discuter avec l’un de nos chefs de projet ?

Posted on

Shopify : 3 façons de créer votre site e-commerce

Page accueil Shopify

Après avoir longtemps hésité entre créer votre site d’e-commerce via une solution sur-mesure ou via un CMS, vous avez opté pour un CMS.

Et pas n’importe lequel : Shopify.

Ce CMS Canadien séduit d’innombrables professionnels de la vente en ligne et du dropshipping. Et pour cause, il est simple à prendre en main et vous permet de créer votre boutique en ligne facilement.

Mais comment allez-vous créer votre site d’e-commerce ? Sachez que vous avez 3 options différentes pour y arriver.

Découvrez-les tout de suite.

1 – Personnaliser un thème existant

Wireframe d'une page web

Impossible de parler d’une solution CMS sans parler des templates qui vous permettent d’avoir un site clé-en-main.

Et cela tombe bien, car Shopify est réputé pour la beauté de ses thèmes – vos ventes, et donc leurs ventes, en dépendent.

En optant pour cette approche, vous aurez le choix entre une pléthore de thèmes allant du gratuit au payant. Vous devrez alors être capable de trouver le meilleur template Shopify, ou du moins celui qui correspond le plus à vos besoins.

5 questions pour dénicher le thème Shopify idéal

Souhaitez-vous trouver le meilleur thème Shopify ? Voici 5 questions qui vous permettront de mettre la main sur la perle rare :

  • Quelle expérience utilisateur voulez-vous faire vivre à vos visiteurs ?
  • Quelles fonctionnalités souhaitez-vous implémenter ?
  • Quel sera votre positionnement marketing ?
  • Quelles sont vos attentes en termes d’affichage de vos produits ?
  • Quelles seront vos stratégies pour améliorer votre référencement naturel (blog, réseaux sociaux, plateformes de partages, newsletter, emails, etc.) ? Votre référencement payant SEA (Google AdWords, Facebook Ads, publicités Instagram, publications sponsorisées …) ?

Une fois que vous aurez les réponses à ces questions, armez-vous d’un crayon et d’un papier. Dessinez la maquette de quelques-unes de vos pages phares (la page d’accueil et les fiches produits surtout) pour fixer votre idée.

 

En dessinant ce type de maquette, vous bénéficierez des multiples avantages des wireframes et aurez une boussole qui vous guidera dans votre quête du meilleur thème. Et non celui avec les meilleures couleurs et images.

Pourquoi créer mon site d’e-commerce à partir d’un template sur Shopify ?

Donner vie à votre idée de site d’e-commerce via les thèmes de Shopify vous procure énormément d’avantages. En voici quelques-uns :

  • Vous ferez des économies : en optant pour des interfaces web déjà conçues, vous n’aurez plus à faire appel à l’expertise d’un web designer, ni à celle d’un développeur, ce qui se répercute sur le coût de développement de votre site web ;
  • Vous êtes prêt à vendre immédiatement : créer un site internet nécessite du temps. Grâce à un template, votre site de vente en ligne sera prêt en quelques clics ;
  • Vous bénéficiez de l’expertise d’UX/UI designer : la plupart de vos visiteurs déserteront votre site marchand si celui-ci n’est pas élégant. Et là encore, les templates de Shopify font des merveilles : ils sont tous beaux et conçus pour fournir une navigation fluide.

Attention toutefois : créer votre site internet en vous modifiant un template n’a pas que des avantages. Loin de là.

Les inconvénients de créer votre site d’e-commerce à partir des templates de Shopify

S’il faut résumer ce point en une phrase, c’est celle-ci : vous n’avez pas le contrôle total de votre site. Explications :

  • Vous n’avez pas accès aux codes HTML et CSS de vos pages de paniers ainsi que des pages de check-out ;
  • Vous ne pouvez pas modifier tous les éléments graphiques des templates, ce qui est un véritable handicape lorsque vous voudrez booster vos ventes via l’A/B testing ;
  • Vous êtes dépendant de l’éditeur pour les mises à jour : si une faille de cybersécurité est découverte, vous devrez attendre la réaction du créateur du template. Si certains éditeurs tiers comme ThemeForest et TemplateMonster sont réputés pour leur réactivité, ce n’est pas le cas de tous ;
  • Les prix des templates sont parfois élevés : certains templates de Shopify vous propose de créer des expériences utilisateur uniques, mais à des coûts parfois prohibitifs ;
  • Votre site ressemblera à s’y méprendre à ceux de certains de vos concurrents (ceux qui utilisent le même thème que vous) ;

Autant de raisons qui peuvent vous pousser à vous tourner vers la prochaine solution : créer votre propre thème Shopify.

2 – Développez votre propre thème

Lignes de code pour développement site web

Quitte à utiliser un thème Shopify, autant avoir les pleins pouvoirs sur ce dernier. N’êtes-vous pas d’accord avec nous ?

Si oui, alors vous allez adorer cette option.

Vous vous rapprochez d’un expert shopify ou d’un développeur maîtrisant le langage Liquide – le langage officiel et peu utilisé de Shopify –, et le tour est joué.

À partir de vos explications, votre agence ou votre développeur freelance fera le reste pour vous : elle/il donnera vie à votre idée de template.

Vous n’aurez alors qu’à l’intégrer directement sur le front-office de votre site Shopify pour profiter de la pleine puissance de l’éditeur canadien.

Quels sont les avantages de créer son propre templates Shopify ?

Ils sont au nombre de 4 :

  • Vous possédez les droits complets sur votre template ;
  • Vous pouvez demander à votre prestataire d’effectuer des tests utilisateurs durant le développement, ce qui conduit à une navigation fluide et rendra votre parcours utilisateur unique ;
  • Le design de votre site sera unique, ce qui est un atout de différenciation marketing majeur aux yeux de vos prospects ;
  • Vous gagnerez en flexibilité : avez-vous envie de tester si une légère modification d’une de vos pages de vente va augmenter votre taux de conversion ? De tester deux versions d’une de vos pages web pour améliorer vos ventes ? Aucun souci. Vous n’aurez qu’à modifier les fichiers de codes HTML et CSS, et ce, en toute simplicité.

Mais comme toute chose, cette solution comporte aussi son lot d’inconvénients.

Les 2 inconvénients de développer votre propre template Shopify

Développer votre template maison sur Shopify comporte deux inconvénients majeurs :

  • Un prix parfois élevé : concevoir l’UX/UI de vos pages, optimiser votre parcours client, concevoir et implémenter vos différentes fonctionnalités nécessitent énormément d’efforts. Efforts qui se transforment en des frais de développement parfois élevés ;
  • Des délais : si l’une des raisons pour lesquelles vous avez opté pour un CMS est de pouvoir lancer immédiatement votre site d’e-commerce, vous risquez d’être déçu : créer un template demande du temps. Parfois quelques jours. Quelques semaines. Quelques mois.

Heureusement, vous pouvez éviter ces problèmes en optant pour la solution suivante.

3 – créer un site d’e-commerce headless

Statut sans tête

Imaginez un instant…

Vous avez lancé votre boutique en ligne ou votre site de dropshipping depuis plusieurs mois.

Chaque jour, vous regardez votre console, et chaque jour, vous êtes attristé par votre trafic beaucoup trop bas.

Sans surprise, vu que vous n’avez pas suffisamment de visiteurs, votre CA ne croît pas autant que vous l’espériez.

Si seulement vous aviez un moyen de fidéliser vos prospects et d’acquérir plus de trafic qualifié sur votre site web…

Après une coûteuse séance de coaching auprès d’un expert Shopify, vous avez LA solution : vous lancer dans le marketing de contenu.

Et là, horreur : vous découvrez les très nombreuses limitations dont souffre Shopify en termes de gestion éditoriale.

Nous vous rassurons d’emblée, ce scénario n’est pas imaginaire. C’est le lot d’innombrables propriétaires de sites internet faits sous Shopify.

En termes de référencement naturel SEO, le CMS canadien vous imposera des limites draconiennes : vous ne pourrez pas modifier vos fichiers Sitemap et Robot.txt ; ne pourrez pas analyser vos fichiers logs ; n’aurez pas des fonctions de blogging avancées comme celles de WordPress, etc.

Mais, ne vous inquiétez pas, il existe une solution pour tirer parti des avantages de Shopify sans subir ses limites : créer votre site d’e-commerce en headless.

Un site headless, ou site sans tête, est un site qui dissocie les deux éléments centraux de l’architecture d’un site web :

  • Le back-end : il s’agit des coulisses de votre site web. Vous y trouverez tous vos fichiers, contenus, bases de données et d’innombrables autres éléments. Cette partie de votre site est invisible pour les utilisateurs ;
  • Le front-end : il s’agit de la partie avec laquelle vos visiteurs peuvent interagir. C’est elle qui gère le rendu visuel de vos différentes interfaces web.

Ainsi, vous pourrez continuer à utiliser l’excellent CRM de Shopify sans subir les contraintes du logiciel canadien.

En séparant ces deux éléments, vous gagnez plusieurs avantages.

5 avantages des sites headless pour votre site d’e-commerce

Créer un site headless vous apporte plusieurs avantages :

  • une liberté totale sur la conception de votre UX/UI design ;
  • plus de possibilité pour améliorer votre référencement naturel SEO ;
  • Vous pourrez utiliser l’approche « Best of Breed », qui consiste à utiliser simultanément les meilleurs logiciels pour chaque catégorie via une seule interface, plutôt qu’un seul progiciel généraliste ;
  • des mises à jour moins régulières et concernant uniquement quelques fonctionnalités, extensions ou plugins, et non plus tout votre site ;
  • des temps de chargements réduits grâce à l’usage des technologies les plus récentes sur votre front-end.

Les sites e-commerce en headless sont donc parfaits si vous souhaitez délivrer une expérience utilisateur personnalisée omnicanal.

Leurs deux seuls inconvénients étant la complexité finale de votre site web – vous ou votre agence web allez devoir gérer l’hébergement web de votre site et choisir un hébergeur – et la perte d’accès à la marketplace de Shopify.

Comment créer un site d’e-commerce sous Shopify en headless ?

Pour donner vie à votre boutique en ligne, vous avez deux options :

  • soit devenir un développeur maitrisant le langage Liquid et capable de choisir entre React Native et flutter ;
  • soit faire appel à une agence web.

Chez Poyesis, nous vous accompagnons dans la création de votre site web de A à Z au travers de cérémonies agiles. De la conception jusqu’à la production de votre boutique en ligne, notre (vôtre?) chef de projet se tiendra à vos côtés.

Alors, qu’attendez-vous pour nous parler de votre projet de création de site d’e-commerce ?

Contactez-nous, c’est gratuit et sans engagement.

 

Posted on

7 conseils pour travailler avec un webdesigner

En quête d’un site web responsive design, vous vous êtes tourné vers un webdesigner.

Mi-graphiste, mi-développeur, vous attendez de ce créa qu’il vous fournisse une maquette pour votre prochain site web. Peut-être, attendez-vous de lui qu’il donne aussi vie à votre application web ou mobile.

Seulement, vous hésitez : comment devez-vous aborder cette collaboration ?

Les histoires de collaboration infructueuses avec des webdesigners freelance et des agences abondent sur le web. Et vous ne souhaitez surtout pas avoir à ajouter une page supplémentaire à ce livre des malheurs.

Rassurez-vous : travailler avec un webdesigner est excessivement simple, en plus d’être bénéfique pour votre image de marque.

Suivez ces 7 conseils et votre collaboration se déroulera sans encombre.

1 – Déterminez l’objectif de votre site avant de vous adresser à un webdesigner

Avant de vous adresser à un webdesigner, vous devez être capable de répondre à une question : quel est l’objectif principal de votre site web ?

Plus vous comprendrez ce que vous voulez, plus votre graphiste web sera capable de créer une maquette qui comblera vos attentes.

Pour être certain que votre web-designer puisse vous créer une identité visuelle sur-mesure, voici quelques informations que vous devez avoir en tête :

  • Quel est l’objectif général de votre (futur) site web ou application mobile (Améliorer l’expérience utilisateur de vos clients ? Acquérir plus de clients ?) ?
  • Quel sera votre positionnement marketing ?
  • Quels sont les supports de communication privilégiés de vos cibles ?
  • Quels sont les outils de communication qu’ils utilisent au quotidien ?
  • Quelle expérience utilisateur voulez-vous faire vivre à vos utilisateurs ?

Ces questions peuvent sembler sans importance, et pourtant.

Observez par exemple les communications web et print de deux marques qui vendent les mêmes produits (des vêtements) : Louis-Vuitton et Zara.

Leurs positionnements marketing étant radicalement opposés (luxe vs populaire), cela se reflète aussi sur leurs sites web : structure, typographie, arborescence, visuels, ergonomie… la différence est flagrante.

Raison pour laquelle vous devez absolument fournir ces informations à votre graphiste web. De la conception jusqu’à la réalisation de votre site d’e-commerce, y compris dans vos actions de webmarketing, ces réponses guideront vos développeurs, marketistes et webdesigners.

2 – Listez toutes les futures fonctionnalités de votre application

Maintenant que vous savez ce que votre application web ou produit digital fera, reste encore la question du comment.

D’emblée, sachez que deux produits qui remplissent exactement la même fonction peuvent le faire via des fonctionnalités différentes. Et c’est valable aussi bien pour les produits physiques que les services numériques.

Sceptique ? Si nous vous disions que Ryanair – une compagnie aérienne – est en concurrence avec Zoom, nous croiriez-vous ?

Et pourtant, c’est bel et bien le cas. Toutes deux répondent exactement au même problème : permettre aux cadres de faire des réunions B2B.

Sans surprise, l’expérience utilisateur proposée par chaque site, leurs bannières, leurs logos et leurs communications visuelles n’ont rien à voir.

Pour être certain de lister toutes les fonctionnalités de votre future application, voici quelques astuces :

  • analysez les sites de vos concurrents directs : si tous vos concurrents proposent les mêmes fonctionnalités, disons une newsletter, ce serait une bonne idée de faire de même ;
  • trouvez vos concurrents indirects, ceux qui résolvent le même problème que vous et analysez-les : souvenez-vous de l’exemple de RyanAir et Zoom ;
  • observez des sites qui vous plaisent : de nouvelles approches ou l’usage de supports différents peuvent surprendre agréablement vos utilisateurs.

Une fois que vous avez en main la liste complète des futures fonctionnalités spécifiques qui vous intéressent, il est temps de vous rapprocher d’un webdesigner.

3 – N’expliquez pas ce que vous attendez. Montrez-le

Absolument tous les webdesigners apprécient qu’on leur fournisse des références. Cela permet de voir les chartes graphiques qui vous plaisent (ou au moins, qui séduisent vos cibles).

Mais surtout, votre référence sera plus appréciée si vous expliquez à votre web-designer pourquoi elle vous plaît.

En fournissant des exemples – accompagnées de descriptions spécifiques dans votre briefing si possible -, l’équipe de créatifs en charge de votre projet web sera capable de créer l’interface web que vous désirez.

Mieux encore, ils pourront créer des logos, plaquettes, flyers et autres déclinaisons d’outils de communication qui refléteront votre identité. Votre personnalité.

Côté développement, définir le périmètre de vos fonctionnalités permet à votre webdesigner de vous recommander un cms type WordPress ou Shopify, ou un développement sur-mesure.

4 – Définissez le type de contenus qui vous intéresse

Laptop exécutant un logiciel de vidéo-montage avec tablette graphique

Qu’attendez-vous comme prototype ?

Des pages web remplies de textes ? Des illustrations ? Des templates prêts à l’emploi ?

Vous l’aurez compris, définir le type de contenus qui abondera sur votre futur service digital est une étape cruciale. Une étape trop souvent sautée par de nombreuses personnes en quête de gain de temps et d’argent.

Hélas, en sautant cette étape, vous perdrez presque tous les avantages des wireframes. Par conséquent, sans wireframe, votre équipe projet et vous n’êtes pas certain de comprendre les choses de la même façon.

Heureusement, créer un wireframe est excessivement simple.

Grâce à cette réflexion en amont, vous êtes certain que la gestion de votre projet sera plus simple. Toutes les parties auront le même niveau de compréhension. Développeurs et designers sauront exactement ce que vous attendez d’eux et comment cela doit être implémenté.

Par ailleurs, si vous avez fait appel à un web-designer, celui-ci saura s’il doit se faire aider par un rédacteur ou développeur expérimenté (particulière si vous voulez autre chose qu’un site vitrine responsive en HTML/CSS, ou un petit site d’e-commerce).

5 – Fournissez les éléments de votre charte graphique

La charte graphique est un document qui détaille les différents aspects de votre stratégie de communication digitale et physique. À l’intérieur, figurent vos codes couleurs, les différentes versions de votre logo, les polices typographiques autorisées et tout un ensemble de règles.

Grâce à elle, vous aurez une identité visuelle unique et facilement reconnaissable par votre cible. Si peu importe où vous êtes, vous arrivez à reconnaître des produits Coca-Cola ou Mcdonald’s, c’est grâce à ce document.

Plus tôt vous serez fixé sur ce que vous attendez, plus vous aurez de chances d’obtenir un résultat satisfaisant.

Lorsque les éléments de votre charte graphique sont fournis en retard, vos concepteurs web devront prendre davantage de temps pour les modifier. Typographie, couleurs primaires, secondaires, mise en page… absolument tout sera revisité.

Naturellement, le calendrier de votre projet s’en trouvera rallongé.

6 – Lisez les lignes écrites en tout petit dans les conditions de vos polices

D’emblée, sachez que certaines polices peuvent ne pas fonctionner sur certains sites web.

Pour contourner ce problème, les polices populaires ont généralement leurs propres versions web, gratuites jusqu’à un certain trafic.

Raison pour laquelle demandez toujours à l’agence ou au webdesigner freelance avec qui vous travailler de vérifier cela pour vous.

Vous ne voudriez pas être facturé pour avoir utilisé une police, n’est-ce pas ?

7 – Testez toujours votre maquette

Homme avec casque VR accompagné d'une femme avec un stylo

Si votre webmaster travaille selon les cérémonies agiles, alors vous recevrez très rapidement une maquette fonctionnelle de votre application.

Mais attention : ce n’est pas parce qu’elle fonctionne chez vous qu’elle fonctionnera chez tous vos prospects.

Peut-être vous souviendrez-vous d’Internet Explorer 9, qui était réputé pour avoir des normes incompatibles avec la plupart des navigateurs. Par conséquent, certaines animations ne fonctionnaient tout simplement pas sur ce navigateur.

Si vous ne voulez pas perdre une partie de votre audience à cause de problèmes d’incompatibilité, vous avez une seule solution : mener des tests utilisateurs et faire des retours à votre webdesigner.

Mais vous pouvez aller encore plus loin. Pourquoi ne pas contacter nos experts pour discuter de votre projet digital ? Écrivez-nous. Cela ne vous engage à rien et nous vous répondrons rapidement.