Mois : mars 2023

Posted on

Pourquoi et comment optimiser un parcours client ?

Vous arrive-t-il souvent de vous demander comment vendre plus et améliorer la satisfaction de vos clients ?

Si votre réponse est oui, alors voici une méthode incontournable dans votre quête de clients heureux : l’optimisation du parcours client.

On vous dit tout sur comment optimiser votre parcours client.

Qu’est-ce qu’un parcours client ?

Le parcours client désigne les différentes étapes par lesquelles vos cibles marketing vont passer jusqu’à réaliser leurs parcours d’achat. Certains intègrent d’ailleurs la phase de recommandation, lorsque votre client devient un ambassadeur de votre marque.

Mais impossible pour nous de parler d’optimisation du parcours client sans parler des tunnels de conversion. Contrairement à votre parcours client global qui vise à pousser vos prospects à l’achat, ces mini-parcours-clients peuvent avoir des objectifs variés :

  • pousser le visiteur à cliquer sur une bannière ou un popup ;
  • convertir des utilisateurs en clients ou des clients en ambassadeurs de votre marque ;
  • augmenter le nombre d’inscriptions à votre newsletter marketing ou sur vos médias sociaux.

Vous l’aurez compris, un parcours client optimisé, offrant une expérience-client optimale et répondant aux besoins de vos utilisateurs est un must. Grâce à lui, vous êtes certain d’atteindre les KPI de votre stratégie de marketing digital, voire de créer de nouveaux points de contact.

Pourquoi optimiser votre parcours client ? (3 raisons)

Sans plus tarder, voici les avantages que vous aurez en optimisant votre entonnoir de vente.

Améliorer les points de contact et diminuer le taux d’insatisfaction

Saviez-vous qu’un client satisfait vous générera 2.6 fois plus de CA qu’un client moyennement satisfait ?

Optimiser l’expérience utilisateur n’est donc pas un luxe, mais une priorité pour toute entreprise ou entrepreneur en quête de rentabilité.

D’ailleurs, pouvez-vous compter le nombre de fois où vous n’avez pas acheté sur un site d’e-commerce à cause d’une expérience client catastrophique ?

En travaillant à fluidifier les points de contacts entre vos cibles et votre entreprise, vous éloignerez d’eux tout sentiment négatif. Réduirez le nombre de feedbacks négatifs et de réclamations. Et les rapprocherez du bouton “j’achète”.

Mais vous pouvez faire encore mieux : que dites-vous de minimiser vos marges d’erreur ? Pour cela, rien de plus simple : créez une stratégie marketing centrée sur la vision client, équipez-vous d’outils de Big Data et de Machine Learning et le tour est joué !

Par exemple, vous pouvez intégrer Shopify en headless ou migrer votre site sous le CMS américain.

Faire décoller vos ventes et mieux maîtriser votre budget marketing

Vous êtes-vous déjà demandé combien de ventes vous rapporte chaque euro que vous investissez dans votre stratégie marketing ?

Savoir quel est le retour sur investissement de vos actions marketing vous permet de mieux orienter et planifier vos actions.

Surtout si vous avez une stratégie cross-canal ou multicanal : vos clients peuvent venir de n’importe quel canal marketing. Médias sociaux, inbound marketing, bouche-à-oreille, programmes relationnels… autant de canaux de communication dans lesquels vous investissez votre argent et/ou votre énergie.

Que dites-vous d’optimiser votre ratio effort/consommateur gagné ?

En travaillant sur les étapes du parcours-client, vous serez capable de savoir quel canal de vente vous apporte réellement de nouveaux clients.

Améliorer votre connaissance-client

Homme dessinant un entonnoir de ventes
Homme dessinant un entonnoir de ventes

Dans votre quête de création d’une expérience client unique, la compréhension du client en face de vous est votre meilleure alliée. En effet, vous connaîtrez mieux les attentes de vos clients et leurs besoins, et saurez y répondre (mieux que vos concurrents 😏).

Pour les obtenir, rien de plus simple : équipez vos équipes d’un logiciel CRM et connectez-le à vos applications métiers.

Ces précieuses données client en main (ou plutôt dans les tablettes), vos équipes de vente sauront mieux humaniser la relation client.

C’est la stratégie de personnalisation de l’expérience-client adoptée par Starbucks.

Repérer rapidement les points de friction et les corriger

D’emblée sachez-le : vous n’arriverez jamais à convertir 100 % de vos cibles en clients. D’ailleurs, certains ne verront même pas votre page de vente.

C’est pour cette raison que l’on parle d’entonnoir de ventes.

Et comme tout entonnoir, celui-ci doit s’affiner progressivement. Si vous remarquez une chute brutale du nombre de personnes entre deux étapes, c’est le signe d’un point de friction.

Des CTA absents ou irritants, des offres qui n’intéressent pas votre cible… qu’importe la raison, vous devez réagir. Et vite.

Heureusement, vu que votre parcours-client est optimisé, et donc que vous surveillez en permanence ses KPI, vous le verrez facilement.

Limiter les abandons de paniers

Hantise des gestionnaires de sites d’e-commerce, l’abandon de panier est bien souvent synonyme de ventes en moins.

En effet, entre 68.30 % et 79.30 % de vos leads finiront par abandonner leurs paniers.

Heureusement, vous pouvez diminuer ce taux en mettant en place des techniques de relance et en améliorant la qualité de l’expérience proposée.

Et si cela ne fonctionne toujours pas, peut-être devrez-vous redéfinir vos buyer personas et votre relation-consommateur en vous basant sur les bases de données de votre CRM.

3+1 techniques que vous pouvez mettre en place immédiatement pour améliorer votre parcours client

Souhaitez-vous offrir une expérience client optimale à vos prospects ? Voici 4 techniques à mettre en place.

