Le prototyping web fin 2016
2016, la guerre des outils de design digital fait rage… pour notre plus grand bonheur ! Nous sommes entrés dans une ère où les différents éditeurs de logiciels redoublent de créativité pour mettre à notre disposition des outils performants permettant de simuler des expériences utilisateurs au plus proches du produit final.
Un jour dans l’Histoire…
La courte, celle de la PAO et du web design, promis, je fais vite (2 paragraphes).
Au début du 21 siècle
Adobe a acquis à sa cause les graphistes et designers de tout bord grâce à sa « Suite » : un pack de logiciels permettant pour qui fait l’investissement de pouvoir quasi tout faire : de la production infographique de haut niveau (Photoshop), de la post-prod vidéo (Premiere, After Effect), de l’édition pré-presse (InDesign), de l’illustration au sens large (Illustrator). En rachetant la société Macromedia en 2005, elle élargit alors sa cible aux nouveaux métiers du web : les codeurs (DreamWeaver), les fans d’animations (Flash et son langage ActionScript) et les webdesigners (Fireworks).
Macromedia/Adobe Fireworks
J’ai été un grand adepte de Fireworks, car c’est resté longtemps un des rares outils matures complètement dédiés au métier de webdesigner : gestion du multipages et déjà à l’époque des interactions entre les pages au survol ou clic de souris (avec même un export de code pourri pour qui voulait éviter à tout prix de mettre les mains dans le cambouis). Les autres designers privilégiant généralement Photoshop pour sa puissance malgré le fait qu’il n’ait jamais été un logiciel orienté pour le webdesign. Mais au final, Adobe, en reprenant Macromedia, n’a jamais réellement investi dans Fireworks.
Ensuite ?
L’arrivée du « Cloud » qui a soit obligé Adobe à changer sa politique commerciale soit au contraire a tout chamboulé en interne. J’ai toujours penché pour la seconde hypothèse tant la version cloud de la suite Adobe m’a semblé plus complexe, mal gérée, voire buggée. Ensuite, Adobe a annoncé la fin du support de Fireworks (2013) et le non-support du player Flash sur iOS a sonné le glas de Flash (2015). Seul rescapé de l’équipe web d’origine : Dreamweaver (en version CC2015 actuellement). Il y avait donc une fameuse brèche dans laquelle se plonger d’autant que les métiers du web avaient dans l’intervalle pas mal évolué (l’explosion des supports de tout type n’est qu’un seul des facteurs d’évolution) nécessitant parfois de faire appel à des outils qui n’étaient absolument pas dédiés à ces tâches (j’au vu des wireframes réalisés avec PowerPoint).
Aujourd’hui
Il existe désormais une kyrielle de ressources pour gérer les phases de design interactif : mindmapping, sitemap, workflows, zoning, wireframes statiques et interactifs, layouts graphiques statiques et animés et j’en passe bien entendu…
Parmi les dignes successeurs de Fireworks, on cite souvent Sketch qui, bien qu’outsider d’Adobe, a su conquérir le coeur des web designers par une série de fonctionnalités complètement dédiées à leurs préoccupations. Bohemian Coding (l’équipe derrière Sketch) a réellement ouvert les portes de la créativité dans le domaine applicatif design, désormais il n’y a pas un mois sans que je ne découvre de nouveaux outils pour les designers d’interfaces que ce soit sous forme d’applications natives, d’applications web ou encore de plug-ins permettant de compléter les fonctionnalités d’outils existants voir de les synchroniser entre eux.
Prototyping
Un des enjeux du moment. Par ce terme, on entend qu’une des grandes préoccupations des designers aujourd’hui est de pouvoir prototyper au plus proche du rendu final leurs idées d’interfaces visuelles. Il ne suffit plus de dessiner quelques boites schématisant les objets de contenu à agencer ou de présenter quelques mockups graphiques hyper léchés aux clients. Il faut désormais les convaincre en leur faisant vivre une expérience d’utilisateur : « en cliquant là tu pars sur cette page », « si tu swipes sur la droite, l’élément disparait vers le haut », « si tu cliques sur le bouton, un menu contextuel apparait par la droite », etc.
En simplifiant, on pourrait dire que les 5 enjeux d’un prototype aujourd’hui sont :
- L’interactivité : pouvoir simuler plusieurs scénarios d’utilisation (workflows) des fonctionnalités disponibles (ouverture d’un menu, lien vers une autre page, suppression d’un élément…)
- Le rendu visuel : être au plus proche de ce que les navigateurs ou OS (Android, iOS…) peuvent proposer aujourd’hui
- Les micro-animations : les smartphones nous ont désormais habitués à ce que l’interface réagisse de manière plus humaine, plus subtile, plus fun (un exemple simple : le scroll dans la page va s’adapter à la vitesse de défilement du doigt sur l’écran)
- L’adaptabilité aux supports de consultation : smartphones, tablets, PC, TV, montres connectées…
- La conversion : pouvoir le plus rapidement possible transformer les prototypes en produit fini
On va le voir, l’outil intégrant à la perfection ces 5 enjeux n’existe pas encore et chacun a ses forces et ses faiblesses qui sont généralement liées à une mise en avant d’un ou plusieurs de ces facteurs.
Les nouveaux outils de prototyping
Difficile d’être exhaustif une fois qu’il s’agit de présenter l’ensemble des outils disponibles. Difficile également d’être objectif, voici donc une sélection opérée sur base des critères listés plus haut. J’ai également fortement orienté le choix vers des solutions intégrant une compatibilité avec Sketch, l’idée étant de trouver une continuité dans le travail de design en ajoutant une corde à son arc.
1. Atomic + Sketch
Atomic est une application web permettant de designer des prototypes interactifs. L’accent est donc avant tout mis sur les micro-animations et la possibilité de créer des interactions entre les objets et pages. Depuis peu, un plugin pour Sketch permet de synchroniser ses designs avec l’application en ligne.
Pour
- Micro-animations facilement implémentables pour offrir une expérience utilisateur de bonne qualité;
- les fonctions d’alignement automatiques, … bien que l’édition se fasse dans un navigateur, de manière générale, Atomic réagit correctement aux sollicitations de l’utilisateur;
- Fonctions avancées pour gérer les animations (delay, rotation, opacité…)
- Le partage des prototypes directement dans le navigateur (via URL)
Contre
- L’interactivité est limitée à des liens vers d’autres pages. Il est possible de simuler des interactions locales dans une page (un menu qui s’ouvre…) mais cela passe par la duplication de la page, système assez lourd;
- Support limité de typographies (Google Fonts, quelques fonderies partenaires, l’import de fichiers woff uniquement);
- La possibilité de laisser des commentaires n’est possible qu’en version PRO, pas STARTER;
- La version gratuite n’est accessible que temporairement (freemium temporaire) .
Atomic est un outil assez fastidieux si on souhaite animer des mockups graphiques. On gère rapidement beaucoup d’objets avec lesquels interagir et le moindre changement (itération client,…) demande de devoir opérer de nombreuses corrections. Au final, le rendu des prototypes peut être très léché bien que l’application peut ramer si le nombre d’animations est conséquent. Je le trouve un peu limité dans ce qu’il peut faire par rapport au prix de l’abonnement mensuel à payer. Quant au plugin Sketch, il s’avère également fastidieux : plantage de Sketch avec des layouts complexes, lourdeur également lors de la preview sur Atomic. Enfin, la synchronisation n’est en fait qu’un système d’export : si vous éditez à nouveau votre fichier Sketch pour apporter une correction quelconque et que vous réexportez la page vers Atomic, cela va créer une nouvelle instance et non mettre à jour le prototype équivalent. Dans son état, Atomic m’apparaît plus comme un outil permettant de tester à petite échelle un workflow particulier comme les interactions sur une page unique par exemple.
atomic.io
A partir de 15$/mois pour 5 projets/prototypes
2. Principle + Sketch
Principle est une application native uniquement disponible sous Mac. Nous l’utilisons pas mal chez Spade, car il permet de faire du prototypage rapide avec un bon niveau de rendu dans les effets de transitions et animation.
Pour
- La possibilité de faire des screencasts directement depuis Principle (petites vidéos pour visionner les prototypes et leurs interactions)
- Une courbe d’apprentissage rapide et résultat satisfaisant assuré
Contre
- L’interactivité est limitée à des liens vers d’autres pages. Il est possible de simuler des interactions locales dans une page (un menu qui s’ouvre…) mais cela passe par la duplication de la page;
- Les tutoriels sommaires ;
- Pas d’outil de reporting ni d’espace de partage des prototypes (uniquement des vidéos ou le visualisateur interne de Principle)
C’est sans doute l’outil qui a le meilleur rapport qualité/prix si on souhaite faire du prototypage rapide . Néanmoins, comme beaucoup d’autres outils, dès que l’on veut des prototypes plus complexes (beaucoup d’écrans, beaucoup d’objets avec lesquels interagir), cela devient rapidement une usine à gaz. Et carrément ingérable si vous devez repasser dans Sketch pour adapter votre design. Heureusement l’import depuis Sketch est un des plus efficaces testés jusqu’à présent.
principleformac.com
License : 129$
3. Sketch + Flinto
Flinto est une application native uniquement disponible sous Mac. Flinto est assez semblable à Principle dans la manipulation et les panels d’outils. Également dans les modes de visualisation via un viewer natif.
Pour
- Tutoriels bien faits qui permettent un démarrage rapide
- Les transitions mises en place sont réutilisables, plutôt pratiques si on veut appliquer un même type de transition sur plusieurs boutons.
- L’import multiple possible depuis Sketch. Si on importe un design modifié dans Flinto, le plugin va simplement mettre à jour les bons layers dans les pages créées.
- La fonction « behaviors » qui permet de définir des modifications locales sur des objets. Comparée par exemple à d’autres outils, cette fonction permet de gagner en facilité pour gérer une quantité de micro-animations se déroulant sur une page : effet roll over sur un bouton, changement d’apparence d’une barre de navigation au scroll, etc.
Contre
- Attention: l’export vers Flinto depuis Sketch doit se préparer. On apprend ainsi dans le tutoriel qu’un répertoire sans sous-groupe sera fusionné en un calque image (on n’a pas trop bien compris pourquoi). Tous les calques exportés deviennent des images (vecteurs, textes…). Les masques seront exportés à la taille de l’objet masqué et non à la taille du masque final (utiliser la fonction « flatten selection to bitmap dans Sketch). L’import-export depuis Sketch a donc ses limites voire des lacunes certaines…
- Le peu d’objets natifs dans la barre d’outil : image ou rectangles seulement. Pas de texte, de vecteurs… Il manque encore pas mal de petits outils qui faciliteraient les manipulations, ce n’est pas toujours très intuitif.
- Partage des prototypes très limité : en dehors du viewer de l’application, il n’existe pas de moyen de visualiser le prototype. Si on veut faire tester un utilisateur sur son matériel à lui (smartphone, Mac…), il lui faudra donc installer l’application sur son terminal. Au moins dans Principle pouvions-nous créer un screencast partageable (Slack, Dropbox…)
Nous avons été assez impressionnés par la qualité des interactions et animations. Par contre ce n’est pas un outil de design au niveau du layout. Il est impératif d’avoir un outil en amont pour cela (Sketch) et de bien préparer ses fichiers et d’être ainsi conscient que Flinto ne servira qu’à animer les objets et gérer les interactions rien de plus. Mais vu que les imports successifs sont possibles, on trouve assez vite un rythme de travail avec les deux logiciels ouverts, l’un pour les adaptations de layouts, l’autre pour les interactions et animations. Ses nombreuses fonctionnalités au niveau des « gestures » (tap, swipe, touch, hover…) en font un outil surtout intéressant pour le prototyping pour les applications mobiles (on ne s’y trompe pas : l’ensemble des tutoriels montre des exemples mobiles). Pour du prototyping web, nous privilégions d’autres outils qui nous permettent de garder plus de maitrise sur le layout avec des interactions certes moins avancées, mais permettent un prototypage plus rapide.
flinto.com
License : 99$
4. Framer JS + Sketch
Framer JS est une application native Mac. Son fonctionnement est assez différent des autres solutions explorées jusqu’à présent. D’un côté, le plan de travail se résume à un éditeur de code ce qui, d’un premier abord, laisse entendre qu’il s’agit d’un outil plus orienté développement et moins design. De l’autre, si on l’utilise avec Sketch, Framer JS va en fait permettre de piloter son fichier Sketch via le code en générant soit de nouveaux comportements soit en animant les objets présents dans le fichier Sketch. Ce qui en fait un outil assez puissant et surtout une base de code réexploitable pour la suite du projet (CoffeeSript générant ensuite du javascript).
https://youtu.be/3zaxrXK7Nac?t=1m3s
Pour
- Le Get started permet de se familiariser très rapidement avec le code et d’en comprendre l’intérêt et la puissance
- La fenêtre de visualisation customisable
- La précision des interactions que l’on peut obtenir grâce au code
- Le partage des prototypes via URL
- Le code réexploitable en aval du projet
Contre
- Quelques ratés encore dans la fonction d’autocode (la possibilité d’utiliser des fenêtres pour modifier les paramètres plutôt que de coder)
- Assez complexe à utiliser sur un projet complexes (multi-pages, ….)
On a particulièrement apprécié l’approche différente de FramerJS, le « pilotage de Sketch » est tout simplement la plus intelligente dans le sens où l’on peut continuer à faire évoluer son design en parallèle du prototypage. On oublie par contre l’idée de réaliser des prototypes rapidement et nos tests ne nous ont pas permis encore de l’envisager dans des projets de plus grande ampleur (l’entreprise nous semble chronophage).
framerjs.com
A partir de $129
5. Sketck/Photoshop + InVision Craft
InVision est une plateforme web collaborative qui permet de mettre en partage du design d’interfaces. Désormais largement utilisé par les agences et les designers, son grand atout est de permettre de rassembler un historique de commentaires localisés sur les interfaces partagées avec les intervenants sur le projet.
Il est également possible d’envisager des interactions entre les écrans via des « Hotspot » : des zones invisibles d’actions qui permettent de simuler des interactions de type menu contextuel, fenêtre modale, transition vers un autre écran etc.
Chez Spade, on est grand utilisateur d’InVision. Mais nous sommes également très frustrés dès qu’il s’agit de mettre en place des prototypes plus avancés faisant appel à de nombreux hotspot. Le versioning devient assez vite ingérable et ce qui marchait dans une v2 ne marche rapidement plus dans une v3 à cause du nombre de paramètres à modifier. Bref, on s’est rapidement tourné vers d’autres solutions pour des projets design plus exigeants.
Mais récemment InVision a sorti Craft : une application Mac qui vient ajouter des fonctionnalités à Sketch ou Photoshop. La version actuellement téléchargeable est limitée à des outils somme toute anecdotiques : librairie d’images, générateur de textes, aide à la duplication de contenu, etc. Mais une fonctionnalité arrive prochainement appelée, je vous le donne en mille, « prototype ». elle permettra justement de générer au sein même de Sketch des interactions entre pages. J’ai eu accès à la béta privée intégrant cette nouvelle fonctionnalité, mais ayant signé un NDA, je me limiterai à dire c’est prometteur. A suivre donc.
www.invisionapp.com
Freemium
www.invisionapp.com/craft
Gratuit
6. Adobe XD
Adobe a donc également sorti récemment son application native de prototyping (accessible uniquement en « preview » depuis Creative Cloud). Dès les premières minutes d’utilisation, on se dit qu’on n’est pas loin de Sketch en moins perfectionné au niveau des outils de mise en page, mais il dispose cependant de bons atouts.
Pros
- Le switch qui permet de passer du mode « Design » au mode « Prototype » (interactions entre les plans);
- Les transitions entre écrans sont paramétrables et on peut gérer différentes formes d’animation ;
- L’itération facile si on doit produire différentes versions du même projet
- Le projet exemple disponible au lancement de l’application : un bon didacticiel pour découvrir les particularités d’Adobe XD
- La possibilité d’enregistrer le test utilisateur sous forme de vidéos partageables
Cons
- Pas de gestion d’overlays, donc l’apparition et/ou l’animation d’objets en restant sur la même page. Les interactions ne se font que d’une page vers l’autre.
- Pas de possibilité de delay
- Pas de styles ou de templates de hotspots ;
- En preview sur un iPad, on garde la barre de navigation de Safari, c’est pas très « applicatif » surtout pour un projet tablet ;
- Pas de gestion de feedback (commentaires) ;
Bien que l’ombre de Sketch plane au dessus de XD, Adobe a creusé une voie très intéressante avec son approche « prototype ». L’outil peut rapidement évoluer positivement notamment sur ces fonctionnalités d’édition (intégration d’une vue « layers », fonctionnalités avancées export, symboles…). L’autre atout d’Adobe vis-à-vis de son concurrent direct Sketch est son approche multiplateforme Mac et Windows là où Sketch n’est disponible que pour les fans d’Apple.
www.adobe.com/fr/products/experience-design.html
7. Les autres
Citons parmi d’autres :
En conclusion
Quel outil choisir ? Chez Spade, nous avons toujours évité de se confiner dans une seule méthode capable de gérer l’ensemble des processus design. Chaque projet met en avant des enjeux plus importants que d’autres et nous nous laissons chaque fois le choix de combiner les outils qui nous paraissent les plus appropriés au contexte du projet. C’est la réponse bateau, celle qui ne fâche avec personne me direz-vous. Certes 🙂 Dans la pratique, les conditions et priorités sont multiples :
- Besoin d’un prototypage rapide pour tester des workflows sans pour autant chercher à convertir le travail en réelle application : dans ce cas, une série de schémas papiers agencés avec Marvel peuvent faire l’affaire par exemple.
- Besoin de tester la navigabilité d’un site web dans différents contextes de consultation (smartphones, tablet, desktop…) : installer un framework comme Bootstrap peut rapidement permettre de confirmer des hypothèses d’autant que la structure HTML sera réexploitable par la suite. Aussi très pratique pour prendre conscience des objets de contenu à mettre en place techniquement et par l’équipe éditoriale
- Besoin de pouvoir produire de nombreux écrans avec un rendu visuels le plus définitif possible
- Besoin lié à un type de terminal en particulier (mobile, tablet, PC, TV…)
Cette évolution du métier pose également quelques questions :
- Tous ces enjeux de design à traiter signifient passer plus de temps sur cette phase du projet avec un impact non négligeable sur le budget. Evolution positive ? On constate de plus en plus chez nos clients une plus grande compréhension des phases de conception etainsi une plus grande acceptation que ces phases sont importantes pour l’efficacité du projet. Néanmoins, la friction reste de mise et cela reste souvent perçu comme des phases du projets moins prioritaires.
- Comment s’assurer ensuite que l’équipe de développement va pouvoir prendre en compte avec le même souci du détail l’ensemble de ces enjeux ?
Pour répondre à ces deux questions : la spécialisation. Une fois de plus les métiers de la communication digitale évoluent et intègrent de nouvelles spécialités : UX Designer, Graphic Designers, UI designers, Motion Designers, Interaction Designers, …
