Prototyper en toute simplicité - Un tutoriel InVision Studio

À moins que vous ne dormiez pendant la première moitié de 2018, vous étiez probablement parfaitement conscient de l'anticipation fiévreuse de la communauté du design interactif qui a précédé la sortie de l'application InVision Studio. InVision est surtout connu pour ses suites de plugins Sketch et Photoshop comme Craft, et pour être la plate-forme incontournable pour transformer rapidement les conceptions d'interface statique en prototypes cliquables et partageables. Dans une étape audacieuse l'année dernière, ils ont annoncé le développement de leur propre logiciel de conception numérique pour concurrencer les favoris de l'industrie comme Sketch et Figma.

Le produit a été présenté comme révolutionnaire et a fait des promesses de poids pour un flux de travail transparent de la conception au prototype, une fonctionnalité d'interaction complexe, une animation de transition à couper le souffle - et ce serait gratuit. InVision a sorti des vidéos et des démos assez excitantes pour motiver les concepteurs. L'anticipation a encore augmenté alors que la version bêta initiale a été repoussée plusieurs fois au début de l'année.

Alors que de plus en plus de concepteurs ont commencé à jouer avec le logiciel, de plus en plus de didacticiels et de guides apparaissent pour démontrer les bases de l'outil de conception d'interface d'application. InVision a également créé quelques-uns des siens pour intégrer les utilisateurs aux bases d'InVision Studio.

Même si les versions à accès anticipé reçoivent des critiques mitigées, Studio a des fonctionnalités intéressantes et beaucoup de potentiel. Ce didacticiel vise à guider les premiers utilisateurs à travers les bases du prototypage InVision Studio et à ajouter une animation de prototype de base.

Créez un prototype interactif avec des transitions animées fluides en un rien de temps en suivant ce didacticiel InVision Studio !

La visite Nickel de l'espace de travail InVision Studio

Une grande partie de Studio devrait être familière aux concepteurs d'interface utilisateur et à tous ceux qui utilisent un logiciel de conception numérique comme Sketch. Une grande partie de l'espace de travail emprunte des repères à l'interface utilisateur de Sketch, le panneau latéral gauche abritant des pages, des calques et des groupes ; le panneau latéral droit pour les inspecteurs ; et une barre d'outils contextuelle en haut.

Vous trouverez également bon nombre des mêmes outils, même si certaines fonctionnalités sont nommées différemment. Par exemple, un « symbole » Sketch est appelé un composant dans Studio.

Le panneau Interactions

Pour les besoins de ce didacticiel, nous nous concentrerons sur l'utilisation des outils d'interaction pour créer des points chauds interactifs entre les écrans et créer des transitions fluides entre eux. Une grande partie de la magie se produira dans le "panneau d'interactions" sur le côté droit de l'espace de travail Studio.

La façon simple de créer des interactions est de sélectionner une couche ou un groupe de déclencheurs et d'appuyer sur "c" sur le clavier (ou de cliquer sur l'icône représentant un éclair dans la barre d'outils supérieure), ce qui lance un fouet bleu avec lequel sélectionner un écran de destination. Studio invitera alors le concepteur à sélectionner le geste ou l'entrée de l'utilisateur déclenchant l'événement et à choisir entre un ensemble de transitions prédéfinies ou une transition « de mouvement ».

InVision Studio Animation

Il existe de nombreux éléments d'une excellente conception d'interaction, mais l'utilisation correcte des transitions animées et des micro-interactions dans une interface utilisateur est plus qu'une simple façade.

Ils améliorent la convivialité et peuvent faire la différence entre un produit bien-aimé et un désordre déroutant.

Tout au long de ce didacticiel, nous utilisons une combinaison de transitions prédéfinies et de transitions de mouvement pour créer notre prototype d'application. Les transitions prédéfinies sont assez simples et seront familières aux utilisateurs de la plate-forme de prototype en ligne InVision.

