Optimierung eines Login-Formulars

Als erstes Projekt bei Trusted Shops nahm ich mir die Optimierung der Benutzerfreundlichkeit unseres Login-Bereichs vor. Hier zeige ich den Vorher-Nachher-Vergleich und erläutere die vorgenommenen Maßnahmen.

Die Grundlage

Login-Formular vorher

Vorhandenes Optimierungspotenzial

  1. Die Funktion „Passwort zusenden“ ging hinter dem Link „hier“ sehr unter.
  2. Da manche Shop-Betreiber auch Online-Käufer sind, wurden häufig die Login-Bereiche verwechselt. Es wurde nicht hinreichend darauf hingewiesen, für welchen Bereich der Nutzer sich aktuell anmeldet.

  3. Der Login-Button wurde optisch ausgeschlossen.

Schritt 1: Passwort für neue Benutzer

Gerade der Online-Käufer-Login wird sehr oft neuen Benutzern angezeigt, die noch kein Passwort haben. Der Weg, ein Passwort zu erhalten ging etwas unter. Daher habe ich neben dem Passwortfeld den Link zur Passwortgenerierung nochmal prominent plaziert.

Schritt 2: Login-Bereich kommunizieren

Gerade wenn Shop-Betreiber auch Online-Käufer sind, die Kundenbewertungen abgeben möchten, verwechselten sie oft die zwei Login-Bereiche, bzw. wussten nicht, für was sie sich gerade anmelden konnten. Daraus resultierten viele Support-Anfragen, um an den Link zum richtigen Login-Bereich zu gelangen. Um dieses Problem zu lösen, habe ich den den Indikator des Login-Bereichs farbig hinterlegt und einen Link zum jeweils anderen Login-Bereich darunter platziert. So fällt den Benutzern direkt auf, wo sie sind und wie sie ggf. zum anderen Bereich gelangen.

Schritt 3: Login-Button positionieren

Um den Formular visuell eine einheitliche Struktur zu verleihen, sitzt der Button nun im Rahmen des Formulars.

Das Ergebnis

Login-Formular nachhher

veröffentlicht am 17.06.2010 um 09:22 von Martin Labuschin in ,


An sich eine sehr gelungene Optimierung.
Das Einzige was mich stört sind die "Pflichtfeld"-Sternchen.

Die haben für mich immer den "DAS MUSST DU MACHEN!!!!"-Charme.

Gerade hier empfinde ich sie als mehr als unnötig, da es ja keine Optional-Felder gibt.
Es sollte ja klar sein, dass man Username & Passwort eingeben muss, um sich einzuloggen.

Dies als kleine, konstruktive Kritik meinerseits.

Viele Grüße, Oliver

Danke dir, Oliver! Werde deinen Vorschlag bei Zeiten mal einbringen.

Als Alternative zu den "Pflichtfeld-Sternchen" hab ich benötigte Werte neulich mal farblich markiert:

http://www.callcenter-lexikon.de/
(die drei rot unterstrichenen Elemente)

Just my $.02

- Christian

Ich kann mich da Oliver nur anschließen. Es ist doch jedem klar, das er ein Passwort und seinen Usernamen (e-Mail) benötigt, wenn er in seinen persönlichen Bereich wechseln will. So viel sollte man den Nutzern heute schon zu trauen. :)

Ansonsten kann ich nur sagen gelungene Verbesserung zur Vorversion.

Christian, das ist ein interessanter und wirksamer Ansatz. Fällt auf und ist verständlich, da die rote Unterstreichung auch bei der Legende sehr auffällt.

Ja ich halte die Sternchen auf für überflüssig. Zumal ja eh nur 2 Werte im Formular abgefragt werden.
Auch ohne Sternchen dürfte es dem Nutzer wohl einleuchten, dass er hier was einzutragen hat.

blog comments powered by Disqus
The Ruby on Rails Link Library Spanning Sync SEO-Dokumentation Gowalla
ProWebApps WellDone (β) Pinboard (α) Netzwerk Münsterland
Blogs Bücher Frameworks iPhone Mac Web-Apps