Prototypes sophistiqués – Pourquoi utiliser Axure

« Le design n'est pas seulement ce à quoi il ressemble et ce à quoi il ressemble. Le design, c'est comme ça que ça marche. –Steve Jobs

Les prototypes se sont avérés inestimables pour prendre de meilleures décisions de conception. En tant qu'artefacts, les prototypes sont l'un des principaux livrables de la conception et du prototypage UX, et en tant qu'activité, ils sont au cœur du processus de conception centrée sur l'utilisateur. Un prototype est un amalgame de tous les travaux de conception UX précédents fusionnés en un seul produit visuel et fonctionnel qui est utilisé pour valider les hypothèses et tester les conceptions.

Cela semble assez facile, mais dans un monde saturé d'une abondance d'outils de conception, choisir le bon outil de prototypage n'est pas une mince tâche nécessitant une réflexion approfondie. Les concepteurs doivent prendre en compte les coûts, les fonctionnalités, l'intégration avec d'autres outils de conception, la courbe d'apprentissage, les fonctionnalités de collaboration et la plate-forme de lecture pour la révision et les tests utilisateur.

Pour compliquer les choses, de nombreux nouveaux venus ont récemment fait irruption sur la scène. Il existe des outils uniquement en ligne, par exemple, Figma, InVision, UXPin, Framer, Marvel, Principle, Origami, et certains sont des logiciels de bureau traditionnels tels que Sketch et Adobe XD avec un prototypage intégré comme extension de leurs fonctionnalités. Ils ont tous leurs avantages et leurs inconvénients, leurs fonctionnalités et leurs intégrations.

Mais nouveau n'est pas toujours meilleur. Il y a encore quelques vieux chevaux de guerre sur le champ de bataille : Axure en fait partie. Lorsque les concepteurs souhaitent fournir des prototypes détaillés et riches en fonctionnalités, Axure mérite un autre regard. Axure existe depuis un certain temps, des années avant la naissance des nouveaux outils mentionnés ci-dessus, et de nombreux concepteurs le considèrent comme le grand-père des outils de wireframing et de prototypage dotés de capacités approfondies.

Pourquoi utiliser Axure ?

De nos jours, pour la plupart, les concepteurs utilisent des outils de prototypage basés sur des hotspots avec lesquels ils relient des écrans, et ajoutent peut-être quelques transitions d'écran. Le problème est que cette méthode n'inclut pas de petites interactions qui complètent l'expérience utilisateur globale pendant les tests. En revanche, Axure peut facilement gérer les détails subtils et les micro-interactions qui donnent vie à un prototype.

Pour explorer plus en profondeur la façon dont les gens interagiraient avec une conception spécifique, les concepteurs peuvent créer des prototypes avec une logique de condition, diverses entrées utilisateur et des animations dynamiques qui rendent le prototype plus réaliste. C'est un excellent moyen d'obtenir des informations précieuses sur ce qui fonctionne et ce qui ne fonctionne pas.

Le fait de devoir sauter entre trop d'applications de conception non intégrées présente également un problème d'inefficacité. Le flux de travail de conception typique implique qu'un concepteur crée des interfaces utilisateur dans Sketch et prototype dans un autre outil tel qu'InVision ou Marvel. Après cela, la conception est confiée aux développeurs à l'aide d'un autre outil, tel que Zeplin.

Axure est une application entièrement intégrée qui élimine le besoin d'utiliser différents outils de conception. Par exemple, après avoir créé des flux d'utilisateurs, des cartes de parcours client, des personnages, des storyboards, des plans de site, une architecture d'informations et des structures filaires, les concepteurs peuvent facilement passer à des prototypes complexes, directement dans Axure. Lorsque les concepteurs confient des projets aux développeurs, ils peuvent avoir une meilleure idée de la manière dont quelque chose doit être mis en œuvre et peuvent travailler plus efficacement avec les chefs de produit pour estimer la portée et évaluer la faisabilité technique.