Les règles qui régissent le fonctionnement des transitions de mouvement entre les écrans sont un peu plus mystérieuses. Bien que de nombreuses considérations de conception évidentes soient prises en compte lors de la création de l'outil, par exemple, la liaison automatique des éléments entre les écrans, il faut quelques essais et erreurs pour obtenir certains effets lors de l'ajout de mouvement aux transitions. Espérons que ce didacticiel aidera les concepteurs à devenir un peu plus à l'aise pour expérimenter ce qu'InVision Studio a à offrir.

Choses à garder à l'esprit

Studio promet de nombreuses fonctionnalités intelligentes autour des animations. Par exemple, il peut créer des transitions de mouvement entre des objets dupliqués d'un plan de travail à un autre lorsqu'ils sont connectés via une interaction. Les concepteurs peuvent ensuite modifier ces animations comme ils le souhaitent pour obtenir de beaux effets d'accélération et d'autres effets de mouvement. Apprendre les excentricités de la façon dont cela fonctionne lorsque vous essayez de faire la transition d'une pile d'objets dans une séquence spécifique peut demander de la patience et de la pratique.

Les transitions de mouvement fonctionnent mieux avec des objets sur des plans de travail qui ont été dupliqués les uns des autres. La fonction d'animation est "intelligente" en ce sens qu'elle reconnaît les objets dupliqués avec les mêmes noms de calques. Veillez donc à ne pas supprimer ou renommer les calques clés entre les écrans (ce qui est un moyen frustrant de ruiner une excellente animation).

Gardez à l'esprit que Studio en est encore à ses balbutiements, les concepteurs doivent donc être prêts à rencontrer une bonne part de bogues. Par exemple, le bouton "prévisualiser" lance un aperçu interactif du prototype, mais parfois les interactions ne se déclenchent pas du tout, auquel cas vous devrez enregistrer et rouvrir le fichier.

Lors de l'apprentissage du logiciel, plusieurs fichiers semblent se corrompre étrangement, supprimant tous les plans de travail et rendant tous les panneaux d'outils inaccessibles. J'ai signalé le bogue et j'ai appris à enregistrer plusieurs versions de mes fichiers afin de ne pas perdre trop de travail.

Enfin, il est toujours utile d'être organisé. Lors de la création d'un prototype sur n'importe quelle plate-forme, que ce soit Studio, Sketch ou Marvel, le suivi des objets et des étiquettes de calque vous fera gagner du temps et de la frustration, surtout si vous travaillez avec une équipe ou si vous remettez le fichier à un moment donné. Notez l'ordre des calques et des groupes de calques lors de la création d'interactions ; cela fait souvent une grande différence dans l'obtention de l'effet d'animation souhaité.

Le Tutoriel !

Commençons! Si vous ne l'avez pas déjà fait, accédez à InVision Studio pour télécharger une version à accès anticipé de l'application Studio. Une fois que vous avez InVision Studio sur votre ordinateur, téléchargez les fichiers du didacticiel ici. Une fois que vous avez lancé le logiciel Studio, choisissez d'ouvrir le fichier à partir de l'endroit où vous l'avez enregistré.

Étape 1 : Ouvrir le fichier et jeter un coup d'œil

Ce prototype interactif sera destiné à une application mobile sur les artistes modernes de la fin du 19e au début du 20e siècle. Tous les écrans ont été créés à l'avance en utilisant une duplication soignée du plan de travail, ce qui est nécessaire pour une utilisation correcte de la fonction de transition de mouvement.

La hiérarchie a 3 niveaux de profondeur, en commençant par "Accueil", puis dans la biographie de chaque artiste individuel, et enfin jusqu'à un carrousel de quatre exemples du travail de l'artiste. Vous remarquerez que le plan de travail "Accueil" a une petite icône de maison, qui désigne le plan de travail de départ pour le prototype.

Le didacticiel se concentrera sur la création de chemins de navigation simples reliant ces trois niveaux de profondeur. Nous utiliserons les outils d'interaction et de transition de Studio pour donner au prototype l'impression d'être une application véritablement interactive.

Étape 2 : Connectez la vignette de l'artiste à la biographie de l'artiste

