Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Nutzerführung

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sonnenseiten: Nutzerführung

Formulare und Passwörter gehören zum Internet, wie die Maus zum Computer. Und nicht nur Internet-Laien sind regelmäßig verunsichert, was nun wo auszufüllen ist. Alexander Hahn zeigt an einem Beispiel, wie ein durchdachtes Anmeldeformular sogar Spaß bereiten könnte.

Formulare sind selten sexy, meist eher eine Mischung aus schnöden Textfeldern und ein paar Erklärungen mit wichtigen Fußnoten-Sternchen. Beim Klick auf den Absende-Button bekommt man außerdem nahezu immer eine Warnung, man hätte etwas unvollständig aufgefüllt. Wer mag sowas?

Es geht auch anders: Das Anmelde-Formular von Pownce beweist es!

Screenshot: Formulartipp auf pownce.com

Pownce-Icons: vergeben oder nichtSchon beim Eintippen gibt ein kleines, per Javascript eingeblendetes Symbol neben dem Textfeld unmissverständlich zu verstehen, ob der gewünschte Name schon vergeben ist, oder nicht. Ein kleines simples Detail, aber genau auf die kommt es hier an.

Pownce: TooltipBeim Klick in das jeweilige Textfeld wird ein – zuvor mit einem simplen display: none; versteckter – Tooltip per display: block; eingeblendet. Diese einfache Technik versorgt hier den User schon während des Tippens mit liebevoll formulierten Texten. All dies ohne dabei übers Ziel hinaus zu schießen oder an Glaubwürdigkeit zu verlieren.

Nicht nur internetaffine Menschen werden Formulare selten im Gedächtnis behalten, bei diesem durch einfaches CSS und simples Javascript angereicherten Exemplar mag es anders sein, zumindest geht es mir so, und ich werde in Zukunft zweimal über Funktionen nachdenken, die ohne viel Aufwand eine irrsinnige Bereicherung darstellen können.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Moritz Gießmann
am 23.07.2008 - 08:23

Wirklich schick, aber ich denke die Erklärung zu "gender" hätte man sich sparen können.

Permanenter Link

Damian
am 23.07.2008 - 09:02

Solche Formulare sollten all die Portale nutzen, die ihre Nutzerzahl erhöhen wollen. Ich habe sofort eine Anmeldung sausen lassen, weil ständig Fehler oder Warnungen erschienen. Bis man z.b. einen freien Usernamen gefunden hat, können manchmal wirklich minuten vergehen.

gruß
damian

Permanenter Link

Martin Kliehm
am 23.07.2008 - 10:35

Sehr schön gemacht. Die AJAX-Validierung der Felder gibt es z.B. auch auf Remember the Milk. Das i-Tüpfelchen wäre jetzt noch ein bißchen ARIA-Zauberpulver in Form von aria-required und aria-invalid. ;)

Permanenter Link

Ole
am 23.07.2008 - 12:07

Ist schon sehr gut gelöst. Allerdings auch noch verbesserungswürdig:

Man könnte auch bei der E-Mail Adresse und bei dem Postalcode schon während der Eingabe abfragen, ob diese valide ist.

Aber wie gesagt, ansonsten sehr schön.

Grüße, OLE

Permanenter Link

Michael
am 15.09.2008 - 13:21

Na das ist doch mal Usability. Jeder Schritt wird vorgegeben und der User kann nur nach weitermachen und absenden. Für Portale mit vielen Usern unabdinglich. Gefällt mir.
Gruss Michael

Permanenter Link

Die Kommentare sind geschlossen.