{"id":129071,"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-13T18:53:43","modified_gmt":"2025-02-13T17:53:43","slug":"the-scenarios-module","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/modul-benutzerstrome","title":{"rendered":"Das Modul Benutzerstr\u00f6me"},"content":{"rendered":"

Das Modul Benutzerstr\u00f6me bietet ein robustes Diagrammwerkzeug, das mit dem Rest Ihres Prototyps verbunden werden kann. Es kann den Beteiligten an Ihren Projekten verschiedene M\u00f6glichkeiten zur Visualisierung bieten, die im Prototyp nur schwer darstellbar sind. Die typischen Verwendungszwecke von User Flows sind die Erstellung von Diagrammen, die Simulation und die Validierung von User Flows. <\/p>\n

<\/a>\u00dcbersicht<\/h2>\n

\"Modul<\/p>\n

    \n
  1. Symbolleiste – hier finden Sie alle Elemente, um einen Benutzerfluss im Canvas zu zeichnen. Sie finden hier Komponenten wie Bildschirme, Aktionen, Entscheidungen, Notizen (Textfelder), Bilder oder Verbindungen, um all diese Elemente miteinander zu verbinden. Sie k\u00f6nnen auch die Simulation Ihres Benutzerflusses starten. Eine detaillierte Beschreibung der einzelnen Elemente der Symbolleiste finden Sie im n\u00e4chsten Abschnitt. <\/li>\n
  2. Boards – eine Liste aller Boards, die Sie erstellt haben. Sie k\u00f6nnen das im Canvas angezeigte Board \u00e4ndern, indem Sie auf die Boards in dieser Liste klicken. <\/li>\n
  3. Bildschirme – die Bildschirme des Prototyps, an dem Sie gerade im UI-Modul arbeiten. Wenn Sie einen Bildschirm auf den Prototyp ziehen, wird dem Board, das mit diesem Bildschirm verkn\u00fcpft ist, ein Screen-Element hinzugef\u00fcgt. <\/li>\n
  4. Canvas – zeigt den Inhalt des Boards an. Sie k\u00f6nnen die Werkzeuge in der Symbolleiste oder die Bildschirme in der Palette verwenden, um Ihren Benutzerablauf zu gestalten. <\/li>\n
  5. Eigenschaften – eine Liste von Eigenschaften f\u00fcr das ausgew\u00e4hlte Element im Canvas. Sie k\u00f6nnen viele Stileigenschaften der einzelnen Elemente bearbeiten, um sie nach Ihren Vorstellungen zu gestalten. <\/li>\n<\/ol>\n

    <\/a>Die Symbolleiste des Moduls Benutzerstr\u00f6me<\/h2>\n

    In der Symbolleiste Benutzerstr\u00f6me finden Sie die folgenden Optionen:
    \n\"\"<\/p>\n

      \n
    1. Home – Gehen Sie zu Ihrem Home-Bildschirm.<\/li>\n
    2. Werkzeug ausw\u00e4hlen – klicken Sie hier, um von einem anderen Werkzeug zum Auswahlwerkzeug zu wechseln.<\/li>\n
    3. Bildschirmwerkzeug – Klicken Sie auf die Leinwand und dann erneut, um ein Bildschirmelement zur Tafel hinzuzuf\u00fcgen. Bildschirm-Elemente sind standardm\u00e4\u00dfig nur Symbole im Diagramm, aber Sie k\u00f6nnen sie mit Hilfe der Eigenschaften-Palette mit bestimmten Bildschirmen im Prototyp verkn\u00fcpfen. Sobald die Verkn\u00fcpfung hergestellt ist, wird das Symbol durch einen synchronisierten Screenshot des verkn\u00fcpften Bildschirms ersetzt. <\/li>\n
    4. Entscheidungstool – Klicken Sie auf die Leinwand und dann noch einmal, um der Tafel ein Entscheidungselement hinzuzuf\u00fcgen. Entscheidungen dienen nur zu Diagrammzwecken, sie haben keinen Einfluss auf die Navigation Ihres Prototyps. <\/li>\n
    5. Aktionswerkzeug – Klicken Sie auf die Leinwand und dann erneut, um ein Aktionselement zur Tafel hinzuzuf\u00fcgen. Aktionen sind nur f\u00fcr Diagrammzwecke gedacht, sie haben keinen Einfluss auf die Navigation Ihres Prototyps. <\/li>\n
    6. Verbindungswerkzeug – Klicken Sie auf die Leinwand und dann erneut, um ein Bildschirmelement zur Tafel hinzuzuf\u00fcgen.  Ein Konnektor ist ein Diagrammelement, das zum Starten\/Ende eines Benutzerflusses verwendet wird.<\/li>\n
    7. Textwerkzeug – mit diesem Werkzeug k\u00f6nnen Sie Text in Ihre Diagramme schreiben.<\/li>\n
    8. Notizwerkzeug – mit diesem Werkzeug k\u00f6nnen Sie Textfelder in Ihrem Diagramm zeichnen. Notizen sind in hohem Ma\u00dfe anpassbar und k\u00f6nnen zum Zeichnen jeder Art von Diagramm verwendet werden. <\/li>\n
    9. Bildwerkzeug – wenn Sie auf dieses Werkzeug klicken, k\u00f6nnen Sie eine beliebige Bilddatei zum Board hinzuf\u00fcgen.<\/li>\n
    10. Verbindungswerkzeuge – mit diesem Werkzeug f\u00fcgen Sie Verbindungen zwischen Elementen im Diagramm hinzu. Die erste Art der Verbindung ist geradlinig, die zweite gerade. Sie k\u00f6nnen dies in der Palette Eigenschaften \u00e4ndern. <\/li>\n
    11. Zoomstufe – mit dieser Komponente k\u00f6nnen Sie die Zoomstufe im Canvas steuern. Wenn Sie auf den Pfeil klicken, werden zus\u00e4tzliche Zoomoptionen angezeigt. <\/li>\n
    12. Auf dem Ger\u00e4t anzeigen, Simulieren und Freigeben – entspricht den gleichen Symbolen im Modul Benutzeroberfl\u00e4che.<\/li>\n<\/ol>\n

      <\/a>Ein neues Brett erstellen<\/h2>\n

      Um ein neues Board zu erstellen, klicken Sie auf das ‚+‘-Symbol in der Boards-Palette. Hier sehen Sie auch eine Liste mit allen Boards, die Sie erstellt haben. Wenn Sie ein Board \u00f6ffnen m\u00f6chten, klicken Sie es einfach an. Mit einem Doppelklick k\u00f6nnen Sie ein Board umbenennen und mit einem Rechtsklick (Strg+Klick auf Mac) werden weitere Optionen angezeigt.
      \n\"Ein<\/p>\n

      <\/a>Diagramme f\u00fcr \u00dcberg\u00e4nge und Flussvalidierung<\/h2>\n

      Sie k\u00f6nnen Verbindungen zwischen Elementen in Ihrem Diagramm zeichnen, indem Sie die Verbindungswerkzeuge aus der Symbolleiste verwenden. Klicken Sie zun\u00e4chst auf eines dieser Werkzeuge und Sie sehen, wie sich der Mauszeiger ver\u00e4ndert. Bewegen Sie den Mauszeiger \u00fcber eines der Elemente auf Ihrer Leinwand und Sie sehen eine Vorschau des Startpunkts f\u00fcr diese Verbindung. Klicken und ziehen Sie auf ein anderes Element auf der Leinwand, um eine neue Verbindung zu erstellen. <\/p>\n

      Sie k\u00f6nnen das Aussehen dieser Verbindung in der Eigenschaften-Palette anpassen. Wenn die Verbindung zwischen zwei Bildschirmen besteht, pr\u00fcft Justinmind, ob die implizite Navigation mit einem der Ereignisse \u00fcbereinstimmt, die in diesen Bildschirmen im Modul Benutzeroberfl\u00e4che erstellt wurden. Wenn dies nicht der Fall ist, wird ein Warnsymbol eingeblendet. Wenn Sie zu irgendeinem Zeitpunkt ein Navigationsereignis zwischen diesen Bildschirmen erstellen, wird die Warnmeldung in diesen Verbindungen nicht mehr angezeigt.
      \n\"Diagramme
      \nAlle Informationen im Diagramm k\u00f6nnen zusammen mit den \u00fcbrigen Informationen des Prototyps in ein MS Word-Dokument exportiert werden. Verwenden Sie dazu die Hauptmen\u00fcoptionen ‚Datei – Exportieren – Spezifisches Dokument\/Anpassen des spezifischen Dokuments‘. <\/p>\n

      <\/a>Erstellen von Bildschirmen aus dem Modul Benutzerstr\u00f6me<\/h2>\n

      User Flows k\u00f6nnen ein guter Ausgangspunkt f\u00fcr das Design Ihrer Anwendungen sein, bevor Sie sich mit den Details der Inhalte der einzelnen Bildschirme und deren Interaktionen befassen. Bei vielen Methoden ist die Definition von Benutzerstr\u00f6men der erste Schritt, bevor Sie mit dem UI \/ UX design oder sogar dem wireframing beginnen. Das Gute daran ist, dass Sie diese Arbeit nicht zweimal machen m\u00fcssen, denn Sie k\u00f6nnen Screens \u00fcber die Screen-Palette oder die Symbolleiste erstellen. Klicken Sie dazu mit der rechten Maustaste auf einen Bildschirm und w\u00e4hlen Sie die Option ‚Bildschirm bearbeiten‘. Dem Prototyp wird ein neuer Bildschirm mit dem Namen hinzugef\u00fcgt, den Sie im Modul Benutzerabl\u00e4ufe festgelegt haben, und Sie werden automatisch zu diesem Bildschirm im Modul Benutzeroberfl\u00e4che weitergeleitet.
      \n\"Erstellen
      \nDann k\u00f6nnen Sie den Inhalt und die Interaktionen dieses Bildschirms designen, um den Navigationsfluss zu vervollst\u00e4ndigen. Wenn Sie zu Ihrem Board zur\u00fcckkehren, sehen Sie einen synchronisierten Screenshot des aktuellen Bildschirms. <\/p>\n

      <\/a>Benutzerstr\u00f6me simulieren<\/h2>\n

      Sie k\u00f6nnen Ihre Benutzerabl\u00e4ufe in der Simulation so anzeigen, als w\u00e4ren sie ein beliebiger anderer Bildschirm. Sobald Sie sich im Simulationsmodus befinden, k\u00f6nnen Sie die Navigation Ihres Prototyps sogar auf das beschr\u00e4nken, was in einem Ihrer Benutzerabl\u00e4ufe definiert ist. F\u00fchren Sie dazu die folgenden Schritte aus: <\/p>\n

        \n
      1. Gehen Sie zur Symbolleiste und klicken Sie auf das Symbol ‚Abspielen‘, um die Simulation zu starten.<\/li>\n
      2. Klicken Sie im erscheinenden Fenster Simulationsmodus auf das Hamburger-Men\u00fc in der oberen rechten Ecke. Es erscheint ein Schiebe-Men\u00fc mit zwei Registerkarten: „Bildschirme“ und „Benutzerabl\u00e4ufe“. <\/li>\n
      3. Gehen Sie auf die Registerkarte „Benutzerabl\u00e4ufe“ und w\u00e4hlen Sie die Karte aus, auf der sich der Benutzerablauf befindet, den Sie simulieren m\u00f6chten.<\/li>\n
      4. Klicken Sie im Simulations-Canvas auf die Komponente, in der Sie den Beginn Ihres Navigationsflusses definiert haben. Klicken Sie in dem daraufhin angezeigten Popup-Fenster auf „Start“. Dann wird die Simulation auf diesem Bildschirm gestartet, aber nur die Navigationsereignisse, die mit den Pfeilen in diesem Fluss \u00fcbereinstimmen, funktionieren. In der oberen Leiste k\u00f6nnen Sie eine Vorschau des Schritts sehen, an dem Sie sich in Ihrem Fluss befinden. <\/li>\n<\/ol>\n
        Hinweis:<\/strong> Wenn Sie diesen bestimmten Bildschirm ohne den Benutzerablauf simulieren m\u00f6chten, klicken Sie auf „Zum Bildschirm“, um zu dem Bildschirm ohne den entsprechenden Ablauf zu gelangen.<\/div>\n

        Sie k\u00f6nnen die aktuelle Simulation anhalten und\/oder den Navigationsfluss \u00e4ndern, indem Sie den Filter in der oberen Symbolleiste des Simulationsfensters wie folgt entfernen:
        \n\"Benutzerstr\u00f6me<\/p>\n

        \u00dcberpr\u00fcfung von<\/h3>\n

        Wenn Sie Ihren Prototyp freigeben, haben Sie die M\u00f6glichkeit, auch den Ablauf in diesem Prototyp zu teilen. Die Pr\u00fcfer k\u00f6nnen dann die Diagramme sehen und Kommentare dazu hinzuf\u00fcgen. Sie k\u00f6nnen sogar Kommentare zu bestimmten Elementen innerhalb eines Ablaufs hinzuf\u00fcgen. <\/p>\n

        <\/a>Diagramme f\u00fcr Standortpl\u00e4ne<\/h2>\n

        Es ist ganz einfach, mit dem Modul Benutzerstr\u00f6me eine Sitemap zu erstellen. Klicken Sie zun\u00e4chst auf das Notizwerkzeug und dann auf das Canvas. Passen Sie das Aussehen der Notiz mit Hilfe der Eigenschaften-Palette nach Ihren W\u00fcnschen an. Kopieren Sie dann diese Notiz (oder dieses Textfeld) und f\u00fcgen Sie sie f\u00fcr so viele Bildschirme ein, wie Sie in Ihrer Site Map definieren wollen. Zum Schluss verwenden Sie das Verbindungswerkzeug, um Ihre Sitemap grafisch darzustellen und die Hierarchie Ihrer Bildschirme zu definieren. <\/p>\n

        \"Website-Maps<\/p>\n","protected":false},"excerpt":{"rendered":"

        Das Modul Benutzerstr\u00f6me bietet ein robustes Diagrammwerkzeug, das mit dem Rest Ihres Prototyps verbunden werden kann. Es kann den Beteiligten an Ihren Projekten verschiedene M\u00f6glichkeiten zur…<\/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":[8546,8547],"tags":[],"class_list":["post-129071","post","type-post","status-publish","format-standard","hentry","category-benutzerhandbuch","category-der-arbeitsbereich"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129071"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129071"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129071\/revisions"}],"predecessor-version":[{"id":129229,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129071\/revisions\/129229"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}