Analyse

→ Wie wir gearbeitet haben

Besser machen. Der Kurs teilt sich zu Beginn in vier Gruppen, alle mit demselben Ziel: die Website neu denken. Besser machen. Der Start des Kurses, die Analyse der bestehenden Website und der Zielgruppen, findet gemeinsam im ganzen Kurs statt. Dabei werden Aufgaben verteilt und Prioritäten gesetzt. Wir fassen am Anfang ein einheitliches Konzept und eine klare Roadmap: wir wollen uns auf die Zielgruppenteilung konzentrieren und jede:n Besucher:in der neuen Seite abholen.

Im Laufe des Kurses trennen sich die Gruppen und fertigen, mithilfe der gemeinsam gesammelten Erkenntnisse, vier verschiedene Konzept- und Gestaltungsentwürfe an. Dabei arbeiten wir regelmäßig in Workshops zusammen und geben regelmäßiges, gegenseitiges Feedback.

→ Unser Fokus: Zielgruppen

Zielgruppenzählung: 22, 23, 24 … Der wichtigste Punkt unseres Konzepts ist also die klare Aufteilung in Zielgruppen. Dabei stellt sich schnell heraus: so einfach ist das nicht. Denn eine Hochschule ist komplex und hat, in unserem Fall, knapp 3.500 Studierende, über 300 Mitarbeiter:innen und gefühlt noch 20 andere teilhabende Gruppen, die die Website nutzen wollen.

Für eine klarere Eingrenzung der Zielgruppen nutzen wir eine Brainstorming-Methode und erarbeiten, welche Zielgruppen relevant sind und wie sie geclustert werden können. Spannend ist dabei, dass sich die Zielgruppen in ihren Erwartungen an die Website tatsächlich nur teilweise überschneiden – und, im Umkehrschluss, der Content pro Zielgruppe sehr genau definiert sein muss.

Intern VS extern. Ein Cluster der Zielgruppen zeigt, dass es teilweise überschneidende Zielgruppen gibt, die sich in ihren Interessen ähneln. Das größte Aufteilungsmerkmal ist dabei ganz eindeutig: intern und extern. Interne sind hier Studierende, Alumni, Mitarbeiter:innen … die bereits an der Hochschule studieren oder angestellt sind. Externe sind Studieninteressierte, Unternehmen, Presse und Ähnliche.

Diese Aufteilung ermöglicht uns eine klare Zielgruppendefinition für nur zwei Zielgruppen anstelle von 20+. Dabei definieren wir auch eine simple Basis für die Anwendungsfälle:

Interne kennen sich aus und wissen, wonach sie suchen. Sie brauchen keinen Eindruck über die Hochschule, sie kennen sie ja schon. Spannend sind hier UI-Elemente, die schnell und ohne Umwege zu dem Ziel führen.

→ Beispielhaft wäre ein Student, der im sechsten Semester Interfacedesign studiert. Er kennt die Website, er kennt den Campus und er sucht nur eine schnelle Info über einen Kurs für das nächste Semester. Er möchte die Website aufrufen und mit möglichst effektiv und schnell auf dem Vorlesungsverzeichnis sein.

Externe haben ganz andere Anforderungen, auch wenn sie unterschiedlicher sind als die der Internen. Externe Seitennutzer suchen nach einem Eindruck über die Hochschule. Sie wollen wissen, wie die Menschen hier ticken, wie der Campus lebt und wie sie ganz allgemein über die Hochschule fühlen sollen. Ihnen ist mit einer schnellen Suche nicht geholfen, denn sie wissen gar nicht, wonach sie suchen.

→ Beispielhaft dafür ist eine 18-jährige Schülerin, die in Berlin wohnt und bald Abitur macht. Sie sucht nach einem Studiengang in Berlin oder Brandenburg und weiß eigentlich noch gar nicht so genau, was sie machen möchte. Wichtig ist ihr aber, dass ein angenehmes Zusammenleben auf dem Campus herrscht und die Professor:innen verständnisvoll sind.

Diese Eingrenzung hat uns das ganze Projekt über begleitet und hat das Konzept sowie die Gestaltung maßgeblich beeinflusst.

