Transycons crée de plus en plus de prototypes interactifs, via un travail de design collaboratif avec les clients.
Pour ce faire, nous utilisons selon les cas et souhaits des clients Adobe XD ou Figma.
Grace à ces deux outils, les développeurs web peuvent réaliser de véritables prototypages des futurs sites web ; interaction entre les éléments, slides, boutons…
Il existe par ailleurs des cas ou certaines agences web clientes nous mettent directement à disposition des maquettes / éléments sous Figma / XD.
Toute l’interactivité souhaitée peut être montrée sans recours à de la programmation (les possibilité d’export de cette partie pour l’intégrer au site développé sont hélas encore très limitées, mais c’est peut être voulu ?)
Les 2 systèmes de prototypage se ressemblent beaucoup, mais on peut signaler quelques différences / points forts :
Les points forts d’Adobe XD
Tout d’abord, les liaisons avec autres produits Adobe, (Photoshop, Illustrator…) donc il est très facile de récupérer et d’intégrer les travaux qui ont été réalisées sur d’autres logiciels Adobe.
XD possède une interface simple et intuitive
Les prototypes interactifs réalisés sont très réalistes.
Enfin, Adobe XD offre une grande versatilité (travail en ligne, en local, sur cloud, en solo ou en équipe)
Ce qui avantage Figma
On travaille directement dans le cloud sans avoir à synchroniser / transférer les données et risquer de multiplier les versions. Les fichiers sont par définition toujours à jour.
Figma est très rapide
Les fichiers réalisés sont actifs sur le web
Figma a été conçu pour la collaboration, le partage des fichiers est donc très simple.
Il Permet la précision jusque dans le moindre détail.
Enfin Figma permet (contre toute attente) un import facile des images réalisées sous d’autres logiciels
Design collaboratif pour se représenter le résultat
Les clients finaux ont parfois beaucoup de mal à spécifier leur besoin web… ce problème est (au moins!) aussi vieux que le web. Les acheteurs de sites ou applications web ont du mal à décomposer, à voir toutes les implications de telle ou telle demande fonctionnelle. Ils peuvent aussi avoir des difficultés à rédiger de manière suffisamment exhaustive les fonctionnalités et interactions souhaitées en utilisant des mots explicites.
Il y a aussi des cas ou leur demande leur paraît claire, mais en respectant à la lettre le besoin exprimé, les graphiques web arrivent à un résultat très différent de ce que le client avait en fait en tête…
Souvent aussi le fait même de voir un rendu graphique aide le client à préciser son souhait… ou lui donne de nouvelles idée…
C’est tout l’avantage du design collaboratif. On peut avancer par étapes, par « sprints », et les changement apportés sont bien moins coûteux que si il avait fallu modifier en cours ou à la fin du développement d’un site. On clarifie certains points en cours de route, sans avoir à tout rédiger dès le début, ce qui rebuterait beaucoup certains clients. (soit il n’ont pas la capacité de concentration sur une longue période compte tenu de leurs activités quotidiennes, soit ils ne disposent tout simplement pas du temps nécessaire).
Le fait qu’il existe dans Figma de multiples “boards” visibles en parallèle facilite aussi les comparaisons et une meilleure vision d’ensemble pour le client.
Enfin, les clients peuvent donner un feedback (remarques, suggestions…) directement sur les documents partagés. Cela se fait souvent avec des droits partiels, pour éviter de risquer d’altérer le travail du web designer. Ce système simplifie beaucoup les échanges et facilite/accélère la collaboration, même à distance.
Gagner du temps et de la productivité
Quand on compare l’interface d’Adobe XD par rapport à celle de Photoshop, celle d’XP et beaucoup plus claire et épurée. Ceci est un vrai plus pour les graphistes juniors.
On pourrait craindre de perdre en précision ou en efficacité, mais ça n’est pas le cas. Par exemple le bouton “repeat grid” de XD permet de dupliquer horizontalement ou verticalement un élément que l’on vient de créer. Cela fait gagner un temps précieux.
On notera aussi que le fait d’avoir bien cadré en amont le travail des développeurs via la création de prototypes est aussi une manière de rendre les programmeurs plus efficaces, en leur évitant d’avoir à remettre en cause en cours de route certaines parties de leurs travaux. Ils sont mis sur des rails…
Séparer les prestations web = rester indépendant
La création des prototypes, auxquelles on agrège ensuite souvent celles des maquettes graphiques, est de plus en plus vue comme une étape spécifique d’un projet web. Il est donc possible de confier cette étape à un prestataire sans être nécessairement engagé avec lui sur l’ensemble du projet web, et a fortiori sa maintenance évolution.
Nous avons eu récemment un tel cas de figure. Après des échanges initiaux très prometteurs pour la création d’un portail libanais, il nous a été signifié que le prestataire recherché devait nécessairement avoir une implantation au proche orient, ce qui n’était pas du tout notre cas.
Du coup, la cliente nous a confié uniquement la première partie de son projet, à savoir la création des prototypes et maquettes du portail, puis le projet est passé à une entreprise du golfe pour la phase du développement. Nous avons recueilli une confidence intéressante de la part du chef de projet de l’entreprise de développement : son équipe était persuadée que nous essayerions de leur savonner la planche, du fait que nous n’avions pas obtenu la plus grosse partie du marché. Or nous avons collaboré avec eux pour la transmission des données comme nous l’aurions fait en interne, ce qui les a beaucoup surpris. Le sabotage n’est vraiment pas le genre de Transycons…
En conclusion, le prototypage est un complément et un précurseur des maquettes graphiques « classiques » souvent réalisées avec Photoshop.
Cette méthode implique que les graphistes web doivent changer de logique, réfléchir autrement. C’est donc aussi un moyen bienvenu de lutter contre la routine.
Par ailleurs, les concepteurs de Figma et Adobe XD rajoutent régulièrement de nouvelles fonctionnalités, (comme par exemple pour les vidéos ont été ajoutées et peuvent être intégrées de manière de plus en plus performante à Figma). Les concepteurs de Figma et XD tiennent manifestement aussi largement compte des remarques et suggestions des utilisateurs. Il n’est donc pas surprenant que les parts de marchés de ces deux outils de conception web aient si fortement progressé en aussi peu de temps.