Apprenez à créer des prototypes interactifs dans Adobe XD afin de tester et d’améliorer l’expérience utilisateur.

Une fois que vous avez fini de mettre au point vos différents écrans, vous pouvez les relier les uns aux autres pour visualiser le résultat et voir ce que va donner votre application ou site web.

Adobe XD vous permet de créer des prototypes interactifs pour visualiser la navigation entre les écrans ou les wireframes. Vous pouvez prévisualiser les interactions pour contrôler l’expérience utilisateur et la reproduire sur votre design afin de gagner du temps au niveau du développement. Vous pouvez également enregistrer les interactions et les partager avec les personnes impliquées dans le projet pour obtenir leur avis. Utilisez les fonctions de zoom avant et arrière pour visualiser en détail certaines parties du prototype.

Définition de l’écran d’accueil

L’écran d’accueil est le tout premier écran de votre application ou site web. C’est à partir de cet écran que les utilisateurs pourront commencer à parcourir l’application ou le site.

Lorsque vous affichez l’aperçu de votre prototype sans avoir effectué de sélection préalable, c’est également sur l’écran d’accueil que débute l’aperçu. Par défaut, votre écran d’accueil est donc défini sur le premier plan de travail auquel vous ajoutez un lien.

  1. Passez en mode Prototype.

  2. Cliquez sur le plan de travail que vous souhaitez définir comme écran d’accueil. Une icône d’accueil grise apparaît dans le coin supérieur gauche.

  3. Cliquez sur l’icône d’accueil. Elle devient bleue, indiquant que le plan de travail ou l’écran est désormais défini comme écran d’accueil.

    Option Définir comme écran d’accueil
    Option Définir comme écran d’accueil
    Écran d’accueil défini
    Écran d’accueil défini

    Pour définir un autre plan de travail comme écran d’accueil, il suffit de cliquer sur l’icône d’accueil qui lui est associée.

Création de liens entre éléments interactifs et écrans cibles

Avant de commencer à relier des plans de travail ou des écrans, nommez-les correctement. Cela vous aide à identifier l’écran auquel vous souhaitez lier un écran donné.

  1. Passez en mode Prototype.

  2. Cliquez sur l’objet pour lequel vous souhaitez créer un lien.

    Une poignée de connexion fléchée apparaît sur l’objet. Lorsque vous passez la souris sur la poignée, le curseur se transforme en connecteur.

    Création de liens entre éléments interactifs et écrans cibles
    Création de liens entre éléments interactifs et écrans cibles
  3. Cliquez dessus et commencez à faire glisser la souris pour afficher le connecteur. Relâchez le bouton de la souris lorsqu’elle se trouve sur le plan de travail ou l’écran cible souhaité.

    Lorsque vous associez le premier élément, le plan de travail de cet élément est défini comme plan de travail d’accueil. 

  4. Dans la fenêtre contextuelle qui apparaît, vous pouvez spécifier les éléments suivants :

    • Options et durée de transition : si vous souhaitez conserver la position de défilement lors de la transition vers un autre plan de travail, sélectionnez Conserver la position de défilement. Cette option est très utile lorsque vous créez des prototypes de barres de navigation ou de pieds de page fixes. Si l’utilisateur fait défiler le plan de travail d’origine, le plan de travail suivant reconnaît la position de défilement depuis le plan de travail d’origine. Lorsque vous cliquez sur un plan de travail ou sur n’importe quel élément du plan de travail, vous pouvez contrôler la position de défilement afin qu’il reste toujours à son emplacement d’origine d’un écran à l’autre. Cela évite les défilements répétés dans un sens ou dans l’autre au sein du fichier du projet. Par exemple, si un utilisateur fait défiler jusqu’à y=1000 sur le plan de travail A, la transition vers le plan de travail B se place par défaut à y=1000. Si le plan de travail d’origine n’a pas de défilement défini, l’option Conserver la position de défilement est inactive.
    • Superposition : si vous souhaitez simuler les états ou les transitions, par exemple les menus déroulants et les claviers coulissants, sélectionnez Superposition.

    Appuyez sur Echap ou cliquez en dehors de la fenêtre contextuelle pour la fermer.

    Utilisation des superpositions
    Utilisation des superpositions
  5. Répétez la procédure ci-dessus afin de créer des liens pour tous les éléments interactifs de votre projet.

    CONSEIL :

    En mode Prototype, pour accélérer le processus de création d’interactions :

    • Vous pouvez copier et coller des objets entre différents plans de travail. L’objet est copié et collé avec son interaction.
    • Vous pouvez aussi copier et coller l’interaction seule. Copiez un objet, faites un clic droit sur un autre objet, puis sélectionnez Coller l’interaction. Seule l’interaction est collée.
    • Pour faire pointer un élément vers un autre écran, cliquez à nouveau sur la poignée et faites-la glisser jusqu’à l’écran voulu.
    • Pour afficher les connexions vers ou depuis un plan de travail donné, sélectionnez son titre.
    • Pour supprimer une interaction, faites glisser la poignée de destination du connecteur hors d’un plan de travail cible, vers la zone de brouillon.
    Éléments interactifs avec liens vers des écrans cibles
    Éléments interactifs avec liens vers des écrans cibles

    A. Écran d’accueil B. Plans de travail associés C. Connexion sortante D. Connexion entrante 

    Remarque :

    Les liens en gris indiquent les connexions sortantes, et les liens en bleu montrent les connexions entrantes.

Utilisation des transitions temporisées