→ Informationsarchitektur

Einer der ersten Schritte in der Analyse und damit dem Verständnis der derzeitigen Website war ein Aufschlüsseln der jetzigen Informationsstruktur der Hauptnavigation. Mit „Hauptnavigation“ gemeint ist die Menü-Struktur am linken Webseitenrand.

Absolut unbrauchbar. Nach der Analyse können wir mit gutem Gewissen sagen: sie ist absolut unbrauchbar. Neben rein haptischen Fehlern, wie dem Verschwinden des Menüs wenn man von dem 30 px hohen Feld abkommt, gibt es auch logische Zuordnungsfehler, die die Nutzung des Menüs behindern.

501 Unterseiten. Dazu kommt, dass in diesem Menü über 500 Seiten verlinkt sind. Dabei findet zwar eine Sortierung statt, aber keine Priorisierung. Eine tatsächliche Nutzung ist rein theoretisch möglich, für einen effizienten Besuch der Website aber nicht realistisch. Dabei waren außerdem 29 doppelte Verlinkungen und 7 externe Links – beides hat in der Navigation nichts zu suchen. Erwartet wird, dass die Navigation eine Übersicht aller internen Seiten bietet. Eine externe Verlinkung ist hier also missverständlich und fühlt sich für den Nutzer an, als ob er von der Website „weggeschickt“ wird.

4,5 m Menü. Um die Informationsarchitektur besser analysieren zu können, haben wir sie ausgedruckt — und standen dann mit über 4 Metern Papier da. Dabei inkludiert ist die deutlich längere, deutsche Version und die sehr kurze englische Variante.

Wer die digitale Datei betrachten möchte, kann sie hier finden.

→ Besucher:innenzahlen

Wollen Sie einen Cookie? Miteinbezogen wurden auch die Website-Trackingdaten des letzten Jahres. Um die Daten visuell verständlich darzustellen wurde eine weitere Ebene über die Informationsarchitektur gelegt und damit die Anzahl der eindeutigen Seitenansichten visualisiert. Die sogenannte Heatmap **hat Informationen über die Relevanz von Unterseiten deutlich gemacht und uns in der Reduktion der Informationsstruktur unterstützt.

Bei der Heatmap gilt: umso dunkler → mehr Aufrufe, heller → weniger Aufrufe. Grau bedeutet, dass wir keine oder nur unzureichende Daten zu dieser Seite haben. Anzumerken ist außerdem, dass die Daten unter Umständen verzogen sind — so hat der Fachbereich Sozial- und Bildungswissenschaften die meisten Klicks, ist aber zahlenmäßig auch der größte Studiengang.

→ Link zur interaktiven Heatmap

→ CardSorting

Ordnung ins Chaos bringen. Um die Informationsstruktur weniger chaotisch zu gestalten, haben wir uns der „Schwarmintelligenz“ bedient und einen CardSorting-Workshop mit dem Kurs durchgeführt. Dabei werden die bestehenden Menüpunkte auf Karten notiert und einzelnen Gruppen zur Verfügung gestellt.

Die Aufgabe besteht dann darin, diese Karten zu priorisieren, gegebenenfalls umzubenennen und in neue Gruppierungen aufzuteilen. Durch die verschiedenen Ansätze der Gruppen entsteht dabei ein Dialog, der zu einer guten Strukturlösung führen kann und der die Basis für eine Neugestaltung sein kann.

Das Ergebnis war die abschließende Informationsstruktur, also die Aufteilung des Menüs in der Hauptnavigation. Gestaltungsbedingt haben sich bei uns noch einige Kleinigkeiten geändert, die Struktur ist aber ähnlich geblieben.

→ Konkurrenzanalyse

Um einen Vergleich zu anderen Instituten zu haben, wurde eine Konkurrenzanalyse angefertigt und die Webseiten vergleichbare Hochschulen analysiert. Dabei haben wir uns auf die Beantwortung von zwei grundsätzlichen Fragen konzentriert:

1. Wie gehen die anderen Hochschulen mit ihren Inhalten um?
2. Was wird auf der Seite gezeigt und worauf liegt der Fokus?

