Das Anmeldeformular – So lässt sich die User Experience steigern (UX Serie: #3)

Beitragsbild für Anmeldeformular

Ein gutes Anmeldeformular ist wichtig für moderne Webseiten. In diesem Teil unserer User-Inferface- und User-Experience-Serie geht es um das perfekte Anmeldeformular.

Anmeldeformulare sind gerade dann wichtig für Webseiten, die einen geschützten Bereich oder besondere Funktionen für angemeldete Benutzer bereitstellen wollen. Hierbei ergibt sich also, dass ein gutes und intuitives Design unerlässlich ist.

Dies gilt vor allem für Besucher mit schlechter Internetverbindung oder unter Stress. Gerade in diesen Fällen führen schlechte Anmeldeformulare folglich oft zu hohen Absprungraten. Als Folge entgeht einem dabei wesentlich mehr als nur eine einfach Anmeldung. Denn der Besucher verlässt im schlimmsten Fall die Webseite und kommt gar nicht mehr zurück.

Wir zeigen in diesem Artikel deshalb, was gutes Design ausmacht und wie die User Experience dadurch gesteigert wird.

Inhalt

Das perfekte Anmeldeformular

Zu Beginn wollen wir eins gerne klar stellen: Das beste Anmeldeformular ist kein Anmeldeformular. Der grund hierfür ist, dass Benutzer nur ungern persönliche Informationen preisgeben. Des Weiteren stellt eine zusätzliche Anmeldung auch eine zusätzliche Hürde für Besucher dar. Folglich erhöht sich die Chance für einen Absprung deutlich.

Zudem bedeutet ein Anmeldeformular eine höhere Entwicklungszeit und oft auch weitere Aufwände bezüglich Datenschutz und Sicherheit. Daher gilt: Wenn es nicht zwingend erforderlich ist, sollten Sie daher auf eine zusätzliche Anmeldung verzichten.

In diesem Artikel geben wir deshalb Tipps zu den Grundlagen des Formulardesigns. Dabei beschränken wir uns zunächst auf das Frontend. In anderen Worten also das, was der User sieht und mit dem er interagiert.

Die Grundlagen eines guten Anmeldeformulars

Zunächst ist anzuführen, dass guter HTML-Code die perfekte Grundlage für großartige Anmeldeformulare darstellt. Tatsächlich gibt es die entsprechenden Elemente schon seit Jahren. Daraus ergibt sich, dass Browser diese Elemente bereits lange kennen und folglich auch unterstützen. Es ist daher wichtig diese Elemente auch zu verwenden:

<form>, <section>, <input>, <button>

Die Verwendung dieser Elemente hat dabei mehrere Vorteile. Zunächst ist anzuführen, dass sie allen Browsern bekannt sind, weshalb sich in Browsern eingebaute Funktionen verwenden lassen. Das automatische Einsetzen von E-Mail-Adressen etwa ist ein Beispiel hierfür. Dadurch steigert sich sowohl die User-Experience, als auch die Zugänglichkeit (Accessibility).

Ein einfaches Anmeldeformular kann demnach also in etwa so aussehen:

<form>
    <section>
        <label>Benutzername</label>
        <input>
    </section>

    <section>
        <label>Passwort</label>
        <input>
    </section>

    <button>Jetzt anmelden</button>
</form>

Oft verwenden Plug-Ins von Content-Management-Systemen andere Elemente oder einen anderen Aufbau. Hierbei ergibt sich der Nachteil, dass die Webseite für sog. Screen-Reader oder Assistenz-System schlechter zugänglich ist. Des Weiteren können Browser so schlecht den Zweck des Formulars identifizieren.

Im Gegensatz dazu ist ein klarer Vorteil dabei, dass bereits eingebaute Funktionen leicht verwendet werden können.

<form>

Das „form“-Element beinhaltet alle weiteren Elemente, die zu diesem Anmeldeformular gehören. Aus diesem Grund ist für den Browser sofort klar, worum es sich hierbei handelt.

<section>

Ein „section“-Element trennt weiterhin die verschiedenen Eingabefelder von einender ab. Der Inhalt des „form“-Elements wird somit deshalb in einzelne Sektionen unterteilt.

<label>

Ein „label“-Element zeigt dem User an, welche Daten er eingeben soll. Sie lassen sich dem jeweiligen Eingabefeld durch das „for“-Attribut zuordnen. Als Zuordnungswert fungiert beispielsweise die „id“ des Eingabefeldes:

<label for="passwort">Passwort</label>
<input id="passwort" />

Zudem werden oftmals statt Labes auch sog. Placeholder (zu dt. Platzhalter) verwendet. In der Tat können diese in gewissen Anwendung sehr nützlich sein. Jedoch sind sie kein Ersatz für klassische Label.


Eingabefeld mit Label


Eingabefeld mit Platzhalter

Bei Eingabefeldern mit Platzhaltern besteht die Gefahr, dass Benutzer vergessen, was Sie eingegeben haben. Dies spielt gerade bei langen Formularen eine große Rolle, da so die User Experience extrem beeinträchtigt wird.

Des Weiteren ist es am besten, Label über den Eingabefeldern zu platzieren. Die Vorteile davon sind:

  • Einheitliches Design auf allen Plattformen (Smartphones, Tablet, Laptops und Desktopcomputer)
  • Schnellere Zugänglichkeit durch den Benutzer (den Blick von oben nach unten wandern zu lassen ist angenehmer, als zwischen links und rechts springen zu müssen)
  • Mehr Platz für die Eingabe auf schmalen Bildschirmen wie bei Smartphones

<button>

Das „button“-Element führt schließlich die Übermittelung der Anmeldedaten aus. Die Vorteile von Buttons sind hierbei:

Wichtig ist auch, dass die Buttons klare und verständliche Anforderungen enthalten. Beispiele hierfür sind unter anderem „Jetzt registrieren“ oder „Jetzt anmelden“. Im Gegensatz dazu stehen unspezifische Beschriftungen wie „Los“, „Bestätigen“ oder „Abschicken“.

Da Benutzer oftmals mehrere Male auf den Button klicken, sollte dieser nach dem ersten Klick deaktiviert werden. Als Folge kann dies auch bei schnellen Webseiten zu einer Überlastung des Servers führen. Letztendlich ergibt sich somit eine langsame Antwortzeit des Servers und eine Reduzierung der User Experience.

Des weiteren sollte der Button nicht von Beginn an deaktiviert sein. Oft ist ein Absenden der Daten nicht möglich, solange die Eingabefelder nicht oder nicht richtig ausgefüllt sind. Aus Sicht des Benutzers ergibt sich hier jedoch kein Mehrwert, wenn er nicht weiß, woran es liegt. Sollte eine Eingabe also nicht stimmen, gilt es den Benutzer darüber zu informieren und nicht die Funktion zu deaktivieren.


Eingabefeld mit Rückmeldung über Fehler.


Eingabefeld mit deaktiviertem Button und ohne Rückmeldung.

Interessiert sie dieses Thema?

Mehr Beiträge zum Thema User Experience und Usability finden sie in unsere UX/UI-Serien

Style und Zugänglichkeit

Um die Zugänglichkeit zu erhöhen, ist der Style der Eingabefelder und des Buttons wichtig. Beispielsweise lässt sich so die Größe der Elemente einstellen.

Größe der Eingabefelder

Dies spielt vor allem deshalb bei mobilen Endgeräten eine zentrale Rolle, da sie mit dem Finger bedient werden müssen. Um folglich keine fehlerhaften Eingaben hervorzurufen existieren verschiedene Anforderungen an die minimale Größe von Eingabefeldern und Buttons:

  • Android: 7 bis 10 mm
  • Apple: 48px auf 48px
  • W3C: 44px auf 44px

Unglücklicherweise sind die Anforderungen hierbei je nach Quelle unterschiedlich. Trotzdem haben sie die Gemeinsamkeit, dass sie sich nach der Größe des bedienenden Fingers richten.

Ein weiterer Tipp ist darüber hinaus, die Webseite und ihre Elemente für Daumen zu gestalten. Denn die meisten Benutzer verwenden Ihren Daumen, um auf Mobilgeräten zu surfen. Diese sind bekanntermaßen größer als beispielsweise der Zeigefinger, wodurch Fehleingaben schnell möglich sind.

Abstände in und zwischen Eingabefeldern

Um die Zugänglichkeit weiter zu erhöhen sollte ein Abstand zwischen Eingabefeld und enthaltenem text vorhanden sein. Die Empfehlung liegt bei ca. 15 Pixeln für mobile Geräte und 8 Pixeln bei Desktop-Computern.

Eingabefeld mit 0 px Abstand

Eingabefeld mit 8 px Abstand

Eingabefeld mit 15 px Abstand

Ebenso ist es wichtig, genügend Platz Zwischen den einzelnen Elementen bereit zustellen. Auf diese Weise findet sich der Benutzer nicht nur schneller zu recht, es sinkt auch die Gefahr, dass er sich verklickt.



Als Faustregel gilt: zwischen den Eingabefeldern sollte folglich eine Fingerbreite Abstand liegen.

Erkennbarkeit von Eingabefeldern

Wenn es darum geht, Eingaben zu tätigen, muss dem Benutzer direkt klar sein, wobei es sich um ein Eingabefeld handelt. Denn ihn raten zu lassen kostet Zeit und führt zu Unzufriedenheit. Folglich sollten die Eingabefelder klar und deutlich als solche erkennbar sein. Schlechte Beispiele hierfür sind unter anderem:

Auffällige Farben für Kanten oder Hintegründe sind hier folglich besser:

Zusammenfassung

Gute Anmeldeformulare oder auch normale Formulare können einen Großteil zu gutes User Experience beitragen. Zunächst spielt dabei der HTML-Quellcode eine zentrale Rolle. Mit sauberem und standardisiertem Code lassen sich folglich Formulare erstellen, die von Browsers aller Plattformen verstanden werden können. Auf diese Weise steigert sich zudem die Zugänglichkeit der Webseite enorm.

Auch das Styling der Eingabefelder trägt zum allgemeinen Erlebnis bei. Zu kleine oder nicht klar dargestellt Felder führen daher zu Verwirrung bei den Benutzern. Um dies zu vermeiden, gibt es zahlreiche Ansätze mit denen sich fehlerhafte Eingaben folglich vermeiden lassen.

Daraus ergibt sich eine fundamentale Steigerung der User Experience und die Besucher sind öfter dazu bereit sich zu registrieren oder anzumelden.

Brauchen Sie Hilfe?

Sie sind auf der Suche nach einer kompetenten und zuverlässigen Marketing-Agentur? Nun ja, was für ein Zufall. Wir freuen uns auf Ihre unverbindliche Anfrage

Oder kontaktieren Sie uns über das Formular

Illustration by Stories by Freepik

<