Améliorer l’ergonomie et le design de votre site web

Si autant de personnes travaillent avec des webdesigners, c’est pour une raison fondamentale : un site web laid ne vend pas.

Sceptique ? Demandez-vous si vous préférez faire vos achats sur un site non-responsive design, à l’esthétique dépassé et peu ergonomique.

La réponse est sûrement non.

Bien sûr, ce cas est extrême, mais l’idée générale est là : pour améliorer l’expérience-utilisateur de votre application mobile/web, vous devrez peaufiner son ergonomie et son esthétique.

Si vous souhaitez savoir comment concevoir un site au design épuré, nous vous avons préparé un guide complet.

Offrir un contenu de qualité

Devriez-vous produire une pléthore de contenus de basses qualités ou créer quelques pièces d’excellentes factures ?

Selon HubSpot, la réponse ne fait aucun doute : créez plutôt quelques contenus et misez sur la qualité.

D’ailleurs, avec l’avènement des IA génératives, les contenus de qualités sont de plus en plus prisés par les internautes.

Avoir des appels à l’action (CTA ou Call To Action)

Cher Lecteur,

Imaginez un instant…

Après avoir vécu une expérience client positive et traversé les différentes étapes du parcours que vous avez conçu pour lui, votre client souhaite acheter.

Mais horreur : il ne trouve pas votre CTA. Dépité, votre lead s’en va chez votre concurrent (qui lui a mis des CTA parfaitement optimisés).

Vous trouvez ce scénario catastrophique ? Vous avez raison.

Les CTA, ou boutons d’appel à l’action, sont les passerelles qui permettent à votre prospect d’avancer dans son customer journey map.

Retenez ceci : chacune des pages de votre site web ou de votre application doit avoir un CTA précis.

Par exemple, vous pouvez insérer un bouton de chat en ligne afin que les utilisateurs puissent immédiatement contacter votre SAV.

Bonus : assurez-vous que votre site soit responsive

Rien n’est plus frustrant pour un mobinaute que de devoir scroller en largeur pour afficher un contenu pensé pour ordinateur.

Sachant que les internautes passent 57 % de leur temps sur le web via leurs téléphones, un site/application non-utilisable sur téléphone est un désastre marketing.

Pour éviter cela, assurez-vous toujours que votre site soit responsive design et fonctionne sur la majeure partie des résolutions d’écrans.

Posted on

Qui détient la propriété intellectuelle de votre site web ?

Déesse Thémis, symbole de la Justice sur fond gris

Saviez-vous que vous pouvez être accusé de contrefaçon pour avoir modifié votre propre site internet ?

Ou encore être confronté à un avocat en propriété intellectuelle pour avoir dupliqué votre site web (développé à vos frais) ?

Ça semble surréaliste, et pourtant, c’est la tragique expérience que vivent certains webmasters.

En cause : le code de la propriété intellectuelle. Ou pourquoi est-ce que lorsque vous faites appel à une agence de création de site, vous ne récupérez pas tous les droits intellectuels de vos sites web.

Cher Lecteur,

Aujourd’hui, nous allons parler d’un sujet rarement évoqué dans le monde du développement web : la propriété intellectuelle des sites web, y compris ceux créés sur vos ordres et entièrement à vos frais.

Qui détient les droits de votre nouvelle application web ou mobile ?

Femme étudiant des textes
Femme étudiant des textes

Réponse courte : l’ensemble des droits moraux de votre site web reviennent à celui qui l’a développé. Et ce même si c’est vous qui avez ordonné la création du site et l’avez financé.

Oui, vous avez bien lu : au terme de sa prestation de création de sites, votre agence de communication vous transfère uniquement le monopole d’exploitation.

Selon le droit français sur les œuvres de l’esprit et celles audiovisuelles, le titulaire des droits patrimoniaux et moraux est… l’agence digitale qui a créé le site, et non vous. À part si la cession des droits est explicitement mentionnée dans les conditions générales de vente ou dans le contrat.

Ce que cela implique pour vous ? Absolument rien de positif. Voici quelques-uns des pouvoirs que l’agence ou le freelance aura toujours après la fin de votre contrat.

Vous ne pouvez pas faire de reproduction non-autorisée de votre propre site ou une imitation servile

Traduit dans un langage business, ça veut dire ceci : si vous ciblez une nouvelle niche ou un nouveau marché, même si vous êtes satisfait de votre site, vous ne pourrez pas en faire une copie.

Exit aussi la possibilité de vous servir du code source de base – qui est considéré comme une œuvre intellectuelle – comme base pour un template.

Oubliez aussi la refonte de votre site, car vous modifierez une œuvre de l’esprit protégée.

Le seul moyen pour vous de faire cela sera de rappeler votre prestataire et d’entamer une (coûteuse) négociation. Sinon, vous risquez à tout moment de comparaître devant un tribunal ou l’OMPI pour action de contrefaçon.

Votre prestataire peut légalement exiger que vous mentionniez son nom sur votre site web

Le responsable ici étant le droit à la paternité.

C’est le même principe qui s’applique sur les œuvres artistiques : vous aurez beau avoir payé comptant des tableaux signés Yinka Shonibare ou Léonard de Vinci, ils restent la propriété intellectuelle de leurs auteurs.

Vous ne pouvez pas modifier l’œuvre du développeur sans son autorisation

C’est sans doute l’une des clauses les plus contraignantes.

Imaginez un instant que vous décidiez de faire appel à un webdesigner pour retravailler les interfaces graphiques de votre site.

Ses wireframes auront beau optimiser le parcours d’achat et fluidifier l’expérience utilisateur, vous ne pourrez pas les implémenter… sans l’accord de votre précédent prestataire.

Encore une fois, rien ne vous empêche de le faire, mais sachez que le créateur de votre site pourra vous assigner devant un tribunal.

