6 Gestaltungspraktiken für Anmeldeseiten für reibungslose Formulare

Als Vermarkter denken Sie wahrscheinlich gerne, dass Sie Ihre potenziellen Kunden gut verstehen – wer sie sind, wie sie sich verhalten usw. Wenn also einer von ihnen Ihre Website oder Anmeldeseite besucht, was glauben Sie, was er als nächstes tun würde?

Melden Sie sich wahrscheinlich für Ihren Service an, oder?

Das ist nicht immer der Fall, wie eine Marke herausfand. Für sie führte etwas zwischen diesem CTA und ihrer „Dankeschön“-Seite dazu, dass das Unternehmen fast ein Viertel seiner potenziellen Kunden verlor.

Es gab ein Problem mit ihrer Anmeldeseite.

Was ist eine Anmeldeseite?

Anmeldeseiten, auch als „Registrierungsseiten“ bekannt, sind nicht alle gleich. Einige sind PPC-Post-Click-Landingpages; andere sind auf der Homepage über die Navigation verknüpft - einige sind sogar die Homepage. Trotz ihrer Unterschiede haben sie alle das gleiche Ziel: Anmeldungen für einen Dienst zu generieren.

In vielen Fällen ist die Anmeldeseite der letzte Schritt im Conversion-Trichter eines Unternehmens. Hier navigieren Interessenten, nachdem sie eine Marke bewertet und entschieden haben, dass ihr Service das bietet, was sie brauchen.

Aus diesem Grund konzentrieren sich die Anmeldeseiten weniger darauf, potenzielle Kunden zur Conversion zu bewegen, als vielmehr darauf, die damit verbundenen Reibungsverluste zu minimieren. Dieser Fokus auf Benutzerfreundlichkeit bedeutet, dass andere traditionelle Post-Click-Landingpage-Elemente wie Social Proof, Testimonials und aufmerksamkeitsstarke Medien in den Hintergrund treten.

Schauen Sie sich einfach die Anmeldeseite von Shopify unten an, die über der Startseite angezeigt wird, sobald Sie auf "Erste Schritte" klicken.

Es ist wirklich nur eine Kurzform. Und wie Sie etwas später sehen werden, sind die meisten Anmeldeseiten auf die gleiche Weise aufgebaut und enthalten nur eine Überschrift, ein paar Formularfelder und einen Call-to-Action.

Aber nur weil viele so konzipiert sind, heißt das nicht, dass es der richtige Weg ist. Beim Erstellen einer erfolgreichen Anmeldeseite geht es um mehr, als Ablenkungen zu eliminieren und Formularfelder zu reduzieren. Die Aufgabe ist zweigeteilt.

Um maximale Anmeldungen zu generieren, müssen Sie die Registrierungsschritte minimieren und gleichzeitig die wenigen Elemente, die Sie verwenden, optimal nutzen. Hier sind einige Tipps und Erkenntnisse von den Experten.

1. Nutzen Sie eine nutzenorientierte Überschrift

Wenn ein potenzieller Kunde Ihre Anmeldeseite erreicht, hat er in den meisten Fällen Ihren Service bereits bewertet und festgestellt, dass er seinen Bedürfnissen entspricht. Aber bedeutet das, dass Sie sie nicht daran erinnern sollten, warum sie da sind?

Unten verwendet Copyblogger eine mit Social-Proof gefüllte Überschrift, um Benutzer davon zu überzeugen, sich anzumelden, und oben erinnert Shopify potenzielle Kunden daran, dass ihre Testversion 14 Tage lang kostenlos ist.

Einfach ist gut, aber wenn Sie genug Platz haben, um Ihren USP mit einer Überschrift zu verstärken, tun Sie es. Es besteht die Möglichkeit, dass dies positivere als negative Auswirkungen auf die Conversions hat.

2. Machen Sie alle Ihre Felder zu Pflichtfeldern

Bei diesem Tipp geht es weniger darum, dass Ihre Besucher Ihr Formular ausfüllen müssen, sondern mehr darum, sicherzustellen, dass Sie die richtigen Felder ausgewählt haben. Damit meinen wir, wenn Sie festgelegt haben, dass ein Formularfeld optional ist, benötigen Sie diese Informationen nicht , um den Interessenten anzumelden.

Beispielsweise muss ein Dienst wie Groupon Ihren Standort bei der Anmeldung kennen, um Ihnen relevante Angebote und Gutscheine anbieten zu können. Der Standort ist jedoch keine entscheidende Information für Instapage über seine Kunden, weshalb wir bei der Registrierung nicht danach fragen.

Wenn Sie das Unternehmen Ihres potenziellen Kunden, seine Position oder die Anzahl seiner Mitarbeiter nicht wirklich kennen müssen, fragen Sie nicht. Je weniger Arbeit sie machen müssen, desto besser.

