Einführung in Interaktionen

Die Interaktionsfunktion wird verwendet, um Prototypen zu erstellen, indem beliebigen Objekten auf einer Moqups-Seite Interaktivität hinzugefügt wird.

Wenn Sie einem Objekt eine Interaktion hinzufügen, ermöglichen Sie es diesem Objekt, im Vorschau-Modus auf eine Vielzahl von Auslösern zu reagieren.

Die zwei wichtigsten Anwendungsfälle für Interaktionen liegen in:

• Prototypen, bei denen Interaktionen während der Design- und Testphase verwendet werden, um die endgültige Benutzererfahrung des entwickelten Produkts – einer App oder einer Website – nachzuahmen.
• Projektmanagement, bei dem Interaktionen verwendet werden, um Informationen zu organisieren, indem einzelne Elemente eines Designs, Diagramms, Storyboards oder Sitemaps – oder die gesamte Seite selbst – mit nachfolgenden Seiten verknüpft werden. Dies hilft Teammitgliedern, zwischen bestimmten Abschnitten eines komplexen Projekts zu springen, um relevante Spezifikationen, Notizen, Anforderungen oder Details anzuzeigen.

Es gibt zwei Arten von Interaktionen, die auf ein Objekt angewendet werden können:

• Eine Seiteninteraktion wird zur Navigation verwendet und verknüpft bestimmte Objekte mit anderen Seiten innerhalb des Moqups-Projekts selbst oder mit URLs außerhalb des Projekts.
• Eine Objektinteraktion wird verwendet, um die Transformation von Objekten auf der Seite nachzuahmen – das Ändern von Schaltflächenzuständen, das Öffnen von Dropdown-Menüs, das Anzeigen des Kontextmenüs per Rechtsklick, das Öffnen modaler Dialoge usw. – die simulieren, wie ein Benutzer das Endprodukt erleben wird.

Beide Interaktionsarten können auf beliebige Objekte angewendet werden: Schablone, Symbol, Bild oder Vorlage.

Es gibt jedoch auch ein dediziertes, interaktives Objekt – einen sogenannten Hotspot – das verwendet werden kann, um bestimmte Bereiche einer Seite als interaktiv zu kennzeichnen.

In diesem Artikel zeigen wir Ihnen, wo Sie das Interaktions-Panel finden, und geben einige weitere Details dazu, wie Interaktionen sowohl beim Prototyping als auch im Projektmanagement verwendet werden. Wir erklären auch, wie Sie den Vorschau-Modus verwenden, um Interaktionen zu aktivieren.

In den nachfolgenden Artikeln dieses Abschnitts erklären wir dann, wie Seiteninteraktionen und Objektinteraktionen angewendet werden und wie Hotspots hinzugefügt werden.

Interaktions-Panel

Um das Interaktions-Panel zu öffnen, gehen Sie zur Rechten Seitenleiste und klicken Sie auf den Interaktions-Tab. Der Tab wird blau und öffnet das Panel. Dort können Sie:

• Alle Interaktionen anzeigen, die auf ein Objekt angewendet wurden
• Eine neue Interaktion erstellen
• Einen Hotspot hinzufügen

In den nachfolgenden Artikeln dieses Abschnitts zeigen wir, wie das Interaktions-Panel verwendet wird, um sowohl Seiteninteraktionen als auch Objektinteraktionen hinzuzufügen. Aber hier zunächst eine kurze Orientierung.

Nachdem Sie auf das Objekt geklickt haben, auf das Sie die Interaktion anwenden möchten:

1. Wählen Sie einen Auslöser aus dem oberen Dropdown: Bei Klick oder Tippen, Bei Rechtsklick, Bei Doppelklick, Maus eintreten, Maus verlassen.

2. Wählen Sie im zweiten Dropdown eine Aktion aus der Liste Seiteninteraktion oder Objektinteraktion.

3. Legen Sie ein Ziel fest, indem Sie das Dropdown oder die Fadenkreuz-Schaltfläche verwenden, um ein Objekt oder eine Seite als Endpunkt der Interaktion auszuwählen.

4. Klicken Sie auf Fertig, um die Interaktion anzuwenden.

5. Sie können die Vorschau verwenden, um zu sehen, wie Ihre Interaktion funktioniert.

6. Sie können auch den Abschnitt Hotspots unten verwenden, um Hotspots hinzuzufügen.

7. Im Abschnitt Optionen können Sie steuern, wie Interaktionen angezeigt werden:

   • Hotspots anzeigen: Zeigt anklickbare Hotspots im Bearbeitungsmodus an.
   • Interaktionsindikatoren anzeigen: Fügt Objekten mit Interaktionen – auf der Seite und im Gliederungs-Panel – im Bearbeitungsmodus ein Blitz-Symbol hinzu.
   • Interaktionsziel anzeigen: Zeigt im Vorschau-Modus einen Tooltip mit der Aktion und dem Ziel an, wenn Sie mit der Maus über ein Objekt fahren.

Interaktionen beim Prototyping

Die primäre Verwendung von Interaktionen besteht darin, Designs in Prototypen umzuwandeln. Dieser Schritt ist oft die letzte Phase des App- und Webdesigns, bevor die Programmierung und Implementierung stattfindet.

Der Designprozess beginnt typischerweise mit einem Diagramm, das den Benutzerfluss darstellt, oder mit einer Sitemap für eine Website. Diese Visualisierungen helfen dabei, abstrakte, allgemeine Ideen über den Datenfluss und die Informationsarchitektur eines Projekts zu vermitteln.