Sceptique ?

Voici un compte-rendu de justice qui illustre parfaitement ce qui peut vous arriver si vous n’êtes pas vigilant sur les clauses de votre contrat.

L’affaire Victoriaa, Estelle G. c face à Stéphane C. : Linkeo.com, un cas d’école pour les webmasters

Homme en costume en négociation avec deux autres personnes
Homme en costume en négociation avec deux autres personnes

27 janvier 2004,

Stéphane C exploitait deux sites internet dont les noms de domaines étaient : www.elag-ouest.com et www.elag-ouest.eu.

Ce jour-là, il confie l’hébergement, la gestion du nom de domaine et le référencement SEO du premier site à l’agence de webmarketing Linkeo.

Le 15 novembre 2007, il fait de même pour le second site, mais choisit la société de web-marketing Victoriaa. De plus, notre entrepreneur fait aussi appel à ladite société afin de créer des contenus publicitaires.

Avançons notre horloge jusqu’à la fin 2008.

À ce moment, Stéphane C souhaite unifier l’hébergement de ses deux sites, et choisit comme hébergeur Linkeo. De plus, il signe aussi un contrat de cession et un contrat locatif de son site web – celui avec l’extension .eu – avec Linkeo, afin d’en tirer des redevances.

Et c’est là que le drame juridique commence.

En effet, la société chargée du site .eu n’est pas du tout d’accord avec l’usage que Stéphane.C a fait de sa création. Et sans surprise, elle entame des procédures… qui se termineront en 2011 !

Cher Lecteur,

Nous avons résumé l’affaire dans ses grandes lignes, mais si vous souhaitez en apprendre plus, le site legalis l’a parfaitement documentée.

Hélas pour notre entrepreneur, le jugement de la cour d’appel n’était pas en sa faveur. Nous citons : « il y [avait] lieu d’admettre qu’en faisant reproduire l’œuvre [du premier prestataire] sans son accord afin de pouvoir l’exploiter sous un autre nom de domaine, [le client avait] commis à l’encontre [du prestataire initial] un acte de contrefaçon ».

La messe était dite. Et les sanctions financières aussi.

Comment obtenir tous les droits intellectuels et moraux sur votre site web ?

Il existe une méthode simple pour éviter des conflits juridiques : choisissez une bonne agence web honnête et assurez-vous que le transfert des droits de propriété intellectuelle soit clairement mentionné dans votre contrat.

Car si vous tombez sur une mauvaise agence web, celle-ci peut revenir chercher des revenus supplémentaires… accompagnée d’un cabinet d’avocat.

En effet, selon le droit français, la société bénéficiaire dispose de toute la propriété intellectuelle si le contrat inclut une clause de cession. De plus, ses clauses doivent respecter quelques formalités :

  • chaque droit relatif à la propriété littéraire et artistique doit être clairement mentionné dans l’acte de cession et faire l’objet d’une clause ;
  • Le domaine d’exploitation de vos (futurs) droits doit être clairement délimité, notamment sa durée, son lieu et sa destination.

En plus de ceci, lisez attentivement les CGV des contrats de votre prestataire. En effet, certaines agences web comme Poyesis vous confèrent la propriété de tous les droits de tous les éléments de votre site web. D’autres non.

7 éléments de votre site web que vous devez toujours protéger

Cher Lecteur,

Ne signez pas un quelconque devis ou contrat avant d’être certain que les 7 éléments suivant vous reviendront (légalement) au terme de la création de votre site internet :

  • tous les éléments de votre charte graphique (logos, identité visuelle, signes distinctifs, etc.) ;
  • tous les dessins et modèles utilisés pour le webdesign ;
  • votre nom de domaine ;
  • tous les visuels fournis par votre graphiste ;
  • les contenus (textes, chartes éditoriales, maquette des mises en page…) ;
  • les bases de données ;
  • le code source de votre application web.

Ces éléments sont à prendre en compte lorsque vous déciderez de choisir de développer votre site from scratch ou via un CMS. En effet, si vous utilisez un CMS propriétaire, vous n’aurez jamais la totalité des droits sur votre code source.

Et pour finir, nous avons une bonne nouvelle à vous annoncer. Si vous faites appel à Poyesis pour n’importe lequel de vos projets digitaux, vous obtiendrez automatiquement tous les droits sur votre création. Y compris tous les accès administrateurs.

Alors que dites-vous de nous contacter afin de discuter de votre projet ?

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

Développement logiciel : à la régie ou au forfait ?

kelly-sikkema-M98NRBuzbpc-unsplash-image

Devez-vous payer le temps passé sur votre projet ou juste payer le résultat ?

Au moment de choisir le freelance ou l’agence qui aura la lourde tâche de donner vie à votre application, cette question revient sans cesse : devez-vous opter pour une faction à la régie ou au forfait ?

Nous avons compilé pour vous les pour et les contres de chaque mode de facturation. Bonne lecture.

Facturation à la régie : louez des professionnels

Homme travaillant sur un laptop
Homme travaillant sur un laptop

Si vous avez des besoins extrêmement évolutifs ou recherchez un consultant pour épauler votre DSI, cette option est parfaite.

Dans une facturation à la régie, vous louez les moyens techniques et humains nécessaires à la réussite de votre projet. Votre agence de développement web a alors une obligation de moyens envers vous.

En tant que donneur d’ordre, c’est votre responsabilité de monitorer le travail des équipes de programmeurs. Et ce, même si l’ESN (entreprise de société numérique) avec laquelle vous travaillez met à votre disposition un chef de projet dédié.

Les avantages de la facturation à la régie

