Que choisir ? Sketch, Adobe XD, Axure, etc. ?

Méthodologie UX

#Introduction

Quand je me suis attaquée à la rédaction de cet article, l’une des choses qui m’a surprise est le nombre d’outils à disposition pour designer et prototyper. Moi qui voulais faire un article sur les “meilleurs”, je suis vite revenue sur ma décision. Sur une cinquantaine de ces programmes, je devais en avoir utilisé 5 ou 6, et en connaitre une vingtaine de nom. Ce n’est pas en les utilisant tous pendant 5 minutes que j’aurais pu avoir une vraie opinion sur eux.

J’ai donc préféré me concentrer sur les outils pour faire de l’UI web et mobile et en particulier ceux qui étaient les plus utilisés autour de moi, à savoir Sketch, Adobe XD et Axure. Cela m’a permis de récolter les avis de leurs utilisateurs. Je garde toutefois dans l’idée de faire un prochain article sur les outils de prototypage.

Axure, pendant le paramètrage d’un effet

#Axure

Axure est l’un des logiciels les plus anciens pour faire de l’UI et du prototypage. Il a été traduit en français et présente l’avantage d’être disponible sur Mac et sur PC.

1. Caractéristiques techniques et prix
Point important à voir pour ce type de programme : le prix. Et justement, je ne suis pas vraiment convaincue. D’un côté, la version pour les étudiants et professeurs est très intéressante puisqu’elle est gratuite. D’un autre, celle pour les professionnels et pour les équipes est très chère : respectivement 27€ et 46€ pour un abonnement au mois contre 460€ et 832€ pour un achat complet.

Heureusement avec la version d’essai fixée à 30 jours, on a largement le temps de se faire un avis sur ce logiciel, et de savoir s’il nous convient ou non.

2. Prise en main
Par défaut, Axure propose plusieurs bibliothèques d’objets. Toutefois, celles-ci sont très limitées et il est assez compliqué d’en trouver d’autres plus complètes, et ce, encore plus sur l’environnement iOS. Du coup, la première chose à faire lorsqu’on commence à utiliser Axure, est de s’armer de courage et de patience, et de partir en quête de meilleurs bibliothèques.

Bien que beaucoup de raccourcis correspondent plus ou moins bien aux outils de la suite Adobe, la prise en main de l’outil est assez laborieuse. L’interface est visuellement surchargée avec ses fenêtres d’outils pleines d’onglets et ses listes déroulantes en tous genres.

Personnellement, quand je me suis retrouvée avec l’interface sous les yeux, j’étais ravie d’avoir une gentille personne sous la main qui m’a expliqué le fonctionnement du logiciel. Il faut dire que l’outil commence à dater un peu (mais quand même !).

3. Utilisation
Il est assez compliqué d’obtenir des prototypes au format image pour des propositions commerciales avec Axure et de montrer clairement des intentions graphiques. Bien que les fonctionnalités soient là pour le faire, je trouve que cet outil n’est pas adapté pour faire du design pur étant donné son interface très “brouillon”. Axure est finalement plus un “Photoshop du wireframe” plutôt qu’un “Photoshop de l’UI”.

Cependant, s’il s’agit d’imaginer des prototypes rapides pour le début de la conception de sites web ou d’applications mobiles, où seuls des wireframes sont vraiment nécessaires, Axure me semble tout à fait adapté. Étant donné le nombre important de possibilités que ce logiciel offre pour gérer des interactions entre et sur les différentes pages, il est facile d’imaginer différents chemins utilisateurs et d’avoir une vision globale sur un projet.

La personne avec qui j’avais pu m’entretenir sur Axure trouvait qu’il s’agissait d’un outil parfait pour faire du “prototypage fidèle et fonctionnel pour réaliser un test utilisateur”. Je ne suis pas tellement d’accord avec elle sur ce point, notamment à cause de la partie DA que je trouve trop compliquée à imaginer avec ce logiciel.

