Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Keep it Simple.

Ein www.fh-potsdam.de Website Redesign Konzept mit dem großen Gedanken im Hinterkopf: »Wir wollen keine Separation, wir wollen Einheit und Gleichheit!«

Das machen wir doch mit Links!

… dachten wir uns, als wir uns in diesen Website Redesign Kurs einschrieben. Die FH;P Website braucht einen aktualisierten, neuen, defragmentierten (aufgeräumten) Look. Das ist leicht daher gesagt. Was sind denn überhaupt die Probleme der FH;P Website? Welche Besuchergruppen gibt es? Welche Probleme und Lösungsansätze wollen wir darin verfolgen?

Kontext und Rahmenbedingungen

Der Kursrahmen bot die Möglichkeit, für die Webseite der FH Potsdam ein Redesign in Form einer Case Study zu machen. Ziel war es dabei nicht, etwa einen voll funktionsfähigen Prototypen zu entwickeln und alle möglichen Funktionen und Anwendungen genau zu durchdenken, sondern einen Aspekt der FH;P-Webseite, auszusuchen und diesen weitest möglich zu durchdenken.

Es geht dabei in erster Linie darum, das Potenzial, was sich hinter der Webseite verbirgt, zu erfassen und einen Weg zu finden, wie das Potenzial erreichbar sein könnte.

So, wie die Webseite jetzt ist, weißt sie auf kein auszuschöpfendes Potenzial hin. Sie ist in großen Teilen nicht nutzbar, bzw. schwer zugänglich. Es gibt viele tote Links und keine klare visuelle Hierarchie, sowie eine verwirrend gegliederte und kompliziert bedienbare Navigation. Das hat zur Folge, dass viele Besucher nicht über die Startseite hinwegkommen oder gar dass sich Studieninteressierte sich aufgrund der Webseite gegen ein Studium an der FH Potsdam entscheiden. Daher gilt es für das Redesign zu analysieren, wonach die Besucher der Webseite suchen und welche Funktionen die FH-Webseite für sie noch erfüllen könnte.

Recherche-Phase

Innerhalb des Kurses haben wir uns in Gruppen aufgeteilt um simultan an verschiedenen Bereichen arbeiten zu können. Eine Gruppe hat sich mit der Konkurrenzanalyse anderer Universitäts- und Hochschulwebseiten auseinander gesetzt, eine mit der Analyse der Tracking Daten der jetzigen Webseite, und noch eine mit der Erfassung eines qualitativen Meinungsbildes der Nutzer. Für letzteres waren wir mit verantwortlich.

Bestandsaufnahme

Ohne eine ordentlich Marktanalyse bzw. das Abstecken des Ist-Zustandes waren uns die Hände gebunden. Zusammen mit unserem kompletten Kurs erstellten wir einen Fragenkatalog »zur Lage der Nation.« Dabei war uns sehr wichtig möglichst viele diverse Personen zu befragen – vom Studieninteressierten bis hin zur Präsidentin der FH;P.

Hier ein Einblick in unseren Fragenkatalog:

  1. Was erwarten Sie von einer Hochschul-Website? Was ist Ihnen am Wichtigsten?
  2. Drei Schlagworte, die Ihnen spontan zur FHP-Website einfallen!
  3. Nutzen Sie die FHP-Website regelmäßig?
  4. Wofür nutzen Sie die FHP-Website?
  5. Wie finden Sie die Informationen auf der FHP-Webseite, die Sie benötigen?
  6. Haben Sie mal Informationen auf der FHP-Website gesucht und nicht oder nur schwer gefunden?
  7. Was erwarten Sie auf der Startseite der FHP-Website zu finden?
  8. Interessieren Sie sich für weitere Aktivitäten/Angebote an der FHP?
  9. Wie erhalten Sie aktuelle Informationen dazu?
  10. Lesen Sie die aktuellen Meldungen zu News und Veranstaltungsterminen auf der Startseite der FHP-Website?
  11. Haben Sie Interesse an den Inhalten/Projekten/Aktivitäten anderer Fachbereiche?
  12. Erwarten Sie, dass man die FHP-Website auf mobilen Geräten aufrufen kann?
  13. Was können Sie über die Barrierefreiheit der FHP-Website sagen?
  14. Welche Probleme sehen Sie in Zusammenhang mit der Website für nicht deutschsprachige Nutzer*innen?
  15. Finden Sie, dass die Website die FH Potsdam adäquat repräsentiert?
  16. Wenn Sie eine Sache an der FHP-Website sofort ändern könnten … was wäre das?

Das Erste Gefühl

Nach circa einem Monat hatten wir alle wichtigen Personen befragt, Meinungen eingeholt und ein erstes Gefühl für die Probleme der verschiedenen Besuchergruppen bekommen. Einige Kernaussagen haben wir hier zusammengefasst:

Kernaussagen:

  • »Ich google immer Vorlesungsverzeichnis Design FHP, weil ich diesen Menüpunkt immer ewig suche.«
  • »Die Suchfunktion ist eine Katastrophe.«
  • »Responsive Website: App wäre auch eine coole Option. Da kann man sich ja auch bestehenden anschließen.«
  • »Es gibt keine aktuellen Zahlen über die Auslastung (Anzahl Studierende etc.) an der Uni.«
  • »Die FHP Website wird dem Image der FH aus meiner Sicht nicht gerecht.«
  • »Ich würde gerne mehr über andere Fachbereiche erfahren.«
  • »Die Website der FH;P ähnelt einer Bürokraten Website. Sie ist einfach nur grau.«

Unser Ziel

Aus diesen Ergebnissen ergaben sich für uns erste Ziele für unser Redesign:

  1. Navigation vereinfachen

2. Vernetzung der Fachbereiche

3. Stöbern fördern

Herangehensweise

Während die Konkurrenzanalyse einen interessanten Einblick in funktionierende UX Design Praktiken im Hochschul-Kontext bot, fokussierte sich die Analyse der Tracking-Daten auf Aspekte der Navigation. Daher bot sich auch die Möglichkeit an, mit dem gesamten Kurs ein Card Sorting zu veranstalten, um mehr Überblick in die Navigation zu erlangen, welche in den Interviews öfter als kritischer Punkt im Umgang mit der jetzigen Webseite beschrieben wurde.

Im Card Sorting wurden zunächst die leeren Seiten und die toten Links aus der Navigation entfernt. Darüber hinaus wurden doppelte Informationen zusammengefügt, Seiten wurden neu gruppiert und sinnvoll beschrieben und zusammengefasst. Nach dem Ansatz einer neuen Navigation im Kurs haben wir uns gruppenintern nochmal intensiver mit der Formulierung einer neuen Navigation beschäftigt.

Navigationsstruktur

Nach demselben Muster haben wir Dopplungen zusammengefasst und Seiteninhalte sinnvoll definiert und neu geclustert. Doch diesmal gingen wir radikaler vor: Da viele Seiteninhalte bzw. Unterseiten bei Fachbereichen und Studiengängen sich doppelten (wie z.B. Bewerbungen), sahen wir die Chance viele doppelte Seiten zu eliminieren, indem man alle Seiten, die für alle Studiengänge gleich sind vereinigt. Damit fiel die Unterteilung nach Fachbereichen innerhalb der Navigation weg und viele Unterseiten ebenso – die Navigation war schon mal sehr viel schmaler.

Das Problem, dass sich daraus ergab, war, dass es innerhalb der Unterseiten, die wir zusammenfassten, je nach Studiengang immer noch leicht unterschiedliche spezifische Informationen gab (die Bewerbungsverfahren für Kulturarbeit BA und Design MA sind schwierig zu vereinen). Die Fachbereiche waren weg, aber die Informationen waren immer noch auf individuelle Studiengänge zugerichtet.

Navigationspfade

Dieses Problem haben wir zum einen in der Navigation gelöst, indem die Navigation über ebendiese vereinheitlichten Überbegriffe (wie z. B. die Bewerbung) zu den gesuchten Informationen möglich ist oder über die Studiengangsseiten selber (wo man dann direkt zum Bewerbungsverfahren für Kulturarbeit BA kommt). Zum anderen musste es im UX eine Auswahlmöglichkeit geben, um von allen Unterseiten (unter dem Überbegriff „Bewerbung“) die gesuchte Seite („Bewerbungsverfahren für Kulturarbeit BA“) finden bzw. filtern zu können.

So überträgt sich unsere Entscheidung, Fachbereiche komplett aus der Navigation zu entfernen, auf das UX und schlussendlich auch auf das UI unseres Redesigns. Seiten, die ähnlich gruppiert wurden, benötigen Filter, um dem Nutzer die Möglichkeit zu geben, eine Vielzahl von Seiten zu reduzieren auf die gesuchte Seite.

Studiengangsseiten

Auf Studiengangsseiten findet man alle Informationen zum jeweiligen Studiengangs. Dieselben Informationen kann man auch über die bereits beschriebene Navigation nach Überbegriffen erreichen, jedoch bietet dies einen alternativen Navigationspfad. Man kann über den Überbegriff zu einer Information gelangen oder – wenn man etwa Student ist, ist das oft viel naheliegender – über den (eigenen) Studiengang.

Kacheln

Für die Darstellung vieler Informationsmodule im Vergleich bieten sich Kacheln gut an. Das Grid-Muster, was zwischen ihnen entsteht, bietet eine gute visuelle Orientierung und ist eine etablierte Anzeigeart eben solcher Informationen. Die Kacheln lassen sich dann filtern, sortieren und durchsuchen.

Design

Die Filter ermöglichen es dem Nutzer, immer nach ähnlichem Muster die angezeigten Auswahlmöglichkeiten mit simplen Klicks dahingehend zu reduzieren, dass man das gesuchte Element auch einzig über die Filter finden kann.

Die Durchmischung von Informationen aus verschiedenen Fachbereichen führt auch dazu, dass man mehr von anderen Fachbereichen sieht und erfährt. Daher kam auch unsere Entscheidung, einen „Random“-Button einzubauen, den man drücken kann, um nochmal alle Informationen durchzumischen. Dieses spielerische Element fördert weiter den Gedanken von interdisziplinärem Studieren.

Manchmal wären ganze Unterseiten allerdings zu verwirrend – wenn man etwa im Vorlesungsverzeichnis Kurse vergleicht und plant, möchte man nicht immer „zurück“ klicken müssen, eine neue Seite laden und sich neu orientieren müssen, um dann wieder eine neue Seite anklicken zu müssen. Daher öffnen sich z.B. beim Vorlesungsverzeichnis Akkordeon-Fenster unter der gewählten Kachel, die die Auswahl einer Kachel unverbindlicher machen und somit das Stöbern fördern.

Filter Beispiele

Personenverzeichnis Filter

Oft hat man das Problem dass man auf der Suche nach einer bestimmten Person ist, man aber nur wenige Eckdaten (und natürlich nicht den Namen) der Person kennt. Aus diesen Gründen haben wir folgende Filter festgelegt:

  • Beschäftigungsart
  • An der FH;P seit …
  • Fachbereich
  • Abteilung
  • Social Media
  • Wachmacher

Vorlesungsverzeichnis Filter

Um gezielt nach Vorlesungen filtern zu können, haben wir folgende Filter erarbeitet:

Teilnahme. Über die Teilnahme kann nach Vorlesungen gefiltert werden, die von jedem Studierenden, egal welchen Studiengangs, besucht werden kann. Mit dieser Möglichkeit soll die Interdisziplinarität an unsere Fachhochschule gefördert werden.

Tag. Viele Studierende benötigen oft die Möglichkeit eine Vorlesung zu einem bestimmten Wochentag heraus suchen zu können, da sie z. B. als Werkstudent in einer Firma tätig sind.

Uhrzeit. Es ist oft sehr hilfreich nach der Startuhrzeit filtern zu können. Sehr oft hat man als Studierender das Problem, dass man gerne zwei Kurse an einem Tag belegen möchte. Das händische Herausfiltern von Vorlesungen zu einer bestimmten Uhrzeit ist auf der derzeitigen Website zu schwer.

Fachbereichs- und Studiengangsfilter. Diese Filter sind natürlich unerlässlich für den Studierenden.

Semester. In einigen Studiengängen sind die Vorlesungen in bestimmten Semestern abhzuhalten.

Startseite und Navigationsflow

Die derzeitige Startseite weist nach unseren Analysen und Interviews viele Probleme auf. Die Startseite holt den Besucher nicht genug ab. Viele Informationen sind hinter kleinen hakligen Menüs versteckt. Der Besucher wird nicht genug zur nächsten Interaktion geleitet.

