Seminar Pencil Project – Mobile App Prototyping

Beschreibung

Mobile Prototypen müssen kleine Flächen, Touch-Bedienung, wechselnde Zustände und unterbrochene Nutzung berücksichtigen. Das Seminar behandelt mobile Stencils, Navigation, Listen, Karten, Formulare, Overlays, Berechtigungsdialoge, Lade- und Offline-Zustände sowie klickbare Kernabläufe. Die Entwürfe werden für unterschiedliche Gerätegrößen als getrennte, nachvollziehbare Varianten aufgebaut.

Inhaltsübersicht

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

Lernziele

• Mobile Seitenstrukturen und Navigationsmuster auf konkrete Nutzeraufgaben ausrichten.
• Geräte- und Plattform-Stencils kontrolliert einsetzen und bei Bedarf vereinheitlichen.
• Touch-Ziele, Formulare, Listen, Karten und Overlays für kleine Flächen entwerfen.
• Lade-, Offline-, Fehler-, Berechtigungs- und leere Zustände sichtbar machen.
• Eine klickbare mobile Kernstrecke mit mehreren Gerätevarianten testen und präsentieren.

Schrittweise Seminarinhalte

1. Mobile Nutzungsszenarien und Seitenmodell

Schwerpunkt: kurze Aufgaben, Kontextwechsel, Einhandbedienung, Unterbrechung, Startzustand, Rückkehr, Anmeldung und Kernnavigation.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Mobile Nutzungsszenarien und Seitenmodell“ anhand von kurze Aufgaben, Kontextwechsel, Einhandbedienung, Unterbrechung, Startzustand, Rückkehr, Anmeldung und Kernnavigation 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. Stencils, Geräterahmen und Layout

Schwerpunkt: Android- und iOS-nahe Elemente, generische Komponenten, Bildschirmgrößen, sichere Bereiche, Raster, Abstände und Touch-Ziele.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Stencils, Geräterahmen und Layout“ anhand von Android- und iOS-nahe Elemente, generische Komponenten, Bildschirmgrößen, sichere Bereiche, Raster, Abstände und Touch-Ziele 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. Navigation und Inhaltsmuster

Schwerpunkt: Bottom Navigation, Tabs, Listen, Karten, Detailansicht, Suche, Filter, Aktionen, Zurück und Tiefenbegrenzung.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Navigation und Inhaltsmuster“ anhand von Bottom Navigation, Tabs, Listen, Karten, Detailansicht, Suche, Filter, Aktionen, Zurück und Tiefenbegrenzung 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. Mobile Formulare und Eingaben

Schwerpunkt: Tastaturannahmen, Feldreihenfolge, Auswahl, Datum, Upload, Validierung, Hilfetexte, Speichern und Abbruch.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Mobile Formulare und Eingaben“ anhand von Tastaturannahmen, Feldreihenfolge, Auswahl, Datum, Upload, Validierung, Hilfetexte, Speichern und Abbruch 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. Overlays, Systemdialoge und Zustände

Schwerpunkt: Sheets, Dialoge, Berechtigungen, Ladeanzeige, Offline, leerer Zustand, Konflikt, Fehler und Wiederholen.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Overlays, Systemdialoge und Zustände“ anhand von Sheets, Dialoge, Berechtigungen, Ladeanzeige, Offline, leerer Zustand, Konflikt, Fehler und Wiederholen 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. Klickstrecke, Gerätevarianten und Review

Schwerpunkt: Linkziele, Kernaufgabe, Fehlerpfad, Rücksprung, schmale und breite Variante, Testlauf und interaktive Ausgabe.

1. Nutzeraufgabe, Inhalt und Qualitätskriterien für „Klickstrecke, Gerätevarianten und Review“ anhand von Linkziele, Kernaufgabe, Fehlerpfad, Rücksprung, schmale und breite Variante, Testlauf und interaktive Ausgabe 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

• Entwurf einer mobilen Kernnavigation mit Liste, Detailansicht und kontextbezogener Aktion.
• Aufbau eines mobilen Formulars einschließlich Tastatur-, Validierungs- und Fehlerannahmen.
• Modellierung von Berechtigungs-, Lade-, Offline- und Wiederholzuständen.
• Erstellung und Prüfung einer klickbaren Kernstrecke für zwei Gerätegrößen.

Zielgruppe und Voraussetzungen

Zielgruppe: UX-Designer, Product Owner, Business-Analysten, App-Entwickler, Fachkonzepter und technische Redakteure.

Voraussetzungen: Grundkenntnisse in Benutzeroberflächen; Pencil-Grundkenntnisse sind hilfreich, aber nicht zwingend.

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.