La transition temporisée dans Adobe XD vous permet de créer des expériences de prototype enrichies telles que les flux d’intégration, la redirection automatique vers un écran différent ou les barres d’avancement. De la même manière que lorsque vous appuyez pour déclencher des transitions, vous pouvez définir un délai pour spécifier la durée de la transition. Par exemple, lorsque vous créez des workflows d’intégration, vous pouvez utiliser l’option Délai pour lier et appliquer une transition entre des plans de travail.

En tant que designer, vous pouvez également utiliser une durée pour déclencher la transition vers un autre plan de travail. Par exemple, si vous concevez des flux d’intégration, vous pouvez utiliser une transition temporisée pour commencer par un écran de démarrage de flux d’application et appliquer automatiquement une transition entre quelques écrans d’intégration.

Créer une transition temporisée pour des workflows intégrés

Transitions temporisées
Transitions temporisées
  1. Dans XD, basculez vers le mode Prototype .

  2. Pour afficher le connecteur, sélectionnez le plan de travail et utilisez le survol de la souris sur la poignée.

  3. Sélectionnez le connecteur, puis faites-le glisser du plan de travail source vers le plan de travail de destination. Lorsque vous associez le premier élément, le plan de travail de cet élément est défini comme plan de travail d’accueil.

  4. Dans la fenêtre contextuelle du déclencheur, définissez les options suivantes :

    • Déclencheur : définissez-le sur Heure.
    • Délai : définissez le délai de transition en secondes.
    • Durée : définissez la durée de la transition en secondes.
    • Action : définissez-la sur Transition.
    Définir le déclencheur, le délai, la durée et l’action
    Définir le déclencheur, le délai, la durée et l’action

    A. Définir le déclencheur sur Heure B. Définir le retard en secondes C. Définir l’action sur Transition D. Définir la durée en secondes 
  5. Sélectionnez l’icône Aperçu sur ordinateur  pour prévisualiser les modifications.

Vérifier le lien du prototype sur le web

  1. Dans l’application pour postes de travail, cliquez sur le bouton Partager dans l’angle supérieur droit et choisissez Partager pour révision. Lorsque le lien est créé, vous pouvez le copier et ouvrir le prototype sur le navigateur. Les transitions temporelles s’affichent au fur et à mesure que vous les créez dans l’application XD pour postes de travail.

  2. Pour arrêter la transition temporelle, appuyez sur la touche flèche arrière ou le bouton de navigation vers l’arrière, qui vous ramène à l’écran précédent.

  3. Lorsque vous arrêtez la transition pour la première fois, Adobe XD affiche une notification qui signale l’arrêt de la transition temporelle. Pour reprendre la transition, appuyez sur le bouton de navigation vers la droite ou sur la touche flèche vers la droite du clavier pour que la transition continue.

Lien vers le plan de travail précédent

  1. En mode Prototype, sélectionnez l’élément que vous souhaitez lier. Lorsqu’une petite flèche apparaît, cliquez sur celle-ci pour définir automatiquement l’action comme plan de travail précédent. Vous pouvez également lier l’élément à un plan de travail et sélectionner Action > Plan de travail précédent.

    Sélection du plan de travail précédent
    Sélection du plan de travail précédent
  2. Quand l’action est définie sur Plan de travail précédent, l’icône change.

    Définition de la cible
    Définition de la cible
  3. Utilisez la fenêtre d’aperçu pour prévisualiser le lien créé.

Dissociation de plans de travail

  1. En mode Prototype, cliquez sur Cible > Aucun.

    Vous pouvez également faire glisser le lien depuis le plan de travail vers la zone de brouillon (espace gris situé entre les plans de travail).

    Dissociation de plans de travail
    Dissociation de plans de travail

    Remarque :

    L’option Aucun n’est disponible que si le plan de travail est déjà lié à une cible.

  2. Affichez l’aperçu du lien dans un navigateur.

    Le cas échéant, le lien cible précédemment défini à partir de l’élément est supprimé.

Aperçu et enregistrement des interactions

Remarque :

L’enregistrement des prototypes n’est pas pris en charge dans Adobe XD sous Windows. Mais il existe une solution. Appuyez sur les touches Windows + G et utilisez l’enregistreur natif pour enregistrer la fenêtre d’aperçu.

Pour tester votre prototype avec les interactions définies, vous pouvez afficher son aperçu. Vous pouvez également enregistrer l’aperçu et sauvegarder l’enregistrement au format .mp4. Il vous suffit ensuite de partager ce fichier .mp4 avec vos collaborateurs, qui pourront visionner (et éventuellement vérifier) chaque étape du prototype et vous faire part de leurs commentaires.

  1. Cliquez sur l’icône Aperçu sur ordinateur. La fenêtre d’aperçu apparaît et affiche le plan de travail actif.

    Pour tester la navigation entre les écrans, cliquez sur les éléments interactifs.

    Vous pouvez modifier le design et les interactions de votre prototype lorsque l’aperçu est affiché. Les modifications sont instantanément visibles dans l’aperçu.

  2. Pour enregistrer l’interaction, cliquez sur l’icône Enregistrer dans la fenêtre d’aperçu. Pour terminer l’enregistrement, appuyez sur la touche Echap ou cliquez à nouveau sur l’icône Enregistrer.

    Enregistrement d’interactions de prototypes
    Enregistrement d’interactions de prototypes
  3. Spécifiez un nom et un emplacement dans lequel vous souhaitez sauvegarder l’enregistrement. Celui-ci est sauvegardé sous forme de fichier .mp4.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne