Wireflow : outil open source gratuit en ligne pour prototyper des parcours utilisateur

• Wireflow est un outil gratuit en ligne qui permet de créer rapidement des prototypes de parcours utilisateur sans outil de design complexe ni kit séparé
• Il propose plus de 100 graphiques/cartes et 113 flows, permettant de combiner immédiatement des éléments web, des interactions et des cas d’usage courants
• Il prend en charge la collaboration en temps réel et le chat en direct, afin d’inviter des collègues et de concevoir ensemble des parcours dans la même application
• Les droits d’accès aux projets/salles peuvent être gérés en mode public ou privé, et l’outil inclut des fonctions d’édition de base comme le zoom, les connecteurs et l’annulation
• Il s’agit d’un prototype de type side project réalisé en moins d’un mois ; la validation de l’idée a réussi, mais des bugs potentiels peuvent subsister

---

Un outil pour démarrer rapidement la conception de parcours utilisateur

• Wireflow est un outil gratuit, en ligne et open source destiné à créer des prototypes de parcours utilisateur
• Son objectif est de permettre le cadrage initial d’un projet et le brainstorming sans avoir à acheter Photoshop, Illustrator, des wireframes ou des kits de parcours utilisateur
• Il fournit plus de 100 graphiques/cartes, incluant des éléments web, des interactions et des cas d’usage courants
• 113 flows sont disponibles au choix, répartis dans 10 catégories
  • All
  • Article
  • Blog
  • Features
  • Gallery
  • Header
  • Misc
  • Multimedia
  • Sign In
  • Social

Collaboration et contrôle d’accès

• Pensé pour la collaboration en temps réel, l’outil permet d’inviter des collègues à travailler ensemble sur le même projet
• Grâce au chat en direct intégré, il est possible d’échanger avec les membres de l’équipe dans la même application pendant la conception
• Les droits d’accès peuvent être définis au niveau du projet ou de la salle, avec un réglage public/privé

Fonctions d’édition et composition open source

• Les outils d’édition de base offrent les fonctions nécessaires pour placer et modifier rapidement des parcours utilisateur
  • Zoom
  • Connecteurs et flèches
  • Déplacement du canevas
  • Annuler / Rétablir
  • Suppression de l’en-tête
  • Modification du texte de l’en-tête
  • Mettre au premier plan / Envoyer à l’arrière-plan
  • Raccourcis clavier
• Wireflow est un projet entièrement open source et peut être consulté sur GitHub
  • Open Source
• La stack technique se compose de Node.js, Meteor.js et React.js
  • Node.js : runtime JavaScript basé sur le moteur JavaScript Chrome V8
  • Meteor.js : plateforme pour créer des applications web et mobiles en pur JavaScript
  • React.js : bibliothèque JavaScript déclarative pour construire des interfaces utilisateur

État du projet

• Il s’agit d’un side project développé rapidement en parallèle d’autres projets majeurs en cours à l’époque, avec moins d’un mois de développement
• Dans son état actuel, il s’apparente davantage à un prototype gratuit validant une idée d’application simple mais utile, et il peut contenir des bugs

[GN⁺]

Commentaires sur Hacker News

• À première vue, ça semble utile, mais je ne sais pas si c’est encore maintenu
  La branche main sur GitHub n’a pas été mise à jour depuis des années : https://github.com/vanila-io/wireflow

  • À l’origine, Wireflow a été créé avec Meteor, et il existait alors un moyen de sauvegarder les données
    Il a ensuite été réécrit en React, mais il n’y avait toujours pas de moyen de sauvegarder les données, et les mainteneurs ont aussi eu d’autres projets qui leur prenaient l’essentiel de leur temps
    Du coup, je me demande s’il y a encore des gens intéressés par ce type d’outil, s’il y a des personnes qui voudraient davantage contribuer à Wireflow, ou si de nouvelles actualités autour d’outils similaires pourraient relancer l’intérêt pour sa maintenance
    C’est une réflexion que je me fais en tant que l’un des mainteneurs de Wireflow

