Monat: März 2020

Eine Website sollte eigentlich ohne Hilfestellungen nutzbar sein. Manchmal werden Popups oder Hilfe-Tooltips verwendet, die automatisch/ungefragt auftauchen. Ob der Benutzer die Info auch gerade lesen möchte oder sie nur schnell weg klickt bleibt dem Zufall überlassen.

Beim „Standard“ (www.derstandard.at) verdeckt immer wieder dieses Hilfe-Tooltip einen Teil des Textes. Der Benutzer wird mehr oder weniger gezwungen, es weg zu klicken. Allerdings, wenn man auf „Habe ich verstanden“ klickt, dann öffnet sich eine andere Seite/Ansicht, was nicht unbedingt im Sinne des Benutzers ist.

Ich kann mir gut vorstellen, dass „78 Postings“ ev. nicht als Link zu den Postings verstanden wird. Die Affordance (Einladungscharakter) ist niedrig zumal auch keine eigene Link-Farbe verwendet wird. Ich würde hier eine eigene Link-Farbe verwenden oder einen zusätzlichen Link, der lautet „zu den Postings“. Und das Tooltip würde ich weglassen. Falls man garnicht auf das Tooltip verzichten möchte, dann wäre ein „x“ rechts oben, um das Tooltip zu schließen auch noch eine Möglichkeit zur Verbesserung.

Immer wieder trifft man auf Webseiten, die für Desktop und Mobil genau dasselbe Design verwenden. Sie sind zwar responsive, aber die Desktopversion ist sehr ähnlich der mobilen Version und daher schmal und lang.

Hierzu ein Vorher-Nachher-Beispiel – allerdings in der falschen Reihenfolge: das Formular war für Desktop in einer früheren Version kompakt und relativ übersichtlich. Nicht alles daran war richtig gestaltet, z.B. ein Dropdown für Geschlecht, in dem (in diesem Fall) ohnehin nur zwei Möglichkeiten angeboten wurden. Oder die Checkboxes im unteren Bereich, die auf der falschen Seite beschriftet sind. Da gab es definitiv Optimierungspotenzial.

Nach dem Redesign ist das Formular nun aber riesig und es wird für die Desktopversion exakt dieselbe Gestaltung verwendet wie für eine schmale, mobile Version. Das ist durchaus ein Phänomen, das sehr häufig zu beobachten ist: Websites werden redesigned und sind danach weniger usable als vorher.

In der neuen Version sind nun nur noch vier Eingabefelder oberhalb des Pagefolds sichtbar.

Benutzer müssen nun häufiger scrollen. In einem Formular ist das besonders ungünstig, weil der Benutzer nicht mehr sieht, was er weiter oben eingegeben hat.

Natürlich ist es für mobile Versionen wichtig, dass zwischen Interaktionselementen ausreichend Abstand bleibt, damit sie mit Fingern bedient werden können.

Aber es wäre für größere Bildschirme schon möglich, den Bildschirmplatz besser zu nutzen.

Z.B. könnten die Feldbeschriftungen VOR den Feldern platziert werden statt darüber. Auch die sehr langen Felder (auch schon in der alten Version vorhanden) brauchen viel Platz und das Formular wirkt überladener. Die Felder für „Geschlecht“ oder „Postleitzahl“ z.B. sind genauso breit wie jenes für den Namen.

Meine Empfehlung wäre, für Desktops, auf denen ausreichend Platz ist, den vorhandenen Platz besser zu nutzen, damit Benutzer weniger scrollen müssen.