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. Servez-vous des fonctions de zoom avant et arrière pour observer 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.

    Définition de l’écran d’accueil
    Définition de l’écran d’accueil
  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.

    L’icône d’accueil devient bleue une fois le plan de travail défini comme écran d’accueil
    L’icône d’accueil devient bleue une fois le plan de travail défini comme écran d’accueil

    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

  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. Si l’utilisateur a fait défiler le plan de travail d’origine, le suivant reconnaît la position de défilement du 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 sa position 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 n’est pas active. Cette option est très utile lorsque vous créez des prototypes de barres de navigation ou de pieds de page fixes.
    • 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.
    all-connectors
    Éléments interactifs avec liens vers des écrans cibles

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.

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 des indicateurs de progression. 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’optionDé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 depuis le plan de travail source vers le plan de travail cible. 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 Temps.
    • 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 Temps 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 l’icône Partager dans l’angle supérieur droit et choisissez Publier le prototype. 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, cliquez sur Cible > 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. Définissez l’option Cible sur Plan de travail précédent. L’icône change une fois que la cible est définie.

  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).

    Valeur « Aucun » affectée à l’option « Lien vers un plan 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 Enregistrer dans la fenêtre d’aperçu. Pour terminer l’enregistrement, appuyez sur la touche Echap ou cliquez à nouveau sur Enregistrer.

    preview-record
    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