UI-Entwurf

Lernziele

• Sie können eine Benutzungsschnittstelle mit geeigneten Diagrammen beschreiben
• Sie können Papier-Prototypen erstellen
• Sie können mittels Paper-Prototyping UI-Tests durchführen und Verbesserungen identifizieren
• Sie verstehen das Vorgehensmodell zum Entwurf von Benutzungsschnittstellen

Aufgaben

Vorbereitung

1. Tragen Sie die wichtigsten Erkenntnisse aus dem User Research zusammen, diskutieren und reflektieren Sie diese gemeinsam im Team.
2. Überlegen Sie gemeinsam im Team, durch welche fachlichen Funktionen und Features sich diese verkörpern lassen und dokumentieren Sie diese in der Projektmappe.

Entwurf von Screen-Diagrammen

1. Entwerfen Sie die Benutzungsoberfläche ihrer App in Form von konkreten skizzierten Screen-Diagrammen (gerne auf Papier, bitte groß und gut erkennbar!).

   Hinweise

   • Achten Sie auf Vollständigkeit der benötigten Bedienelemente.
   • Berücksichtigen Sie Platzierung, Größe, Anordnung, Beschriftung.
   • Skizzieren Sie von Icons die Rohform so, dass man deren bildlich-inhaltliche Aussage versteht.

2. Abstrahieren Sie die Skizzen zu abstrakten Screen-Diagrammen.

   Nutzen Sie die abstrakten Screen-Diagramme um…

   • …Entwurfsalternativen zu erkennen, die Sie wiederum konkret skizzieren.
   • …auf Vollständigkeit hinsichtlich der verwendeten UI-Elemente als auch der in die Analyseklassen eingetragenen Attribute und Methoden zu prüfen.

   Übernehmen Sie die abstrakten Screen-Diagramme in ihre Projektmappe.

3. Wählen Sie die beste Entwurfsalternative aus und verfolgen Sie diese weiter.

Navigationsübersicht

1. Zeichnen Sie die abstrakte Navigationsübersicht zu Ihrem Entwurf inkl. aller Aktionen, die einen Übergang von einem Screen zu einem anderen Screen initieren. Denken Sie auch an Bedingungen, die für einen Screenwechsel erfüllt sein müssen bzw. an deren Evaluierung die Ausführung einer Aktion gekoppelt ist.

   Hinweis

   Eine Navigationsübersicht hat Screens als Knoten, nicht Bedienelemente! (=beliebtes Missverständnis)

Prototyping

1. Entwickeln Sie auf Basis der ausgewählten Entwurfsalternative Paper Prototypen für die Anwendungsfälle, die Sie im UI-Test testen werden.
2. Dokumentieren Sie die Entwürfe und Entwurfsentscheidungen ausführlich in der Projektmappe.

Testen

1. Entwickeln Sie eine Reihe von repräsentativen Testfällen, um eine erste Validierung der in ihrem Prototypen umgesetzten Entwurfsentscheidungen vorzunehmen. So finden Sie heraus, ob das von Ihnen entwickelte Benutzungskonzept für ihre Stereotypen intuitiv nutzbar ist, d.h., sich an deren mentalen Modellen orientiert.

2. Testen Sie Ihre Entwürfe mit Ihren Steretypen (bspw. verkörpert durch Ihre Peer-Gruppe oder Freunde/Verwandte/etc.) und identifizieren Sie Ungereimtheiten und/oder Inkonsistenzen und Verbesserungen. Überlegen Sie, ob es gut und richtig ist, wenn Sie keine Verbesserungen identifizieren.

   Wichtiges zur Durchführung der Tests

   Die Entwürfe sind aus Sicht der/des Stereotypen sowie seiner/ihrer spezifischen Anforderungen zu testen!

   1. Überlegen Sie im Vorfeld, wie Sie Ihre Entwürfe sinnvoll testen (–> funktionsorientiert vs. anwendungsfallorientiert)
   2. Entwickeln Sie eine Handvoll repräsentativer Anwendungsfälle, die Ihre Stereotypen durchspielen sollen.
   3. Geben Sie in KEINEM FALL HINWEISE oder Tipps, dies verfälscht Ihre Tests enorm. Wir wollen herausfinden, ob die getroffenen Designentscheidungen den mentalen Modellen des/der Stereotypen entsprechen und ob die UI für diese/n intuitiv benutzbar ist.

Ergebnisse

Ihre Praktikumsmappe muss folgende ausgearbeitete Artefakte enthalten:

Ergebnisse

• abstrakte und kontrete Screen Diagramme der App
• Navigationsübersicht
• Paper Prototypen ihrer Applikation mit begründeten Entwurfsentscheidungen
• Beschreibung der Testfälle und der Testdurchführung
• Zusammenfassung der wesentlichen Erkenntnisse und Anpassungen (~> Reflexion des UI-Tests)