{"id":124721,"date":"2018-03-21T15:03:21","date_gmt":"2018-03-21T14:03:21","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/the-scenarios-module\/"},"modified":"2025-02-03T16:44:20","modified_gmt":"2025-02-03T15:44:20","slug":"the-scenarios-module","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/le-module-flux-utilisateur","title":{"rendered":"Le module Flux d’utilisateurs"},"content":{"rendered":"

Le module Flux d’utilisateurs offre un outil de diagramme robuste qui peut \u00eatre connect\u00e9 au reste de votre prototype. Il peut fournir aux parties prenantes de vos projets diff\u00e9rentes fa\u00e7ons de visualiser ce qui est difficile \u00e0 visualiser dans le prototype. Les utilisations typiques des flux d’utilisateurs sont le diagramme des flux d’utilisateurs, leur simulation et leur validation. <\/p>\n

<\/a>Vue d’ensemble<\/h2>\n

\"module<\/p>\n

    \n
  1. Barre d’outils – vous trouverez ici tous les \u00e9l\u00e9ments permettant de dessiner un flux d’utilisateurs dans le canevas. Vous trouverez des composants tels que des \u00e9crans, des actions, des d\u00e9cisions, des notes (zones de texte), des images ou des connexions pour relier tous ces \u00e9l\u00e9ments entre eux. Vous pouvez \u00e9galement lancer la simulation de votre flux d’utilisateurs. Vous trouverez une description d\u00e9taill\u00e9e de chaque \u00e9l\u00e9ment de la barre d’outils dans la section suivante. <\/li>\n
  2. Planches – une liste de toutes les planches que vous avez cr\u00e9\u00e9es. Vous pouvez modifier le tableau affich\u00e9 dans le canevas en cliquant sur les tableaux de cette liste. <\/li>\n
  3. \u00c9crans – les \u00e9crans du prototype sur lequel vous travaillez actuellement dans le module UI. Si vous faites glisser un \u00e9cran vers le prototype, un \u00e9l\u00e9ment Screen sera ajout\u00e9 au tableau li\u00e9 \u00e0 cet \u00e9cran. <\/li>\n
  4. Canvas – affiche le contenu du tableau. Vous pouvez utiliser les outils de la barre d’outils ou les \u00e9crans de la palette pour organiser votre flux d’utilisateurs. <\/li>\n
  5. Propri\u00e9t\u00e9s – liste des propri\u00e9t\u00e9s de l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9 dans le canevas. Vous pouvez modifier de nombreuses propri\u00e9t\u00e9s de style de chaque \u00e9l\u00e9ment pour les personnaliser. <\/li>\n<\/ol>\n

    <\/a>La barre d’outils du module Flux d’utilisateurs<\/h2>\n

    Dans la barre d’outils Flux d’utilisateurs, vous trouverez les options suivantes :
    \n\"\"<\/p>\n

      \n
    1. Accueil – pour acc\u00e9der \u00e0 votre \u00e9cran d’accueil.<\/li>\n
    2. Outil de s\u00e9lection – cliquez ici pour passer d’un autre outil \u00e0 l’outil de s\u00e9lection.<\/li>\n
    3. Outil \u00c9cran – cliquez puis cliquez \u00e0 nouveau dans le canevas pour ajouter un \u00e9l\u00e9ment \u00c9cran au tableau. Par d\u00e9faut, les \u00e9l\u00e9ments d’\u00e9cran ne sont que des ic\u00f4nes dans le diagramme, mais vous pouvez les lier \u00e0 des \u00e9crans sp\u00e9cifiques dans le prototype \u00e0 l’aide de la palette Propri\u00e9t\u00e9s. Une fois li\u00e9e, l’ic\u00f4ne sera remplac\u00e9e par une capture d’\u00e9cran synchronis\u00e9e de l’\u00e9cran li\u00e9. <\/li>\n
    4. Outil de d\u00e9cision – cliquez puis cliquez \u00e0 nouveau dans le canevas pour ajouter un \u00e9l\u00e9ment de d\u00e9cision au tableau. Les d\u00e9cisions ne servent qu’\u00e0 cr\u00e9er des diagrammes, elles n’affectent pas la navigation dans votre prototype. <\/li>\n
    5. Outil Action – cliquez puis cliquez \u00e0 nouveau dans le canevas pour ajouter un \u00e9l\u00e9ment Action au tableau. Les actions ne servent qu’\u00e0 cr\u00e9er des diagrammes et n’affectent pas la navigation dans votre prototype. <\/li>\n
    6. Outil Connecteur – cliquez puis cliquez \u00e0 nouveau dans le canevas pour ajouter un \u00e9l\u00e9ment Screen au tableau.  Un connecteur est un \u00e9l\u00e9ment de diagramme utilis\u00e9 pour commencer\/terminer un flux d’utilisateurs.<\/li>\n
    7. Outil texte – cet outil vous permet d’\u00e9crire du texte dans vos diagrammes.<\/li>\n
    8. Outil Note – vous pouvez utiliser cet outil pour dessiner des zones de texte dans votre diagramme. Les notes sont hautement personnalisables et peuvent \u00eatre utilis\u00e9es pour dessiner n’importe quel type de diagramme. <\/li>\n
    9. Outil Image – en cliquant sur cet outil, vous pourrez ajouter n’importe quel fichier image au tableau.<\/li>\n
    10. Outils de connexion – cet outil permet d’ajouter des connexions entre les \u00e9l\u00e9ments du diagramme. Le premier type de connexion sera rectiligne et le second droit. Vous pouvez modifier cela dans la palette Propri\u00e9t\u00e9s. <\/li>\n
    11. Niveau de zoom – vous pouvez contr\u00f4ler le niveau de zoom dans le canevas \u00e0 l’aide de ce composant. En cliquant sur la fl\u00e8che, vous verrez appara\u00eetre d’autres options de zoom. <\/li>\n
    12. Voir sur l’appareil, Simuler et Partager – \u00e9quivalents aux m\u00eames ic\u00f4nes dans le module d’interface utilisateur.<\/li>\n<\/ol>\n

      <\/a>Cr\u00e9ation d’un nouveau tableau<\/h2>\n

      Pour cr\u00e9er un nouveau tableau, cliquez sur l’ic\u00f4ne \u00ab\u00a0+\u00a0\u00bb dans la palette des tableaux. Vous y trouverez \u00e9galement une liste de tous les tableaux que vous avez cr\u00e9\u00e9s. Si vous souhaitez ouvrir un tableau, il vous suffit de cliquer dessus. Un double-clic vous permettra de renommer un tableau et un clic droit (ctrl+clic sur Mac) affichera des options suppl\u00e9mentaires.
      \n\"Cr\u00e9er<\/p>\n

      <\/a>Diagramme des transitions et validation des flux<\/h2>\n

      Vous pouvez \u00e9tablir des connexions entre les \u00e9l\u00e9ments de votre diagramme en utilisant les outils de connexion de la barre d’outils. Tout d’abord, cliquez sur l’un de ces outils et vous verrez le curseur changer. D\u00e9placez-vous sur l’un des \u00e9l\u00e9ments de votre canevas et vous verrez un aper\u00e7u du point de d\u00e9part de la connexion. Cliquez sur un autre \u00e9l\u00e9ment du canevas et faites-le glisser pour cr\u00e9er une nouvelle connexion. Vous pouvez personnaliser l’aspect et la convivialit\u00e9 de cette connexion dans la palette Propri\u00e9t\u00e9s. Si la connexion est entre deux \u00e9crans, Justinmind v\u00e9rifiera si cette navigation implicite correspond \u00e0 l’un des \u00e9v\u00e9nements cr\u00e9\u00e9s dans ces \u00e9crans dans le module Interface utilisateur. Si ce n’est pas le cas, une ic\u00f4ne d’avertissement s’affichera. Si, \u00e0 un moment donn\u00e9, vous cr\u00e9ez un \u00e9v\u00e9nement de navigation entre ces \u00e9crans, le message d’avertissement dans ces connexions dispara\u00eetra. <\/p>\n

      \"Diagramme
      \nToutes les informations contenues dans le diagramme peuvent \u00eatre export\u00e9es vers un document MS Word avec le reste des informations du prototype. Utilisez les options du menu principal \u00ab\u00a0Fichier – Exporter – Document sp\u00e9c. <\/p>\n

      <\/a>Cr\u00e9ation d’\u00e9crans \u00e0 partir du module Flux d’utilisateurs<\/h2>\n

      Les flux utilisateurs peuvent \u00eatre un bon point de d\u00e9part pour le design de vos applications, avant d’entrer dans les d\u00e9tails du contenu de chaque \u00e9cran et de leurs interactions. Dans de nombreuses m\u00e9thodologies, la d\u00e9finition des User Flows est la premi\u00e8re \u00e9tape avant de se lancer dans le design UI \/ UX ou m\u00eame le wireframing. L’avantage est que vous n’avez pas \u00e0 faire le travail deux fois puisque vous pouvez cr\u00e9er des \u00e9crans \u00e0 partir de la palette d’\u00e9crans ou de la barre d’outils. Pour ce faire, cliquez avec le bouton droit de la souris sur un \u00e9cran et s\u00e9lectionnez l’option \u00ab\u00a0Modifier l’\u00e9cran\u00a0\u00bb. Un nouvel \u00e9cran sera ajout\u00e9 au prototype avec le nom que vous avez d\u00e9fini dans le module Flux d’utilisateurs et vous serez automatiquement dirig\u00e9 vers cet \u00e9cran dans le module Interface utilisateur.
      \n\"Cr\u00e9ation
      \nEnsuite, vous pouvez concevoir le contenu et les interactions de cet \u00e9cran pour \u00e9toffer le flux de navigation. Si vous revenez \u00e0 votre tableau, vous verrez une capture d’\u00e9cran synchronis\u00e9e de l’\u00e9cran actuel. <\/p>\n

      <\/a>Simulation des flux d’utilisateurs<\/h2>\n

      Vous pouvez afficher vos flux d’utilisateurs dans votre simulation comme s’il s’agissait de n’importe quel autre \u00e9cran. Une fois en mode simulation, vous pouvez m\u00eame restreindre la navigation de votre prototype en fonction de ce qui est d\u00e9fini dans l’un de vos flux d’utilisateurs. Pour cela, suivez les \u00e9tapes suivantes : <\/p>\n

        \n
      1. Allez dans la barre d’outils et cliquez sur l’ic\u00f4ne \u00ab\u00a0Play\u00a0\u00bb pour lancer la simulation.<\/li>\n
      2. Dans la fen\u00eatre du mode Simulation qui appara\u00eet, cliquez sur le menu hamburger dans le coin sup\u00e9rieur droit. Un menu d\u00e9roulant appara\u00eet avec deux onglets : \u00ab\u00a0\u00c9crans\u00a0\u00bb et \u00ab\u00a0Flux d’utilisateurs\u00a0\u00bb. <\/li>\n
      3. Allez dans l’onglet \u00ab\u00a0Flux d’utilisateurs\u00a0\u00bb et s\u00e9lectionnez la carte o\u00f9 se trouve le flux d’utilisateurs que vous souhaitez simuler.<\/li>\n
      4. Dans le canevas de simulation, cliquez sur le composant o\u00f9 vous avez d\u00e9fini le d\u00e9but de votre flux de navigation. Dans la fen\u00eatre qui s’affiche, cliquez sur \u00ab\u00a0D\u00e9marrer\u00a0\u00bb. La simulation lancera alors cet \u00e9cran, mais seuls les \u00e9v\u00e9nements de navigation correspondant aux fl\u00e8ches de ce flux fonctionneront. Vous pouvez pr\u00e9visualiser l’\u00e9tape \u00e0 laquelle vous vous trouvez dans votre flux sur la barre sup\u00e9rieure. <\/li>\n<\/ol>\n
        Remarque :<\/strong> si vous souhaitez simuler cet \u00e9cran particulier sans le flux d’utilisateurs, cliquez sur \u00ab\u00a0Aller \u00e0 l’\u00e9cran\u00a0\u00bb pour acc\u00e9der \u00e0 l’\u00e9cran sans le flux correspondant.<\/div>\n

        Vous pouvez arr\u00eater la simulation en cours et\/ou modifier le flux de navigation, en supprimant le filtre dans la barre d’outils sup\u00e9rieure de la fen\u00eatre de simulation, comme suit :
        \n\"Simulation<\/p>\n

        R\u00e9vision<\/h3>\n

        Si vous partagez votre prototype, vous avez la possibilit\u00e9 de partager \u00e9galement le flux de ce prototype. Les \u00e9valuateurs pourront alors voir les diagrammes et y ajouter des commentaires. Ils peuvent m\u00eame ajouter des commentaires \u00e0 des \u00e9l\u00e9ments sp\u00e9cifiques d’un flux. <\/p>\n

        <\/a>Diagramme des plans du site<\/h2>\n

        Il est tr\u00e8s facile de sch\u00e9matiser un plan de site \u00e0 l’aide du module Flux d’utilisateurs. Cliquez d’abord sur l’outil Note, puis sur le Canevas. Personnalisez l’aspect et la convivialit\u00e9 de cette note \u00e0 l’aide de la palette Propri\u00e9t\u00e9s. Ensuite, copiez et collez cette note (ou zone de texte) pour autant d’\u00e9crans que vous d\u00e9finissez dans votre plan du site. Enfin, utilisez l’outil de connexion pour sch\u00e9matiser votre plan du site et d\u00e9finir la hi\u00e9rarchie de vos \u00e9crans. <\/p>\n

        \"cr\u00e9er<\/p>\n","protected":false},"excerpt":{"rendered":"

        Le module Flux d’utilisateurs offre un outil de diagramme robuste qui peut \u00eatre connect\u00e9 au reste de votre prototype. Il peut fournir aux parties prenantes de…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8439,8436],"tags":[],"class_list":["post-124721","post","type-post","status-publish","format-standard","hentry","category-lespace-de-travail","category-guide-de-lutilisateur"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124721"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124721"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124721\/revisions"}],"predecessor-version":[{"id":126143,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124721\/revisions\/126143"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}