Zu berücksichtigende Formularfelder

Einige Formularfelder, die Sie konsolidieren/entfernen sollten:

• Benutzername: Benötigen Ihre Benutzer wirklich einen Benutzernamen, um sich anzumelden? Oder können Sie einfach nach ihrer E-Mail-Adresse fragen und sie dann ihren Benutzernamen bestimmen lassen, sobald sie sich eingeloggt haben?
• Passwort bestätigen: Dieses Feld ist veraltet und wird nur wegen der Passwortmaskierung benötigt, einer weiteren unpraktischen Technik.

Die Passwortmaskierung ist die Technologie, die jeden Buchstaben wie einen identischen Aufzählungspunkt aussehen lässt, wenn er in ein Formular eingegeben wird. Es vermittelt den Eindruck von zusätzlicher Sicherheit, aber das einzige, wovor es wirklich schützt, sind Leute, die über Ihre Schulter spähen.

Fragen Sie sich: Erstellen meine Interessenten ihre Passwörter wirklich in einer überfüllten öffentlichen Umgebung? Unwahrscheinlich.

Anstatt ein Feld „Kennwort bestätigen“ zu verwenden, können Benutzer sehen, was sie eingeben, indem Sie das ursprüngliche Feld „Kennwort“ demaskieren oder eine Funktion „Ein-/Ausblenden“ verwenden, wie es MailChimp auf ihrer Anmeldeseite tut:

• Vor- und Nachname: Ziehen Sie in Betracht, Vor- und Nachname in einem Feld „vollständiger Name“ zusammenzufassen. Oder fragen Sie einfach nach dem Vornamen. Verdammt, vielleicht denken Sie sogar darüber nach, es ganz loszuwerden.

In mehreren Beispielen unten (Buffer, Asana, Crazy Egg) fragen Anmeldeseiten nicht sofort nach dem Namen, sondern lassen ihre konvertierten Kunden Details eingeben, sobald sie sich bei der Plattform angemeldet haben.

• Benutzervereinbarung: Anstatt Ihre Benutzer dazu zu bringen, ein Kontrollkästchen anzuklicken, das Sie mit Ihren Benutzerbedingungen einverstanden erklärt, sollten Sie eine Nachricht über Ihrem CTA einfügen, wie es LinkedIn unten tut. Es besagt, dass der Benutzer durch die Konvertierung automatisch zustimmt.

3. Wenn Sie alle diese Informationen unbedingt benötigen, fordern Sie sie schrittweise an

Schauen Sie, manchmal braucht man wirklich viele Informationen, um einen neuen Benutzer zu registrieren. Anmeldungen, die eine Zahlung vor Ort erfordern, erfordern lange Formulare, um sensible Informationen wie Rechnungsadresse und Kreditkartennummer zu erfassen. Ziehen Sie in diesem Fall in Betracht, den Registrierungsprozess in mehrere Schritte aufzuteilen.

Ein Bericht von Formstack zeigt, dass mehrseitige Registrierungsformulare im letzten Jahr die einseitigen um mehr als 9 % übertrafen:

Wieso den?

Mehrseitige Formulare machen die Konvertierung weniger überwältigend, da der Prozess in mehrere kurze Schritte unterteilt wird. Mehr Seiten bedeuten mehr Platz für größere Schriftarten, längere Felder und beschreibende Beschriftungen, die möglicherweise nicht in eine kürzere Form passen. Darüber hinaus werden mehrseitige Anmeldungen normalerweise mit einer praktischen Fortschrittsleiste geliefert, die den Benutzern mitteilt, wie weit sie bei der Registrierung sind.

Denken Sie daran: Wenn Sie Ihr Formular kürzen können, indem Sie einige Felder entfernen, kürzen Sie es. Wenn dies nicht möglich ist, versuchen Sie nicht, es kürzer erscheinen zu lassen, indem Sie alles auf wenig Platz stopfen. Sie werden nur Ihre Seite überladen und Ihren Interessenten überfordern.

4. Erwägen Sie die Verwendung eines modalen Fensters

Für diejenigen mit einem schnellen Anmeldeprozess wie Canva bietet ein modales Fenster einige Vorteile.

Der Designer Joshua Johnson erklärt, warum:

Sie überlagern den aktuellen Inhalt, anstatt Sie auf eine andere Seite zu führen. Das ist irgendwie weniger beunruhigend, als an einen neuen Ort entführt zu werden, was sich wie eine Unterbrechung anfühlt. Durch das Dimmen der Homepage-Grafik und das Aufrufen eines Registrierungsformulars für modale Zeichen haben Sie das Gefühl, dass der Vorgang schnell und schmerzlos ist und Sie in kürzester Zeit wieder surfen können.

In einer Zeit, in der Internetnutzer ungeduldiger sind als je zuvor, ist es eine gute Praxis, ihnen den Eindruck zu geben, sie würden sofort wieder surfen.

