Anmelde- / Registrierungsformular Ideen und schöne Beispiele

Im gesamten modernen Web werden immer mehr Orte für Benutzereingaben angezeigt. Dazu gehören Einkaufswagen, interaktive Webspiele und ganz sicher Website-Anmeldeformulare. Es scheint, dass sich Designer nicht nur auf das Seitendesign konzentrieren sollten, sondern auch die Formästhetik.

Überlegen Sie, wie viele Formulare Sie im Verlauf Ihres Internetverlaufs ausgefüllt haben. Es gibt unzählige Beispiele dafür aus Foren, Message Boards, Blogs und vielen anderen. In diesem Artikel werfen wir einen Blick auf einige großartige Tricks zum Erstellen Ihrer In-Page-Formulare.

Es ist ratsam, einige der Punkte hier aus objektiver Sicht zu betrachten. Obwohl viele Anmelde- und Anmeldeformulare gut mit einem Site-Typ zusammenarbeiten, gibt es keine abschließende Beurteilung der Frage, was das ist “Beste” Lösung. Verwenden Sie Ihre Design-Intuition, um Teile und Formen von Formularen anzuwenden, die Sie anstreben.

Betrachten Sie mehrere Eingaben

Betrachten Sie zunächst ein kleines Kontaktformular von Foundation Six Web Design. Ja, dies ist kein Anmeldeformular, daher kann es ein wenig vom Thema ablenken. Ihr Seitendesign ist jedoch sehr beeindruckend und zeigt Ihnen, was ein wenig Kreativität bewirken kann.

In jedem der Eingabefelder können Sie persönliche Kontaktinformationen eingeben (Name, E-Mail usw.). Die Stile gehen weit über das übliche hinaus und bieten Benutzereingaben in einer Art handschriftlicher Kalligraphie. Diese Art der Formatierung wird Ihre Benutzer in Staunen versetzen und ein Ziel mit deutlich höheren Designstandards erreichen.

Sie sollten Stile wie diese ähnlich wie alle Ihre Anmeldeseiten implementieren. Ich würde auf keinen Fall empfehlen, den gleichen Eingabetextstil und Options- / Auswahlmenüs beizubehalten. Berücksichtigen Sie bei der Kreativität Ihres Gehirns, wie jedes Element angeordnet werden sollte: viel Platz zwischen den Ebenen, großer, gut lesbarer Text und sogar Links zu der direkten E-Mail-Zeile.

jQuery-Anmeldungsfelder

Dies wurde in der Vergangenheit auf unzähligen Websites verwendet und wird sicherlich in New-Age-Designs zu sehen sein. Die Zeiten, in denen Standardpraktiken Benutzer auf eine neue Seite für jeden Schritt des Anmeldeprozesses bringen würden, sind lange vorbei. Normalerweise bedeutet dies eine Seite zur Eingabe Ihrer Daten und auch eine neue Seite zur Verarbeitung der Anmeldeinformationen.

Pixel2Life bietet fantastische Einblicke in ein neues Eingabefeld. Von ihrer Homepage aus können Sie auf den Login-Link klicken und eine dynamische, von jQuery betriebene Login-Box aufrufen. Dieses Formular enthält einen Ajax-Aufruf an ein externes PHP-Skript, das die Anmeldeinformationen Ihrer Anmeldeinformationen überprüft und nach der Verarbeitung entweder den Zugriff gewährt oder verweigert.

Wenn Sie noch einen Schritt weiter gehen, wird ein Registrierungslink direkt unter der Login-Box angezeigt. Dies bietet eine viel reibungslosere Benutzererfahrung für diejenigen, die sich für die Website anmelden möchten, den Registrierungslink jedoch nicht finden können.

Wenn ein Benutzer keinen Account hat, aber einen erstellen möchte, wird er ohne fehlerhafte Seiten auf die Registrierungsseite gebracht. Die Login-Box wäre immer noch eine praktikable Option für den Zugriff auf Ihr eigenes Konto. Die Option kann jedoch für höhere Renditen und höhere Volumina neuer Registranten sorgen.

