Die Teilnehmer beherrschen die grundlegenden Konzepte der Verarbeitung, Speicherung, Präsentation und Kommunikation medialer Daten in computerbasierten Systemen. Sie sind in der Lage, die wichtigsten Algorithmen zu den verschiedenen Medientypen zu nutzen und selbst zu implementieren. Sie sind ferner befähigt, die jeweiligen Vor- und Nachteile bestimmter Verfahren zu analysieren und zu bewerten. 

• Grundlagen: Digitale Repräsentation, Kapazitätsanforderungen digitaler Medien, Kodierung und Kompression
• Text: Schrift und Alphabet, Kodierungsstandards, Schriftart, Fortgeschrittene Textrepräsentationen
• Vektorgrafik: 2D Formen und Operationen, Animationen
• Bilderzeugung: Rasterisierung von 2D Formen
• Bildverarbeitung: Faltungs- und Rank-basierte Operatorem, CNNs
• Bildspeicherung: Bilddateiformate und Kompression
• Kompression, Repräsentation von Musik
• Video: Digitales Video und Videokompression

Das Modul baut auf dem Modul Visual Design auf hat zum Ziel, Usability und User Experience von interaktiven Systemen durch die strukturierte Betrachtung von gestalterischen Aspekten des Informationsdesigns, weiterführenden Konzepten des Screendesigns, Navigationskonzepten und -Architekturen, Suchfunktionen, Konzepte zum Filtern von Informationen, Formular- und Dialoggestaltung, weiterführende Konzepte der Displaytypografie und die Betrachtung von individuelle Bedürfnissen bei der Benutzungsschnittstellengestaltung zu unterstützen.

Parallel zur Vermittlung der theoretischen Inhalte erfolgt die strukturierte praktische und angewandte Einführung in Webtechnologien und eines Front-End-Webapplikationsframeworks. In der zweiten Semesterhälfte werden die zuvor vermittelten theoretischen Grundlagen in einem Projekt vertieft, in dem mittels eines praktischen Beispiels das interaktive visuelle Design einer Anwendung konzipiert und prototypisch mittels Front-End-Webtechnologien umgesetzt wird.

• Ringvorlesung zu Information Design
  und Projektarbeit
• Weiterführende Konzepte des Screendesigns
• Entwurf von Benutzerschnittstellen für Interaktive Systeme
• Auseinandersetzung mit grundlegenden Interaktionsformen
• Navigationskonzepte und Informationsarchitektur
• Analyse und Umsetzung guter Usability & User Experience
• Suchfunktionen und Konzepte zum Filtern von Informationen
• Formular- und Dialoggestaltung
• Weiterführende Konzepte der Displaytypografie
• Funktionale und formal-ästhetische Entwurfspraxis
• Systematische Entwurfsmethodi
• Gestalterische Aspekte des Informationsdesigns
• Webtechnologien (JavaScript, CSS, HTML)
• Front-End-Webapplikationsframeworks (z.B. D3)

Die Teilnehmer haben ein sehr vertiefendes Verständnis der verschiedenen Phasen des benutzerzentrierten Designprozesses für interaktive Systeme nach ISO 9241-21 und beherrschen die Methoden der Phasen (1) „Nutzungskontext verstehen und beschreiben“, (2) „Nutzungsanforderungen spezifizieren“, (3) „Gestaltungslösungen entwickeln“ und (4) „Gestaltungslösung aus Nutzerperspektive evaluieren“. Sie haben Erfahrungen mit der praktischen Anwendung ausgewählter Methoden gesammelt und können sowohl ausgewählte Werkzeuge als auch entsprechende Programmierkonzepte und -Frameworks sicher einsetzen.  
Die Studierenden kennen - die für die Mensch-Computer Interaktion - wichtigsten Erkenntnisse aus der Kognitionspsychologie (Wahrnehmung, Aufmerksamkeit, Gedächtnis, Wissen, etc.) und wissen wie diese modellhaft betrachtet werden können. Darauf aufbauend können sie erklären, wie die entsprechenden menschlichen Fähigkeiten und Limitationen bei der Gestaltung von interaktiven Systemen berücksichtigt werden müssen.
Die Studierenden kennen die wichtigsten Gesetze (Fitts’ Law, Steering Law und Hick’s Law) hinsichtlich der motorischen Funktionen der Nutzer bei der Mensch-Computer Interaktion und können auf Basis der Formeln entsprechende Zielauswahlen sowie Interaktion- und Selektionssaufgaben bewerten.
Die Studierenden kennen weitere Modelle zur Betrachtung von bimodalen Interaktionen und können Interaktionen mittels Keystroke-Level Model (KLM) und GOMS beschreiben.