Dafür wurde vorab eine Legende angefertigt, in der Größe und Farbigkeit der Flächen darüber Auskunft geben, wie präsent die einzelnen Inhalte auf der Hochschulseite präsentiert werden. Sie ist hier im Drive zu finden.

Anschließend wurden eine Handvoll ausgewählter Hochschulen analysiert und mit einem Prozentsatz tabellarisch dargestellt.

Anhand dieser Übersicht lassen sich die Webseiten vergleichen: zum Beispiel, dass die Uni Weimar viel mehr Content (27,3 %) auf ihrer Startseite anbietet, im Vergleich zu unserer – 0 %. Oder, dass die FH Johanneum bereits auf ihrer Startseite die einzelnen Fachbereiche mit 23,3 % vorstellt. Auch dieser Bereich ist auf fh-potsdam.de nicht vorhanden. Ebenfalls sehr präsent waren auch die CTAs (Call-to-Action Begriffserklärung) zur Studierendenbewerbung, auf der FHP-Seite ebenfalls nicht zu finden.

Insgesamt ist festzustellen, dass es offensichtlich standardisierte Muster für so komplexe Hochschulseiten gibt. Dazu gehören Slider, Aktionsbanner, Studienorganisatoren und Ähnliches. Welche Priorität insbesondere auf der Startseite gesetzt wird, ist von Hochschule zu Hochschule sehr unterschiedlich.

Das geplante, feste Regelwerk, das wir mit dieser Methode erstellen wollten, könnten wir also nicht feststellen — was uns bestärkt hat, ein eigenes Regelwerkskonzept für unsere Hochschulseite zu erstellen.

→ O-Töne

Listen to the man. Eine weitere Analyse haben wir während der Eignungsprüfung am Fachbereich Design im durchgeführt. Zu dieser Zeit waren rund 500 Prüflinge auf dem Campus, die erst vor Kurzem ausführlich mit der Hochschuleseite gearbeitet haben. Dadurch hatten wir Zugang zu einer quantitativen Nutzergruppe, die für die Hochschule sehr relevant ist.

Im Interview mit einer Vielzahl von Prüflingen aus allen drei Design-Bereichen (Kommunikationsdesign, Produktdesign und Interfacedesign) haben wir eine Reihe von Fragen gestellt, die uns Probleme und Schwierigkeiten mit der hochschuleigenen Website aufzeigen sollten. Der folgende Fragenkatalog wurde dabei als Richtlinie für ein Gespräch verwendet.

1. Welchen Eindruck hast du nach dem Besuch der FHP-Website gehabt? (3 Schlagworte)
2. Wonach hast du auf der Seite gesucht / was wolltest du wissen?
   1. Wann kommt es zu dem Punkt, dass du eine Suche benutzt?
   2. Wie würdest du deine Suchanfrage formulieren?
   3. Weisst du genau, was du suchst? Oder browst du lieber?
3. Hast du alle Informationen bekommen, die du brauchst? Falls ja, welche?
4. Hast du Informationen auf der FHP-Website gesucht und nicht oder nur schwer gefunden?
5. Welche Informationen fandest du besonders interessant / haben dich überzeugt?
6. Was erwartest du auf der Startseite der FHP-Website zu finden?
7. An welchen anderen Hochschulen hast du dich noch beworben?
   1. Wie unterscheiden sich diese von der FHP-Website?
8. Was erwartest du zu finden beim Benutzen der Suche?
9. Was sind die nächsten Schritte, die du nach einer Sucheingabe erwartest?

Bei dieser qualitativen Studie sind einige Erkenntnisse zustande gekommen, die wir in der Neugestaltung beachtet und dazu passende Lösungen implementiert haben. Zur Darstellung dieser einige Zitate.

Ein ausdrücklicher Beweis, wie wichtig es ist, ein sympathisches und eindrucksvolles Bild der Hochschule nur durch die Website zu vermitteln. Dieser Bewerber hätte ohne die Zusprache von Dritten eher davon abgesehen, sich an der FHP zu bewerben — schlicht, weil ihn der Internetauftritt nicht überzeugt hat. Während des Interviews hat der Prüfling die Webseite als „kühl“ und „flach“ bezeichnet

