1| ANALYSE

Nachdem wir uns in unseren Gruppen zusammengefunden hatten, ging es zunächst darum, sich ein grundlegendes Bild von der Website und den vorhandenen Problemen zu machen. Dazu haben wir versucht, so konkret wie möglich zu notieren, wo die Schwächen liegen, was warum wie nicht funktioniert, die Website in Elemente aufzuteilen und uns diese genauer anzugucken. Die für uns schwerwiegendsten Punkte waren:

a) inhaltlich

• unübersichtliche Anzahl an Unterseiten

• schwer verständliche Infoarchitektur > erschwerter Zugang zu den gewünschten Informationen

• Dopplung der Unterseiten und Informationen auf unterschiedlichen Seiten

• schwer nachvollziehbare Kategorisierung/Unterteilung von Informationen und Unterseiten 

b) Interaktion

- schwer bedienbares Navigationsmenü 

- nicht responsive
- schwammiges Wording der Menüführung

c) visuell

- fachbereichsrelevante und hochschulrelevante Inhalte schwer
voneinander unterscheidbar

- keine Repräsentation der Studieninhalte/Besonderheiten/Philosophie der FHP

Im Austausch mit den anderen Gruppen sind wir, nicht überraschend, dahingehend bestätigt worden und es ging nun darum, tiefer ins Detail zu gehen.

Wir waren in diesem Kurs viel auf uns allein gestellt und hatten zwischenzeitlich ab und zu Probleme uns für die Analysephase selber Aufgaben und Zwischenziele zu definieren. Unter Absprache mit den anderen Gruppen und der Beratung von Prof. Langer, könnten wir uns später aber gut zurechtfinden.

1.1 BENUTZERGRUPPENANALYSE

So haben wir als erstes damit begonnen uns konkret mit den Benutzergruppen auseinanderzusetzen. Es ging uns dabei weniger darum, jede Person zu inkludieren, die irgendwann mal die FHP-Website besuchen könnte, als viel mehr ein Verständnis dafür zu erlangen, was unsere Website inhaltlich erfüllen muss. Bisher haben wir die Seite nur aus der Perspektive der Studierenden betrachtet. Wir konnten aber schnell sehen, wie vielzählig die Zielgruppen und daraus resultierend die Anforderungen an die Internetseite waren.

1.2 VERGLEICHSANALYSE ZU ANDEREN HOCHSCHULEN

Während sich die anderen Gruppen um die Auswertung der Trackingdaten und Interviews mit Studierenden, Mitarbeitenden und Lehrenden gekümmert haben, haben wir uns mit dem Vergleich anderer Hochschulen beschäftigt.

Dazu haben wir einmal visuell und strukturell verglichen, um sehen zu können, was andere Hochschulen anders machen, welche Dinge bei ihnen gut funktionieren und was man daraus lernen kann.

In unserer Recherchephase haben wir eine Styleguide-Analyse sowie die Informationsarchitekturen (ersten Ebenen) mit anderen Hochschul-Seiten durchgeführt. Dies gab uns einen Einblick, wie sich andere Hochschulen über ihre Website visuell als auch inhaltlich präsentieren und wie deren Informationseinteilung aussieht. In den folgenden Beispielen untersuchten wir die Bildsprache, Typografie, Farbgebungen,Menüführungen und Interaktionselemente der verschiedenen Hochschulen Beispiele.

Iwiefern kann man visuell als auch inhaltlich Aspekte wie Philosophie, Art der Lehre und Studierendenleben kommunizieren?

Styleguide Analyse 

Unser Ziel war es, die unterschiedlichen ästhetischen und inhaltlichen Aspekte zu vergleichen, die diese Universitäten/Hochschulen auszeichnen. Welche Emotionen und Eindrücke werden bei den Betrachter*innen hervorgerufen? Wie werden diese Eindrücke durch das Design vermittelt?
Spiegeln die Bildsprachen die Philosophien der Hochschulen wieder?
Aufgrund dieser Fragestellungen haben wir verschiedene Websites zerlegt und diese anschließend auf diese Eigenschaften hin analysiert. Wichtig war eine Auswahl zu treffen, die sich von den Hochschulphilosophien und Lehrangeboten inhaltlich und visuell voneinander unterscheiden: FH Mainz, Universität der Künste (UDK), New York City University (NYU) und unsere FH Potsdam (FHP).

FH MAINZ

UDK

NYU

FHP

INSIGHTS DER ANALYSE

Bildsprache spielt eine wichtige Rolle bei der Darstellung von Emotionalität. Dies veranlasste uns zu überlegen, wie wir den Charakter der FHP vermitteln können. Qualität, Innovation, Interdisziplinarität und flache Hierarchien waren die Merkmale mit denen wir die FHP beschreiben wollten. Dies versuchten wir in unserem Entwurf umzusetzen. 