5. Aktivieren Sie soziales Autofill

In fast jedem Beispiel für eine Anmeldeseite unten werden Sie Schaltflächen zum automatischen Ausfüllen von sozialen Netzwerken bemerken. Diese ermöglichen es Benutzern, Ihr Formular mit einem einzigen Klick zu umgehen, indem sie relevante persönliche Informationen importieren, die sie bereits an soziale Netzwerke übermittelt haben.

Formstack stellte fest, dass Benutzer durch die Einbeziehung dieser Funktion 189 % höhere Formularkonvertierungen erzielen konnten. Darüber hinaus sagen 86 % der Menschen, dass das Erstellen neuer Benutzerkonten auf verschiedenen Websites unbequem ist. Wenn es Ihr Ziel ist, die Konvertierung so einfach wie möglich zu gestalten, ist die Nutzung von Social Autofill ein Kinderspiel.

6. Platzhaltertext weglassen

Um zu konvertieren, müssen Besucher wissen, wie sie Ihr Formular ausfüllen. Die Verwendung von Platzhaltertext ist jedoch nicht die beste Möglichkeit, sie anzuzeigen.

Laut der Nielsen Norman Group hat das Hinzufügen von hellgrauem Text zu Ihren Formularfeldern das Potenzial:

• Belastung des Kurzzeitgedächtnisses der Benutzer. Wenn sie anfangen zu tippen und der graue Text verschwindet, denken sie sich: „Wie viele Zeichen muss mein Passwort noch einmal haben?“
• Machen Sie Ihre Formularfelder unsichtbar. Leere Formularfelder fallen potentiellen Interessenten stärker auf als Felder mit Platzhaltern.
• Irritieren Sie Benutzer, die das Formular durchsuchen. Diejenigen, die Ihr Formular schnell mit der "Tabulatortaste" ausfüllen, haben keine Zeit, den erklärenden Platzhaltertext zu lesen, bevor er verschwindet.
• Besucher verwirren. Sie könnten Platzhaltertext mit Informationen verwechseln, die automatisch ausgefüllt wurden.

Um Verwirrung zu vermeiden, fügen Sie über jedem Feld eine Beschriftung ein, die den Besuchern genau sagt, was sie darin angeben müssen. Platzhaltertext erzeugt nur mehr Reibung auf Ihrer Registrierungsseite.

Wie die Profis Registrierungsseiten erstellen

Jetzt, da Sie wissen, was Sie auf Ihrer Anmeldeseite angeben müssen, sehen wir uns an, wie die Profis ihre erstellen.

LinkedIn

Diese LinkedIn-Anmeldeseite gehört zu den Post-Click-Landingpages. Es ist eigenständig, d. h. es ist nicht über die Navigation mit der Website des Unternehmens verbunden – nicht einmal im Logo.

Über dem Formular könnte die Überschrift einen stärkeren Nutzen vermitteln. Auf ihm halten vier Felder die Reibung gering. Durch die Kombination von Vor- und Nachnamen in einem Feld „vollständiger Name“ könnte diese Reibung jedoch noch geringer werden.

Über jedem Textfeld zeigt eine graue Beschriftung den potenziellen Kunden an, was sie eingeben sollen, und über dem Feld "Passwort" ist diese Bezeichnung noch spezifischer. Dieses "Passwort"-Feld folgt jedoch nicht den Best Practices, indem für jeden Buchstaben, den der potenzielle Kunde eingibt, identische Aufzählungszeichen angezeigt werden.

Eine zusätzliche graue Beschriftung unter dem letzten Formularfeld weist Besucher darauf hin, dass sie durch Klicken auf „Jetzt beitreten“ der Benutzervereinbarung, der Datenschutzrichtlinie und der Cookie-Richtlinie von LinkedIn zustimmen. Das erspart dem Interessenten den zusätzlichen Schritt, ein Opt-in-Feld anzuklicken, um zuzustimmen.

Im Call-to-Action betont das Wort „jetzt“, dass der Nutzer, sobald er auf den CTA-Button klickt, sofort Teil des Netzwerks ist. Was den Knopf selbst angeht, könnte er noch ein bisschen mehr knallen, meinst du nicht? Eine andere Hintergrund- oder Schaltflächenfarbe kann mehr Aufmerksamkeit darauf lenken, wo der Benutzer klicken muss, um beizutreten.

Darunter rationalisiert ein „Weiter mit Facebook“-Button den gesamten Prozess. Wenn Sie ein Profil im größten sozialen Netzwerk der Welt haben, klicken Sie auf diese Schaltfläche, damit das Formular automatisch ausgefüllt wird, indem Sie Daten verwenden, die Sie bereits mit Facebook geteilt haben.

Copyblogger