Les avantages du développement informatique à la régie tiennent en un mot : flexibilité. Plus exactement :

  • vous avez une grande flexibilité dans votre gestion budgétaire ;
  • vous pouvez modifier votre cahier des charges fonctionnelles et rajouter des fonctionnalités à tout moment ;
  • votre application est développée de manière itérative ;
  • vos équipes bénéficient des services d’un consultant informaticien.

Toutefois, ces bienfaits apportent aussi leurs lots d’inconvénients.

Les inconvénients de la facturation à la régie

Pouvez-vous imaginer vous lancer dans un voyage sans planifier votre route ou les ressources dont vous aurez besoin ?

Sûrement pas. Car vous savez que les chances d’atteindre votre destination seront extrêmement minces.

C’est exactement la même chose avec la facturation à la régie : il n’y a aucun expert de l’infogérance ou de l’ingénierie logiciel pour assumer le rôle de gestionnaire de projets informatiques.

En détails :

  • vous n’êtes pas certain d’avoir une solution logicielle viable au terme du cycle de développement ;
  • votre prestataire n’a absolument aucune obligation de résultat envers vous (vous misez sur la confiance) ;
  • vous devrez passer plus de temps à monitorer les équipes d’ingénieurs logiciels et de programmeurs mis à votre disposition.

Enfin, l’absence de cahier des charges précis n’est jamais souhaitable lorsque l’on travaille avec un professionnel du web. Pourquoi ? Parce que vous risquez de devenir la vache à lait de votre prestataire. Littéralement.

Autant de problèmes que vous pouvez éviter en optant pour le mode de facturation suivant.

Facturation au forfait : payez uniquement votre produit fini

Dans un monde idéal, votre seule préoccupation serait d’avoir le meilleur produit digital.

Ni les délais, ni les limites budgétaires ne viendraient freiner votre créativité.

Hélas, nous ne sommes pas dans ce monde idyllique : vous voulez une application fonctionnelle dans un délai précis et selon un budget (très) précis.

Et c’est là qu’entre en jeu la facturation au forfait : vous payez uniquement le produit, et non les efforts nécessaires à sa création.

En optant pour un développement informatique dont le prix est établi selon la facturation au forfait, vous paierez un montant fixe.

Peu importe les imprévus, les pannes, les accidents… votre agence web a une obligation de résultat : elle doit vous livrer un produit parfaitement fonctionnel et conforme à votre cahier des charges.

Le meilleur pour la fin : elle prend en charge la gestion des risques de votre projet. Autrement dit, en cas de soucis, toute la responsabilité juridique du problème est transférée à l’agence. Mieux encore, en cas de retard sur le planning, vous pouvez exiger des compensations.

Les avantages de la facturation au forfait

En voici quelques-uns :

  • vous contrôlez mieux votre budget et limitez les risques de dépassement budgétaire (la hantise des responsables et des DSI) ;
  • vous êtes certain d’obtenir une application fonctionnelle et conforme à vos attentes ;
  • en cas d’incidents, la totalité de la responsabilité est prise en charge par votre SSII ;
  • le planning de livraison et de déploiement est connu à l’avance.

Hormis ces avantages, vous devrez aussi faire face à quelques inconvénients.

Les inconvénients de la facturation au forfait

Contrairement à la facturation à la régie, opter pour un forfait vous impose une certaine rigueur. Ce qui a son lot d’inconvénients :

  • vos ingénieurs informatiques doivent passer plus de temps sur la conception du cahier des charges de votre projet ;
  • en cas d’ajout de fonctionnalités trop éloignées de celles initialement prévues, vous devrez parfois renégocier avec votre SSII partenaire.

Vous l’avez sans doute remarqué : la clé pour éviter ces inconvénients est de bien ficeler votre projet en amont. Plus vous êtes précis sur les choix techniques (React ou Flutter pour votre application mobile ? développement sur-mesure ou CMS? template ou headless sous Shopify ?), moins vous êtes exposé à ces risques.

Comment réussir son développement informatique basé sur une facturation au forfait ?

D’emblée sachez-le : sous son air idyllique, la facturation au forfait n’est pas exempte de mauvaises surprises, surtout si elle émane d’une mauvaise agence web.

Ainsi, la condition sine qua non d’un contrat basé sur ce mode de facturation est que le cahier des charges soit parfaitement défini. Une agence sérieuse poussera ses ingénieurs informatiques à questionner chaque élément de votre cahier des charges. D’ailleurs, s’il est incomplet, elle vous aidera à le finaliser avant de commencer à développer votre logiciel.

Par contre, si la société informatique en face n’est pas fiable, elle s’empressera de vous faire signer le contrat. Et ce, en sachant pertinemment qu’elle sera incapable de vous livrer et que vous ne pourrez pas vous plaindre. La faute à des spécifications incomplètes.

Au final, lequel choisir ?

Vous hésitez entre la flexibilité de la régie et la sécurité du forfait ?

Que diriez-vous d’avoir les avantages des deux modes de facturation ? C’est ce que Poyesis vous propose.

En collaborant avec nous, vous serez facturé au forfait, mais avec des avantages en plus :

  • nos ingénieurs en génie logiciel vous aide à définir toutes vos spécifications ;
  • votre application est conçue de manière itérative selon la méthodologie agile ;
  • vos feedbacks et les retours de vos tests-utilisateurs sont pris en compte dans un processus d’intégration continue ;
  • nous allouons toujours tous les programmeurs nécessaires à votre projet en interne, raison pour laquelle nous ne travaillons pas sur plus de 5 projets simultanément ;

Souhaitez-vous-en apprendre plus sur ce mode de facturation au forfait revisité par Poyesis ? Ou discuter de votre projet digital ?

Contactez-nous et nous vous répondrons rapidement.

Posted on

10 raccourcis clavier Figma à connaître absolument

