Seminar Pencil Project – Interaktive Klickprototypen und User Flows

Beschreibung

Interaktive Prototypen machen Seitenwechsel, Entscheidungen, Fehlerpfade und Rücksprünge erlebbar. Das Seminar behandelt Inter-page Links, klickbare Bereiche, Startzustände, Navigationspfade, Dialoge, Varianten und die Ausgabe als interaktive Präsentation. Jede Strecke wird mit einem systematischen Link- und Sackgassencheck abgesichert.

Inhaltsübersicht

• Lernziele und fachliche Einordnung
• Schrittweise Seminarinhalte
• Praxisübungen
• Zielgruppe und Voraussetzungen
• Didaktik und Arbeitsweise

Lernziele

• Nutzeraufgaben in nachvollziehbare Seiten- und Entscheidungsflüsse übersetzen.
• Klickbare Bereiche und Inter-page Links präzise und wartbar einrichten.
• Dialoge, Fehler, Abbrüche, Rücksprünge und Rollenvarianten modellieren.
• Klickstrecken mit Startseite, Navigationsregeln und Prüfszenarien dokumentieren.
• Interaktive Ausgaben erzeugen und auf Linkfehler, Sackgassen und Darstellungsprobleme prüfen.

Schrittweise Seminarinhalte

1. Aufgaben, Szenarien und Flow-Modell

Schwerpunkt: Nutzerziel, Startpunkt, Schritte, Entscheidungen, Bedingungen, Erfolg, Abbruch, Fehler und alternative Rolle.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Aufgaben, Szenarien und Flow-Modell“ anhand von Nutzerziel, Startpunkt, Schritte, Entscheidungen, Bedingungen, Erfolg, Abbruch, Fehler und alternative Rolle bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

2. Seiten- und Zustandsarchitektur

Schwerpunkt: Seitenbaum, Normalzustände, Dialoge, Overlays, Bestätigungen, Ladezustände, Fehlerseiten und Varianten.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Seiten- und Zustandsarchitektur“ anhand von Seitenbaum, Normalzustände, Dialoge, Overlays, Bestätigungen, Ladezustände, Fehlerseiten und Varianten bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

3. Klickbereiche und Inter-page Links

Schwerpunkt: Shape-Link, unsichtbare Fläche, Zielseite, Hintergrundlink, Priorität, überlappende Bereiche und konsistente Benennung.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Klickbereiche und Inter-page Links“ anhand von Shape-Link, unsichtbare Fläche, Zielseite, Hintergrundlink, Priorität, überlappende Bereiche und konsistente Benennung bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

4. Navigation und Rücksprunglogik

Schwerpunkt: Hauptnavigation, Zurück, Abbrechen, Schließen, Breadcrumb, Startseite, Kontextwechsel und Verlaufsannahmen.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Navigation und Rücksprunglogik“ anhand von Hauptnavigation, Zurück, Abbrechen, Schließen, Breadcrumb, Startseite, Kontextwechsel und Verlaufsannahmen bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

5. Fehler-, Sonder- und Rollenpfade

Schwerpunkt: Validierungsfehler, fehlende Berechtigung, leere Daten, Konflikt, Unterbrechung, alternative Rolle und Wiederaufnahme.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Fehler-, Sonder- und Rollenpfade“ anhand von Validierungsfehler, fehlende Berechtigung, leere Daten, Konflikt, Unterbrechung, alternative Rolle und Wiederaufnahme bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

6. Test, Export und Präsentation

Schwerpunkt: Flow-Testfälle, Linkmatrix, Sackgassen, zyklische Wege, interaktive Ausgabe, Präsentationsmodus und Review-Protokoll.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Test, Export und Präsentation“ anhand von Flow-Testfälle, Linkmatrix, Sackgassen, zyklische Wege, interaktive Ausgabe, Präsentationsmodus und Review-Protokoll bestimmen.
2. Die benötigten Seiten, Shapes, Komponenten, Zustände und Verknüpfungen in Pencil Project strukturiert anlegen und konsistent benennen.
3. Eine realistische Variante umsetzen, alternative Zustände oder Bildschirmgrößen vergleichen und die Interaktion in einem vollständigen Testlauf prüfen.
4. Das Ergebnis anhand von Konsistenz, Vollständigkeit, Verständlichkeit und Übergabefähigkeit bewerten, korrigieren und als freigegebenen Arbeitsstand dokumentieren.

Praxisübungen

• Aufbau einer linearen Klickstrecke mit Start-, Erfolgs- und Abbruchpfad.
• Erweiterung um Entscheidungen, Validierungsfehler, Dialoge und rollenabhängige Varianten.
• Erstellung einer Linkmatrix und Durchführung eines vollständigen Sackgassenchecks.
• Export und moderierter Walkthrough eines interaktiven Prototyps.

Zielgruppe und Voraussetzungen

Zielgruppe: UX-Designer, Business-Analysten, Product Owner, Entwickler, Fachkonzepter und Usability-Verantwortliche.

Voraussetzungen: Grundlegende Wireframing-Kenntnisse und sichere Bedienung einfacher Pencil-Seiten.

Didaktik und Arbeitsweise

Kurze Theorieblöcke, Demonstrationen und aufeinander aufbauende Übungen wechseln sich ab. Ein durchgehendes Beispieldokument wird mehrfach geprüft, korrigiert und in einen nachvollziehbaren Arbeitsstand überführt.