Le plus grand obstacle à la fourniture de produits et services bien conçus est le manque de compréhension de nos utilisateurs. Jared Spool, UIE (ingénierie de l'interface utilisateur)

Semblable à d'autres outils de conception, Axure peut être récupéré rapidement et utilisé rapidement. Des widgets intégrés avec lesquels créer des interactions dynamiques que même les non-programmeurs peuvent comprendre peuvent être utilisés immédiatement pour des interactions impressionnantes. Les concepteurs qui souhaitent approfondir et investir du temps pour apprendre l'application peuvent créer des sites Web et des applications complexes et réalistes avec des interactions complexes.

Exemples réels de prototypage Axure

Les concepteurs manquent toujours de temps et doivent démontrer comment des flux d'utilisateurs spécifiques fonctionneraient dans les révisions et tester les conceptions de produits tôt avec les utilisateurs. Les capacités de base d'Axure peuvent briller dans ces scénarios, car les concepteurs peuvent rapidement transformer des images d'autres outils de conception en prototypes interactifs.

Dans l'exemple de produit B2B ci-dessous, une série d'écrans ont été exportés depuis OmniGraffle au format PNG. Les images ont été recadrées, masquées et placées sur des calques dans Axure. Ensuite, des points d'accès et des composants interactifs ont été ajoutés à partir de la bibliothèque de widgets Axure, tels que des menus déroulants et des champs de formulaire, pour créer un prototype riche et fonctionnel. Les caractéristiques et fonctionnalités du produit ont ensuite été testées à l'aide de tests utilisateur modérés à distance, ce qui a conduit à des itérations de conception rapides basées sur les commentaires des utilisateurs.

Dans un autre exemple, les équipes de conception et d'ingénierie ont pu trouver la meilleure façon de concevoir deux widgets particulièrement délicats pour un produit B2B complexe. L'objectif était de concevoir des filtres avancés et un sélecteur de colonne personnalisé pour une table riche en données qui améliorerait la convivialité et était également techniquement réalisable.

Dans ce scénario, des images de différents états ont été exportées depuis Sketch, et des interactions rapides ont été ajoutées et animées dans Axure. Des composants d'interface utilisateur ont été ajoutés, tels que des boutons et des cases à cocher, pour démontrer les interactions et leurs effets. Les équipes sont passées par plusieurs itérations qui ont été revues et testées. Avec d'autres outils de prototypage, cet effort peut avoir pris beaucoup plus de temps.

Caractéristiques et avantages d'Axure

J'ai récemment travaillé dans une entreprise qui n'utilisait que des prototypes d'écran à écran de base créés avec InVision et n'avait jamais fait beaucoup de tests utilisateur. Pour tester une fonctionnalité majeure du produit à venir, j'ai été chargé de créer un prototype de produit détaillé. Beaucoup reposait sur cette nouvelle fonctionnalité, et les parties prenantes voulaient bien faire les choses.

Il m'a fallu un peu moins de deux jours pour créer un prototype détaillé dans Axure avec différents états et de nombreuses micro-interactions qui ont démontré comment le produit se comporterait dans différents scénarios. Comme avantage inattendu, de nombreux cas extrêmes ont fait surface que l'équipe de conception a pu résoudre.

Lors des tests, nous avons pu voir où les utilisateurs ont eu du mal avec la conception et pourquoi , ce qui n'aurait pas été possible avec un prototype moins détaillé construit avec des écrans statiques. En conséquence, nous avons pu résoudre rapidement les problèmes que nous avons trouvés.

J'ai également transmis le prototype aux développeurs pour leur montrer où se trouvaient les points d'arrêt de la conception réactive, à quoi les états de focus ou d'erreur étaient censés ressembler et comment la recherche prédictive était censée fonctionner.

Lorsque les développeurs front-end ont pu mettre la main sur le prototype, cela leur a également facilité la vie. Même les développeurs back-end ont apprécié le prototype car ils pouvaient voir comment le produit final était censé fonctionner.

Ce type de prototypage rapide, de test et de mise en œuvre d'une nouvelle fonctionnalité de produit était beaucoup plus rapide que tout autre développement de fonctionnalité qu'ils avaient engagé auparavant, et moins de problèmes sont apparus lors de la phase d'assurance qualité.

En fin de compte, tous les membres de l'équipe ont mentionné à quel point le prototype détaillé était utile et ont demandé que ce type de processus de prototypage soit effectué plus souvent. La conclusion étant que la création, la révision et le test d'un prototype détaillé peuvent faire une énorme différence. Toute l'équipe a pu voir des interactions essentielles, complètes et significatives pour les utilisateurs.

Axure nous permet de tout tester, même les cas d'usage les plus complexes. Nos prototypes ressemblent et agissent comme des vrais. Julie, Laboratoire d'expérience utilisateur

Caractéristiques et points forts d'Axure

Les concepteurs n'ont pas besoin de savoir coder pour créer des prototypes complexes, dynamiques et riches en fonctionnalités dans Axure. Des interactions sophistiquées et complexes peuvent être configurées à l'aide de son panneau Interactions avec des déclarations simples "si ceci, alors cela". Vous trouverez ci-dessous une liste de certaines fonctionnalités supplémentaires d'Axure :

Prototypage de base et avancé

• Widgets intégrés pour un wireframing et un prototypage rapides
• Un environnement de glisser-déposer
• Construire des prototypes basés sur un navigateur sans codage
• Création d'interactions à partir d'éléments Sketch
• Émulation mobile et visualisation d'appareils mobiles
• Champs de formulaire de travail permettant la saisie de l'utilisateur
• Ajout de logique conditionnelle, de variables et d'expressions
• Travailler avec du contenu dynamique et des vues adaptatives
• Ajout d'effets d'animation
• Visualisation hors ligne du prototype
• Bibliothèques de widgets personnalisés
• Intégration et plug-ins Adobe XD
• Partage de prototypes sur Axure Cloud visualisables dans un navigateur

Co-rédaction et collaboration

• Axure RP et Axure Cloud permettent à plusieurs personnes de travailler sur le même projet en même temps.

Actifs partagés

• Créez et partagez des bibliothèques de composants interactifs et importez des ressources depuis Sketch.

Transfert de développeur

• Publiez des conceptions à partir de RP et Sketch vers Axure Cloud pour des lignes rouges automatiques ainsi que l'exportation de CSS et d'images.

Documentation et spécifications

• Créez des flux de processus, des démontages de produits et des spécifications visuelles.

Mini étude de cas sur le prototypage Axure

Pour présenter les capacités d'Axure qui vont au-delà des prototypes simplistes d'écran à écran, j'ai créé quelques écrans avec des interactions subtiles pour Zalando, un site de commerce électronique existant. Une fois terminées, toutes ces séquences prototypes ont été exportées au format HTML et pouvaient être consultées dans un navigateur par n'importe qui, n'importe où, à l'aide d'Axure Cloud.

Tout d'abord, j'ai créé quelques interactions de site démontrant un méga menu, une recherche, un défilement horizontal des produits, des favoris et l'inscription à une newsletter.

Sur une page de liste de produits, j'ai créé des effets de survol sur les vignettes sous l'image principale du produit pour afficher le produit dans différentes couleurs (échange d'images au survol). J'ai également ajouté à nouveau la mise en favori d'un produit et un widget déroulant pour filtrer la page de liste des produits en définissant une fourchette de prix.

Ensuite, dans la même veine que l'écran ci-dessus, je voulais démontrer l'échange de différentes images de produits lorsque vous survolez des images miniatures sur une page de détail de produit. J'ai également ajouté une autre fonctionnalité de survol afin que les acheteurs puissent voir la description du produit, des informations sur la taille et l'ajustement, la livraison et les avis. Enfin, j'ai intégré un sélecteur de taille et ajouté le produit au panier.

En illustrant le flux d'utilisateurs suivant, je voulais montrer comment la gestion d'un panier fonctionnerait - par exemple, retirer un produit du panier - à l'aide de diapositives subtiles, de fondus et d'animations de remplacement d'éléments. Aucun code n'a été utilisé pour créer ces micro-interactions subtiles.

Enfin et surtout, je voulais montrer des transformations subtiles de l'interface utilisateur sur l'écran de connexion lorsque les gens saisissent des informations de connexion incorrectes et quel message d'erreur serait affiché.

Ces interactions subtiles et ces transformations de l'interface utilisateur sont utiles lors du test des fonctionnalités du produit, car les concepteurs et les chercheurs utilisateurs peuvent effectuer des tests utilisateur plus détaillés et obtenir des informations plus approfondies sur les réactions des utilisateurs à un site de commerce électronique. Ils présentent un aspect et une sensation spécifiques et sophistiqués qui ne seraient pas possibles ou pourraient s'avérer très difficiles à créer avec d'autres outils de prototypage.

Sommaire

À la recherche des derniers et meilleurs outils de wireframing et de prototypage, les concepteurs négligent parfois des outils établis et capables qui ont résisté à l'épreuve du temps.

Les concepteurs devraient donner un autre look à Axure. En raison de sa profondeur, de son ensemble de fonctionnalités et de sa flexibilité, Axure est un outil performant et robuste par rapport à d'autres solutions, et la société continue de le mettre à jour afin de maintenir sa pertinence en tant qu'outil de conception.

Une version d'essai gratuite d'Axure est disponible en téléchargement. Les concepteurs peuvent exporter des interfaces utilisateur depuis Sketch, les importer dans Axure et créer des prototypes réalistes. Il existe également de nombreux tutoriels disponibles pour chaque type de projet (sur YouTube et le site d'Axure), et des widgets Axure prêts à l'emploi sont également largement disponibles en téléchargement (gratuits et payants).

• • •

Pour en savoir plus sur le blog Toptal Design :

• Perfectionnez votre processus de conception UX - Un guide pour la conception de prototypes
• Les 10 livrables UX utilisés par les meilleurs designers
• Mythes UX - Prototypage, tests utilisateur et livrables UX
• Tutoriel Framer : Comment créer de superbes prototypes interactifs
• Maîtrisez votre métier avec ces meilleurs outils UX