Accédez au premier plan de travail. Prenez un moment pour développer le groupe de calques "Artist Tile 1". Vous remarquerez trois groupes imbriqués : un pour le nom de l'artiste, un pour une image sélectionnée et un troisième calque contenant "Bio Text".

En regardant l'écran de la planche graphique, le troisième groupe de calques n'est pas immédiatement visible en raison de la façon dont Studio gère les transitions de mouvement, ce à quoi nous reviendrons dans un instant. Notez-le simplement pour le moment.

Sélectionnez le groupe de calques contenant tous ces éléments : "Artist Tile 1". Avec ce groupe sélectionné, appuyez sur "c" sur votre clavier (ou cliquez sur l'icône représentant un éclair dans la barre d'outils supérieure) pour lancer l'outil d'interaction. Votre curseur sera suivi d'un fouet bleu pour choisir l'écran de destination de votre interaction.

Sélectionnez le plan de travail immédiatement à droite intitulé "Artist Bio 1" et vous serez invité à choisir le déclencheur et le type de transition. Pour le déclencheur, choisissez "Tap", puis choisissez "Mouvement" comme transition. Vous pouvez ensuite choisir la durée de la transition. Fixons cette transition à 2 secondes et appuyez sur "Enregistrer".

Cliquez sur le bouton de lecture pour prévisualiser le prototype. Avez-vous vu la façon dont les choses se déplaçaient sur l'écran et comment la couche bio glissait sous l'image ? Félicitations, vous avez créé une transition d'interaction assez fluide !

Étape 3 : connectez un bouton de retour à l'écran d'accueil

Nous devrions maintenant donner aux utilisateurs un moyen de revenir à l'écran d'accueil. Accédez au plan de travail "Artist Bio 1" et sélectionnez le composant "btn_back" dans le coin supérieur gauche. Créez un déclencheur ici en appuyant sur "c" et en sélectionnant le plan de travail "Accueil".

Encore une fois, réglons le déclencheur sur "Tap", l'interaction sur "Mouvement" et la durée sur 2 secondes. Cliquez sur Aperçu et admirez les transitions d'ouverture et de fermeture fluides que vous venez de créer. Remarquez comment l'animation déclenchée par la fermeture de la tuile est une inversion de l'animation jouée lors de l'ouverture de la tuile.

Étape 4 : Connectez la galerie

Si vous notez les noms des calques dans les premier et deuxième plans de travail, vous remarquerez peut-être qu'ils sont identiques. En effet, comme mentionné précédemment, les animations Studio lient automatiquement les calques dupliqués d'un plan de travail à l'autre s'ils partagent un nom. Changer le nom de ces calques rompra le lien d'animation et la transition se transformera par défaut en un simple fondu, ce qui est particulièrement difficile pour ceux qui sont obsédés par les étiquettes de calque significatives.

Nous voulons appliquer une autre transition de mouvement soignée pour ouvrir la galerie d'images du carrousel. Le plan de travail intitulé "Artist 1 - Image 1" contient des éléments dupliqués du plan de travail "Artist Bio 1", redimensionnés pour afficher davantage l'exemple d'image.

Commencez par cliquer sur le calque "Artist Bio 1" pour sélectionner le groupe "Featured Image". Ce sera le déclencheur de l'ouverture de la galerie. Créez une interaction "Tap" ici en vous connectant au premier plan de travail de la galerie et sélectionnez "Mouvement". Cette fois, réglez la durée un peu plus vite : 1 seconde.

Pour créer une transition agréable pour fermer la galerie, sélectionnez simplement le calque du bouton de fermeture dans le plan de travail "Artiste 1 - Image 1" et reconnectez-le au plan de travail "Artiste Bio 1", avec les mêmes paramètres qu'auparavant.

Prévisualisez cette animation et émerveillez-vous de la manière dont le prototype passe de l'écran bio de l'artiste au carrousel d'images et inversement. Nous avons maintenant connecté la navigation à travers trois niveaux de la hiérarchie de notre application !