• Methoden und Konzepte des benutzerzentrierten Designs (Rapid Prototyping, Iteratives Design, Double Diamond Design Process Modell, ISO 9241 210, Design Thinking)
• Nutzungskontext verstehen und beschreiben (PACT-Modell; Interviews, Fragebögen und Fokusgruppen, User Stories, Szenarien, Beobachtungen, Feldforschung, Tagebuchstudien, Personas, Brainstorming, Parallel Thinking)
• Nutzungsanforderungen spezifizieren (funktionale und nicht-funktionale Usability - und User Experience - Anforderungen)
• Gestaltungslösungen entwickeln (Prototypen mit geringer und hoher Wiedergabetreue, Wireframing und Prototyping Tools, Wizard of Oz – Prototypen, horizontale und vertikale Prototypen)
• Gestaltungslösung aus Nutzerperspektive evaluieren (Interne und externe Validität, Versuchsplanung, quantitative und qualitative Analysen)
• Motorische Funktionen (Fitts’ Law, Steering Law und Hick’s Law) und bimodale Interaktionen 
• Interaktionsmodellierung mittels GOMS und KLM
• Relevante Aspekte der Kognitionspsychologie, insbesondere Wahrnehmung, Aufmerksamkeit und Gedächtnis

Die Methoden und Konzepte des Moduls Visual Design haben zum Ziel, Usability und User Experience von User Interfaces systematisch zu untersuchen und zu optimieren. Dies geschieht durch die Betrachtung und Anwendung der gestaltungsrelevanten Parameter Form, Farbe, Fläche, Schrift/Typographie, Bild und Raster bzw. der strukturierenden Parameter Informationsarchitektur, Navigation und visuelle Hierarchie.

Die Studierenden sind nach der Veranstaltung in der Lage die grundlegenden Elemente des visuellen Designs theoretisch zu verstehen und praktisch einzusetzen. Sie lernen Designanalysemethoden zur Beurteilung bestehender interaktiver Systeme, sowie elementare Aspekte der visuellen Wahrnehmung und können dieses Wissen in die Designpraxis übertragen. Die Studierenden werden ihr Wissen in einem iterativen Designprozess, zunächst auf Basis von Wireframes, anwenden und bis hin zu eigenen funktionalen Mock-Ups und Prototypen entwickeln.

• Visuelle Wahrnehmung und Wahrnehmungstheorie
• Grundelemente des visuellen Designs (Form, Fläche, Farbe, Schrift und Bild)
• Methoden und Ansätze zur benutzergerechten Gestaltung
• Displaytypographie: Funktion, Lesbarkeit, Hierarchien, Ausdrucksmöglichkeiten
• Strukturelle Merkmale, Layout-Raster, Wireframes und Story Boards
• Systematisch Übungen zur Methodenvermittlung und elementaren Darstellungsprinzipien
• Grundlegende Techniken der Bildkomposition
• Grundbegriffe Usability und User Experience
• Auseinandersetzung mit grundlegenden Interaktionsformen
•  Werkzeuge des visuellen Designs (Adobe Photoshop, Adobe Illustrator)
• Prototyping (Adobe XD)
• Grundlagen der Designgeschichte

Die Teilnehmer beherrschen die grundlegenden Konzepte der Verarbeitung, Speicherung, Präsentation und Kommunikation medialer Daten in computerbasierten Systemen. Sie sind in der Lage, die wichtigsten Algorithmen zu den verschiedenen Medientypen zu nutzen und selbst zu implementieren. Sie sind ferner befähigt, die jeweiligen Vor- und Nachteile bestimmter Verfahren zu analysieren und zu bewerten. 

• Grundlagen: Digitale Repräsentation, Kapazitätsanforderungen digitaler Medien, Kodierung und Kompression
• Text: Schrift und Alphabet, Kodierungsstandards, Schriftart, Fortgeschrittene Textrepräsentationen
• Grafik: 2D Formen und Operationen, Animation, 3D Formen und Operationen, Realismus
• Bild: Bildkompression, Bildverarbeitung
• Video: Analoges Video, Digitales Video, Videokompression
• Audio: Physikalische und physiologische Grundlagen, Audiokodierung und Kompression, Repräsentation von Musik

Das Modul »Grundlagen der Gestaltung 1« hat zum Ziel die Usability und User Experience von interaktiven Systemen durch die strukturierte Betrachtung von Form, Fläche, Farbe, Schrift, Bild, Displaytypographie, Layout-Raster, Wireframes, Informationsarchitektur und Navigation zu unterstützen. Die Studierenden sind nach der Veranstaltung in der Lage die grundlegenden Elemente des visuellen Designs theoretisch zu verstehen und praktisch einzusetzen.