Und wenn mehr Details hinzugefügt werden, erzeugen diese Diagramme Storyboards. Storyboards sind visuell reichhaltiger als Diagramme und können dabei helfen, die spezifischen Details der Screens und ihres Navigationsablaufs zu vermitteln.

Anschließend werden die einzelnen Elemente dieser Storyboards zu eigenen Seiten – mit Wireframes oder detaillierteren Mockups, die das Design dieses Screens oder dieser Webseite darstellen.

Ein Wireframe oder Mockup wird schließlich zu einem Prototyp, wenn diesen einzelnen Seiten Interaktivität hinzugefügt wird. Das Hinzufügen von Interaktivität bedeutet, dass das Design, bevor die eigentliche Programmierung beginnt, das Endprodukt nachahmen kann, indem es auf Benutzereingaben in Form von Klicks, Hover-Ereignissen (Maus eintreten und verlassen), Elementauswahl und Seitennavigation reagiert.

Obwohl ein Prototyp nicht live oder voll funktionsfähig ist, ahmen Interaktionen genug der endgültigen Benutzeroberfläche nach, sodass alle Beteiligten ein Gefühl für die endgültige Benutzererfahrung bekommen können. Designer, Entwickler und Produktmanager können frei iterieren, verschiedene Versionen testen – und vor allem einen Konsens aufbauen, bevor das Endprodukt in den Produktionszyklus eintritt.

Wenn die Prototyping- und Testphase abgeschlossen ist, wird das Design an die Entwickler übergeben, woraufhin Änderungen am Design sowohl kostspielig als auch arbeitsintensiv werden. Die Verwendung eines Prototyps zur Vorschau der Benutzererfahrung – bevor die Entwickler überhaupt mit dem Schreiben des Codes beginnen – kann Ihrem Team Zeit, Geld und Frustration ersparen.

Interaktionen im Projektmanagement

Die Interaktionsfunktion und insbesondere ihre Fähigkeit, Links und Navigationsmöglichkeiten bereitzustellen, hat viele Verwendungszwecke über das formale Prototyping im Design-Workflow hinaus. Viele Benutzer – darunter Business-Analysten, Systemarchitekten, Produktmanager und Entwickler – nutzen Moqups als gemeinsamen kreativen Raum, in dem alle Beteiligten zusammenarbeiten und einen Konsens aufbauen können.

Für alle Arten von Design- und Produktmanagementaufgaben kann Moqups verwendet werden, um schnelle, problemspezifische Projekte zu erstellen oder um groß angelegte Mehrbenutzer-Projekte mit Dutzenden – oder sogar Hunderten – von Seiten aufzubauen. Unabhängig vom Umfang des Projekts haben sie jedoch alle einige gemeinsame Anforderungen:

• Komplexe Informationen in verschiedenen Formen organisieren und in Echtzeit aktualisieren
• Zugriff für eine breite Palette von Beteiligten bieten, um Inhalte zu erstellen, zu bearbeiten und zu kommentieren
• Anforderungen visualisieren, Kontext vermitteln und klare Spezifikationen kommunizieren

Typischerweise kann ein solches Projekt Flussdiagramme, UX-Storyboards, Sitemaps, Mind Maps, Organigramme, Use-Cases und Informationsarchitekturdiagramme – neben Wireframes, Mockups und Prototypen – umfassen.

Mit der Interaktionsfunktion können Sie all diese Elemente miteinander verknüpfen und eine sofortige Navigation innerhalb der Seiten des Moqups-Projekts selbst oder über Moqups hinaus – zu Google Drive, Dropbox, Slack, Trello oder einer beliebigen URL – ermöglichen. Interaktionen können auch verwendet werden, um Objektinteraktionen anzuwenden, wo dies notwendig ist, um Anforderungen zu demonstrieren oder Designelemente zu spezifizieren.

Zum Beispiel könnten Sie in einem einzigen Moqups-Projekt ein Workflow-Diagramm haben, das den Prozess der Entwicklung einer neuen Funktion für Ihre App zeigt. Mit Interaktionen können Sie jedes Element des Diagramms interaktiv gestalten, sodass Ihre Teammitglieder beim Klicken darauf zu einem neuen Abschnitt des Diagramms, einer vollständigen Seite mit Designdetails oder einem relevanten externen Ort weitergeleitet werden. So können Sie sicherstellen, dass jedes Teammitglied den genauen Kontext seiner Aufgabe kennt und über alle Informationen verfügt, die zur schnellen, unabhängigen und effektiven Umsetzung benötigt werden.

In dieser Art von Projekt können alle Beteiligten navigieren, erstellen, prüfen, kommentieren und beitragen. Und vor allem können sie ihre eigenen Links hinzufügen, sowohl intern als auch extern, um aktuelle Anforderungen bereitzustellen und eine einzige Informationsquelle zu schaffen.

Vorschau-Modus verwenden, um Interaktionen zu aktivieren

Interaktionen sind dazu gedacht, im Bearbeitungsmodus zu Objekten hinzugefügt zu werden, aber im Vorschau-Modus erlebt zu werden.

Das Wechseln zur Vorschau aktiviert alle Interaktionen des Projekts, sodass sie die Interaktivität des endgültigen Produkts simulieren, sobald es entwickelt wurde.

Lesen Sie mehr über den Vorschau-Modus hier.