Mit einer aufgeräumten Startseite und klaren, übersichtlichen Informations-„Häppchen“, die den Besucher stärker zum Erforschen anregen, sind wir dem Problem auf den Grund gegangen.

Im Video wird gezeigt, wie ein Studierender über die Startseite zum Modulplan seines Studienganges navigieren kann.

CI der FH Potsdam

Die CI der FH Potsdam existiert bereits und ist vielerlei Studierender und Lehrende, sowie Angestellten bereits ein fester Begriff. Zudem ist es überall am Campus zu sehen. Die Webseite anders aussehen zu lassen, hätte einen disassoziativen Effekt und würde eine zweite Identität der FH Potsdam entstehen lassen. 

Die existente CI beinhaltet zudem visuelle Hierarchiestrukturen, die bereits bekannt und über viele Medien hinweg gleich bleiben – wie z.B. das blaue Banner, das in unserem Redesign der Webseite den Blick auf die Navigationsleiste sowie Überschrift lenkt. Dasselbe Banner erfüllt auf Briefpapier einen ähnlichen Zweck. In beiden Fällen verleiht es seiner Umgebung einen klaren Anfangspunkt in der Leserichtung.

Der CI treu zu bleiben heißt in diesem Fall, auf existierenden Assoziationen aufzubauen. Vieles ist bereits bekannt von der FH, angefangen bei den Farben, bis hin zu Schrift.

Ergebnis

Wir sind mit dem Ergebnis unserer Arbeit zufrieden. Die Ziele, die wir vorerst formuliert hatten, konnten wir bestätigen und damit aufweisen, dass ein Redesign die Wahrnehmung der eigenen Fachhochschule verändern kann. Wir sind auf Probleme gestoßen und haben innovative Lösungen gefunden. Wir konnten uns vorerst leider nur auf den für Studenten relevantesten Teilbereich der Webseite fokussieren (Bereich Studium), aber in der uns gegebenen Zeit glauben wir einen sehr guten Stand erreicht zu haben.

Reflexion

Die Gruppenarbeit war sehr dynamisch. Die anfänglich zugewiesenen Rollen von „UX Lead“, „Visual Lead“, „Dokumentation“ und „Junior Designer“ hatten einen unterschwelligen Einfluss auf die Gruppenarbeit. Die Aufteilung passierte je nach zeitlicher Verfügbarkeit und Dringlichkeit der Aufgaben. 

Wo es am Anfang noch einen Zeitplan gab, haben wir uns mit dem weiteren Verlauf des Projekts immer mehr den Umständen angepasst und mittelfristige Ziele formuliert, um diese dann auch möglichst schnell überarbeiten zu können. 

Es herrschte ein angenehmes Arbeitsklima, in dem Kritik und Verbesserungsvorschläge immer willkommen waren. Wir haben häufig Diskussionen über kleinere Details geführt, was letztendlich aber ein Zeichen von Einsatz und Perfektionsdrang war.

Gearbeitet haben wir in Figma, was kollaborieren unglaublich einfach gemacht hat (auch, wenn Sketch Enthusiasten sich in einigen Tools umgewöhnen mussten). Wir haben alle an einem mittlerweile riesigen Dokument gearbeitet, in dem wir auch ab und zu die Übersicht verloren haben. Dennoch haben wir uns eine Arbeitsstruktur erarbeiten können, die uns letztendlich zum Ziel geführt hat.

Reale Umsetzung

Problematiken, die einem solchen Wandeln noch im Weg stehen sind bürokratische Gefüge innerhalb der FH, sowie die daraus hervorgehenden CMS Strukturen. Unser Ansatz hat diese Aspekte vernachlässigt, weil wir das breite Potenzial eines Redesigns zur Geltung kommen lassen wollten und zeigen, wie viel eine Website beeinflussen kann.

Für die reale Umsetzung muss jedoch beim CMS angesetzt – denn dort haben die Probleme der jetzigen Website ihre Wurzeln und so wird auch das Redesign egal, wie gut und ausführlich es erarbeitet ist, verkommen, wenn die CMS Strukturen nicht zuerst bewältigt werden.

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Betreuung

Prof. Constanze Langer

Zugehöriger Workspace

Alles großes Durcheinander! UX Design — Website Redesign

Entstehungszeitraum

Sommersemester 2019

Keywords

Noch keine Kommentare