Introduction aux Interactions

La fonctionnalité Interactions est utilisée pour créer des prototypes en appliquant l'interactivité à n'importe quel objet d'une page Moqups.

Lorsque vous ajoutez une interaction à un objet, vous permettez à cet objet de répondre à une variété de déclencheurs en mode Aperçu.

Les deux principaux cas d'usage des interactions sont :

• Les Prototypes, où les interactions sont utilisées, pendant la phase de conception et de test, pour imiter l'expérience utilisateur finale du produit développé – qu'il s'agisse d'une application ou d'un site web.
• La Gestion de Projet, où les interactions sont utilisées pour organiser l'information en reliant n'importe quel élément individuel d'un design, d'un diagramme, d'un storyboard, d'un plan de site – ou la page entière – aux pages suivantes. Cela aide les membres de l'équipe à naviguer entre des sections spécifiques d'un projet complexe pour consulter des spécifications, des notes, des exigences ou des détails pertinents.

Il existe deux types d'interactions qui peuvent être appliqués à un objet :

• Une Interaction de Page est utilisée pour la navigation, et elle relie des objets désignés à d'autres pages au sein du projet Moqups lui-même, ou à des URLs extérieures au projet.
• Une Interaction d'Objet est utilisée pour imiter la transformation d'objets sur la page – changer les états des boutons, ouvrir des menus déroulants, afficher le menu contextuel au clic droit, ouvrir des boîtes de dialogue modales, etc. – simulant la façon dont un utilisateur vivra le produit final.

Ces deux types d'interactions peuvent être appliqués à n'importe quel type d'objet : Stencil, Icône, Image ou Modèle.

Mais il existe également un objet interactif dédié – appelé Zone cliquable – qui peut être utilisé pour désigner des zones spécifiques d'une page comme interactives.

Dans cet article, nous vous montrerons où trouver le Panneau d'Interactions, et fournirons quelques détails supplémentaires sur la façon dont les interactions sont utilisées à la fois dans la Création de Prototypes et la Gestion de Projet. Nous expliquerons également comment utiliser le mode Aperçu pour activer les interactions.

Puis, dans les articles suivants de cette section, nous expliquerons comment appliquer les Interactions de Page et les Interactions d'Objet, et comment ajouter des Zones cliquables.

Panneau d'Interactions

Pour ouvrir le Panneau d'Interactions, allez dans la Barre Latérale Droite et cliquez sur l'Onglet Interactions. L'onglet deviendra bleu et ouvrira le panneau. Vous pourrez y :

• Voir toutes les interactions qui ont été appliquées à un objet
• Créer une nouvelle interaction
• Ajouter une zone cliquable

Dans les articles suivants de cette section, nous démontrerons comment utiliser le Panneau d'Interactions pour ajouter des Interactions de Page et des Interactions d'Objet. Mais, pour l'instant, voici une brève présentation.

Une fois que vous avez cliqué sur l'objet auquel vous souhaitez appliquer l'interaction :

1. Choisissez un Déclencheur dans le menu déroulant supérieur : En cliquant ou en appuyant, Sur clic droit, Sur double-clic, Souris entrée, Souris sortie.

2. Dans le deuxième menu déroulant, sélectionnez une Action dans la liste des Interactions de Page ou Interactions d'Objet.

3. Définissez une Cible, en utilisant le menu déroulant ou le bouton viseur, pour sélectionner un objet ou une page comme point final de l'interaction.

4. Cliquez sur Terminé pour appliquer l'interaction.

5. Vous pouvez utiliser l'Aperçu pour voir comment fonctionne votre interaction.

6. Vous pouvez également utiliser la section Zones cliquables ci-dessous pour ajouter des zones cliquables.

7. La section Options vous permet de contrôler la façon dont les interactions sont affichées :

   • Montrer les zones cliquables : Affiche les zones cliquables en mode Édition.
   • Afficher les indicateurs d'interaction : Ajoute un badge lumineux aux objets avec des interactions – sur la page et dans le Panneau de contour – en mode Édition.
   • Révéler la cible de l'interaction : En mode Aperçu, affiche une info-bulle avec l'action et la cible lorsque vous survolez un objet.

Interactions dans la création de prototypes

L'utilisation principale des interactions est de transformer des designs en prototypes. Cette étape est souvent la dernière phase de la conception d'applications et de sites web avant que le codage et la mise en œuvre n'aient lieu.

Le processus de conception commence généralement par un diagramme représentant le flux utilisateur, ou par un plan de site pour un site web. Ces visualisations aident à transmettre des idées abstraites et généralisées sur le flux de données et l'architecture de l'information d'un projet.

