Interactions d'Objet

Les Interactions d'Objet sont principalement utilisées pour créer des prototypes interactifs.

Ce type d'Interaction modifie l'état d'un objet sur la page, et peut être appliqué à un seul objet, à un groupe d'objets, ou à une Zone cliquable.

Les Interactions d'Objet peuvent être utilisées pour simuler :

  • Des menus déroulants
  • L'ouverture et la fermeture d'une fenêtre ou d'une boîte de dialogue modale en réponse à un clic sur un bouton
  • L'affichage d'un menu contextuel sur clic droit
  • Le défilement vers une zone ou un élément particulier sur le clic d'un lien de navigation
  • Un contrôle radio, case à cocher ou commutateur qui peut être basculé

Dans cet article, nous expliquerons chaque partie d'une Interaction d'Objet. Vous apprendrez également à appliquer des Interactions d'Objet, et à les modifier, les dupliquer et les supprimer.

Panneau d'Interactions

Le Panneau d'Interactions est situé dans la Barre Latérale Droite et depuis ce panneau vous pourrez :

  • Voir toutes les Interactions qui ont été appliquées à un objet

  • Créer une Interaction

  • Ajouter une Zone cliquable

  • Contrôler la façon dont les interactions sont affichées dans la section Options :

    • 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 Panel

Déclencheur, action et cible

Une Interaction d'Objet est composée de trois parties : un Déclencheur, une Action et une Cible.

Déclencheur

Un Déclencheur est l'événement qui met une interaction en mouvement. En utilisant le menu déroulant supérieur, vous pouvez choisir parmi plusieurs déclencheurs : En cliquant ou en appuyant, Sur clic droit, Sur double-clic, Souris entrée, Souris sortie.

Trigger

Action

Une Action est l'instruction qui s'exécutera après qu'un déclencheur est activé. Le deuxième menu déroulant vous permet de choisir des Actions qui s'appliquent aux Interactions de Page ou aux Interactions d'Objet.

Pour les Interactions d'Objet, vous pouvez choisir : Visibilité des boutons à bascule, Montrer l'objet, Masquer l'objet, ou Faire défiler jusqu'à l'objet.

Action

Cible

Une Cible est le résultat final visible à la fin d'une interaction. Dans le cas des Interactions d'Objet, la section cible affiche un bouton cible vert. Après avoir cliqué sur ce bouton, vous pouvez utiliser le curseur en croix pour choisir un objet cible depuis la page ou depuis le Panneau de contour.

Target

Ajouter des interactions d'objet

Pour ajouter une Interaction d'Objet :

  1. Sélectionnez l'objet ou le groupe auquel vous souhaitez ajouter l'interaction
  2. Cliquez sur l'Onglet Interactions pour ouvrir le panneau
  3. Choisissez un Déclencheur dans le menu déroulant supérieur
  4. Dans le deuxième menu déroulant, sélectionnez une Action dans la liste des Interactions d'Objet
  5. Cliquez sur le bouton Cible pour activer le Mode de Sélection de Cible
  6. Pour sélectionner votre cible, cliquez sur n'importe quel objet ou groupe, soit sur la Page, soit dans le Panneau de contour
  7. Cliquez sur Terminé pour appliquer l'interaction

Définir l'état invisible

Lorsque vous créez une interaction, vous souhaitez souvent masquer l'objet cible afin qu'il soit invisible dans l'état initial, et n'apparaisse qu'après un événement déclencheur – par exemple, un menu déroulant qui se révèle uniquement lorsque la flèche du menu déroulant est cliquée.

Il existe deux façons de définir l'état d'un objet comme invisible :

Depuis le Panneau de contour

  1. Sélectionnez l'objet que vous souhaitez rendre invisible
  2. Naviguez vers la Barre Latérale Gauche et cliquez sur l'Onglet Contour pour ouvrir le panneau
  3. Dans l'Arborescence, le nom de l'objet sera mis en évidence en bleu
  4. Survolez le nom de l'objet et, juste à droite, cliquez sur le bouton Afficher/Masquer pour rendre l'objet invisible