Hier ein weiterer Beleg dafür, wie schwer es momentan ist, an entsprechende Kontaktdaten von Mitarbeiter:innen oder Professor:innen oder Rauminformationen zu gelangen. Alle Daten sind entweder redundant gelistet oder so zerstreut, dass sie mit keiner Logik gefunden werden können. Dass Bewerber:innen dann gezwungen sind, wichtige Informationen per E-Mail abzufragen, ist weder produktiv noch wirft es ein gutes Bild auf die Hochschule.

Abgesehen von den Interviews während der Eignungsprüfung haben wir zu Beginn des Kurses mit Studierenden auf und um den Campus gesprochen, um aus der „Designer-Blase“ herauszukommen und herauszufinden, wie andere Fachbereiche (also die interne Zielgruppe) mit der Website arbeiten. Da ein quantitativer Vergleich hier fehlt möchten wir nur ein einzelnes Zitat anführen, das die Ergebnisse in unseren Augen gut zusammenfasst.

Deutlich wird, dass die jetzigen Studierenden lieber Umwege und eigene Work-Arounds benutzen, um an die benötigten Informationen zu kommen als die Navigations- und Suchstrukturen der Website zu benutzen. Unsere Interviews haben also einige Vermutungen unsererseits bestätigt und weitere Perspektiven eröffnet, um zielgruppengerecht zu arbeiten.

→ Zieldefinition

TL;DR Zum Abschluss der Analyse haben wir eine Zieldefinition geschrieben, die den Entwurf leiten sollte und auf die bei Fragen zum weiteren Vorgehen zurückgegriffen werden konnte. Dabei haben wir mit der How Might We-Methode gearbeitet, um eine zielgerichtete Definition zu verfassen.

Entwurf

→ Link zum interaktiven Prototypen

→ Startseite

Liebe auf den ersten Blick. Die Startseite zählt in unseren Augen zum Herzstück der Website – hier treffen alle Zielgruppen ein und müssen sich von hier, möglichst gut orientiert, weiter auf der Website bewegen. Eine durchgestaltete Website, die sowohl interne als auch externe abdeckt, war für uns also zwingend und auch die größte Aufgabenstellung.

Um die Bedürfnisse der beiden Zielgruppen abzudecken, haben wir einige Entwürfe gestaltet, in der eine klare Trennung der Startseite erfolgt. Heißt, dass die Seite geteilt ist und jeweils ein Bereich nur für Interne und der andere nur für Externe gedacht ist. Ein gutes Beispiel dafür ist die Website des Massachusetts Institute of Technology – sie ist in links und rechts getrennt und hat eine klare Aufteilung für beide Zielgruppen.

Da wir die visuelle Gestaltung einer solchen Trennung als schwierig betrachtet haben, ist die Trennung bei uns weniger strikt durchgesetzt – die beiden Bereiche sind für beide Zielgruppen erreichbar, setzen aber einen Fokus je nach Bedürfnis. Dabei ist die prominente Suche direkt unter dem Header für die interne Zielgruppe und das Video für die externe gedacht. Beide Zielgruppen sollen aber beide Module wahrnehmen und dann mit einem der beiden interagieren.

Daneben haben wir uns auf eine Anzahl von Modulen konzentriert, die die Bedürfnisse beider Zielgruppen abdeckt und für alle Besucher interessant sein können. Dazu zählen Module für Veranstaltungen, aktuelle Nachrichten und Projekte, die an der FHP angefertigt worden sind. Der letzte Punkt, Zahlen und Fakten, existiert hauptsächlich für Externe, die einen schnellen Überblick über die Gesamtheit der Hochschule suchen.

Viele Frames sagen mehr als Bilder. Oder so. Die Entscheidung, keinen Slider zu verwenden sondern mit einem durchlaufenden Video ohne Sound zu arbeiten, erfolgt aus einer logischen Entscheidung: Bewegtbild kann Impressionen und insbesondere Emotionen wesentlich intensiver übermitteln als eine Reihe von Fotos. Heutzutage sind, durch moderne Browser und gute Internetanbindungen, Videos auf Webseiten kein Hexenwerk mehr. Sie stellen einen visuellen Stimmungsmacher dar, also auch einen Eye-Catcher, und empfängt den Besucher mit einer angenehmen Atmosphäre – das spiegelt sich dann in dem Eindruck wieder, den der:die Besucher:in von der Fachhochschule gewinnen konnte.

