User Experience Design an der THI Ingolstadt

Ein Blick auf die Website des neuen Bachelor-Studienganges

Published in

ISO 9241

5 min readFeb 21, 2016

Mit der Technischen Hochschule Ingolstadt bietet nun die erste deutschsprachige Hochschule den expliziten Studiengang User Experience Design an, dessen Lehrinhalte einen interessanten Eindruck hinterlassen. Dieser wichtige Schritt kann für dringend benötigten Nachwuchs im Bereich der digitalen Produktentwicklung sorgen. Denn ein Großteil der derzeit berufstätigen User Experience Designer dürfte aus angrenzenden Disziplinen wie Informatik, Psychologie und Produktdesign zur digitalen Produktentwicklung gekommen sein. Nachfolgend haben wir uns die Website des Studienganges einmal genauer angeschaut und hoffen, dass nicht drin ist, was drauf steht.

Disclaimer

Es ist nicht unsere Absicht die Designer der Webseite, Studierende des Studiengangs oder bestimmte Professoren zu kritisieren, sondern einzig und allein das Design der Webseite.

Icon Usability & Navigation

Fangen wir am besten oben, beim Header der Webseite, an. Hier begegnet uns zunächst das Logo der Hochschule, sowie dieses Navigationselement, das dem Nutzer bei der Orientierung auf dem One Pager behilflich sein soll:

Ratespiel: Wie viele der sieben Icons könnt ihr identifizieren?

Das Logo der Hochschule soll hier als Signifier für die Navigation herhalten, was dazu führt, dass einen das Schriftbild beim Öffnen der Seite gleich zwei mal anlacht. Die Dopplung wirk recht seltsam, ist aber kein Beinbruch. Jedoch wäre hier selbst das beliebte, aber auch nicht unbedingt optimale, Burger Icon eine bessere Lösung gewesen.

Die eigentliche Frage ist jedoch, warum sich dafür entschieden wurde sieben Menüpunkte als kryptische Icons hinter einer ausklappbaren Navigation zu verstecken, wo doch mindestens einige hundert Pixel Platz für ein vernünftiges Menü da wären. Die einzige Erklärung, die uns dazu einfällt, ist, dass die Ästhetik der Seite über die Usability gestellt wurde, um der Seite einen möglichst minimalistischen und modernen Anstrich zu verpassen.

Zu den Icons selbst wollen wir uns gar nicht großartig äußern. Ein kurzes Zitat reicht hier im Grunde genommen schon, um alles Notwendige zu sagen:

“A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.” (Bedford 2014)

Scrolljacking

Alternative Scrollingmechanismen, wie etwa Paralax Scrolling, sind manchmal keine schlechte Idee, da sie z.B. die Interaktion mit der Webseite spaßiger erscheinen lassen können. Werden diese Mechanismen jedoch falsch angewandt, kann das schnell zu Frust führen.

“One of the most annoying fads coming into popularity lately is scrolljacking — the act of using a web browser’s scrollbar to advance the page as if it were a slideshow of sorts — instead of treating it as what it is: a long cascading document.” (Arron Hunt 2014)

Man sollte beim Eingriff in das Scrollverhalten des Browsers stets vorsichtig sein, denn für Steuerung der Website stehen dem Nutzer nur eine begrenzte Anzahl an Optionen zur Verfügung. Treibt man es zu bunt, läuft man schnell Gefahr, das mentale Modell des Nutzers über den Haufen zu werfen. Wenn sich das Scrolling einer Webseite nicht so verhält, wie es von anderen Webseiten auf dem jeweiligen Gerät gewohnt ist, wird der Nutzer im schlechtesten Fall eine Alternative aufsuchen, mit dessen Navigation und Struktur er nicht überfordert ist.

Bei der Webseite der Hochschule handelt es sich glücklicherweise nicht um einen solch schlimmen Fall, weil sie meist linear verläuft. Jedoch werden stellenweise viel zu viele Scrollingbefehele benötigt, um unwichtige Elemente über die Seite wandern zu lassen. Dies hat zur Folge, dass die Navigation der Webseite an einigen Abschnitte zu einer unfassbar zähen Angelegenheit wird. Der eine oder andere Besucher wird sich zudem die Frage stellen, warum es nötig ist, so viel zu scrollen, um relativ wenig Informationen zu erhalten.