Show/Hide button

Depuis le Panneau de format

  1. Sélectionnez l'objet que vous souhaitez rendre invisible
  2. Naviguez vers la Barre Latérale Droite et cliquez sur l'Onglet Format
  3. L'onglet deviendra bleu et ouvrira le Panneau de format
  4. En haut du Panneau de format, vous verrez le nom de l'objet en bleu
  5. Cliquez sur l'Icône Œil juste à droite du nom de votre objet pour rendre l'objet invisible
Eye Icon

Modifier, Dupliquer ou Supprimer des Interactions d'Objet

Lorsque vous appliquez une interaction à un objet, elle apparaît immédiatement dans la Liste des Interactions en haut du Panneau d'Interactions. À mesure que vous ajoutez d'autres interactions au même objet, vous les verrez apparaître là également. Vous pouvez facilement modifier ou supprimer n'importe quelle interaction de la liste – ou dupliquer une interaction pour une réutilisation rapide.

Modifier une Interaction

Modifier une interaction est utile lorsque vous souhaitez changer des parties d'une interaction déjà existante. En utilisant la fonction de modification, vous pouvez mettre à jour le Déclencheur, l'Action ou la Cible individuellement – sans affecter les autres parties de l'interaction.

Pour modifier une interaction :

  1. Sélectionnez l'objet ou le groupe d'objets dont vous souhaitez modifier l'interaction
  2. Cliquez sur l'Onglet Interactions pour ouvrir le Panneau d'Interactions
  3. En haut du panneau, localisez l'interaction que vous souhaitez modifier
  4. Cliquez sur le bouton Modifier pour activer le mode édition
  5. Modifiez l'interaction et cliquez sur Terminé pour enregistrer vos modifications
  6. Votre interaction mise à jour clignotera en vert dans la liste pendant quelques secondes
Edit Interaction

Dupliquer une Interaction

Souvent, vous souhaitez appliquer différentes variations d'une interaction au même objet. La fonction Dupliquer vous permet de dupliquer une interaction existante, puis de modifier son Déclencheur, son Action et sa Cible selon vos besoins.

Pour dupliquer une interaction :

  1. Sélectionnez l'objet ou le groupe dont vous souhaitez dupliquer une interaction
  2. Cliquez sur l'Onglet Interactions pour ouvrir le Panneau d'Interactions
  3. En haut du panneau, localisez l'interaction que vous souhaitez dupliquer
  4. Cliquez sur l'icône Copier et une interaction identique apparaîtra dans la Liste des Interactions en haut du panneau
  5. Pour modifier la nouvelle interaction, cliquez sur le bouton Modifier et suivez les étapes de la section Modifier les Interactions de cet article
Duplicate Interaction

Supprimer une Interaction

Pour supprimer une interaction :

  1. Sélectionnez l'objet ou le groupe d'objets dont vous souhaitez supprimer une interaction
  2. Cliquez sur l'Onglet Interactions pour ouvrir le Panneau d'Interactions
  3. En haut du panneau, localisez l'interaction que vous souhaitez supprimer
  4. Cliquez sur le bouton Supprimer
Delete Interaction

Questions et réponses

Quelles interactions fonctionnent dans un PDF exporté ?

Toutes les Interactions de Page fonctionnent normalement, à l'exception de Retour, qui repose sur l'historique de votre navigateur pour la direction. Les Interactions d'Objet ne fonctionnent pas dans les PDFs.

Si vous souhaitez fournir aux parties prenantes un prototype entièrement fonctionnel, invitez-les comme invités du projet, ou partagez un lien de projet. Apprenez à faire les deux dans Partage. Vous pouvez également exporter un visionneur HTML hors ligne interactif.