Beim Screendesignprojekt dieses Jahres bestand die Aufgabe darin, die in HOPS gezeigte Stundenplanansicht der Fakultät 10 der TH Köln neu zu gestalten. Ziel war es, ein zugängliches, flexibles und gut strukturiertes Interface zu entwickeln, das die Veranstaltungen übersichtlich auf drei verschiedenen Endgeräten (Desktop, Tablet und Smartphone) darstellt. Hierbei sollten auch auf die Mängeln vom HOPS geachtet werden, um die selben Fehler zu vermeiden.
Zu Beginn stand die Ideenfindung mithilfe von Personas. Diese stellten unterschiedliche Nutzergruppen dar und rechtfertigten dabei die verschiedenen Geräteklassen. Die wichtigste Zielgruppe waren die Studierende, da diese häufig mobil auf ihren Stundenplan zugreifen. Wichtige Bedürfnisse waren eine schnelle Übersicht über Veranstaltungen, genauere Infos zu einzelnen Modulen sowie Zugriff auf Profil, Einstellungen und Benachrichtigungen. Auch die Möglichkeit, Räume einzusehen und spontane Ausfälle mitzubekommen, spielte eine große Rolle. Zusätzlich sollte eine Filterfunktion eingebaut werden, damit der Screen nicht zu überladen wirkt und individuell angepasst werden kann.
Auf Grundlage dieser Anforderungen wurden verschiedene Screens entwickelt, vor allem für mobile Geräte, da diese im Alltag am häufigsten genutzt werden. Deshalb lag hier auch der größte Fokus im Designprozess. Die Desktopansicht wurde eher an die Bedürfnisse von Dozierenden angepasst, bei denen eine eher funktionsfähige und übersichtliche Darstellung im Vordergrund steht. Dafür wurde ein Spaltenraster verwendet, das mehrere Veranstaltungen gleichzeitig sichtbar macht und zusätzliche Elemente wie eine seitliche Filterleiste etabliert. Zur Unterscheidung der zwei verschiedenen Stakeholder sollen die Dozenten in der Lage sein, nach dem Login unter „Einstellungen“ einen Raum zu reservieren und zudem bei kurzfristigen Ausfällen unter „Orga“ eine Mitteilung zu geben, die die Studenten per Nachricht informiert.
Ein wichtiges Konzept für kleinere Geräte war eine Searchbar in Form eines Dropdowns, mit der man schnell zwischen Tagen wechseln kann. Diese Idee wurde später für die zwei anderen Geräteklassen durch einen interaktiven Kalender ersetzt, da diese Idee schon irgendwie Elemente, die nur aus designischen Gründen gezeigt werden, einen Nutzen gibt. Für jede Geräteklasse wurden sowohl Wochen- als auch Tagesansichten gestaltet, die sich je nach Größe und Nutzung unterscheiden.
In der mobilen Wochenansicht werden die Veranstaltungen in Modulkästen dargestellt, die die wichtigsten Infos wie Dozent, Raum, Uhrzeit und Titel enthalten. Zur besseren Unterscheidung der Veranstaltungsarten wurde mit Farben gearbeitet, angelehnt an das Design der TH Köln. Zum Beispiel wurden Vorlesungen in Violetttönen dargestellt, ergänzt durch kleine farbige Balken, die nach deren Veranstaltungsart beschriftet wurden und zusätzlich Orientierung bieten. Dadurch kann der Stakeholder die Inhalte schneller erfassen.
Die Nutzung folgt einem klaren Ablauf: Nach dem Login gelangt man direkt zur Wochenübersicht. Über eine obere Leiste kann man auf Profil, Einstellungen und Benachrichtigungen zugreifen. Die Filterfunktion ermöglicht es, bestimmte Veranstaltungen ein- oder auszublenden. In der Tagesansicht gibt es zusätzlich eine Detailansicht, die sich öffnet, wenn man ein Modul auswählt, sodass weitere Informationen angezeigt werden, ohne die Übersicht zu verlieren. Als weiteres Feature ist es möglich, die gezeigten Module zu favorisieren. Zur Unterscheidung ändern sich die Farbkontraste und Schriftfarbe, wodurch in gewisser Weise Elemente eines Dark Modes entstehen, auf den jedoch beim finalen Design kein besonderer Fokus gelegt wurde. Wie bei den anderen Elementen ermöglicht die Filterfunktion außerdem die Einsicht aller favorisierten Veranstaltungen.
Für den Desktop wurde eine breitere Wochenansicht entwickelt, die durch ein Spaltenraster strukturiert ist. Ergänzt wird diese durch eine dauerhaft sichtbare Filterleiste und einen Kalender. Hier liegt der Fokus darauf, möglichst viele Informationen gleichzeitig darzustellen. Die Tabletansicht kombiniert Elemente aus der mobilen und der Desktopversion und wurde so gestaltet, dass sie sowohl im Hoch- als auch im Querformat gut funktioniert.
Das Gestaltungskonzept basiert auf einem festen Farbsystem mit den Hauptfarben Violett, Rot und Grün, die in unterschiedlichen Farbkontrasten genutzt werden. Zusätzlich haben wir eine einheitliche Typografie (Noto Sans SemiCondensed), um eine klare Struktur zu schaffen. Auf Icons zur Unterscheidung der Veranstaltungsarten wurde im Verlauf des Projektarbeit verzichtet, da diese schnell zu Verwirrung führen können. Stattdessen wurde auf einfache Farbcodierungen gesetzt.
Um die Oberfläche übersichtlich zu halten, wurden Inhalte gebündelt. So befinden sich Profil, Einstellungen und weitere Funktionen im Burger-Menü. Auch Filter- und Listenansichten sind klar voneinander abgegrenzt, sodass die Orientierung erleichtert wird. Außerdem wurden Ideen wie der interaktive Kalender durch den Einsatz von Farben verständlicher gemacht. Dabei wurde die Farbe Orange genutzt, um zu zeigen, auf welchem Tag man sich befindet. Während in der Desktop-Tagesansicht nur ein einzelner Tag farblich markiert ist, wird in der Wochenansicht die gesamte dargestellte Woche orange hervorgehoben.
Die gesetzten Kommunikations- und Interaktionsziele wurden größtenteils erreicht. Durch die klare Struktur, die Farbunterscheidung und die reduzierte Gestaltung ist die Anwendung leicht verständlich und nutzbar. Vor allem auf dem Smartphone soll die Nutzung so schnell und effizient wie möglich funktionieren, während der Desktop/Tablet eine bessere Gesamtübersicht bieten sollte.
Insgesamt basiert das Konzept auf einem klaren System aus Inhalt, Farben und einem überschaubaren Layout. Dadurch entsteht ein einheitliches Design für alle Geräte. Auch Aspekte der Barrierefreiheit wurden durch gute Kontraste und klare Schrift berücksichtigt. Das Ergebnis ist ein übersichtliches Interface, das Studierenden den Alltag erleichtert und die Planung ihrer Veranstaltungen unterstützt.