Die Studierenden kennen elementare Aspekte der visuellen Wahrnehmung und können dieses Wissen in die Designpraxis übertragen. Hierzu können sie sowohl Werkzeuge zur Erstellung von visuellen Designs als auch für die Entwicklung von Prototypen sicher einsetzen.

• Visuelle Wahrnehmung und Wahrnehmungstheorie
• Grundelemente des visuellen Designs (Form, Fläche, Farbe, Schrift und Bild)
• Displaytypographie: Funktion, Lesbarkeit, Hierarchien, Ausdrucksmöglichkeiten
• Strukturelle Merkmale, Layout-Raster, Wireframes und Story Boards
• Werkzeuge des visuellen Designs und Prototyping (Adobe Photoshop, Illustrator und XD)
• Grundbegriffe Usability und User Experience
• Grundlagen der Designgeschichte

Das Modul »Grundlagen der Gestaltung 2« baut auf dem Module »Grundlagen der Gestaltung 1« auf hat zum Ziel die Usability und User Experience von interaktiven Systemen durch die strukturierte Betrachtung von gestalterischen Aspekten des Informationsdesigns, weiterführenden Konzepten des Screendesigns, Navigationskonzepten und -Architekturen, Suchfunktionen, Konzepte zum Filtern von Informationen, Formular- und Dialoggestaltung, weiterführende Konzepte der Displaytypografie und die Betrachtung von individuelle Bedürfnissen bei der Benutzungsschnittstellengestaltung zu unterstützen.

Parallel zur Vermittlung der theoretischen Inhalte erfolgt die strukturierte praktische und angewandte Einführung in Webtechnologien (JavaScript, CSS, HTML) und eines Front-End-Webapplikationsframeworks (z.B. D3).

• Ringvorlesung zu Gestaltungsfragen
• Weiterführende Konzepte des Screendesigns
• Entwurf von Benutzerschnittstellen für Interaktive Systeme
• Navigationskonzepte und -Architekturen
• Suchfunktionen und Konzepte zum Filtern von Informationen
• Formular- und Dialoggestaltung
• Weiterführende Konzepte der Displaytypografie
• Funktionale und formal-ästhetische Entwurfspraxis
• Systematische Entwurfsmethodik
• Gestalterische Aspekte des Informationsdesigns
• Webtechnologien (JavaScript, CSS, HTML) 
• Front-End-Webapplikationsframeworks (z.B. D3)

Die Studierenden sollen grundlegende Kenntnisse zum Entwurf interaktiver Systeme erwerben (Fachkompetenzen). Durch die Diskussion von Aspekten der Wahrnehmung und der Kognitionswissenschaften, der Betrachtung von Techniken unterschiedlicher Generationen von Interaktionsmetaphern sowie die Anwendung verschiedener formaler Methoden zur Notation und Analyse von Interaktionsmechanismen werden Studierende befähigt, bestehende Lösungen zu bewerten und neue Ansätze für die Schnittstellenentwurf zu entwickeln (Methodenkompetenz).

1. Einführung
2. Gedächtnis und Aufmerksamkeit
3. Kognition und Aktion
4. Wahrnehmung und Navigation
5. Affekt und soziale Interaktion
6. Motorische Aktivitäten
7. Paradigmen und Metaphern
8. Technische Parameter
9. Eingabegeräte
10. Interaktionsstile
11. Kognitive Modelle

Die Teilnehmer sind in der Lage ereignis-basierte grafische interaktive Systeme zu konzipieren und zu realisieren. Sie haben interne Kenntnisse zu Fenstersystemen. Der Ansatz modell-basierter Entwicklung interaktiver Systeme für verschiedene Modalitäten und verschiedene Geräte auf verschiedenen Abstraktionsebenen wird beherrscht. Der Entwicklungszyklus des User-Centered Design ist bekannt inklusive einfacher Evaluationsmethoden.

Diese Veranstaltung komplementiert die Veranstaltung "Grundlagen interaktiver Systeme".

Ausgehend von den Grundlagen interaktiver Systeme wird auf die Erstellung von User Interfaces eingegangen. Neben den praktischen Aspekten der User Interface Erstellung wird zudem auf unterschiedliche Medien und Formalen Methoden zur Beschreibung von Interfaces speziell Dialognotationen eingegangen. Wenn passend wird Java als Fallbeispiel eingesetzt.