Souhaitez-vous créer un site d’e-commerce aux graphismes irrésistibles ? Une application web ou mobile offrant une expérience utilisateur qui laissera vos visiteurs sans voix ?

Alors ne cherchez plus : Figma est fait pour vous (et surtout pour votre graphiste web).

Ce logiciel made in USA est une alternative à Adobe XD, Photoshop et Sketch de plus en plus prisé par les webdesigners.

Si vous souhaitez gagner du temps sur Figma, voici le top 10 des combinaisons de touches à connaître.

Sommaire

Qu’est-ce que Figma et pourquoi vous devez absolument l’utiliser ?
10 raccourcis clavier Figma qui vont vous faire gagner du temps
1 – Copier un élément en tant que PNG
2 – Définir l’opacité d’un élément
3 – Dupliquer des éléments
4 – Étirer un Frame en conservant ses proportions
5 – Copier le lien de votre canevas
6 – Naviguer entre les calques et les composants
7 – Basculer du mode design au mode prototype (et vice-versa)
8 – Copier / Coller le style d’un composant vers un autre
9 – Exporter des éléments de votre Canva
10 – Masquer les curseurs des membres de votre équipe

Qu’est-ce que Figma et pourquoi vous devez absolument l’utiliser ?

designer devant une interface Figma
webdesigner devant une interface Figma

Incontournable des passionnés de graphisme web, Figma est un logiciel de conception d’interfaces graphiques et de wireframes.

Mais limiter Figma à un logiciel de traitement d’image comme Canva serait une erreur. Voici un aperçu des fonctionnalités offertes par Figma :

  • la création de prototype et de maquettes graphiques interactives ;
  • la possibilité de mener des tests utilisateurs sur vos différentes interfaces graphiques via un simple lien ;
  • la création d’un site internet avec un design minimaliste ou non ;
  • une messagerie collaborative comparable à Slack qui concentre vos interactions avec vos équipes web sur une seule plateforme.

Dernier atout de Figma : la plateforme gère automatiquement les versions de vos conceptions graphiques. Par conséquent, c’est un incontournable si vous devez travailler avec un webdesigner sur une longue période (ou sur plusieurs projets).

Hélas, vous vous en doutez, prendre en main un outil aussi complexe, surtout si vous n’êtes pas un pro du graphisme, risque de s’avérer… compliqué.

Raison pour laquelle nous avons dressé une liste des 10 raccourcis-claviers à connaître absolument (et qui vous éviteront au passage des moments gênants lors des présentations Zoom).

10 raccourcis clavier Figma qui vous feront gagner du temps

Clavier coloré
Clavier coloré

Sans plus tarder, voici les 10 raccourcis clavier Figma indispensables de tout utilisateur de Figma.

1 – Copier un élément en tant que PNG

Commande : Maj + CTRL + C

Effet : transformer un élément en PNG pour le partager facilement sur vos autres plateformes

Un élément de votre maquette fil-de-fer a attiré votre attention et vous souhaitez le partager ? Figma a pensé à vous.

Sélectionnez le calque ou les calques qui vous plaisent, maintenez la touche shift enfoncée et appuyez sur la touche CTRL puis sur « C ». Tous les éléments sélectionnés seront aplatis et convertis en une image PNG.

En prime, Figma chargera immédiatement votre nouvelle image dans votre presse-papiers. Vous n’aurez alors plus qu’à la copier où vous voulez via un CTRL + V.

2 – Définir l’opacité d’un élément

Commande : toutes les touches du pavé numérique.

Effet : ajuster l’opacité de l’élément sélectionné.

Souhaitez-vous modifier le degré de transparence d’un calque pour mettre en valeur son arrière-plan ? Si c’est votre cas, faites un clic droit sur l’image puis appuyez sur une touche de votre clavier numérique.

  • La touche « 0 » définit un niveau d’opacité à 100 %, parfait pour masquer tout ce qui est derrière l’image ;
  •  « 1 » définit un niveau d’opacité à 10 % ;
  • « 2 » définit un niveau d’opacité à 20 %.

Vous voyez le principe.

Pour éditer le degré d’opacité avec des valeurs plus précises, appuyez sur une touche puis sur une autre. Ainsi, un degré d’opacité à 56 % nécessite que vous appuyiez sur la touche “5” puis sur la touche “6”.

3 – Dupliquer des éléments

Commande : CTRL + D

Effet : dupliquer un élément dans la cellule active

Cette commande vous permet de dupliquer un élément au sein de la cellule active.

4 – Étirer un Frame en conservant ses proportions

Commande : CTRL + Étirer (Windows) ou Cmd + Étirer (macOS)

Effet : étirer un frame sans modifier l’emplacement de ses éléments

Souhaiteriez-vous voir votre belle mise en forme gâchée à cause d’une résolution que vous avez oubliée ?

Certainement pas.

Raison pour laquelle dans Figma, tous vos cadres de travail sont soumis à des contraintes graphiques. Ce sont elles qui permettent à votre image d’être responsive design sur iPad, mobile, Smart TV et autres.

Il peut arriver que vous souhaitez redimensionner votre frame sans que ces règles changent l’agencement des éléments. Heureusement, c’est chose facile sous Figma : utilisez la touche CTRL pendant que vous redimensionnez votre frame.

5 – Copier le lien de votre canevas

Commande : CTRL + L

Effet : créer un lien qui redirige immédiatement le destinataire vers votre toile

Un élément de votre canevas a attiré votre attention et vous souhaitez le partager avec vos collaborateurs ?

Dans ce cas, créez un lien qui redirige vers immédiatement vers cet élément précis.

Sélectionnez le composant ou le canva de votre choix, et effectuez la combinaison de touches CTRL + L et le tour est joué.

Une fois que vos destinataires cliqueront sur le lien, votre Canva s’ouvrira dans une nouvelle fenêtre de leur navigateur.

