6 Designpraktiken für Anmeldeseiten für reibungslose Formulare
Als Vermarkter möchten Sie wahrscheinlich glauben, dass Sie Ihre potenziellen Kunden gut verstehen — wer sie sind, wie sie sich verhalten usw. Also, wenn einer von ihnen Ihre Website oder Anmeldeseite besucht, was denkst du, würden sie als nächstes tun?
Wahrscheinlich für Ihren Dienst registrieren, nicht wahr?
Das ist nicht immer der Fall, wie eine Marke herausfand. Für sie führte etwas zwischen diesem CTA und ihrer „Danke“ -Seite dazu, dass das Unternehmen fast ein Viertel seiner potenziellen Kunden verlor.
Es gab ein Problem mit ihrer Anmeldeseite.
Landing Pages mit Instapage erstellen ➔
Was ist eine Anmeldeseite?
Anmeldeseiten, auch bekannt als „Registrierungsseiten“, sind nicht alle gleich. Einige sind PPC-Post-Click-Landingpages; Andere sind über die Navigation mit der Homepage verlinkt – einige sind sogar die Homepage. Trotz ihrer Unterschiede haben sie alle das gleiche Ziel: Anmeldungen für einen Dienst generieren.
In vielen Fällen ist die Anmeldeseite der letzte Schritt im Conversion-Funnel eines Unternehmens. Hier navigieren Interessenten, nachdem sie eine Marke bewertet und entschieden haben, dass ihr Service das bietet, was sie benötigen.
Aus diesem Grund konzentrieren sich die Anmeldeseiten weniger darauf, den Interessenten zur Konvertierung zu überreden, als vielmehr darauf, die damit verbundene Reibung 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 Shopify’s Anmeldeseite unten, die über der Homepage erscheint, sobald Sie auf „Erste Schritte“ klicken.“
Es ist wirklich nur eine Kurzform. Und wie Sie später sehen werden, sind die meisten Anmeldeseiten auf die gleiche Weise aufgebaut und enthalten nur eine Überschrift, einige Formularfelder und einen Call-to-Action.
Aber nur weil viele so gestaltet sind, heißt das nicht, dass es der richtige Weg ist. Beim Erstellen einer erfolgreichen Anmeldeseite geht es um mehr als nur darum, Ablenkungen zu beseitigen und Formularfelder zu reduzieren. Die Aufgabe ist zweifach.
Um maximale Anmeldungen zu generieren, müssen Sie die Schritte zur Registrierung minimieren und gleichzeitig die wenigen Elemente, die Sie verwenden, optimal nutzen. Hier sind einige Tipps und Einblicke von den Experten.
Verwenden Sie eine nutzenorientierte Überschrift
Wenn ein Interessent auf Ihrer Anmeldeseite ankommt, hat er Ihren Service in den meisten Fällen bereits bewertet und festgestellt, dass er seinen Anforderungen entspricht. Aber bedeutet das, dass du sie nicht daran erinnern solltest, warum sie da sind?
Unten verwendet Copyblogger eine Social-Proof-gefüllte Überschrift, um Benutzer davon zu überzeugen, sich anzumelden, und oben erinnert Shopify Interessenten daran, dass ihre Testversion 14 Tage lang kostenlos ist.
Einfach ist gut, aber wenn Sie den Raum haben, Ihren USP mit einer Überschrift zu verstärken, tun Sie es. Die Chancen stehen gut, dass sich dies positiver auf die Conversions auswirkt als negativ.
Machen Sie alle Ihre Felder erforderlich
In diesem Tipp geht es weniger darum, dass Ihre Besucher Ihr Formular ausfüllen müssen, als vielmehr darum, sicherzustellen, dass Sie die richtigen Felder ausgewählt haben. Damit meinen wir, wenn Sie festgestellt haben, dass ein Formularfeld optional ist, benötigen Sie diese Informationen nicht, um den Interessenten anzumelden.
Ein Dienst wie Groupon muss beispielsweise 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 tun müssen, desto besser.
Zu berücksichtigende Formularfelder
Einige zu berücksichtigende Formularfelder konsolidieren / Entfernen:
- 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 angemeldet haben?
- Passwort bestätigen: Dieses Feld ist veraltet und nur wegen der Passwortmaskierung erforderlich, eine weitere unpraktische Technik.
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 zusätzlicher Sicherheit, aber das einzige, vor dem es wirklich schützt, sind Menschen, die über Ihre Schulter gucken.
Fragen Sie sich: erstellen meine potenziellen Kunden ihre Passwörter wirklich in einer überfüllten öffentlichen Umgebung? Wahrscheinlich nicht.
Anstatt ein Feld „Passwort bestätigen“ zu verwenden, können Benutzer sehen, was sie eingeben, indem sie das ursprüngliche Feld „Passwort“ demaskieren oder eine Funktion „Ein- / Ausblenden“ verwenden, wie es MailChimp auf ihrer Anmeldeseite tut:
- Vor- und Nachname: Erwägen Sie, Vorname und Nachname in einem Feld „vollständiger Name“ zu konsolidieren. Oder fragen Sie einfach nach dem Vornamen. Heck, vielleicht sogar darüber nachdenken, es ganz loszuwerden.
In einigen 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, auf ein Kontrollkästchen zu klicken, in dem sie Ihren Benutzerbedingungen zustimmen, sollten Sie eine Nachricht über Ihrem CTA einfügen, wie es LinkedIn unten tut. Es besagt, dass der Benutzer durch die Konvertierung automatisch zustimmt.
Erstellen Sie Zielseiten mit Instapage ➔
Wenn Sie all diese Informationen unbedingt benötigen, fragen Sie in den Schritten danach
Schauen Sie, manchmal benötigen Sie wirklich viele Informationen, um einen neuen Benutzer zu registrieren. Anmeldungen, die eine Zahlung vor Ort erfordern, erfordern lange Formulare, um vertrauliche Informationen wie Rechnungsadresse und Kreditkartennummer zu erfassen. In diesem Fall sollten Sie den Registrierungsprozess in mehrere Schritte aufteilen.
Ein Bericht von Formstack zeigt, dass mehrseitige Registrierungsformulare im vergangenen Jahr die einseitigen um mehr als 9% übertrafen%:
Warum?
Mehrseitige Formulare erleichtern die Konvertierung, indem sie den Prozess in mehrere kurze Schritte aufteilen. 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 verfügen mehrseitige Anmeldungen normalerweise über einen praktischen Fortschrittsbalken, mit dem Benutzer wissen, wie weit sie bei der Registrierung sind.
Merken: wenn Sie Ihr Formular verkürzen können, indem Sie einige Felder entfernen, kürzen Sie es. Wenn Sie nicht können, versuchen Sie nicht, es kürzer erscheinen zu lassen, indem Sie alles auf wenig Platz stopfen. Sie werden nur Ihre Seite überladen und Ihre Aussicht überwältigen.
Erwägen Sie die Verwendung eines modalen Fensters
Für diejenigen mit einem schnellen Anmeldevorgang wie Canva bietet ein modales Fenster einige Vorteile.
Designer Joshua Johnson erklärt, warum:
Sie überlagern den aktuellen Inhalt, anstatt Sie zu einer anderen Seite zu führen. Irgendwie ist das weniger beunruhigend, als an einen neuen Ort gebracht zu werden, was sich wie eine Unterbrechung anfühlt. Durch das Dimmen der Homepage-Grafiken und das Aufrufen eines modalen Anmeldeformulars für Schilder haben Sie das Gefühl, dass der Vorgang schnell und schmerzlos abläuft und Sie in kürzester Zeit wieder surfen können.
In einer Zeit, in der Internetnutzer ungeduldiger denn je sind, ist es eine großartige Übung, ihnen den Eindruck zu vermitteln, dass sie sofort wieder surfen können.
Erstellen Sie Zielseiten mit Instapage ➔
Aktivieren Sie das automatische Ausfüllen in sozialen Netzwerken
In fast jedem Beispiel für eine Anmeldeseite unten finden Sie Schaltflächen zum automatischen Ausfüllen in sozialen Netzwerken. Auf diese Weise können Benutzer Ihr Formular mit einem einzigen Klick 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 generieren konnten. Darüber hinaus geben 86% der Befragten an, dass das Erstellen neuer Benutzerkonten auf verschiedenen Websites unpraktisch ist. Wenn es Ihr Ziel ist, die Konvertierung so einfach wie möglich zu gestalten, ist die Nutzung von Social Autofill ein Kinderspiel.
Platzhaltertext weglassen
Um zu konvertieren, müssen Besucher wissen, wie Sie Ihr Formular ausfüllen. Die Verwendung von Platzhaltertext ist jedoch nicht der beste Weg, um 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 wieder haben?“
- Machen Sie Ihre Formularfelder unsichtbar. Leere Formularfelder sind für Interessenten tatsächlich auffälliger als solche mit Platzhaltern.
- Irritieren Sie Benutzer, die sich durch das Formular bewegen. Diejenigen, die Ihr Formular schnell mit der Schaltfläche „Tab“ ausfüllen, haben keine Zeit, erläuternden Platzhaltertext zu lesen, bevor er verschwindet.
- Verwirren Besucher. Sie können Platzhaltertext mit Informationen verwechseln, die automatisch ausgefüllt wurden.
Um Verwechslungen zu vermeiden, fügen Sie über jedem Feld eine Beschriftung hinzu, die den Besuchern genau mitteilt, was sie darin aufnehmen müssen. Platzhaltertext erzeugt nur mehr Reibung auf Ihrer Registrierungsseite.
Erstellen Sie Zielseiten mit Instapage ➔
Wie die Profis Registrierungsseiten erstellen
Nachdem Sie nun wissen, was Sie auf Ihrer Anmeldeseite einfügen müssen, werfen wir einen Blick darauf, wie die Profis ihre erstellen.
Diese LinkedIn-Anmeldeseite ist von der Post-Click-Landingpage-Variante. Es ist eigenständig, dh 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. Darauf 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 informiert die graue Beschriftung die Interessenten darüber, was sie eingeben sollen, und über dem Feld „Passwort“ ist diese Beschriftung noch spezifischer. Das Feld „Passwort“ folgt jedoch nicht den Best Practices, indem für jeden Buchstaben, den der Interessent eingibt, identische Aufzählungszeichen angezeigt werden.
Zusätzlicher grauer Schriftzug unter dem letzten Formularfeld informiert Besucher darüber, 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, auf ein Opt-In-Feld klicken zu müssen, um zuzustimmen.
Im Call-to-Action betont das Wort „Jetzt“, dass der Benutzer, sobald er auf die CTA-Schaltfläche klickt, sofort Teil des Netzwerks ist. Was den Knopf selbst betrifft, könnte er ein bisschen mehr knallen, denkst du nicht? Eine andere Hintergrund- oder Schaltflächenfarbe lenkt möglicherweise mehr Aufmerksamkeit darauf, 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 Autofill das Formular für Sie ausfüllt, indem Sie Daten verwenden, die Sie bereits mit Facebook geteilt haben.
Copyblogger
Hier ist eine Anmeldeseite, die mehr als nur ein Formular ist. Das erste, was Interessenten wahrscheinlich bemerken werden, ist dieser Riese, Social-Proof-gefüllte 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 und „Angst vor dem Verpassen“bedeutet.“ Niemand möchte den Vorsprung verpassen, den 334.000 seiner Branchenkollegen haben.
Darunter lockt eine Vorschau aller kostenlosen wertvollen Inhalte, die Interessenten nach der Registrierung erhalten, sie dazu, dieses Formular auszufüllen. Das Formular selbst könnte jedoch besser gestaltet werden.
Durch die Eliminierung des Feldes „Passwort erneut eingeben“ und die Verdichtung von Vor- und Nachname zu „vollständiger Name“ könnte Copyblogger die Anzahl der Textfelder von 5 auf 3 reduzieren und damit die Reibung bei der Anmeldung verringern. Anstelle dieses Feldes „Passwort erneut eingeben“ kann eine Option zum Anzeigen / Ausblenden verwendet werden, um die Genauigkeit bei der Eingabe eines Passworts sicherzustellen.
Um die Reibung noch weiter zu reduzieren, sollten die Beschriftungen in jedem Feld stattdessen darüber positioniert werden. Im Moment verschwindet diese graue Beschriftung, wenn Interessenten in das Textfeld klicken, sodass sie leicht vergessen können, was sie eingegeben haben.
Insgesamt sind die kostenlosen Inhalte von Copyblogger zu wertvoll, um sie zu verpassen, obwohl einige Mängel im Formular und einige ausgehende Links die Conversions auf dieser Anmeldeseite beeinträchtigen könnten.
Crazy Egg
Zunächst einmal ist ein Unternehmen, das sich „the Leader“ in seiner Branche nennt, 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 den Besten zu bezeichnen, untermauern Sie Ihre Behauptung mit einer Statistik oder zitieren Sie einen bekannten Kunden, der glaubt, dass Sie es sind.
Unter dieser Überschrift befindet sich ein Bild, das eine Vorschau der Einsicht zeigt, die Sie erhalten, wenn Sie Crazy Egg verwenden, und rechts neben dem Bild erklären drei Textzeilen, was diese Einsicht ist und was Sie damit tun können.
Bei dieser superkurzen Form ist die Reibung minimal. Die Überschrift betont, dass die Testversion kostenlos ist, die Schaltfläche auf dem weißen Hintergrund erscheint und der Call-to-Action in der ersten Person geschrieben wird. Im Moment ist das einzige, was dieses Formular davon abhält, schmerzfrei zu sein, der störende graue Platzhaltertext in jedem Feld.
Darunter steigert Social Proof in Form von erkennbaren Kundenlogos und dem Text „Over 200,000 businesses convert better with Crazy Egg“ die Überzeugungskraft dieser Anmeldeseite.
Insgesamt macht diese Seite die Konvertierung für Besucher zum Kinderspiel.
Landing Pages mit Instapage erstellen ➔
Buffer
Wenn Sie auf Buffer auf den Call-to-Action-Button „Kostenlos anmelden“ klicken.mit, Die Homepage verwandelt sich in eine Anmeldeseite, indem ein kurzes Popup-Formular bereitgestellt und der umgebende Inhalt abgedunkelt wird.
In diesem Popup ist der Konvertierungsprozess einfach: Klicken Sie auf eine der drei Social-Login—Schaltflächen, um das Formular zu umgehen, oder geben Sie eine E-Mail-Adresse und ein Passwort ein. In jedem Fall ist die Reibung minimal. Nur so könnte dieses Formular einfacher auszufüllen sein? Befreien Sie sich von diesem störenden Platzhaltertext.
Asana
Die Anmeldung auf dieser Seite von Asana aus dauert höchstens zwei Klicks. Mit einer Google-Login-Funktion, es könnte so wenig wie ein nehmen.
Ein Satz über dem Formular sagt Ihnen, wie Sie das Formular ausfüllen, sogar bis zu welcher E-Mail-Adresse Sie sich anmelden sollten.
Direkt darunter lenkt jedoch ein mit grauem Platzhaltertext gefülltes Formularfeld den Benutzer ab. Aber wird es die Leute davon abhalten, sich anzumelden? Wahrscheinlich nicht. Dieses Formular ist nahezu reibungslos und einfach auszufüllen.
Beginnen Sie mit der Erstellung einer optimierten Anmeldeseite mit Instapage und fordern Sie noch heute eine Instapage Enterprise-Demo an.