Seminar Moqups – Prototyping mit Interaktionen und Preview

Im Seminar entsteht aus statischen Seiten ein prüfbares Interaktionsmodell. Nicht die Anzahl der Verknüpfungen, sondern die eindeutige Abbildung von Nutzerziel, Systemreaktion, Rückweg und Ausnahmefall bestimmt die Qualität des Prototyps.

Zwei Tage sind erforderlich, weil ein belastbarer Prototyp neben der technischen Verknüpfung auch Zustandsmodell, Fehlerpfade, Testfälle, moderierte Prüfung und dokumentierte Überarbeitung umfasst.

Inhaltsverzeichnis

• Zielgruppe und Voraussetzungen
• Seminarinhalte
  • Interaktionsumfang und Testziel
  • Trigger, Aktionen und Ziele
  • Hotspots, Navigation und Rückwege
  • Zustände, Overlays und Rückmeldungen
  • Preview und systematische Prüfung
  • Moderierter Test und Iteration
• Praxisübungen
• Qualitätskriterien und Abnahme

Zielgruppe und Voraussetzungen

Zielgruppe: UX- und UI-Design, Produktmanagement, Business Analyse, Fachkonzeption, Entwicklung und Qualitätssicherung mit Verantwortung für Bedienabläufe.

Voraussetzungen: Sichere Grundkenntnisse in Moqups, insbesondere zu Seiten, Wireframes und Objektbearbeitung. Ein vorhandener mehrseitiger Entwurf ist für die Praxisübungen hilfreich.

Seminarinhalte

1. Interaktionsumfang und Testziel

Vor dem Verknüpfen wird festgelegt, welche Annahmen der Prototyp prüfen soll.

1. Schritt 1: Nutzerrolle, Ausgangssituation und messbares Ziel des Testpfads bestimmen.
2. Schritt 2: Hauptpfad, alternative Pfade, Abbruch und Fehlerfälle abgrenzen.
3. Schritt 3: Benötigte Seiten, Zustände und Rückmeldungen in einer Ablaufmatrix erfassen.
4. Schritt 4: Fidelity und Funktionsumfang passend zur Prüfaufgabe begrenzen.

2. Trigger, Aktionen und Ziele

Interaktionen werden nach einem einheitlichen Schema aufgebaut und benannt.

1. Schritt 1: Auslösende Objekte und geeignete Trigger für Klick, Auswahl oder Navigation bestimmen.
2. Schritt 2: Aktionen mit eindeutigem Ziel und erwarteter Systemreaktion verbinden.
3. Schritt 3: Seitenwechsel, Objektzustand und weiterführende Ziele voneinander abgrenzen.
4. Schritt 4: Interaktionsregeln an wiederkehrenden Navigationselementen konsistent umsetzen.

3. Hotspots, Navigation und Rückwege

Bedienflächen werden vollständig erreichbar und fehlertolerant gestaltet.

1. Schritt 1: Hotspots an realistischen Bedienelementen oder transparenten Flächen platzieren.
2. Schritt 2: Startpunkt, globale Navigation, lokale Navigation und Rücksprünge definieren.
3. Schritt 3: Doppelte, konkurrierende oder nicht erreichbare Verknüpfungen identifizieren.
4. Schritt 4: Tastatur-, Fokus- und Barrierefreiheitsannahmen als Anmerkungen ergänzen.

4. Zustände, Overlays und Rückmeldungen

Der Prototyp bildet nicht nur Seiten, sondern auch relevante Systemzustände ab.

1. Schritt 1: Laden, Erfolg, Warnung, Fehler und leere Zustände priorisieren.
2. Schritt 2: Dialoge, Menüs und überlagerte Inhalte als eigene Zustandsbilder modellieren.
3. Schritt 3: Bestätigung, Validierung und Fortschritt direkt am Ablauf sichtbar machen.
4. Schritt 4: Abbruch, Wiederholung und Wiederaufnahme für kritische Aktionen ergänzen.

5. Preview und systematische Prüfung

Die Vorschau wird mit definierten Testfällen statt nur explorativ geprüft.

1. Schritt 1: Startseite und Präsentationsrahmen für den jeweiligen Testfall festlegen.
2. Schritt 2: Hauptpfad zunächst ohne Unterbrechung vollständig durchlaufen.
3. Schritt 3: Alternative und negative Testfälle anhand einer Prüfliste ausführen.
4. Schritt 4: Defekte Links, unklare Ziele und fehlende Rückmeldungen protokollieren.

6. Moderierter Test und Iteration

Beobachtungen werden in konkrete, priorisierte Änderungen überführt.

1. Schritt 1: Neutralen Moderationsleitfaden mit Aufgabe und Nachfragen vorbereiten.
2. Schritt 2: Beobachtung, Aussage, Interpretation und Änderungsentscheidung trennen.
3. Schritt 3: Befunde nach Auswirkung und Häufigkeit priorisieren.
4. Schritt 4: Überarbeitete Pfade erneut testen und den geprüften Stand kennzeichnen.

Praxisübungen

• Aufbau eines interaktiven Hauptpfads mit Startpunkt, Navigation und Rückwegen.
• Ergänzung von Dialog-, Fehler-, Lade- und Erfolgszuständen für eine kritische Aufgabe.
• Durchführung einer strukturierten Preview-Prüfung mit positiven und negativen Testfällen.
• Moderierter Kurztest mit Befundliste, Priorisierung und anschließender Überarbeitung.

Qualitätskriterien und Abnahme

• Jede Interaktion besitzt einen eindeutigen Trigger, ein Ziel und eine erwartete Reaktion.
• Haupt-, Alternativ-, Abbruch- und Fehlerpfade sind erreichbar.
• Startpunkt, Navigation und Rückwege sind konsistent.
• Testbefunde sind von Interpretationen und Änderungsentscheidungen getrennt.
• Der überarbeitete Prototyp wurde mit denselben Testfällen erneut geprüft.