NB : certaines versions de Google Chrome peuvent ne pas supporter cette fonction.

6 – Naviguer entre les calques et les composants

Commande : Touche Alt +1 ou Option + 1 → Touche Alt + 2 ou Option + 2

Effet : accéder rapidement à un composant de votre UI

Parfois, vous serez confronté à des fichiers .fig ou .sketch constitués d’un enchevêtrement de calques et de layout.

Et vous devrez naviguer entre tous ces calques.

Pour éviter de verrouiller/déverrouiller un calque par erreur, et provoquer la colère de votre graphiste, utilisez les raccourcis listés plus haut.

Ils ouvriront un nouvel onglet au sein duquel vous pourrez naviguer entre les différents calques via les touches de direction. Et si jamais vous craignez d’avoir modifié les propriétés de verrouillage d’un élément, regardez l’icône de verrouillage dudit élément.

7 –  Basculer du mode design au mode prototype (et vice-versa)

Ecran avec mode affichage et code de la page web
Ecran avec mode affichage et code de la page web

Commande : MAJ + E

Effet : Alterner entre le mode design et le mode prototype

Si vous souhaitez optimiser votre tunnel de vente via un site web ou une application, le mode prototype de Figma est votre meilleur allié.

Pour l’activer, vous n’avez qu’à utiliser le raccourci clavier MAJ + « E ». Immédiatement, un menu contextuel contenant les options de prototypage de Figma s’ouvrira au sein de la fenêtre active.

8 – Copier / Coller le style d’un composant vers un autre

Commande pour macOS : Option + Commande + C → Option + Commande + V

Commande pour Windows : Ctrl + Maj + C → Ctrl + Maj + V

Effet : Appliquer les éléments de style (couleurs, italique, taille de la police, etc.) d’un élément à un autre

Si vous avez des préférences pour le style d’un élément, que dites-vous de l’utiliser sur un autre ?

Cliquez sur l’élément qui vous intéresse, faites CTRL + MAJ + C et rendez-vous sur la page suivante et faites un CTRL + MAJ + V. Vous verrez alors le style de la page précédente appliqué à l’élément sélectionné.

9 – Exporter des éléments de votre Canva

Commande : Commande + Maj + E (Mac) ou CTRL + MAJ + E (clavier Windows)

Effet : Exporter des icônes et des images

Ça y est !

Vous êtes satisfait de la maquette graphique de votre (future) application web ou logiciel.

Maintenant, il ne vous reste plus qu’à la partager avec vos développeurs web.

Pour cela, rien de plus simple, utilisez le raccourci clavier CTRL + MAJ + E et le tour est joué.

Et si jamais vous souhaitez exporter un calque ou un composant spécifique, sélectionnez le et exécutez la même combinaison.

10 – Masquer les curseurs des membres de votre équipe

Commande : ALT + cmd + “/” sous mac Os ou CTRL + ALT “/” sous Windows

Effet : Masquer les curseurs des autres utilisateurs

Cette fonctionnalité est un must lorsque vous faites du design collaboratif. En effet, voir les curseurs des autres se balader sur son écran peut vite devenir agaçant.

Exécutez cette commande et il ne restera qu’un seul curseur : le vôtre.

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

7 signes d’une mauvaise agence web

Dans votre quête de l’agence web idéale, vous avez croisé les sites internet de plusieurs prestataires.

Tous vous promettent de mettre à votre disposition les expertises dont votre projet a profondément besoin. Parmi elles, certaines répondent d’ailleurs parfaitement aux 5 critères d’une bonne agence de communication.

Mais vous vous posez une question : comment reconnaître les mauvaises agences digitales parmi celles-ci ?

Heureusement pour vous, nous avons listé 7 red-flags qui vous permettront de reconnaître les mauvaises agences SEO en un clin d’œil.

1 – Elles n’ont aucune référence

Avec le développement du web, n’importe qui peut s’ériger en tant que prestataire en marketing web et en communication.

D’ailleurs, nous sommes certains que vous avez déjà croisé des prestataires qui se vantaient d’avoir des expertises rarissimes et avec des titres en anglais ronflants. LinkedIn regorge de ce type d’agence marketing.

Heureusement, vous avez un moyen très simple de vérifier si l’agence de votre choix possède bien les compétences qu’elle prétend : allez vérifier leurs références sur le web.

Subitement, vous verrez des profils aux allures très professionnelles n’avoir absolument aucun portfolio.

Aucun site vitrine. Aucune page web. Aucun avis client. Absolument rien.

Vous sentez le red flag à plein nez n’est-ce pas ?

Attention toutefois : l’absence de références n’est pas un problème si le prestataire est un novice et l’assume clairement. Par contre, si c’est un novice qui veut se donner des allures d’expert chevronné, prenez vos jambes à votre cou.

Autre point qui mérite votre attention : vérifiez toujours que les références sont valides. Parce que oui, certaines agences web créent des références client de toute pièce ou les achètent.

Un conseil : fuyez-les comme la peste.

Pour dénicher ces fausses références, prenez votre téléphone et appelez les contacts mentionnés. Ou alors, faites-leur un mail.

2 – Elle vous promet monts et merveilles à prix cassés

Cher Lecteur,

Honnêtement, n’aimeriez-vous pas avoir le génie d’Aladdin comme agence web ?

Une agence de communication qui, qu’importe votre demande, le fait rapidement, à prix cassé et parfaitement ? Le tout avec un degré d’expertise et de précision sans égal ?

Hélas, nous ne vivons pas dans le monde de Disney et le génie d’Aladdin n’existe pas.

Ainsi, seules les agences les plus grandes peuvent être comparées au génie d’Aladdin – mais faites une croix sur les économies.

Faites attention aux agences qui disent qu’elles peuvent tout faire

