EIN Design für Desktop und mobil – ein Vorteil?

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.