No-Code & UI Design, un mariage de passion et… de raison

Jusqu’à récemment, pour tester rapidement un produit, un service ou une landing pagePage web spécifiquement conçue pour convertir les visiteurs en prospects ou en clients, souvent utilisée dans les campagnes marketing. More, l’expertise d’un développeur était nécessaire. Désormais, les outils No-Code permettent de s’affranchir de cette expertise pour concevoir rapidement des interfaces. Les outils No-Code sont le nouveau must-have des UI Designers les plus en pointes. Revue de leurs avantages, freins et des meilleurs outils.

Fini les prototypes FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More ? Place à un prototypeUn prototype est une version initiale d'un produit ou d'une solution qui permet de tester et d'itérer le design avant le développement final. Il peut être cliquable, offrant ainsi une expérience utilisateur interactive More Webflow pour tester rapidement une idée ? Pas si simple. Comme toute innovation, l’effet de hype provoque une dynamique qui laisse penser qu’une nouvelle ère à débuter. Chez Frontguys, nous pensons plutôt qu’il s’agit d’un nouvel outil, formidable, ouvrant de nouvelles perspectives sans pour autant fermer la porte à nos pratiques actuelles. Retour vers le futur pour vous expliquer.

Le No-Code, le What-You-See-Is-What-You-Get 3.0 ?

Certes la filiation parait évidente, pour autant cette nouvelle technologie offre des perspectives plus larges à un plus grand nombre d’utilisateurs. Plus performants que leur prédécesseur, ils sont aussi plus accessibles grâce fonctionnalités comme le « glisser-déposer ». Ainsi, plus besoin de compétences techniques approfondies pour réaliser ou tester rapidement un produit digital. En quelques clics, un Product Manager, un Marketing Manager ou un Designer peuvent créer un Proof of Concept (PoC).

Dreamweaver et consorts n’ont pas mis fin au graphisme et au design. Peu importe l’outil, c’est le processus dans lequel il s’inscrit qui prime. Et tant mieux si d’autres professionnels peuvent se saisir de ce genre d’outil pour faire leur propre prototypeUn prototype est une version initiale d'un produit ou d'une solution qui permet de tester et d'itérer le design avant le développement final. Il peut être cliquable, offrant ainsi une expérience utilisateur interactive More. Cela demande aux designers d’être encore plus créatifs, encore meilleurs pour apporter de nouvelles valeurs ajoutées.

No-Code et UI Design : passion prototype

Si le coeur a ses raisons, le Designer a aussi ses passions. L’art du prototypage avancé est pour beaucoup d’entre nous un domaine dans lequel nous pouvons pousser notre créativité. Pour autant, dans notre quotidien, les opportunités pour proposer à nos clients des animations avancées ne sont pas légions.
Par ailleurs, nous pouvons le constater, tester un prototypeUn prototype est une version initiale d'un produit ou d'une solution qui permet de tester et d'itérer le design avant le développement final. Il peut être cliquable, offrant ainsi une expérience utilisateur interactive More « pixel perfect » sous Figma peut provoquer quelques déceptions chez les utilisateurs. Le décor est trop abouti par rapport aux possibilités de navigationEnsemble de liens et de boutons qui aident les utilisateurs à se déplacer et à trouver des informations dans une interface. More (qui suivent généralement le plan de test).

Or, grâce aux outils No-Code, il est enfin possible de créer rapidement des prototypes dynamiques très réalistes qui permettent de réaliser des tests qualitatifs et quantitatifs sur l’ensemble d’un parcours. Chaque outil à sa propre finalité. Certains outils sont destinés à la création de sites responsives comme Webflow, par exemple. D’autres se sont focalisés sur la création d’applications mobile, comme BravoStudio.

Mais ne vous trompez pas. Ces outils ne sont pas magiques. Pour atteindre ce niveau d’usage, il va falloir plonger dans les outils, passer du temps à les comprendre et tester. Comme tout outil, cela demande humilité, raison et travail pour les maitriser correctement.

Enfin, ne perdez pas de vue q’un outil ne fait pas la créativité de son utilisateur. L’outil permet à l’utilisateur d’exprimer sa créativité lorsqu’il maitrise suffisamment les techniques.

No-Code : 6 raisons pour le tester dans votre entreprise

Nous avons lister 6 raisons de vous lancer dans le No-Code :

• Simplicité : les bibliothèques de composants et de gabarits pré-existants permettent la création d’une interface rapidement
• Rapidité : il est relativement aisé de créer des prototypes
• Qualité : la performance des prototypes permet de réaliser des tests utilisateurs qualitatif et quantitatifs
• Actionnable : un POC rapidement crée permet des prises de décisions rapides
• Automatisation des données au travers de base de données
• Accélération de la transformation digitale des entreprises grâce à des coûts de production maîtrisés

Certes, un liste à puces ne fait pas tout. Il faut maintenant franchir quelques freins à lever avant de pleinement vous lancer dans l’aventure.

No-Code : 4 freins à lever avant de commencer

Comme en physique, tout mouvement entraine des frictions. Elles ne sont pas si nombreuses dans notre cas :

• La prise en main des outils peut-être complexe. Prenez (obtenez ?) le temps nécessaire pour vous y plonger.
• Des connaissances rudimentaires en programmation et base de données peuvent être utiles pour utiliser efficacement ces outils
• Le Design UI est limité par les fonctionnalités des outils. Il faudra trouver vos propres hacks pour arriver au bout de vos idées, parfois.
• Un outil pour une finalité : site responsive ou application mobile, il faudra choisir.
  

La raison du No-Code au service de la passion du UI Design

Les outils no-code sont une avancée majeure dans la création de produits digitaux. Grâce à leur grande accessibilité aux non-développeurs, ces outils permettent de créer, prototyper et tester rapidement un concept, une fonctionnalité auprès des utilisateurs finaux. Ceci sans engager un effort de développement important.

Les outils no-code sont donc des solutions simples d’utilisation et rapides à mettre en place.

Nous retenons particulièrement ceux-ci pour le Design :

• Webflow, la solution e-commerce par excellence
• Bubble, le No-Code pour tester des PoC
• Bravostudio pour concevoir des apps mobiles
• Anima, responsive design & prototypeUn prototype est une version initiale d'un produit ou d'une solution qui permet de tester et d'itérer le design avant le développement final. Il peut être cliquable, offrant ainsi une expérience utilisateur interactive More

Même si les outils No-Code reste un must-have pour les designers. La qualité de vos interfaces dépendent de la créativité du designer. Le reste n’est affaire que de technique… La tentation de confondre raison et passion est grande. La technique doit toujours être au service du designer et non l’inverse.

Pour aller plus loin

Les solutions no-code font partie intégrante d’un écosystème d’outils s’intégrant dans le scope du DesignOps. Vous souhaitez en savoir plus sur le DesignOps ? N’hésitez pas à télécharger notre livre blanc : Introduction au DesignOps par FrontGuys

N’hésitez pas, également, à regarder cette video pour en savoir plus.