Forschung & Casino. Das Video zeigt die stärksten Facetten der Hochschule, neben einer Darstellung von Potsdam als attraktiven Studierendenwohnort. Das Video soll Lust auf Mehr machen und die Betrachter dazu einladen, mehr über die gezeigten Bereiche der Hochschule herauszufinden. Um keine aufdringliche Facebook-Kopie zu werden verzichten wir also demnach vollständig auf Ton.

Das Video soll eine individuelle Identität vermitteln und die, laut den Eignungsprüflingen, „sterile Website“ damit aufgelockert werden. Unserer Analyse nach vergleichen Studieninteressierte eine Vielzahl von Hochschulen und damit derer Webseiten – dort mit einem einzigartigen Video im Kopf zu bleiben ist auch im Interesse der Hochschule um die Bewerberzahlen stabil zu halten.

→ Informationsstruktur

Status quo. Die FH-Seite versucht, die Inhalte in sechs Oberkategorien – oder Aktionen – zu unterteilen:

• Informieren,
• Studieren,
• Lehren,
• Weiterbilden,
• Forschen und
• Kooperieren.

Diese Oberkategorien sind nochmal in bis zu vier weitere Unterebenen unterteilt. Der Weg um beispielsweise die Seite der Gleichstellungsbeauftragten aufzurufen, ist folgender:

Informieren → Organisation → Gremien/Beauftragte → Beauftragte → Gleichstellungsbeauftragte

Man muss also durch fünf Ebenen navigieren und suchen, um zur gewünschten Seite zu gelangen. Kniffliger wird es auch noch, wenn der gewünschte Inhalt nicht einer Oberkategorie eindeutig zuzuordnen ist, sich Seiten auf mehreren Oberkategorien finden oder Inhalte sogar doppeln. Beispielsweise findet sich unter

Studieren → Studienangebot → Bachelorstudiengänge → Interfacedesign (B.A.)

eine Seite mit allgemeinen Informationen zum Studiengang. Doch die eigentlichen Inhalte finden sich unter

Studieren → Fachbereiche → Design → Studiengänge → Studiengang Interfacedesign

Dort stehen die gleichen Informationen nochmal, nur viel ausführlicher. Das ist sowohl für Studieninteressierte als auch für Studierende verwirrend.

Status… post? Für die Informationsarchitektur haben wir uns alle Seiten angeschaut und neu sortiert. Die neue Architektur findet sich hier auf Dropbox Paper. Die vier neuen Hauptkategorien sind Studium, Forschung, Lehre und Hochschule. Alle Seiten befinden sich unter diesen Kategorien; es gibt keine weiteren Ebenen. Stattdessen werden sie im Menü unter Themen gruppiert.

Statt einer unübersichtlichen und tiefen Struktur ist das neue Menü stark vereinfacht. Mit einem Klick auf die Hauptkategorie hat man gleich alle Unterseiten auf einen Blick, sodass alle Inhalte der Kategorie schnell erfassbar sind.

Beispielsweise befinden sich die Seiten Studienorientierung sowie Bewerbung & Einschreibung unter dem Thema Vor dem Studium. Das Thema Vor dem Studium ist allerdings nicht eine weitere Ebene der Informationsstruktur, sondern nur eine Gruppierung im Menü. Der Pfad der Seite Bewerbung & Einschreibung wäre immer noch folgender:

Studium → Bewerbung & Einschreibung

Es gibt zudem keine Dopplungen; alle Seiten befinden sich nur an einem Ort und nicht zwei- oder dreimal an verschiedenen Stellen. Auch externe Links haben wir vom Menü verbannt, da sie in der Hauptnavigation nichts zu suchen haben.

