{"id":1446,"date":"2016-11-17T10:27:13","date_gmt":"2016-11-17T09:27:13","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=1446"},"modified":"2016-11-17T10:27:13","modified_gmt":"2016-11-17T09:27:13","slug":"signup-formulare","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/signup-formulare\/","title":{"rendered":"Wie Sie effektive Sign-up-Formulare erstellen"},"content":{"rendered":"

Obwohl der Registrierungs-Prozess etwas sehr Gew\u00f6hnliches ist, stellt er einen der kniffligsten Teile von Web Design dar.<\/p>\n

Sie k\u00f6nnen sicherstellen, dass Ihre Registrierungsseite kein Hindernis f\u00fcr User darstellt, indem Sie die folgenden Tipps zur Gestaltung befolgen.<\/p>\n

<\/p>\n

Verwenden Sie nicht \u201eSign In\u201c und \u201eSign Up\u201c zusammen<\/strong><\/h2>\n

Dieses Problem stellt sich haupts\u00e4chlich, wenn Sie eine englischsprachige Seite betreiben.<\/p>\n

Wie schnell k\u00f6nnen Sie den Unterschied zwischen \u201eSign in\u201c und \u201eSign up\u201c im Bild unten erkennen?<\/p>\n

\"signin-signup-registration-design\"<\/p>\n

Schlecht: <\/em>\u201eSign in\u201c und \u201eSign up\u201c<\/em> werden gemeinsam verwendet<\/em><\/p>\n

Das Problem ist, das \u201eSign in\u201c und \u201eSign up\u201c sehr \u00e4hnlich sind. Wenn Buttons sich zu sehr \u00e4hneln, und beide das gleiche Verb als Label benutzen, ist es einfach, dass sich der User verwirrt f\u00fchlt.<\/p>\n

Selbst wenn User nicht den Fehler machen, auf den falschen Button zu klicken, verbringen sie unn\u00f6tige Zeit damit, die zwei Buttons zu unterscheiden.<\/p>\n

User sollten nicht pausieren, um zu \u00fcberlegen, welchen Button sie klicken m\u00fcssen.<\/em><\/p>\n

Wenn Sie eine gute Nutzererfahrung auf einer englischsprachigen Seite erstellen wollen, vermeiden Sie die gemeinsame Verwendung von \u201eSign in\u201c und \u201eSign up\u201c. Machen Sie die Buttons stattdessen eindeutig, indem Sie unterschiedliche Verben benutzen<\/em>:<\/p>\n

\"registration-form-example\"<\/p>\n

 <\/p>\n

Gut: \u201eLogin\u201c und \u201eRegister\u201c sind eindeutiger f\u00fcr den User. <\/em><\/p>\n

\u2026 verschiedene visuelle Gestaltungen der Buttons (Farbe und Stil) machen den Unterschied noch deutlicher:<\/p>\n

\"registration-form-design-buttons\"<\/p>\n

 <\/p>\n

Bildquelle: ThinkWithGoogle<\/em><\/p>\n

Eliminieren Sie so viele Felder wie m\u00f6glich<\/strong><\/h2>\n

Wenn sich ein neuer User auf Ihrer Seite registriert, fragen Sie nur nach den n\u00f6tigsten Informationen.<\/p>\n

Je weniger Felder Sie in Ihrem Registrierungsprozess einbinden, desto kleiner ist die Wahrscheinlichkeit, dass der User den Prozess abbricht.<\/p>\n

\u00dcberlegen Sie, welche Informationen Sie unbedingt brauchen:<\/p>\n

    \n
  • Eine Sache, die fast jedes Registrierungsformular, ist, die doppelten Eingabefelder f\u00fcr Passwort und Email zu entfernen. Es gibt andere L\u00f6sungen, um Tippfehler zu vermeiden.<\/li>\n
  • Aus einer UX-Perspektive ist es besser, keine optionalen Felder zu haben. Sollte eine Information nicht unbedingt n\u00f6tig sein, gibt es keinen Grund, die Zeit des Users damit zu verschwenden. Sie k\u00f6nnen die Information problemlos sp\u00e4ter nachfragen. Falls es dennoch optionale Felder in Ihrem Registrierungsformular gibt, stellen Sie sicher, dass sie eindeutig mit dem Label Optional<\/em> gekennzeichnet sind:<\/li>\n<\/ul>\n

    \"registration-form-design\"<\/p>\n

     <\/p>\n

    \u201eHow old are you?\u201c ist als Optional gekennzeichnet<\/em><\/p>\n

    Login- vs. Registrierungsformulare <\/strong><\/h2>\n

    Viele Seiten und Apps verwenden fast die gleiche Anzahl an Eingabefeldern (E-Mail, Benutzername und Passwort) f\u00fcr Login- und Registrierungsformulare und zeigen beide nebeneinander an:<\/p>\n

    \"register-forms-login-forms\"<\/p>\n

    Schlecht: Zwei Formulare nebeneinander<\/em><\/p>\n

    Es ist wichtig, dass sich das Registrierungsformular klar von dem f\u00fcr den Login unterscheidet. Das minimiert die Chance, dass User aus Versehen versuchen, sich \u00fcber das Registrierungsformular einzuloggen.<\/p>\n

    Die Formulare von Twitter sehen zum Beispiel nicht nur unterschiedlich aus, sie haben auch verschiedene Farben f\u00fcr CTA Button sowie hilfreichen Text.<\/p>\n

    \"twitter-example-registration-form\"<\/p>\n

    Gut: Twitters Login- und Registrierungsformulare <\/em><\/p>\n

    Lassen Sie User ihr Passwort sehen<\/strong><\/h2>\n

    Ein h\u00e4ufiges Problem bei Login und Registrierung sind Tippfehler bei Passw\u00f6rtern. Diese passieren sehr einfach, da das Passwortfeld normalerweise maskiert ist (aus Sicherheitsgr\u00fcnden). Daher k\u00f6nnen leicht Tippfehler passieren, vor allem auf mobilen Ger\u00e4ten.<\/p>\n

    Viele Registrierungsformulare versuchen, diese Tippfehler durch Felder zum \u201eBest\u00e4tigen des Passworts<\/em>\u201c zu vermeiden:<\/p>\n

     <\/p>\n

    Schlecht: Zwei Eingabefelder f\u00fcr das User Passwort<\/em><\/p>\n

    Obwohl das Best\u00e4tigungsfeld Sinn zu machen scheint, l\u00f6st es das Problem nicht komplett.<\/p>\n

    User machen mehr Fehler, wenn sie nicht sehen k\u00f6nnen, was sie w\u00e4hrend dem Ausf\u00fcllen des Formulars tippen.<\/p>\n

    Lassen Sie den User nicht dasselbe Feld doppelt ausf\u00fcllen! Eine \u201ePasswort anzeigen\u201c-Option einzuf\u00fcgen, ist ein besserer Weg, Tippfehler zu vermeiden. Sie k\u00f6nnen ein Kontrollk\u00e4stchen neben dem Passwortfeld einrichten. Wenn User es anklicken, wird ihre Eingabe unmaskiert angezeigt.<\/p>\n

    \"show-password-registration-form-design\"<\/p>\n

     <\/p>\n

    Gut: \u201ePasswort anzeigen\u201c als Kontrollk\u00e4stchen<\/em><\/p>\n

    Leisten Sie Hilfestellung<\/strong><\/h2>\n

    Sie sollten Fehler in Eingabefeldern klar identifizieren und ihre Ursache erkl\u00e4ren.<\/p>\n

    Falls ein Feld nicht richtig ausgef\u00fcllt ist, sagen Sie den Usern nicht nur, dass diese einen Fehler gemacht haben. Zeigen Sie ihnen, in welchem Feld der Fehler auftauchte, und wie sie das Feld korrekt ausf\u00fcllen k\u00f6nnen.<\/p>\n

    Nutzerfreundliche Fehlermeldungen<\/strong><\/h2>\n

    \u201eAus Sicherheitsgr\u00fcnden muss Ihr Passwort l\u00e4nger als 6 und k\u00fcrzer als 10 Zeichen sein und mindestens einen Gro\u00dfbuchstaben, eine Zahl und ein Symbol beinhalten.\u201c<\/em><\/p>\n

    Dies ist eine typische Anforderung an ein Passwort. Jedoch ist diese Art, den User an alle Anforderungen zu erinnern, nicht ideal. Nehmen Sie sich ein Beispiel an MailChimp und zeigen Sie den Fortschritt des Nutzers mit einer Visualisierung der Passwortst\u00e4rke.<\/p>\n

    \"userfriendly-registration-forms\"<\/p>\n

    Das derzeitige Passwort ben\u00f6tigt \u201eein Spezialzeichen\u201c, \u201eeine Zahl\u201c und sollte 8 Zeichen haben. <\/em><\/p>\n

    Datenvalidierung in Echtzeit<\/strong><\/h2>\n

    Validierung von Daten in Echtzeit informiert den Nutzer unmittelbar nach der Eingabe \u00fcber deren Richtigkeit.<\/p>\n

    Dieser Ansatz erlaubt es Nutzern, ihre Fehler zu verbessern, bevor sie den \u201eAbsenden\u201c-Button klicken m\u00fcssen. Diese Formularpr\u00fcfung sollte Usern jedoch nicht nur Fehleingaben melden, sondern auch korrekten Eingaben. Das gibt Nutzern ein Gef\u00fchl von gr\u00f6\u00dferer Sicherheit beim Ausf\u00fcllen des Formulars.<\/p>\n

    \"registration-form-design\"<\/p>\n

    Validierung in Echtzeit funktioniert besonders gut f\u00fcr weniger offensichtliche Antworten, so wie die Auswahl eines Benutzernamens oder eines starken Passworts. Twitter ist hier ein gutes Beispiel. Auf dem Bild unten k\u00f6nnen Sie sehen, dass das Formular mich darauf hinweist, dass diese Email-Adresse bereits verwendet wird. Es bietet mir au\u00dferdem Optionen zum weiteren Vorgehen (mich entweder mit dieser Email-Adresse einzuloggen, oder mein Passwort wiederherzustellen).<\/p>\n

    \"twitter-example-registration-form-2\"<\/p>\n

    Die Herausforderung mit Benutzernamen<\/strong><\/h2>\n

    Wenn Sie Nutzer bei der Registrierung auffordern, einen Benutzernamen auszuw\u00e4hlen, sto\u00dfen Sie wahrscheinlich auf folgende Probleme:<\/p>\n

      \n
    • Da Benutzernamen eindeutig sein m\u00fcssen, sind User oft gezwungen, ein paar Minuten in die Suche nach einem g\u00fcltigen Namen zu investieren, da bevorzugte Namen oft schon durch andere User vergriffen sind.<\/li>\n
    • Nutzer w\u00e4hlen am Ende einen neuen Benutzernamen, an den sie sich nach einer Weile nicht mehr erinnern k\u00f6nnen.<\/li>\n<\/ul>\n

      Ihre Seite oder Anwendung sollte es Nutzern erm\u00f6glichen, sich mit ihrer Email-Adresse oder Telefonnummer anzumelden:<\/p>\n

      \"design-registration-form\"<\/p>\n

      Gut: Telefonnummer oder Email k\u00f6nnen bei der Registrierung als Benutzername gew\u00e4hlt werden.<\/em><\/p>\n

      \"design-registration-form-2\"<\/p>\n

      Erlauben Sie Nutzern, sich \u00fcber Facebook, Twitter oder Google anzumelden <\/strong><\/h2>\n

      Warum sollten Sie User zwingen, ein neues Set von Login-Details anzulegen, wenn Sie sie genauso \u00fcber einen externen Account wie Facebook, Google oder Twitter registrieren lassen k\u00f6nnen? Diese Funktion kann viele Kopfschmerzen bei der Registrierung verhindern.<\/p>\n

      \"design-registration-form-3\"<\/p>\n

       <\/p>\n

      Verglichen mit der Standard-Registrierung per E-Mail hat dieser Ansatz Vor- und Nachteile:<\/p>\n

        \n
      • Vorteil:<\/strong> Nutzer m\u00fcssen kein Formular ausf\u00fcllen, keine Kombination von Benutzername und Passwort erstellen oder Ihre Email verifizieren. Daher wird der Registrierungsvorgang von 10 Minuten auf 10 Sekunden verk\u00fcrzt. Und noch wichtiger: User m\u00fcssen sich keine neuen Benutzernamen und Passw\u00f6rter merken.<\/li>\n
      • Nachteil:<\/strong> Da die Informationen des Users automatisch geladen werden, erzeugt dies erhebliche Bedenken hinsichtlich Privatsph\u00e4re. Nicht jeder Nutzer ist gl\u00fccklich damit, seine oder ihre Profildaten zu teilen. Daher sollten Sie immer ein traditionelles Registrierungssystem parallel laufen lassen.<\/li>\n<\/ul>\n

        \"design-registration-form-4\"<\/p>\n

        Gut: Login \u00fcber Facebook\/Google+\/Twitter oder \u00fcber traditionelle Registrierung<\/em><\/p>\n

        Lassen Sie User nach der Registrierung angemeldet<\/strong><\/h2>\n

        Ein bekanntes Problem beim Registrierungsprozess ist, dass sich der Nutzer direkt nach der abgeschlossenen Registrierung anmelden muss. Dieser extra Schritt frustriert die meisten Nutzer.<\/p>\n

        \"design-registration-form-5\"<\/p>\n

        Schlecht: Den User nach Aktivierung des Accounts darum bitten, sich anzumelden<\/em><\/p>\n

        Sie sollten die Anwendung so konzipieren, dass Nutzer nach der Registrierung direkt angemeldet bleiben (sofern Sicherheit kein echtes Problem darstellt.)<\/p>\n

        Machen Sie die Passwort-Wiederherstellung schmerzfrei<\/strong><\/h2>\n

        Es ist wichtig, dass Nutzer beim Vergessen ihres Passworts (und das werden sie) die M\u00f6glichkeit haben, es \u00fcber den Login-Prozess wiederherzustellen.<\/p>\n

        Machen Sie es den Usern einfach, ihr Passwort zu reaktivieren, damit diese nicht ihren Service verlassen. Als Startpunkt: setzten Sie immer einen eindeutigen \u201eSie haben Ihr Passwort vergessen?\u201c Link in ihr Anmeldeformular. Dieser Link sollte jederzeit sichtbar sein (und nicht nur nach inkorrekter Eingabe des Passworts).<\/p>\n

        \"design-registration-form-6\"<\/p>\n

        Gut: Das Anmeldeformular von MailChimp hat einen \u201ePasswort vergessen?\u201c Link<\/em><\/p>\n

        Bonus: Verwenden Sie eine \u201eTesten vor Kaufen\u201c Strategie<\/strong><\/h2>\n

        Die meisten User werden eine Anwendung oder einen Online-Dienst verlassen, wenn sie direkt nach pers\u00f6nlichen Daten gefragt werden. Eine Ausnahme: es gibt eine direkte Leistung daf\u00fcr (z.B. beim Bestellen eines Taxis).<\/p>\n

        Besonders Dienste mit niedriger Markenbekanntheit m\u00fcssen eine gr\u00f6\u00dfere H\u00fcrde \u00fcberschreiten, wenn sie Nutzer am Anfang der Erfahrung um eine Registrierung bitten. Die Registrierung zu fr\u00fch zu verlangen kann mehr als 85% der Nutzer dazu bringen, das Produkt zu verlassen.<\/p>\n

        \"design-registration-form-7\"<\/p>\n

        Ben\u00f6tigte Registrierung im Voraus ist eine riesige H\u00fcrde bei der Nutzung. <\/em><\/p>\n

        Bildquelle: ThinkWithGoogle<\/em><\/p>\n

        Es ist besser, ein eingeschr\u00e4nktes Set von Funktionen direkt anzubieten, als \u00fcberhaupt nichts. Befolgen Sie daher eine \u201eTesten vor dem Kauf\u201c Strategie. Dies gibt den Nutzern die M\u00f6glichkeit, Ihr Produkt zu erleben, sodass sie pers\u00f6nlich an einer Registrierung interessiert sind. Menschen sind eher dazu bereit, sich anzumelden und echte pers\u00f6nliche Daten zu hinterlassen, wenn sie wissen, was f\u00fcr ein Produkt sie daf\u00fcr bekommen.<\/p>\n

        Ein Angebot zum Testen bedeutet nicht, dass Sie den User nicht darum bitten k\u00f6nnen, einen Account anzulegen. Es bedeutet einfach nur, dass Sie dem Nutzer vorher etwas Wertvolles bieten.<\/p>\n

        Fazit<\/strong><\/h2>\n

        Nachdem sie jede Barriere von der Registrierung entfernen, erhalten Sie hoffentlich jede Menge Registrierungen.<\/p>\n

        Das bedeutet nicht automatisch eine Menge neuer Kunden. Kunden sind die Folge einer Serie an Ereignissen. Und einen effizienten Registrierungsprozess einzurichten, ist nur der erste Schritt in diese Richtung.<\/p>\n","protected":false},"excerpt":{"rendered":"

        Obwohl der Registrierungs-Prozess etwas sehr Gew\u00f6hnliches ist, stellt er einen der kniffligsten Teile von Web Design dar. Sie k\u00f6nnen sicherstellen, dass Ihre Registrierungsseite kein Hindernis f\u00fcr User darstellt, indem Sie die folgenden Tipps zur Gestaltung befolgen.<\/p>\n","protected":false},"author":10,"featured_media":1471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=1446"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1446\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/1471"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=1446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=1446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=1446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}