Einfache One-Page-Registrierungen

Ein anderes Paradigma, das sich verändert, ist das Fehlen solcher Details für die Registrierung neuer Konten. Dies ist nicht unbedingt eine schlechte Statistik, wenn man davon ausgeht, dass die Benutzer beim Ausfüllen von Daten ungeduldig werden. Die Zahlen deuten tatsächlich auf Websites mit kürzeren Registrierungsseiten hin schwerer täglich neue Listen neuer Benutzer.

Sikbox bietet Besuchern die Möglichkeit, ein eigenes Suchfeld für eine Website zu erstellen. Die einzige Voraussetzung ist Ihre eigene benutzerdefinierte Domain, für die Suchergebnisse bereitgestellt werden sollen. Die Eingabefelder sind groß, der Text ist sehr einfach zu lesen und das gibt es absolut keine Werbung Benutzer von der Aufgabe abhalten, ihr Suchformular zu erstellen!

Dies ist nicht die beste Form, die Sie beim Erstellen Ihrer eigenen Registrierungsseite für ein Forum oder ein Blog-Archiv verwenden können. Diese erfordern standardmäßig mindestens eine Kombination aus E-Mail-Adresse und Benutzername sowie ein Kennwort. Einige Webanwendungen mit einem neuen Zeitalter generieren dynamische Passwörter für Benutzer, um den Registrierungsprozess zu beschleunigen.

Dem Kompromiss mangelt es natürlich an der Kontrolle des Benutzers, um sein eigenes Passwort zu generieren, an das sich viele Leute gewöhnt haben.

Bauen Sie auffällige Effekte auf

Eine der größten Anmeldeerfahrungen, die ich je gemacht habe, war das Erstellen meines ersten Tumblr-Kontos. Die Startseite ihrer Website bietet sowohl ein Anmelde- als auch ein Anmeldeformular, die mit neuen CSS3-Effekten zum Hervorheben / Verblassen direkt untereinander platziert werden.

Dieser systematische Ansatz ist in Bezug auf den jQuery-Anmeldebereich von Pixel2Life ähnlich. Der Unterschied zu Tumblr besteht jedoch darin, dass das Netzwerk denjenigen ohne Blog keine Inhalte anbieten kann (abgesehen vom Durchsuchen anderer Konten). Der eigentliche Vorteil von tumblr besteht darin, einen eigenen Blog zu erstellen und anderen zu folgen - daher ist das Hauptziel auf der Startseite, entweder ein Konto zu erstellen oder sich anzumelden.

Es gibt einige Fehler mit diesem System. Vor allem innerhalb von IE6 / IE7 werden diese neuen CSS-Eigenschaften nicht unterstützt. Auf der Homepage wird auch ein System zum Hinzufügen von Beschriftungselementen zu Formulareingabewerten verwendet “Standard” Zeichen für E-Mail- / Passwortfelder.

Diese Labels werden in modernen Browsern wie Chrome / Firefox nicht mehr so ​​angezeigt. Aber kein Glück mit den veralteten Browsern, was, wie Sie sich vorstellen können, ziemlich ärgerlich ist, wenn Sie versuchen, Ihre eigenen Eingaben erneut zu lesen!

20+ Beispiele für schönes Formulardesign

Nachfolgend finden Sie eine kurze Zusammenfassung einiger fantastischer Anmeldeformular-Designs. Diese wurden aus dem gesamten Web ausgewählt und umfassen zahlreiche Formen von Webanwendungen. Wenn Sie Vorschläge für andere Websites haben, geben Sie diese bitte im Kommentarabschnitt weiter!

Snoggle News

Robo.to

Virb

Grooveshark

Storenvy

Dropbox

Grüne Kugel Ideen

Freshbooks

Themenwald

MailChimp

Basislager

Testflug

AwesomeJS

Entsperren

PopScreen

Gowalla

Kontainer

MobileMe

Laterthis

Launchlist

Theidealist