Ziel der Aufgabe
Sie analysieren die vorliegenden User Stories aus dem Projekt-Workshop, leiten daraus konkrete funktionale Anforderungen für das Interface ab und entwickeln erste strukturelle Layoutideen. Dabei orientieren Sie sich an Prinzipien des Atomic Design.
Schritt 1: Funktionen aus User Stories ableiten (gemeinsam in der Gruppe)
Ausgangspunkt:
Im Workshop «Nutzergruppen, Nutzungssituationen und Erfordernisse» wurden Nutzergruppen analysiert, Personas erstellt und daraus User Stories formuliert.
Passwort ist screendesign
Aufgabe:
Lesen Sie sich die User Stories sorgfältig durch. Überlegen Sie für jede Story:
- Welche Funktion muss daraus im Interface sichtbar oder bedienbar werden?
(z. B. ein Button, ein Infofeld, eine Navigationsstruktur, etc.)
- Oder: Welche andere Anforderung ergibt sich, die eine Interface-Repräsentation braucht?
(z. B. eine Priorisierung, eine Barrierefreiheit, eine Kontextanpassung, etc.)
Vorgehen:
- Arbeiten Sie gemeinsam.
- Notieren Sie zu jeder Story stichpunktartig die resultierende(n) Funktion(en) oder Anforderung(en).
- Zwei Beispiele sind vorbereitet, diese besprechen wir zuerst gemeinsam.
Schritt 2: Von Funktionen zu Funktionsbereichen (Komponenten oder Organisms) – Einzelarbeit, 30 Minuten
Aufgabe:
Nehmen Sie die abgeleiteten Funktionen aus Schritt 1 und gruppieren Sie diese gedanklich – angelehnt an das Konzept des Atomic Design:
- Welche Funktionen lassen sich als Atoms oder Molecules klassifizieren?
- Wie lassen sich mehrere Molecules sinnvoll zu Organisms bzw. Funktionsbereichen zusammenfassen?
Vorgehen:
- Arbeiten Sie eigenständig.
- Skizzieren Sie auf einem Blatt Papier eine erste strukturierte Layout-Idee, in der Sie die Funktionen sinnvoll anordnen.
- Ziel ist kein fertiges Design, sondern eine Funktionsskizze, die zeigt, wie die Anforderungen räumlich organisiert werden könnten.
Hinweise:
- Bleiben Sie pragmatisch, skizzieren Sie grob.
- Nutzen Sie Icons, Labels oder einfache Kästen.
- Halten Sie sich nicht zu lange mit Details auf – denken Sie in Funktionen und Strukturen, nicht in Pixeln.
Schritt 3: Layout-Varianten für eine Startseite entwickeln (Einzelarbeit, 30 Minuten)
Aufgabe:
Entwerfen Sie auf Basis Ihrer Funktionsskizzen aus Schritt 2 konkrete Layout-Varianten für eine Startseite, die eine Veranstaltungsliste eines Studiengangs zeigt.
Anforderungen:
- Die Veranstaltungsliste steht im Mittelpunkt der Seite.
- Überlegen Sie, welche weiteren Funktionsbereiche (Organisms) ergänzt werden müssen, um die Startseite nutzbar und sinnvoll zu gestalten (z. B. Navigation, Filter, Infos, Statusanzeigen, etc.).
- Nutzen Sie Ihre bisherigen Skizzen als Grundlage.
Vorgehen:
- Zeichnen Sie 5 unterschiedliche Layout-Varianten für das Smartphone (Portrait-Format).
- Zeichnen Sie 5 unterschiedliche Layout-Varianten für den Desktop (Landscape-Format).
- Die Varianten sollen bewusst unterschiedlich strukturiert sein – probieren Sie verschiedene Anordnungen, Gewichtungen und Interaktionen aus.
- Arbeiten Sie schnell, explorativ, skizzenhaft.
- Nutzen Sie das bereitgestellte Skizzenpapier
Hinweise:
- Jede Variante sollte eine eigene Idee verfolgen – vermeiden Sie Wiederholungen.
- Denken Sie an Blickführung, Priorisierung, responsive Design-Grundsätze.
- Ziel ist Exploration, nicht Perfektion.
Material
Upload
Ein Upload von gehaltvollen Ergebnissen bringt bis zu 5 Bonuspunkte für das Abschlussprojekt.
Laden Sie Ihre Ergebnisse im ILU hoch.
Verwenden Sie beim Dateinamen bitte die folgende Nomenklatur:
sd-funktionsbereiche-mobile-NACHNAME-01.png
sd-funktionsbereiche-mobile-NACHNAME-02.png
sd-funktionsbereiche-mobile-NACHNAME-03.png
sd-funktionsbereiche-mobile-NACHNAME-04.png
sd-funktionsbereiche-mobile-NACHNAME-05.png
sd-funktionsbereiche-desktop-NACHNAME-01.png
sd-funktionsbereiche-desktop-NACHNAME-02.png
sd-funktionsbereiche-desktop-NACHNAME-03.png
sd-funktionsbereiche-desktop-NACHNAME-04.png
sd-funktionsbereiche-desktop-NACHNAME-05.png