Axure est donc plus un outil d’itération que de création. Dommage. Pourtant les outils sont bien là pour en faire. Il est d’ailleurs possible de générer des prototypes sur navigateur où des clients potentiels peuvent laisser des commentaires et des retours.

Adobe XD

#Adobe XD

Parmi les trois logiciels que je vous présente aujourd’hui, Abobe XD est clairement mon préféré. Adobe a lancé ce logiciel il y a plus d’un an maintenant et je ne m’en suis toujours pas lassée malgré les nombreux reproches que j’ai pu lui faire et/ou que je lui fais encore.

1. Caractéristiques techniques et prix
Premier point technique important : Adobe XD est disponible sous Mac ET Windows. Malheureusement, après des mois et des mois d’attente des utilisateurs Windows, il n’est toujours disponible que sous la version Windows 10 (ce qui a fait déchanter un certain nombre de mes collègues).

Deuxième point : le prix. Pour les utilisateurs du Creative Cloud d’Adobe, pas de problème. Adobe XD est compris dans la suite, donc pas besoin de prendre un abonnement en plus. Cependant, pour les personnes qui ont choisi de se détacher du géant qu’est Adobe, c’est plus compliqué. Il y a toujours la possibilité de le tester grâce aux 30 jours d’essai gratuit de la suite, mais une fois ce délai passé, il faudra prendre un abonnement ou se créer de nouveaux identifiants.

2. Prise en main
Pour ce qui est de la prise en main, je n’ai pas énormément de critiques négatives à faire.
Contrairement à ce que reprochent les utilisateurs de Sketch à Adobe XD, je trouve l’interface épurée très agréable. À la différence de son concurrent, je trouve que les ergonomes d’Adobe ont fait un excellent travail sur des choix tels que “quel outil ou non devait être visible directement ou pouvait être caché dans des sous-menus”. C’est donc cette ergonomie (avec son tutoriel) qui m’a permis de plutôt bien maîtriser ce logiciel après seulement 5 minutes d’utilisation.

Malgré tout, il m’arrive encore de découvrir certaines fonctionnalités un peu “cachées”. Pendant que j‘interviewais mes collègues et que j’essayais de pousser des comparaisons entre les différents programmes, j’ai dû à plusieurs reprises montrer que oui, il y a bien la possibilité de faire des masques de formes et de générer des grilles. Comme quoi, si je suis sensible à l’ergonomie d’Adobe XD, je comprends tout à fait que certains préfèrent un Sketch, Axure, Flinto ou un Figma.

Comme pour Axure, je suis assez déçue par les bibliothèques d’objets mises à disposition. Bien qu’elles soient tout de même plus complètes, elles ne valent clairement pas celles que Sketch propose à ses utilisateurs. Dommage.

3. Utilisation
J’ai récemment eu besoin de retourner travailler sur Photoshop pour des maquettes client et, une chose est sûre, quand on s’est habitué à travailler sur des logiciels comme Adobe XD, il est compliqué de retourner en arrière. “Logique” me direz-vous puisque ce sont des outils qui sont spécialement conçus pour faire de l’UI. J’ai facilement mis le double du temps que j’aurais pu mettre si j’avais utilisé Adobe XD. Plusieurs choses expliquent cela.

La première chose est l’utilisation du artboard avec plusieurs plans de travail modifiables en même temps. L’avantage de cette fonctionnalité est que je peux voir en un clin d’œil l’ensemble de mes écrans, les comparer si j’hésite entre deux présentations, et m’assurer de la cohérence graphique. Certes Photoshop le fait aussi, mais assez mal comparé à Adobe XD où en un clic j’ai changé de plan de travail.

