Anmeldeformulare gibt es in vielen verschiedenen Formen und Größen. Einige sind ein einzelnes Feld, andere sind ein mehrstufiger Prozess, der sich über mehrere Bildschirme erstreckt.
Heute schauen wir uns 20 attraktive und funktionale Formulare an, um zu sehen, ob wir nützliche Ideen finden, die Sie anwenden können, wenn Sie das nächste Mal ein Anmeldeformular erstellen.
300 Pixel
Einige der Beispiele, die wir heute betrachten werden, stammen aus Beta-Anmeldeformularen wie diesem. Normalerweise bieten diese Seiten nur eine Teaser-Grafik und wenig bis keine Informationen darüber, was die Site tatsächlich sein wird.
Ich mag die 3D-Schaltflächengrafik und wie sie animiert wird, wenn Sie darauf klicken. Dies ist mit Bildern und Javascript gemacht, aber der Stil erinnert an BonBon Buttons, ein frei herunterladbares CSS3-Experiment.
Eine weitere coole Sache an dieser Seite ist, dass sie Bild-Sprites hervorragend nutzt. Überprüfen Sie die Quelle, um das Originalbild anzuzeigen.
Testflug
Der glatte und einfache Stil dieses ist einfach wunderschön. Ich mag die zusätzliche Auffüllung in jeder Reihe und wie sehr sich das ausgewählte Formularfeld von den anderen unterscheidet.
Dies ist eigentlich ein wichtiger Aspekt der Benutzerfreundlichkeit. Formulare können für den Benutzer schmerzhaft sein, und durch das Hinzufügen von kleinen Details wie ein offensichtliches aktuelles Hervorhebungsfeld können Sie wirklich durch den Prozess geführt werden.
Anrechenbar
Ich liebe die Art und Weise, wie diese eine Art im Ozean schwimmt. Es gibt auch eine Menge sehr nettes und subtiles Styling. Überprüfen Sie den inneren Schatten auf den Feldern und wie die Feldumrandungen oben links dunkler sind als unten rechts. Es gibt auch einige wirklich großartige Feedback-Funktionen, die in dieses Formular eingebaut werden, deren Bedeutung wir in einem späteren Beispiel besprechen werden.
CertTime
Modale Fenster sind immer cool. Sie überlagern den aktuellen Inhalt, anstatt Sie auf eine andere Seite zu bringen. Irgendwie ist das einfach weniger beunruhigend, als an einen neuen Ort mitgenommen zu werden, der sich wie eine Unterbrechung anfühlt.
Durch das Dimmen der Homepage-Grafiken und das Aufrufen eines Modalzeichen-Anmeldeformulars haben Sie das Gefühl, dass der Vorgang schnell und problemlos abläuft und dass Sie in kürzester Zeit wieder surfen können.
Die Ideenlisten
Dieses Formular ist viel länger als die vorherigen Formulare und muss mehrere Felder ausfüllen. Der Inhalt ist jedoch in drei überschaubare Abschnitte unterteilt, sodass er sich nicht wie eine große Form anfühlt.
Ich mag es auch sehr, wie sich das Design wie ein gedrucktes Formular anfühlt. Man kann leicht sehen, wie man in die Antworten schreibt!
Rolle
Ich habe nicht viel zu sagen, außer dass mir die Seite gefällt. Das kleine Kästchen in der Adresse ist eine nette Geste. Dieses Feld prüft auch automatisch Ihren Benutzernamen, um zu sehen, ob er bereits vergeben ist.
ACosmin.com
Die Verwendung von Mustern und Texturen auf dieser Website ist fantastisch. Das Zählen der Rechtecke auf dem E-Mail-Formular macht Spaß, es gibt das Feld selbst und eine Umrandung auf dem Feld, die von einem Punktmuster umgeben ist, das von einer weißen Polsterung umgeben ist. Dann gibt es eine weitere dunklere graue Umrandung und schließlich eine große Box um alles zu halten.
Wenn Sie es beschreiben, würden Sie denken, dass das Ergebnis hektisch und hässlich sein würde, aber es kam für uns großartig.
Gesundheit blühen
Hier gefiel mir die freundliche Mitteilung im Formulartext: "Bleiben wir in Kontakt." Zu oft suchen wir direkt nach etwas Schlichtem und Langweiligem, wenn ein paar Minuten Überlegung uns zu einer viel interessanteren Alternative führen können.
Avanti
In der Avanti-Form dreht sich alles um diesen großen Knopf. Die vergrößerte Größe und mutige Farbauswahl lenken Ihre Aufmerksamkeit direkt darauf, wo Sie eine nette einfache Aussage sehen, die nicht wirklich ein Aufruf zum Handeln ist, sondern stattdessen angibt, was die Schaltfläche aus der Sicht des Benutzers tun wird: "Melden Sie sich an." Dies lässt keinen Zweifel daran, was passiert, wenn die Taste gedrückt wird.
Audio Logic
Audio Logic entschied sich für eine doof illustrierte Figur, die ihre Anmeldeform hochhielt. Es bringt viel Charakter auf die Seite und bringt Sie zum Lächeln, wenn Sie es sehen; eine Technik, die es wert ist, mit Ihren eigenen Charakterabbildungen zu erforschen!
Kulinarische Kultur
Ich liebe die visuelle Verstärkung, die diese Site für die Formularfelder verwendet hat. Diese Art von einfachen Symbolen kann in einem von hundert kostenlosen Symbolsätzen online gefunden werden und fügt dem Formular wirklich eine Menge hinzu. Sie können es fast ausfüllen, ohne den Text zu lesen!
Wir sehen diese Art der Verwendung von Symbolen häufig in der Navigation und es ist ziemlich erfrischend, wenn jemand sie in ein Formular zieht.
Gowalla
Das Gowalla-Formular hat eine interessante Botschaft zu vermitteln: Einfach ist gut. Hier ist eine Website mit einem fantastischen, sofort einsatzbereiten Design, das auf dieselbe Weise für eine App wirbt, aber sie haben sich nicht entschieden, etwas Ungewöhnliches oder Verwirrendes in ihrem Anmeldeformular zu tun.
Stattdessen ist es nur ein einfaches weißes Feld mit schönen großen Feldern. Beachten Sie, wie die ersten beiden Felder in die gleiche Zeile eingefügt wurden, die strikte Ausrichtung jedoch beibehalten wurde. Dies ist eine schöne platzsparende Technik, die Ihr Layout nicht beeinträchtigt.
Büffel
Manchmal kann eine riesige Form unglaublich entmutigend sein. Sie sehen alle diese Felder, die Sie ausfüllen müssen, und Ihr erstes Gefühl besteht darin, das Browserfenster zu schließen und sie zu entfernen.
Wie die Website unten zeigt, kann es manchmal hilfreich sein, diese Felder in mehrere Schritte aufzuteilen. Sie sehen nur ein kleines Stück auf einmal, so dass Sie nicht entmutigt werden und über die Breadcrumbs oben auf Ihren Fortschritt achten können.
Kontainer
Ich hasse es, zwanzig Formulare auszufüllen und auf "Abschicken" zu klicken, nur um festzustellen, dass ich irgendwo einen Fehler gemacht habe. Dann muss ich auf der Seite nach winzigen Sternchen suchen, um anzuzeigen, wo ich mich geirrt habe. Es ist auch nicht nur ich, jeder auf der Welt hasst das! Egal, ob Sie drei oder fünfzig Felder haben, Sie werden die Benutzererfahrung unendlich verbessern, indem Sie intelligentes Feedback auf Live-Basis geben.
Wir sehen dies im untenstehenden Formular Kontain.Ich habe ein Passwort eingegeben, das nur drei Buchstaben lang war, und es wurde ein großes Schild mit der Meldung angezeigt, dass ich etwas falsch gemacht habe. Dasselbe passiert, wenn Sie eine ungültige E-Mail-Adresse eingeben. Der Schlüssel ist hier nicht nur Feedback, sondern klar sichtbares und leicht verständliches Feedback, das der Benutzer vor dem Drücken der Schaltfläche "Abschicken" korrigieren kann.
Zzz
Gowalla hat eine lustige Seite und ein langweiliges Anmeldeformular, das seine Vorzüge hat. Es gibt jedoch keine unzerstörbare Regel, dass Sie auch mit Ihren Formularen keinen Spaß haben können.
Schauen Sie sich das untenstehende Formular an, nicht nur die Grafiken sind verrückt, sondern auch die Formularfelder selbst werden leicht gedreht, um den Look zu verbessern. Dies ist definitiv in vielen beruflichen Situationen nicht angebracht, aber auf einer mit fliegenden Schafen gefüllten Website, die ein Getränk macht, das Sie schläfrig macht, funktioniert es perfekt.
Vimeo
Die Leute von Vimeo beschlossen, eine große Seite einer kleinen Form zu widmen. Sie steckten es oben rechts auf und füllten den Rest der Seite mit einer illustrierten Insel und einigen animierten schwebenden Wolken.
Wie im vorherigen Beispiel ist dies definitiv nicht für alle Situationen geeignet, aber es funktioniert gut und macht eine ziemlich lustige Implementierung einer ansonsten langweiligen Form.
Tee Runde
Dieses hier ist ein interessantes Denkmal. Die? Melden Sie sich an? Die Schaltfläche rechts wurde vertikal gestreckt, um der Höhe der beiden Felder zu entsprechen.
Wir sind es nicht gewohnt, quadratische Schaltflächen im Web zu drücken, also müssen Sie vorsichtig sein, wenn Sie so etwas implementieren, aber mir gefällt, was sie hier gemacht haben.
13 Creative
Wenn Sie eine hochgestylte Site haben, die einem klaren visuellen Thema folgt, kann das Einfügen eines Formulars mit Standardstil die Integrität Ihres gesamten Themas beeinträchtigen.
Stattdessen müssen Sie eine Balance zwischen dem Hervorheben Ihres Formularbereichs und dem Übereinstimmen mit dem allgemeinen Thema der Website finden. Ich denke, das 13-Creative-Formular unten ist ein perfektes Beispiel für diese Technik in Aktion.
Obama
Obamas Form verwendet dieselbe Technik wie das Avanti-Beispiel oben. Beachten Sie, wie sehr dieser rote Knopf auf der ansonsten sehr blauen Seite hervorsticht. Der Schaltflächentext ist diesmal eine klare Handlungsaufforderung. Weitere Informationen. Ob Sie seine Politik lieben oder hassen, es ist definitiv der Fall, dass Obama bisher die beste visuelle Marke eines amerikanischen Präsidenten hatte, ein Trend, von dem ich annehme, dass er einen Standard gesetzt hat, der für zukünftige Inhaber der Position gelten wird.
Holen Sie sich Brewin '
Dieses letzte Beispiel hat Vor- und Nachteile. Insgesamt ist die Seite super attraktiv. Es fühlt sich jedoch wie eine Menge Inhalt für eine Zentrumsausrichtung an, die für etwas mehr als ein paar Zeilen ziemlich schwach ist.
Die Lektion hier ist, dass manchmal die einfachsten Projekte am schwierigsten zu entwerfen sind. Wenn es eine Menge Inhalte gibt, haben Sie viel zu tun und können starke, klare Ausrichtungen erstellen. Mit etwas Inhalt, der jedoch nicht annähernd zum Ausfüllen der Seite führen kann, müssen Sie oft eine Weile kämpfen, bevor Sie die ideale Lösung finden.
Zeig uns Deine!
Jedes der 20 oben genannten Beispiele für Anmeldeformulare kann Ihnen etwas darüber vermitteln, wie Sie Ihre eigenen erstellen können. Hinterlassen Sie einen Kommentar mit einem Link zu einigen Formularen, die Sie erstellt haben. Mit welchen Techniken haben Sie die Form sowohl optisch als auch funktional verstärkt?