Farbigkeit spielte auch eine grosse Rolle auf den Hochschulseiten.  Kodierung mit Farbigkeit 
kann Struktur
 schaffen
, um die jeweiligen Ebenen der Website übersichtlicher zu machen. Bei der Navigation zeigte sich das Akkordeon Menü am geeignetsten für komplexe Inhalte.

Das Layout Raster ist der FHP Seite ist nach einem ungeraden Raster aufgebaut, welches auf den ersten Blick von allen Entwürfen heraussticht. Allerdings bietet sich ein gerades Raster zum Beispiel in Form von einem Kachelsystem besser für responsive Designs an. Der zusätzliche Weissraum, der dadurch entsteht, lässt mehr Ordnung zu.

NAVIGATION ANALYSE

Informationsarchitektur: Die ersten 4 Navigationsebenen wurden untersucht, um zu verstehen, wie die unterschiedlichen Hochschulen die verschiedenen Inhalte zum Thema Studium, Forschung und Hochschule aufteilen, priorisieren und strukturieren. Diese wurden später mit der Informationsarchitektur der Fachhochschule Potsdam verglichen, um inhaltliche Lücken oder Gemeinsamkeiten zu erkennen. Für die Hochschulseiten haben wir jeweils eine site map der ersten 4 Ebenen erstellt, um zu verstehen, wie sie sich die Navigation inhaltlich, als auch in ihrer visuellen Umsetzung voneinander unterscheiden.

Für den Vergleich der Informationsarchitektur hatten wir Hochschulen rausgesucht, deren Navigationsmenüs sich zunächst visuell stark voneinander abgrenzten:

> HS Mainz

> HS Trier

> Zürich Hochschule der Künste

> HS Anhalt

2| ENTWURF

2.1 NEUE SITEMAP

Für unseren Entwurf erstellten wir eine neue Sitemap (mit den ersten 3 Ebenen) in der wir die Informationen klar zwischen Hochschulorganisatorischen und Fachbereichsrelevanten trennen. Dies gab uns die Möglichkeit, die FHP Seite visuell als auch inhaltlich neu zu strukturieren. Die Navigation baut sich auf 4 Überthemen auf:

> Fachbereiche

> Studium (allgemein)

> Hochschule 

> Forschung

Diese Aufteilung gewährleistet einen verständlicheren und schnelleren Zugang zu den Informationen, die man sucht. Durch die Neueinteilung der Informationsarchitektur auf maximal 3 Ebenen werden alle fachbereichsrelevanten (Studien)Inhalte auf jeweils einem One Pager zusammengefasst. 

Bei unseren Konzept setzten wir stark den Fokus auf die Umsetzung der Fachbereiche, da wir darin eine Möglichkeit gesehen haben, spezifische Studiengang- und Fachbereich-Informationen eindeutiger zuordnen zu können, um die häufigen „Dopplungen der Unterseiten“ zu meiden. Dadurch gibt es den Nutzer*innen auch leichter zu verstehen, wo man sich auf der Seite befindet und wie die jeweiligen Fachbereiche sich inhaltlich als auch visuell voneinander unterscheiden.

2.2 MENÜ

Das Menü ist stets über ein Hamburger Menü erreichbar, um über die 4 Überthemen navigieren zu können. Zusätzlich gibt es Schnellzugriffe auf die wichtigsten Inhalte für Studierende und Studieninteressierte sowie den Zugriff auf alle hochschulinternen Tools, wie Moodle und Incom.

2.3 FARBKODIERUNG

Aus unserer Vergleichsanalyse lernten wir, dass Farbkodierungen bei komplexen Hochschulseiten eine geeignete Möglichkeit wäre Informationen zu strukturieren und zugehörige Themen miteinander visuell zu verknüpfen. Alle Fachbereiche haben eine Farbe, um die Zuordnungen der fachbereichspezifischen Inhalte zu erleichtern und gleichzeitig Inhalte besser aufteilen zu können. Gleichzeitig werden hochschulrelevante und allgemeine Informationen im einheitlichen Blau gehalten, um die inhaltliche Trennung zwischen Fachbereichen und Hochschule zu schaffen. Dadurch wird die Orientierung auf der gesamten Website zu bewahrt.

2.4 FACHBEREICHSSEITEN

Aufbau

Fachbereichsseiten Jede Fachbereichseite hat den gleichen Aufbau, die die Inhalte besser auffindbar machen und strukturieren:

> Profil des Fachbereichs (FB)

> Studiengänge des FB

> Lehrende des FB

> Dekanat

> Gremien

> Services (ggf. Verlinkungen zu Hochschulservices)

> Meldungen