Comme dit plus tôt, je trouve l’interface épurée de ce logiciel très agréable. Tous les outils de base sont du côté droit de l’écran et lorsque je veux rentrer dans les détails de l’un de ces éléments en cliquant dessus, l’autre côté de l’écran se met à jour.
Si je veux modifier un bloc de texte, je vais avoir la possibilité de déplacer le bloc, de le transformer mais aussi de modifier la typographie, la taille, l’espacement entre les caractères, etc., ce qui n’aurait pas été possible s’il s’agissait d’un bloc de couleur par exemple.
C’est donc grâce à ce fonctionnement que l’interface est épurée et me permet de travailler plus efficacement qu’avec Photoshop ou même Sketch. J’ai besoin de ma “page blanche” pour créer. Cet espace est très important d’autant plus quand, comme moi, on travaille sur des écrans assez petits.

Une des grosses critiques que j’ai pu entendre venait du fait qu’il n’y ait pas de possibilité de créer des règles mobiles, et cette critique est à raison. Après quelques mois d’attente, Adobe a fini par ajouter une possibilité de créer une grille automatiquement, mais toujours pas de règles, ce qui par moments aurait été appréciable.

Le gros plus d’Adobe XD réside dans la possibilité de créer un prototype, en partie fonctionnel, sans avoir besoin d’utiliser un programme secondaire. Dans la partie “prototypage” l’utilisateur peut gérer des interactions entre les différentes pages et choisir des effets de transition entre celles-ci.
Cette fonctionnalité peut être très pratique pour montrer l’enchainement des écrans à un client, d’autant plus qu’il y a une possibilité de partager un prototype en ligne et de le commenter.
Toutefois, cette fonctionnalité est assez limitée. Il n’y a aucune possibilité de faire des interactions internes aux pages ou de gérer des effets “hover”. Encore une amélioration à apporter le plus rapidement possible.

Je finis sur mon analyse d’Adobe XD sur un point qui me chiffonne : pourquoi n’y a-t-il pas de possibilité de faire des exports en .psd ? Je comprends tout à fait que d’autres logiciels de ce genre se satisfassent d’exports SVG, PNG ou natifs mais pourquoi Adobe XD ? Beaucoup de clients ne sont pas encore passés à d’autres outils que Photoshop pour leurs maquettes et réclament des “.psd”. Il n’y a pourtant pas de désintérêt financier à faire ça. Je ne comprends donc pas pourquoi choisir d’en priver les utilisateurs.

Sketch

#Sketch

Sketch est réellement le logiciel de référence pour faire de l’UI web et mobile. C’est le plus connu et il a toutes les raisons de l’être… quoique.
Soyons clair tout de suite : je n’aime pas Sketch et j’ai du mal à comprendre pourquoi il y a tant de personnes qui continuent à travailler sur ce logiciel alors qu’il en existe plein d’autres qui sont bien mieux, comme Figma, Flinto par exemple.

1. Caractéristiques techniques et prix
Contrairement à Axure et à Adobe XD, Sketch est un logiciel qui n’est disponible qu’en anglais. Si en principe dans nos métiers, ce n’est pas réellement un problème, il faut bien reconnaitre que j’aurais tout de même apprécié la traduction de quelques termes (mais moi et mon niveau d’anglais…).

Comme une grande majorité de logiciels destinés à la création d’UI, ce logiciel est uniquement disponible sous Mac. Dommage puisque la majorité des développeurs Back End et Front End avec qui j’ai eu la chance de travailler étaient sous Windows. Il y a un certain nombre de solutions pour résoudre ce problème me direz-vous, mais j’y reviendrai plus tard.

Malgré tout ça, il y a une chose qui fait énormément remonter Sketch dans mon estime : ce logiciel commence très sérieusement à se démocratiser auprès des clients. De plus en plus de clients acceptent que l’on travaille sous Sketch et sont capables de se servir des fichiers pour l’intégration sans passer par la case Photoshop.

2. Prise en main
Là encore, je ne peux pas reprocher grand-chose à Sketch, la prise en main se fait sans vraiment de problème. L’interface est simple et bien adaptée à la création de sites web et d’applications mobiles.