Ainsi, si une agence web vous promet de gérer absolument toutes vos nouvelles demandes en un temps record et pour presque rien, méfiez-vous : elle risque de ne pas tenir ses engagements et elle le sait parfaitement.

Une agence qui est spécialisée dans l’acquisition de trafic et le growth marketing peut vous accompagner sur tout ce qui touche au développement de votre audience. Par contre, il y a peu de chances qu’elles disposent des ressources en interne pour le développement d’applications métier.

Attention ici aussi à ne pas généraliser : si elle dispose d’une excellente notoriété, c’est possible qu’elle ait des ressources compétentes en interne. Si ce n’est pas le cas ou qu’elle est nouvelle, soyez vigilant.

Comment détecter qu’une agence vous vend des prestations qu’elle ne maîtrise pas ?

Un moyen simple de vérifier si l’agence webmarketing de votre choix est fiable consiste à lui demander l’impossible.

Par exemple, demandez-lui si elle peut améliorer le référencement Google de vos pages web. Ensuite, demandez si elle vous garantit de placer votre site sur la première page des moteurs de recherche en une semaine.

Écoutez bien sa réponse : si elle vous répond oui, alors fuyez, le référencement naturel prend au minimum 6 mois pour améliorer votre position SEO dans les résultats de recherche.

Autre exemple : si vous souhaitez créer un site d’e-commerce en headless ou custom, demandez si c’est possible d’avoir tous vos livrables en 1 semaine. Si votre interlocuteur vous répond oui, tournez vos talons, car seul l’usage de templates permet de faire cela.

3 – Elle a une mauvaise stratégie de communication

En bon homo sapiens du 21e siècle, votre premier réflexe sera sans doute d’analyser la présence de l’agence sur les médias sociaux.

Et vous avez raison.

Après tout, le rôle d’une agence est de vous générer des prospects de manière directe (via l’inbound marketing, Google adWords ou n’importe quel ads) ou indirecte (développement web, création d’application métier).

Alors que penser des agences qui brillent par leurs absences des réseaux sociaux et des sites de notation (Malt, Trustpilot) ? Attention, danger.

Si ni le chargé de communication de l’agence ni l’un des fondateurs ne communique régulièrement sur le web, attention. Si elle communique quotidiennement, soyez attentif à la qualité de sa stratégie de communication.

Par exemple, si vous cherchez une agence de webdesign et que les visuels qu’elle publie sont de mauvaise qualité, n’espérez pas de miracle de leur graphiste.

Même son de cloche si vous cherchez une agence spécialisée dans les CRM, dans l’acquisition de trafic ou la gestion du SAV. Dans l’éventualité ou ses pages sont inondées d’avis négatifs… vous connaissez la suite.

4 – Les livrables de son portfolio sont quasi-identiques

Plus haut, nous avons parlé du danger que représente l’absence de portfolio.

Mais un portfolio dont tous les éléments se ressemblent n’est guère mieux.

Pire encore, il traduit que l’agence avec laquelle vous discutez se contente de copier-coller des éléments sur des templates.

Votre image de marque, votre branding, votre parcours client, votre expérience utilisateur, vos mots-clés longue-traîne cibles… rien de tout ça ne sera pris en compte.

Nous devons cependant apporter une nuance. En effet, travailler avec des agences web spécialisées uniquement dans un domaine est parfois bénéfique.

5 – Elle prétend connaître votre domaine alors que c’est faux

Honnêtement, il est difficile pour un chef d’agence web de maîtriser à la perfection tous les secteurs d’activités. En particulier les domaines techniques.

Si c’est votre cas, alors attendez-vous à devoir expliquer plusieurs mots de votre jargon à votre interlocuteur. C’est tout à fait normal.

Par contre, si celui-ci prétend connaître tous vos termes, mais que vous vous rendez compte que c’est faux… vous voyez le red flag venir ?

Et pour cause : cela signifie que seule votre signature en bas du contrat l’intéresse et qu’il est prêt à sauter toutes vos explications jusqu’à l’obtenir.

6 – Elle vous force à choisir sa solution d’hébergement web pour vos solutions SaaS et web

Étonnamment, certains prestataires défendent mordicus l’idée selon laquelle vous ne serez pas capable de gérer vous-même votre content management system.

Ainsi, après vous avoir livré vos CMS certaines agences… ne vous donnent pas les accès administrateurs !

Si dans le contrat, vous lisez une telle chose, ne tournez pas de long en large : fuyez !

Pourquoi nous disons cela ? Pour au moins 2 raisons :

  • parce que c’est votre produit et vous en êtes le seul propriétaire ;
  • parce que ce type d’offre inclut généralement un contrat de maintenance qui vous empêche de chercher un meilleur prestataire.

D’ailleurs, sachez qu’il n’y a pas que votre système CMS qui peut être pris en otage. Certaines agences de communication feront de même avec votre hébergement web.

Vous aurez toutes les clés administrateurs, mais serez forcé d’héberger votre site internet chez l’hébergeur web de votre agence. Ou carrément dans ses propres serveurs web.

Peu importe à quel point la négociation est rude, n’acceptez jamais cela : vous deviendrez dépendant de l’agence. De son infrastructure. De ses ressources.

Et surtout, vous risquez d’avoir des surprises désagréables lors de la résiliation de votre contrat.

Chez Poyesis, nous pensons que lorsque vous nous faites confiance pour donner vie à votre projet digital, il vous appartient totalement. Par conséquent, une fois le développement terminé, nous vous remettons tous les accès et toutes les clés.

7 – elle ne se soucie pas de votre projet

Ça y est !

Après avoir écumé le web pendant de longues heures, vous avez trouvé l’agence qui correspond à vos critères. Ensuite, vous l’avez contacté.