Gleichzeitig sollen Fotos und Farben einen Einblick in Studieninhalte geben. Gegebenenfalls können wichtige fachbereichspezifische Zusatzpunkte über ein neuen Akkordeonpunkt hinzugefügt werden. Über sichtbare Schnellzugriffe zu den einzelnen Studiengängen auf den FB-Seiten bekommt man einen Gesamtüberblick über die darauffolgenden Unterseiten.

Bildsprachen

Die Bilder die wir nutzten, sind für den jeweiligen FB charakterisierend und sollen möglichst die übergeordneten Themen der Studiengänge und des Fachbereichs möglichst gut widerspiegeln. Somit unterstützen wir visuell den jeweiligen Charakter der individuellen Fachbereiche.

2.5 STUDIENGANGSSEITEN

One Pager Die FHP Website soll maximal 3 Navigationsebenen besitzen, um die unübersichtliche Anzahl an Unterseiten drastisch zu reduzieren.

Um alle Inhalte auf eine Seite zu komprimieren, nutzen wir aufklappbare Akkordeon – Menüs, um die Inhalte sichtbar oder unsichtbar zu machen. Somit findet man alle wichtigen Inhaltspunkte auf einer Seite und verzichten dabei auf eine zusätzliche Seitennavigation.

Bei den Studiengangseiten werden die wichtigsten Themen in verschiedene Reiter getrennt, um die Informationen zu kategorisieren. Somit müssen die Nutzer*innen sich nicht ewig durch die Seite scrollen, um zu den gewünschten Inhalten zu gelangen. Dadurch wird auch eine Überlänge der Seite verhindert.

Downloads

Für wichtige Ordnungen, Formulare, Stundenpläne oder ähnliche lange zusammenhängende Textinformationen können die Nutzer*innen die Inhalte als PDF herunterladen. Dadurch werden weitere Unterseiten vermieden und relevante Informationen in Dokumenten zusammengefasst.

2.6 HOCHSCHULSEITEN

Beim Punkt Studium und Organisation fallen extrem viele Informationen und Unterseiten an, die es auf einen One Pager zu komprimieren gilt. Beim Unterpunkt „Einrichtungen der Hochschule“ bemerkten wir, dass die gesamten Serviceangebote und beteiligten Einrichtungen auf neuen Unterseiten mit Akkordeon Menüs abgebildet werden müssen. So werden komplexe Einrichtungen wie die Bibliothek als neue Links in zusätzlichen Unterseiten aufgeführt, da diese Inhalte in neuen Akkordeon-Menüs aufgerufen werden müssen. Dies verhindert die Überlänge der One Pager.

3I PROTOTYP

https://www.figma.com/file/RlpjKwLt54AhTJTzm7a6iavO/fhpredesign?node-id=646%3A643

VIDEO PROTOTYPE

4I Fazit

Das Projekt stellte sich komplexer und schwieriger dar als gedacht. Wir waren in vielen Momenten ratlos, an welcher Stelle man überhaupt ansetzen kann, da uns klar wurde, dass man allein die hohe Anzahl an Stakeholdern und deren Bedürfnisse nicht in einer gesamteinheitlichen Lösung abbilden kann. Schon allein alle Bedürfnisse der einzelnen Nutzer*innen herauszufinden, würde den Zeitrahmen von einem Semester sprengen, also haben wir unser Projekt nach den Studierenden ausgerichtet. Ebenso tauchten Probleme bezüglich der neuen Einteilung auf, da wir deutliche Unsicherheiten bezüglich des Wordings der Navigationspunkte hatten. Unser Anspruch war es, einen einfach verständlichen und verbesserten Entwurf für die Informationsarchitektur zu schaffen, aber uns wurde schnell klar, dass es keine universale Lösung gab, die alle Punkte berücksichtigen kann. Ebenso bezieht sich es auf Themen wie z.B.: Studienservices oder Studienfinanzierung, die sich nicht eindeutig zu übergeordneten Themen zusammenfassen oder zuordnen ließen. Aus diesen Grund, mussten auch neue Links zu neuen Unterseiten oder externen Seiten aufgeführt werden, weil die Informationen zu den jeweiligen Menüpunkten irgendwann zu massiv wurden, wodurch unser Konzept von einem One pager mit maximal 3-4 Unterseiten nicht immer aufging.

Gleichzeitig tritt der explorative Aspekt in den Hintergrund, weil wir uns möglichst für den einfachen, verständlichen und kurzen Navigationsweg entschieden haben. 

Der nächste Schritt in dem Falle wäre zu sehen, ob ein explorativer Teil in unseren Konzept Sinn machen würde und wie dieser aussehen kann. 

Abschließend bleibt festzuhalten, dass sich unser Konzept insbesondere durch folgende Elemente auszeichnet: Grids, Kachelsystem- und Akkordeonsmenüs. Damit bietet es eine gelungene Grundlage für eine mobile Version der FHP-Seite.