Anders als auf der aktuellen Seite haben wir uns gegen die Unterteilung in Fachbereiche entschieden, also dass jeder der fünf Fachbereich eigene Unterseiten bekommt. Stattdessen folgen wir das Prinzip der Zentralisierung. Themen, die in allen Fachbereichen vorkommen, finden sich also nicht fünfmal, leicht verändert, sondern nur einmal. Auf einer zentralen Seite werden alle wichtigen Informationen gebündelt, inklusive Detailinformationen, die für einen bestimmten Fachbereich relevant sind.

Ein Beispiel: BAföG. Jemand möchte sich informieren, wann welcher Nachweis eingereicht werden muss und welche Person aus seinem Fachbereich ihn unterschreibt. Neben einer allgemeinen Seite zum Thema BAföG hätte es mit der alten Struktur bis zu fünf weitere Seiten (einmal pro Fachbereich) gegeben, mit jeweils unterschiedlichen – teils nicht mehr aktuellen – Informationen. Mit der neuen Struktur existiert hingegen nur eine einzelne Seite, die zentral verwaltet und regelmäßig aktualisiert wird. Dort finden sich auch alle Ansprechpartner:innen und Zusatzinformationen, die einen bestimmten Fachbereich betreffen.

→ Datentypen & Filter

Die Webseite ist äußerst komplex und enthält dementsprechend viele unterschiedliche Datentypen. Damit gemeint sind einzelne Text- und Bildmodule, die in der Theorie nur ein simpler Eintrag im Backend der Webseite sind. Dargestellt werden sie auf der Seite aber sehr unterschiedlich und haben, trotz ihrer technischen Nähe, keinen inhaltlichen, visuellen Vergleich. Wir haben bis zu zehn Datentypen definiert:

• Nachrichten
• Veranstaltungen
• Personen
• Projekte
• Downloads
• Stellen- und Praktika
• Studiengänge
• Kurse
• Werkstätten und Labore
• Räume

Jeder Datentyp hat eine eigene Datenübersicht. Sobald Nutzer:innen diese Datenübersichten aufrufen, sehen sie zuerst alle Daten, die es gibt. Diese angezeigten Daten können dann mit Filtern reduziert oder sortiert werden.

Am Beispiel Personen werden erstmal alle 484 Personen angezeigt, die an der Hochschule arbeiten. Nun können sie nach Fachbereich, Einrichtung, Statusgruppe oder Gremien gefiltert werden. Wenn z.B. der Fachbereich Informationswissenschaften ausgewählt wird, dann werden nur die 67 Personen aus diesem Fachbereich angezeigt. Diese können dann wiederum noch nach Statusgruppe oder Gremium sortiert werden.

Die Filter befinden sich immer auf der rechten Seite. Dadurch stehen die Ergebnisse im Vordergrund, die zuerst gesehen werden. Pro Filter (z.B. Statusgruppe) werden in der Regel nicht mehr als fünf Unterfilter (z.B. Studierende) angezeigt. Wenn es mehr als fünf sind, dann bleiben die Unterfilter standardmäßig zugeklappt, um die Nutzer:innen nicht zu überfordern.

Neben einer Listenansicht ist je nach Typ auch eine Kachelansicht möglich. Und neben der manuellen Suche kann auch jederzeit die Suchleiste verwendet werden. Dort ist der aktuelle Datentyp, z.B. Personen, immer voreingestellt.

Mit den Datenübersichten und deren Filtermöglichkeiten möchten wir mehr Transparenz schaffen und die Discoverability von Inhalten erhöhen, die man sonst nicht gesehen hätte. Beispielsweise wird durch die Übersicht der Werkstätten und Labore oder durch das gemeinsame Kursverzeichnis erst sichtbar, was die anderen Fachbereichen für Kurse anbieten oder welche Werkstätten es insgesamt gibt.

Einige Beispielseiten, die das Konzept in unserem interaktiven Prototypen darstellen:

• Alle kommenden Veranstaltungen.
• Bisherige Projekte an der FHP.
• Die Kurse des aktuellen Semesters.

→ One Pager