Hier ist eine Anmeldeseite, die mehr ist als nur ein Formular. Das erste, was potenzielle Kunden wahrscheinlich bemerken werden, ist diese riesige, sozialsichere Schlagzeile. Übersetzt heißt es: „Wenn wir gut genug für 334.000 Vermarkter sind, sind wir auch gut genug für Sie.“

Es nutzt auch ein Phänomen, das allgemein als "FOMO" bekannt ist, was "Angst, etwas zu verpassen" bedeutet. Niemand möchte sich den Vorsprung entgehen lassen, den 334.000 ihrer Branchenkollegen haben.

Darunter verleitet eine Vorschau aller kostenlosen wertvollen Inhalte, die potenzielle Kunden nach der Registrierung erhalten, dazu, dieses Formular auszufüllen. Das Formular selbst könnte jedoch besser gestaltet sein.

Durch den Wegfall des Felds „Passwort erneut eingeben“ und die Verdichtung von Vor- und Nachname in „vollständiger Name“ könnte Copyblogger die Anzahl der Textfelder von 5 auf 3 reduzieren und damit die Reibungsverluste bei der Anmeldung reduzieren. Anstelle des Felds „Passwort erneut eingeben“ kann eine Option zum Anzeigen/Ausblenden verwendet werden, um die Genauigkeit bei der Eingabe eines Passworts zu gewährleisten.

Um die Reibung noch weiter zu verringern, sollten die Etiketten innerhalb jedes Felds stattdessen darüber positioniert werden. Im Moment verschwindet diese graue Schrift, wenn potenzielle Kunden in das Textfeld klicken, sodass sie leicht vergessen können, was sie eingegeben haben.

Obwohl einige Mängel im Formular und einige ausgehende Links die Conversions auf dieser Anmeldeseite beeinträchtigen können, ist der kostenlose Inhalt von Copyblogger zu wertvoll, um darauf verzichtet zu werden.

Verrücktes Ei

Zuallererst ist ein Unternehmen, das sich in seiner Branche als „Leader“ bezeichnet, wie ein Café, das seinen Kaffee als den besten der Welt bezeichnet. Es gibt viele, die es sagen, aber nur wenige, die es beweisen können. Anstatt sich selbst als der Beste zu bezeichnen, belegen Sie Ihre Behauptung mit einer Statistik oder zitieren Sie einen bekannten Kunden, der Sie glaubt.

Unter dieser Überschrift befindet sich ein Bild, das eine Vorschau der Erkenntnisse zeigt, die Sie bei der Verwendung von Crazy Egg gewinnen, und rechts neben dem Bild erklären drei Textzeilen, was diese Erkenntnis ist und was Sie damit tun können.

Bei dieser superkurzen Form ist die Reibung minimal. Die Überschrift betont, dass die Testversion kostenlos ist, der Button auf dem weißen Hintergrund knallt und der Call-to-Action in der ersten Person geschrieben wird. Das einzige, was dieses Formular im Moment davon abhält, schmerzfrei zu sein, ist der ablenkende graue Platzhaltertext in jedem Feld.

Darunter steigert Social Proof in Form von erkennbaren Kundenlogos und dem Text „Über 200.000 Unternehmen konvertieren besser mit Crazy Egg“ die Überzeugungskraft dieser Anmeldeseite.

Insgesamt macht diese Seite die Konvertierung für Besucher zum Kinderspiel.

Puffer

Wenn Sie auf Buffer.com auf den Call-to-Action „Kostenlos anmelden“ klicken, verwandelt sich die Homepage in eine Anmeldeseite, indem ein kurzes Popup-Formular bereitgestellt und der umgebende Inhalt abgedunkelt wird.

In diesem Pop-up ist der Konvertierungsprozess einfach – klicken Sie auf eine von drei Social-Login-Schaltflächen, um das Formular zu umgehen, oder geben Sie eine E-Mail-Adresse und ein Passwort ein. Die Reibung ist in jedem Fall minimal. Nur so könnte dieses Formular einfacher auszufüllen sein? Befreien Sie sich von diesem ablenkenden Platzhaltertext.

Asana

Die Anmeldung auf dieser Seite von Asana dauert höchstens zwei Klicks. Mit einer Google-Login-Funktion kann es nur einmal dauern.

Ein Satz über dem Formular sagt Ihnen, wie Sie das Formular ausfüllen, bis hin zu der E-Mail-Adresse, mit der Sie sich anmelden sollten.

Direkt darunter lenkt jedoch ein mit grauem Platzhaltertext gefülltes Formularfeld den Nutzer ab. Aber wird es die Leute davon abhalten, sich anzumelden? Unwahrscheinlich. Dieses Formular ist nahezu reibungslos und einfach auszufüllen.

Beginnen Sie mit der Erstellung einer optimierten Anmeldeseite mit Instapage, fordern Sie noch heute eine Instapage Enterprise-Demo an.