Et là, c’est la douche froide : peu importe à quel point vous expliquez votre projet, votre interlocuteur ne pense qu’à vous faire signer.

Pire encore, il/elle ne vous fait aucune proposition ni sur votre stratégie web ni d’audit SEO des pages de votre site web.

Soyons honnêtes, si vous êtes en face d’une mauvaise agence web pareille, allez-vous signer ?

Certainement pas.

Le risque avec ce type d’agence est qu’une fois que vous aurez signé le chèque, votre avis ne soit plus pris en compte. Pour éviter cela, tournez-vous vers des agences qui utilisent les cérémonies agiles.

C’est donc un red flag sur lequel vous devez être intransigeant. Sous peine de voir votre projet réduit à un simple copier-coller de stratégies webmarketing ou de templates HTML.

Pire encore si elle ne vous dit pas clairement si elle créera votre site via un CMS (WordPress, Drupal, etc.) ou une solution sur-mesure.

Justement, souhaitez-vous discuter de votre projet digital ? Contactez-nous et nous en parlerons plus en profondeur.

 

Posted on

Laravel 10 : quelles sont les + de cette version ?

PHP Plush Elephant sur un Macbook Pro, avec PHP Storm qui tourne dessus.

Dans l’univers du développement web via PHP, le temps se divise en deux moments : l’âge des ténèbres pré-Laravel et l’époque bénie du framework open source Laravel.

D’une popularité sans précédent, ce framework PHP permet d’utiliser PHP de manière beaucoup plus simple.

Et justement, ce 14 février 2023, Taylor Otwell et ses équipes ont offert un cadeau de Saint Valentin aux adeptes du langage de programmation à l’éléphant : Laravel 10.

Sans plus tarder, voici quelques-unes des avancées majeures de cette nouvelle version de Laravel.

L’intégration de Jetstream

Cher Lecteur,

Pour créer un site web, vous devrez à tout prix implémenter certaines fonctionnalités. La connexion à l’espace utilisateur, la vérification des identifiants, etc. C’est répétitif, long et fastidieux.

Et c’est là qu’entre en jeu le package Jetstream.

Jetstream est un ensemble de modèles de code PHP prêt à l’emploi. D’ailleurs, si vous n’avez pas choisi d’utiliser un CMS tel que WordPress pour créer votre site d’e-commerce, il y a de fortes chances que vous l’utilisez sans vous en rendre compte.

Voici quelques-unes des fonctionnalités offertes par Laravel-Jetstream :

  • la gestion des logins ;
  • l’authentification à deux facteurs (2FA) ;
  • la gestion des sessions.

Avant Laravel 10, pour utiliser cette collection de starters kit dans votre application web, vous deviez parfois user de ligne de commande via votre IDE ou votre terminal. Désormais, avec Laravel 10, Jetstream est directement intégré, y compris dans Laravel Blade.

Pour les utilisateurs de MacOS et/ou une distribution Linux telle qu’Ubuntu, vous trouverez directement Laravel 10 dans Docker.

Des algorithmes de hachage plus rapide

Pendant longtemps, l’algorithme SHA-1 a dominé l’univers du hachage chez les codeurs pro-Laravel.

Mais cela pourrait changer grâce à l’intégration d’un nouvel algorithme beaucoup plus rapide : xxHash.

Plus performant, et avec une meilleure dispersion, xxHash vient ravir les cœurs des développeurs soucieux d’un meilleur chiffrement de leurs données.

Attention toutefois : certaines fonctions de Laravel attendent toujours que les noms des sorties des fonctions de hachage soient retournés au format SHA-1.

Cette nouvelle méthode n’est donc pas supportée par tous les paquets des anciennes versions de Laravel.

Ainsi, soyez vigilant sur ce point jusqu’à ce que des correctifs corrigent ces bugs.

Ordinateur avec un code PHP

Pennant : le feature flag maison de Laravel 10

Grâce à un feature flag, vous pouvez décider de donner l’accès à certaines fonctionnalités à certains usagers selon une liste de critères bien précis.

Et justement, grâce à Laravel 10, c’est désormais plus simple qu’auparavant : vous n’avez qu’à définir des critères dans un service provider et le tour est joué.

Toutefois, pour l’utiliser, n’oubliez pas d’ajouter le paquet correspondant

Optimisation Eager Loading, pour des temps de chargement plus courts

Honnêtement, l’on serait plus tenté de parler de correctif que d’une réelle mise à jour, mais qu’importe, cela fait toujours plaisir.

Sur les anciennes versions, à chaque fois que vous chargez des relations par anticipation en SQL depuis une base de données, vous exécutez une requête de la forme :

Select * from ‘nom de votre table’ where 0 = 1.

Même si cela fonctionne, ce type de requête augmente inutilement la complexité et le temps d’exécution de vos codes informatiques.

Et pour cause, la clause “Where 0 = 1” ne sera jamais valide. Aucune loi mathématique ne donnera jamais raison à « 0 = 1 ».

On parle alors de requêtes impossibles.

Fort heureusement, la communauté de Laravel a pensé à nous autres, développeurs, en optimisant le chargement rapide.

Dorénavant, avant de charger des relations par anticipation, Laravel 10 vérifie d’abord s’il y a des clés disponibles dans la database. S’il n’y en a pas, alors votre programme retournera simplement une collection vide.

Mais Laravel ne s’arrête pas là. Exit aussi les luttes de casting pour convertir les données issues de vos bases de données. Laravel 10 vous renvoie directement le type réel de la colonne, et non plus son équivalent DBAL.

Cher Lecteur,

Laravel 10 dispose encore d’une pléthore de fonctionnalités que nous n’avons pas abordées.

Que dites-vous d’en discuter avec nos développeurs afin de voir comment les utiliser pour votre projet ? Écrivez-nous.