Major One to Page Control. Auf der aktuellen Seite sind viele Unterseiten sehr fein unterteilt, sodass man häufiger Seiten mit sehr wenig Content auffindet, wo wieder verlinkte Seiten angeklickt werden müssen (z.B. Informationen zum Studiengang Interfacedesign), um an vermutete Inhalte eines Menüpunktes zu gelangen. Die mehrfachen Klicks und die tiefe Seitenstruktur stellten für uns eine Herausforderung dar, die es zu lösen galt.

Unsere Lösung sieht vor, thematisch gleiche Seiten zu einem Onepager zusammen zu legen. Dies vereinfacht die Informationsarchitektur und es entstehen im Menü keine tieferen Ebenen. Dadurch verringert sich auch die Wahrscheinlichkeit auf einer falschen Seite zu landen.

Durch die Darstellung als Onepager gewinnt das Scrollen einen größeren Anteil der Navigation auf der jeweiligen Seite. Dies kommt zum einen der natürlichen Trägheit des Menschen stärker entgegen als das Klicken und zum Anderen stehen dadurch neue Inhalte schneller zur Verfügung. Zudem lädt das Scrollen gerade bei thematisch ähnlichen Inhalten eher zum Stöbern, Weiterlesen und Entdecken ein.

Jumping Jacks. Durch Jump-Links in der Sidebar bleibt die Seite ohne Weiteres navigierbar. Um die Geduld der User beim Scrollen nicht überzustrapazieren, werden viele Inhalte in Accordions (also ausklappbare Boxen) versteckt. Die Navigationselemente der Onepager befinden sich stets auf der linken Seite. Dadurch heben sich diese von den Filtern – welche sich immer rechts befinden – ab und werden zuerst wahrgenommen und gelesen.

Modulare Seitengestaltung. Die Onepager sind modular aufgebaut. Dazu gehören Textblöcke, Zitate, Bilder, Videos, Mediengalerien sowie Module zu Datentypen wie Kurse, Personen, Projekte oder Downloads – ähnlich wie in typischen CMS wie WordPress und Typo3.

Dadurch können bestehende Inhalte wie eine Ansprechperson oder ein Download direkt eingebettet werden. Diese Module sehen nicht nur überall gleich aus; wenn sich die Inhalte ändern, wird auch jede Seite, die dieses Modul enthält, automatisch aktualisiert.

Beispielhaft dafür ist der Onepager zur Information über den Studiengang Interfacedesign. Er kann interaktiv hier im Prototypen aufgerufen werden oder über diese Bilderstrecke.

→ Suche

Looking for something? Die Suche, die auf der Startseite ausgeklappt und auf den anderen Seiten eingeklappt oben rechts zu finden ist, ist ein elementarer Bestandteil der Website – er ist das „Tor“, mit dem alle Internen die Website navigieren können. Laut unseren Interviews wissen die meisten internen Nutzer, wo sie hinwollen – sie suchen konkret nach dem Vorlesungsverzeichnis und wollen sich nicht mühsam durch das Menü durchklicken.

Das Konzept ist also, dass sie direkt auf der Startseite, noch vor dem Video, mit einem sehr prominenten Suchleiste abgeholt werden. So können sie, ohne das Menü oder den Startseiten-Onepager auch nur zu beachten, sofort zu ihrer gewünschten Seite springen.

Besonders ist auch die Interaktion, die nach einem Klick in das Suchfeld passiert: die restlichen Inhalte der Startseite blenden sich aus und einige Schnellzugriff-Module werden eingeblendet. Darunter sind Inhalte wie Von Dir häufig besucht und Oft besuchte Seiten. Diese Daten ergeben sich aus der Tracking-Analyse und beruht damit auf realen Zahlen, die widerspiegeln, welche Seiten häufig benutzt werden.

Außerdem finden sich hier Ressourcen für mehrere Zielgruppen, die über unsere grobe Einteilung in Interne und Externe hinausgeht: Gruppen wie Studieninteressierte, Lehrende und Alumni werden direkt aufgefangen und finden Links zu Angeboten, die unseren Daten nach für sie besonders interessant sein können. Um visuelle Verwirrung zu vermeiden arbeiten wir auch hier mit Accordions, also Elementen die erst ausgeklappt werden müssen.

→ Responsive Design