Étape 5 : Connectez toutes les images de la galerie

Nous avons effectué la plupart des transitions de mouvement que nous devrons effectuer et nous allons maintenant commencer à utiliser certains des préréglages d'animation pour le reste de la galerie.

Le modèle d'interaction ici pour que notre utilisateur parcoure ce carrousel d'images sera un geste de balayage familier. La bonne nouvelle est que cette dernière partie est assez simple et ne prendra pas de temps du tout en utilisant les préréglages d'animation de Studio.

Sélectionnez le plan de travail "Artiste 1 - Image 1" et créez une interaction qui mène au plan de travail suivant, "Artiste 1 - Image 2". Cette fois, réglez le déclencheur sur "Balayer vers la gauche". Pour la transition, sélectionnez "Preset" et choisissez "Push Left" dans le menu déroulant.

Pour créer une interaction inversée, sélectionnez le plan de travail "Artiste 1 - Image 2" et connectez-le au plan de travail précédent, mais cette fois en utilisant un geste "Balayer vers la droite" et une transition "Pousser vers la droite".

Répétez ce modèle avec les prochains plans de travail, en connectant les plans de travail de l'image 2 à l'image 3 et de l'image 3 à l'image 4. C'est facile !

Pour rendre cela encore plus réaliste, fermons la boucle entre l'image 1 et l'image 4. Sélectionnez le plan de travail pour l'image 4 et connectez-le à l'image 1. Choisissez un déclencheur "Balayer vers la gauche" et une transition "Pousser vers la gauche" comme vous le feriez pour le prochaine image d'une série. Connectez le plan de travail de l'image 1 à l'image 4 avec l'inverse et hop, vous avez créé une galerie en boucle !

Enfin, sélectionnez chacun des composants "btn_close" dans les plans de travail de la galerie d'images et reliez-les au plan de travail bio. Vous pouvez choisir la transition que vous aimez ici, mais j'ai opté pour "Push Right".

À présent, vous avez un chemin de navigation assez bien séquencé à montrer. Cliquez sur Aperçu et essayez-le ; votre prototype devrait fonctionner un peu comme le gif au début de ce tutoriel. Donnez-vous une tape dans le dos bien méritée.

Étape 6 : Répétez

Maintenant que vous avez lié tous les écrans du premier exemple d'artiste avec des interactions fluides, répétez les étapes pour les deux autres ensembles d'écrans dans le fichier du didacticiel. Ils sont organisés de manière similaire et ce sera une bonne pratique pour s'habituer au fonctionnement de Studio.

Prochaines étapes

J'espère que ce didacticiel a fourni une introduction à certaines des fonctionnalités intéressantes du prototypage InVision Studio. Tout en vous familiarisant avec Studio, vous devriez essayer de peaufiner les transitions à l'aide des outils d'animation avancés. Expérimentez avec les autres outils de l'espace de travail et essayez de suivre d'autres didacticiels InVision Studio. Avec de la pratique, vous pouvez devenir l'un des gourous de la conception d'InVision Studio.

Vous avez peut-être rencontré des bogues ou des comportements inattendus en cours de route, mais c'est dans la nature d'essayer de nouveaux logiciels. Les gens d'InVision ont été très réactifs aux commentaires et continueront certainement à améliorer Studio, le rendant toujours plus stable et utile.

Studio est un outil amusant à essayer, et il n'y a aucune raison de ne pas expérimenter avec un outil de prototypage d'application gratuit. Bien qu'il soit peu probable qu'il remplace un logiciel incontournable comme Sketch dans la communauté des concepteurs aujourd'hui, il a beaucoup de potentiel.

Pour en savoir plus sur le blog Toptal Design :

• Perfectionnez votre processus de conception UX - Un guide pour la conception de prototypes
• La puissance de Figma comme outil de conception
• Prototypage avec des données réelles - Un tutoriel Framer
• Le guide fondamental de l'utilisabilité mobile
• Meilleures pratiques et erreurs de conception d'applications mobiles