Et, à mesure que des détails sont ajoutés, ces diagrammes génèrent des storyboards. Les storyboards sont visuellement plus riches que les diagrammes, et peuvent aider à transmettre les détails spécifiques des écrans et de leur flux de navigation.

Ensuite, chaque élément de ces storyboards évolue pour devenir des pages à part entière – contenant des wireframes ou des maquettes plus détaillées représentant le design de cet écran ou de cette page web.

Un wireframe ou une maquette devient finalement un prototype lorsque l'interactivité est ajoutée à ces pages individuelles. L'ajout de l'interactivité signifie que, avant tout codage réel, le design peut imiter le produit final en répondant aux actions de l'utilisateur sous forme de clics, de survols (entrée et sortie de la souris), de sélections d'éléments et de navigation entre les pages.

Même si un prototype n'est pas en ligne ni pleinement fonctionnel, les interactions imitent suffisamment l'UI finale pour que toutes les parties prenantes puissent avoir une idée de l'UX final. Les designers, développeurs et chefs de produit peuvent itérer librement, tester différentes versions – et, surtout, construire un consensus avant que le produit final n'entre dans le cycle de production.

Lorsque la phase de prototypage et de test est terminée, le design est remis aux développeurs, après quoi toute modification du design devient coûteuse et laborieuse. Utiliser un prototype pour prévisualiser l'UX – avant même que les développeurs ne commencent à écrire le code – peut faire économiser à votre équipe du temps, de l'argent et des frustrations.

Interactions dans la gestion de projet

La fonctionnalité Interactions, et notamment sa capacité à fournir des liens et des possibilités de navigation, a de nombreuses utilisations au-delà du prototypage formel dans le flux de travail de conception. De nombreux utilisateurs – dont des Analystes Métier, des Architectes Système, des Chefs de Produit et des Développeurs – utilisent Moqups comme un espace créatif partagé où toutes les parties prenantes peuvent collaborer et construire un consensus.

Pour tous types de travaux de conception et de gestion de produits, Moqups peut être utilisé pour créer des projets rapides et spécifiques à des problèmes, ou pour construire des projets à grande échelle avec plusieurs utilisateurs ayant des dizaines – voire des centaines – de pages. Mais, quelle que soit l'échelle du projet, ils ont tous plusieurs besoins en commun :

• Organiser des informations complexes, sous diverses formes, et les mettre à jour en temps réel
• Fournir un accès à un large éventail de parties prenantes pour créer, modifier et commenter du contenu
• Visualiser les exigences, transmettre le contexte et communiquer des spécifications claires

En général, l'un de ces projets peut inclure des diagrammes de flux, des storyboards UX, des plans de site, des cartes mentales, des organigrammes, des cas d'utilisation et des diagrammes d'architecture de l'information – aux côtés de wireframes, de maquettes et de prototypes.

Avec la fonctionnalité Interactions, vous pouvez relier tous ces éléments entre eux et activer une navigation instantanée au sein des pages du projet Moqups lui-même, ou au-delà de Moqups – vers Google Drive, Dropbox, Slack, Trello ou toute URL. Les interactions peuvent également être utilisées pour appliquer des Interactions d'Objet, le cas échéant, pour démontrer des exigences ou spécifier des éléments de design.

Par exemple, dans un seul projet Moqups, vous pourriez avoir un diagramme de flux de travail montrant le processus de développement d'une nouvelle fonctionnalité pour votre application. Avec les interactions, vous pouvez rendre chaque élément du diagramme interactif de sorte que, lorsque les membres de votre équipe cliquent dessus, ils sont redirigés vers une nouvelle section du diagramme, une page complète de détails de design, ou un emplacement externe pertinent. De cette façon, vous pouvez vous assurer que chaque membre de l'équipe connaît le contexte exact de sa tâche, et qu'il dispose de toutes les informations nécessaires pour agir rapidement, de manière indépendante et efficace.

Dans ce type de projet, toutes les parties prenantes peuvent naviguer, créer, vérifier, commenter et contribuer. Et, surtout, elles peuvent ajouter leurs propres liens, aussi bien en interne qu'en externe, pour fournir des exigences à jour et une source unique de vérité.

Utiliser le mode Aperçu pour activer les interactions

Les interactions sont conçues pour être ajoutées aux objets en mode Édition, mais vécues en Mode Aperçu.

Passer en Aperçu activera toutes les interactions du projet afin qu'elles simulent l'interactivité du produit final, une fois développé.

En savoir plus sur le Mode Aperçu ici.