• J’ai cliqué et j’ai pu commencer à dessiner tout de suite, avec export en image possible
  Pas de connexion ni d’inscription, c’est vraiment appréciable

  • L’absence d’inscription, c’est bien
    En revanche, je ne comprends pas bien ce que signifie « dessiner », ni s’il est censé y avoir un véritable outil de dessin
    Ça ressemble plutôt à un ensemble de modèles pour créer un sitemap, et je ne sais pas non plus si l’outil est censé couvrir jusqu’aux patterns de design mobile
    Je comprends que ça ait été fait en moins d’un mois, mais on dirait qu’en passant quelques jours à apprendre quelque chose comme Principle(https://principle.app/), on pourrait finir le reste du travail en deux semaines et obtenir à la fin un prototype complet et interactif

• Ça a l’air chouette
  Le lien vers la vidéo YouTube dans le README GitHub ne s’ouvre pas : https://youtu.be/zm0XbLmXtXY
  J’aimerais voir une vidéo de démo plus récente

• Je suis un peu perplexe sur la manière dont c’est censé être déployé
  C’est présenté comme une application web installable, mais sur Chrome pour Android, ça semble complètement cassé
  Je ne sais pas trop à quoi je m’attendais en vérifiant sur téléphone, mais au minimum ça devrait pouvoir fonctionner sur tablette
  Sur téléphone, l’usage peut se limiter à la consultation plutôt qu’à l’édition du projet, et dans un vrai contexte pro on peut avoir besoin de revoir des changements entre deux réunions et de répondre à un fil d’e-mails ou à un chat Teams
  Si on doit continuer à se battre avec des exports PDF de la énième révision du design d’une app, c’est le pire scénario, et tout le monde déteste ça

• J’ai déjà écrit autrefois à propos de l’idée de créer ce genre de diagrammes de flux à partir de wireframes réellement réduits de manière intelligente : https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
  J’aimerais intégrer ça un jour dans ma petite app UX(https://www.tinyux.app), mais je n’ai pas encore eu le temps de m’y mettre
  Si on pouvait faire en sorte que, quel que soit le point d’entrée — flux, pages ou composants — tout repose au final sur une même source unique de vérité, ce serait vraiment génial
  Quand j’avais présenté cette vision et ce concept à un groupe de designers UX, la réaction avait été excellente, mais quand j’ai montré un prototype avec des commandes texte façon Vim pour manipuler les wireframes, tout le monde est resté avec un air vide
  Le décalage entre leurs attentes et la réalité me fait encore rire

• Quelqu’un connaît un projet similaire écrit en Vue.js ?

• Dans la barre latérale des fonctionnalités, il y a permisions, ce qui semble être une faute pour permissions

• Ça a l’air vraiment utile
  Je me demande si ce serait facile à forker pour en faire une version avec des icônes de game design

  • Je ne comprends pas bien quel est l’objectif de ce projet
    On peut ajouter des écrans, mais les graphismes sont basiques et seul le texte est modifiable
    On peut aussi ajouter les relations entre les écrans, mais elles ne sont pas cliquables
    Donc ça ressemble à un sitemap, mais est-ce que c’est tout ?

• Qu’est-ce qu’un prototype de flux utilisateur ?

  • C’est l’ensemble des étapes par lesquelles passe un utilisateur pour accomplir une tâche donnée
    En général, ce n’est pas un design final mais quelque chose de basse fidélité, comme des wireframes, et le terme prototype signifie probablement qu’on peut cliquer pour naviguer entre les écrans, comme dans un prototype Figma
    Par exemple, pour un formulaire de connexion, on peut montrer l’état initial → l’état d’erreur → l’état d’envoi → l’état de réussite, et on peut appeler cela le « flux de connexion utilisateur »

• « It have built in live chat which give you ability to communicate with your team mate and still be in the same app while you collaborating in real-time. »
  Je ne cherche pas à faire de remarques sur la grammaire, mais si quelqu’un de l’équipe lit ceci, ce serait bien de retravailler un peu cette phrase