Dès la première utilisation et sans que l’utilisateur ait besoin de faire moult et moult recherches pour avoir de bonnes bibliothèques d’objets qui soient bien complètes : elles sont déjà là, déjà intégrées à Sketch ! Et (oh bonheur), même dans le cas où vous ne trouveriez pas ce qu’il vous faut dans ces fichiers, à la différence de l’intégralité des autres logiciels du type de Sketch, il y a une grande communauté d’utilisateurs prêts à vous aider et à vous partager des ressources (gratuitement ou non).

Toutefois, j’ai quand même un petit reproche : les raccourcis clavier. Ils ne ressemblent pas du tout à ceux que l’on pouvait utiliser sur Photoshop ou Illustrator. Dommage puisque, même après qu’elles aient utilisé Sketch depuis des mois, j’ai constaté que certaines personnes que j’ai pu interviewer n’arrivaient pas à se servir de certains raccourcis et perdaient inutilement du temps pour des actions pourtant très simples.

3. Utilisation
Ok, je dois admettre (un peu à contre-cœur) que le logiciel est loin d’être mauvais. Il n’y qu’à voir le nombre de logiciels de design UI qui ont émergé depuis sa création et qui sont en grande partie “pompés” depuis Sketch et, encore une fois, à juste titre.

Comme pour Adobe XD, Sketch met parfaitement à profit l’utilisation du artboard. Les avantages sont les mêmes qu’avec Adobe XD : vision d’ensemble sur les différents écrans en un regard pour vérifier la cohérence graphique et la pertinence des différents chemins utilisateur imaginés, gain de temps, etc.

Malgré cela, j’ai une remarque à faire par rapport à l’interface. En utilisant Adobe XD, je me suis habituée à avoir un minimum d’informations visuelles à l’écran. Seuls les outils utiles lors de l’interaction avec un objet sont visibles. Or, ce n’est pas le cas avec Sketch, la barre d’outil du haut de l’interface est consacrée à la manipulation de formes et est visible en permanence, et je trouve cela assez pesant visuellement.

Autre point négatif que je pourrais trouver à Sketch : l’absence d’outils de prototypage. Ceci me permet d’ouvrir ma conclusion sur Sketch.
Plus tôt dans mon article, j’ai dit que Sketch ne disposait pas d’outil pratique pour les développeurs qu’ils soient sous Mac ou Windows, et je le confirme, Sketch n’en propose pas. En tout cas pas en natif car en réalité, il existe des solutions qui permettent de très bien répondre à ce problème. Et justement, la grande force de Sketch ne réside pas dans le logiciel en lui-même qui est, à mon sens, largement détrônable, mais bien grâce à tous les logiciels et les plugins complémentaires que l’on peut greffer au logiciel de base. Il en existe des tas comme les célèbres Invision (prototypage) et Craft mais aussi les Framer JS, MarvelApp et Orgami qui méritent à eux seuls un article (que je ne manquerai pas de faire).

#Conclusion

En conclusion de tout ça, j’aimerais dire qu’il m’a fallu faire un choix et ces trois programmes, quoique différents, ont tous leurs utilités et leurs points forts :

• Axure comme étant le meilleur outil des trois pour faire des wireframes et des prototypes qui ne soient pas centrés uniquement vers les interactions entre les pages, mais aussi vers les interactions internes aux pages.
• Adobe XD comme étant le logiciel avec l’interface la plus ergonomique et la plus aboutie malgré quelques manques (qu’on espère voir disparaître d’ici à la fin de la bêta).
• Et enfin Sketch qui, même s’il est limité, propose des outils complémentaires géniaux. Il est d’ailleurs fort probable qu’à terme, je finisse par prendre une licence lorsque j’en aurai assez de payer la suite Adobe (et ça arrivera).

Pour aller plus loin : uxtools.co/tools/design & prototypr.io/prototyping-tools