Typografie & Accessibility

Auf mobilen Geräten treten die typografischen Probleme am deutlichsten zum Vorschein. Eine Schriftgröße von 9.6 Pixeln im Fließtext ist nicht nur für Rezipienten mit Einschränkungen des visuellen Systems, sondern auch für alle anderen Nutzer eine Zumutung. Bei kleineren Schriftelementen fällt die Größe teilweise bis auf nicht mehr lesbare 6.7 Pixel herab.

Der gesamten Seite fehlt es an einer sauberen, semantischen Struktur. Es werden fast ausschließlich DIV-Elemente zur Ordnung des Inhaltes benutzt. Die Kontraste sind zu gering und genauso problematisch wie die bereits angesprochenen Schriftgrößen. Außerdem sind die Beschriftungen der Bildelemente ungenau und der Navigation fehlt eine Kennzeichnung als solche.

Mobile

Wenn das Smartphone nach Aufruf einer Seite lediglich anzeigt, dass die Website im Querformat nicht nutzbar ist, liegt bei den Machern der Seite ein grundlegendes Missverständnis für responsives Webdesign vor. Ethan Marcotte dazu:

“My goal is to make the web as accessible and beautiful as possible for the people who are trying to access it.” (Creative Bloq 2014)

Menschen verhalten sich individuell und nutzen ihre Geräte auch dementsprechend. Bestimmte Nutzer sind es gewohnt, ihr Smartphone nur im Querformat zu nutzen, weil die größere Tastatur die Eingabe erleichtert und springen sofort von der Seite ab, wenn sie gezwungen werden, ihr Gerät zu drehen. Möglicherweise ist das Gerät auch auf die entsprechende Ansicht gesperrt, sodass dies erst in den Einstellungen umgestellt werden muss. Festzuhalten ist, dass bei der Entscheidung, bestimmte Formate einfach nicht umzusetzen und eine Fehlermeldung einzublenden, nicht nutzerorientiert gestaltet wurde.

Das geht besser…

Da sich der 10 Jahre alte Internetauftritt unseres Institutes an der Hochschule Magdeburg-Stendal keinesfalls als positives Beispiel anführen lässt und andere vergleichbare deutsche Studiengänge (Universität Würzburg und Hochschule Osnabrück) es nur gar nicht bis wenig besser machen, müssen wir zum Abschluss, wie sollte es anders sein, auf ein amerikanisches Pendant verweisen: Centre Centre. Die unter anderem von Jared Spool gegründete, selbsternannte user experience design school hat ein innovatives, praxisnahes Programm (leider noch ohne Akkreditierung) und eine gute Website, auf der man keinem der besprochenen Probleme begegnet.

Natürlich wissen wir um die begrenzten Mittel und politischen Schranken der hiesigen Hochschullandschaft. Eine separate Website für ein Institut oder einen Studiengang durchzusetzen ist sicherlich kein leichtes Unterfangen. Wenn man diese Aufgabe angeht und sich damit vom universellen Auftritt der verantwortlichen Elterneinrichtung abheben möchte, wird mit diesem Schritt immer ein wichtiges Ziel verfolgt. Man hat seine Gründe. In diesem Fall ist anzunehmen, dass man mit der eigenen Seite zeigen aufzeigen wollte, was User Experience Design bedeutet und wie es sich anhand einer gut umgesetzten Website im Idealfall auswirken kann. Schade, dass die Verantwortlichen an der THI dieses vermeintliche Ziel verfehlen und das Ergebnis uns die Schamesröte ins Gesicht treibt.

Liebe Technische Hochschule Ingolstadt und verehrte Verantwortliche für deutsche HCI, Interaction- und Interface Design Studiengänge: Repariert bitte entweder eure Websites oder lasst das mit dem separatem Auftritt einfach sein, so wie es der Studiengang Interface Design der FH Potsdam handhabt. Studieninteressierte, Absolventen und zu guter Letzt ihr selbst werden es euch danken.