Die mobile Website ist, wie in unserem How Might We-Satz formuliert, besonders wichtig. Insbesondere Interne, die schnellen Zugriff auf z.B. Personendaten brauchen, müssen auch die mobile Navigation schnell benutzen können. Die Seite ist also an die Desktopvariante angelehnt und ebenso minimalistisch und strukturiert aufgebaut.

Die reduzierten, auf mobil angepassten Informationen sorgen für eine schnelle Übersicht. Durch das bekannte „Hamburgermenü“-Pattern gelangt man zu den schon bekannten Untermenüpunkten und auch der Onepager für die vereinfachten Informationsdarstellung ist mobil unverändert.

→ Styleguide

Bei der Farbwahl setzten wir uns das Ziel, nah am Corporate Design der FH Potsdam zu bleiben. Dieses sieht jegliche Arten von Blau vor; um eine bessere Farbharmonie mit den auf der Website eingesetzten Bildern zu erschaffen, verwendeten wir als Farbinspiration die Umgebungsfarben des Hauptgebäudes.

Dazu zählen vor allem die Blau- bzw. Blau-grün-Töne, welche durch die Reflexionen im Glas hervorgerufen werden. Diese Farbnuancen finden sich auch häufig bei den Personenportraits der Mitarbeiter oder auch Gebäudeaufnahmen und Eventfotos von Veranstaltungen in der FH wieder. Als Schrift verwenden wir die Hauschrift der Fachhochschule, die FHP Sun von LucasFonts.

→ Klickprototyp

→ Link zum interaktiven Prototypen

Fazit

→ Summa Summarum

„Das ist easy, das schaffen wir doch locker in 2 Monaten.“ … dachten wir zu Beginn des Kurses. Tatsächlich ist eine Hochschulwebseite wesentlich komplexer, als der erste Eindruck vermuten mag. Begründet ist das, in unseren Augen, hauptsächlich durch die chaotischen, neuen Einpflegungen und durch das Fehlen eines hochschulweitem Regelwerk, dass die Bearbeitung der Website vorschreibt.

Dadurch entfernen sich die Inhalte der Fachbereiche immer weiter voneinander und Informationsredundanz lässt sich unmöglich durch eine einzelne Stelle kontrollieren und verhindern. Bei der Abschlusspräsentation, bei der Mitarbeiterinnen der Hochschulkommunikation und die Präsidentin anwesend waren, wurde das deutlich – es ist einfach ein gigantischer Organisationsaufwand, eine solche Website zu pflegen.

Ein Redesign, bei dem ein großer Fokus auf den Inhalt und nicht unbedingt die Gestaltung gelegt wird, ist in unseren Augen also unabdinglich. Aber: auch das ist wahnsinnig komplex. Denn die Hochschule und jede einzelne Untergruppe hat ganz eigene Anforderungen an das Backend, an die Darstellungsvarianten, an die technischen Möglichkeiten, …

Dennoch ist der Kurs im Hochschulkontext sehr wichtig: ein solch komplexes Projekt, bei dem viele verschiedene UX-Methoden ausprobiert werden können, ist für viele Kursteilnehmer ein großer Mehrwert und zeigt Probleme, die in anderen Kurskontexten selten gelöst werden können.

→ Ausblick

Während der Abschlusspräsentation wurde eine realistische Einschätzung zur Umsetzbarkeit aller Projekte getroffen – und die ist gering. Wie in unserem Fazit zu lesen ist die benötigte Vorarbeit und Umsetzung eines solchen Webseitenprojekts nicht nur komplex und zeitintensiv, sondern dadurch auch logischerweise teuer. Dennoch ist in Ausblick, dass die Studierenden des Kurses im Laufe der Redesign-Umsetzung der Hochschulleitung behilflich sein können und das Wissen, das in diesem Kurs angehäuft wurde, weitergeben können.

Realistisch ist in unseren Augen aber eher eine Stück-für-Stück-Umsetzung einer neuen Webseite, da ein kompletter 0%-100%-Relaunch schlicht zu komplex und zu viele involvierten Parteien hätte. Gespannt, was mit fh-potsdam.de passieren wird, sind wir allemal.