Auf fast jeder Webseite sind sie zu finden: Formulare. In dieser und der nächsten Technikwürze wollen Sylvia Egger, Sascha Postner und Daniel Jagszent das Thema von allen Seiten beleuchten. In dieser Folge ist der Entwurf eines Formulars dran, Gedanken zur Barrierefreiheit, HTML5 und WAI-ARIA folgen in der nächsten Episode.

Höre Technikwürze auf SoundCloud: Diese Folge | Alle Folgen

Planung

  • Wichtiger, oft übergangener Punkt
  • Ziel des Formulars feststellen
  • Wie werden die Daten im Unternehmen verarbeitet?
  • Zugriff und Prozess des Formulars

Entwurf

  • Wireframing, Grid
  • Anordnung der Elemente
  • Farbe und Typographie
  • Beschriftung der Felder
  • Anleitungen, Fehlermeldungen und Hinweistexte

Erscheinungsbild

  • Formulare sind manchmal tricky mit CSS zu stylen (Radio, Checkboxen, etc.) Nichts destso trotz: Es geht!
  • Bestimmte browsereigene Styles lassen sich überschreiben (z.B. border einer textarea) andere aber nicht (@select@s, input type=checkbox oder input type=radio)
  • Ein „Problem“: es gibt viele verschiedene Eingabeelemente, die alle sinnvoll in das Design passen sollen.
  • Tiefe durch Verläufe in Feldern und viele Gestaltungsmöglichkeiten (z.B. Icons in Feldern)

Progressive Verbesserung (progressiv enhancement)

  • Mit JavaScript (jQuery etc.) Funktionalität hinzufügen. Muss aber natürlich auch ohne funktioneren!
  • Mit JavaScript lassen die Eingabeelemente stylen, die eigentlich nicht per CSS stylebar sind. Selects, Radiobuttons, Checkboxen.
  • Einbindung von optionalen/sich ausschließenden Abschnitten.
  • Datums- oder Farbwähler
  • Passwortssicherheitsanzeige (password strength indicator)
  • Autovervollständigung (autocomplete) für Suchfelder z.B.
  • Browserseitige Validierung (on-the-fly)

Tests (Usability tests)

  • Tests mit Benutzern (5 reichen meist) bringt viel!
  • Am besten so früh wie möglich testen (Planungsphase/Entwurfsphase). Je früher Probleme entdeckt werden destso billiger ist es, sie zu beheben.

Lesetipps

  • Luke Wroblewski: Web Form Design, Rosenfeld Media 2008 (Webseite, Amazon – Buch als PDF und/oder Paperback erhältlich)
  • Caroline Jarrett, Gerry Gaffney: Forms that work, Morgan Kaufmann 2008 (Webseite, Bezugsquellen, Amazon)
  • Derek Featherstone, Tim Connell, Jina Bolton: Fancy Form Design, Sitepoint 2009 (Webseite – Buch als PDF und/oder Paperback erhältlich)

Gewinnspiel

Wir verlosen zwei Exemplare des Buchs Forms that work! (Einmal im Originalzustand und einmal verbessert) Alles was Du tun musst, um an der Verlosung teilzunehmen, ist uns hier ein Kommentar zu hinterlassen, der ein Link zu einer guten Quelle im Netz enthält. Sei es ein Artikel, der eines der Themen genauer beleuchtet oder ein Formular, das Deiner Meinung nach gut gemacht ist: alles ist willkommen!

Bitte beachte: Es kann sein, dass unser Anti-Spam-System dein Kommentar fälschlicherweise als Spam klassifiziert, wenn er mehrere Links enthält. Wir schalten Dein Kommentar dann manuell frei, er wird also nicht direkt erscheinen.
Der Rechtsweg ist ausgeschlossen. Technikwürzemoderatoren und ihre Angehörigen können leider nicht an der Verlosung teilnehmen.

Tags: , , ,

Dieser Beitrag wurde am Montag, 21. Dezember 2009 um 08:21 Uhr in der Kategorie Podcast, Technikwürze Total veröffentlicht.
Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner Seite aus senden.

Kommentare

  • Jens Grochtdreis
    am 21. Dezember 2009, 08:55 Uhr

    Tomas Caspers hat 2007 einen umfangreichen, detailreichen und sehr lehrreichen Artikel bei efa veröffentlicht: http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/

    Diesen Artikel konsultiere ich immer wieder mal. Sehr empfehlenswert!

  • Hicore
    am 21. Dezember 2009, 11:26 Uhr

    Fürs entwickeln von Formularen mit CSS gibt es einen interessanten Artikel bei Smashingmagazine http://bit.ly/5loIDQ

  • Leonid Lezner
    am 21. Dezember 2009, 11:28 Uhr

    Hallo!

    Furchtbar finde ich die mit JavaScript in die Felder gesetzten Tipps “Suche…” o.ä. Ich bin ein Freund von Drag&Drop und ziehe manchmal Wörter einfach von der Seite in das Suchfeld. Schlecht gemachte Skripte lassen diese Tipps stehen und mein Suchbegriff besteht aus “Suche…” und dem herübergezogenem Wort.

    Was Shops angeht, so sind die Formulare sehr schlecht, was sich einfach auf die starre Struktur des einen oder des anderen Shopsystems zurückführen lässt. Die Entwickler bauen oft HTML in den Kern ein und lassen dem Deisgner keine Flexibilität.

    Und mein absolutes Hass-Objekt sind die Captchas, als Bremser jedes Formulars. Manche sind so trickreich programmiert, dass weder die Spam-Bots noch die Menschen sie lesen können..

  • Peter
    am 21. Dezember 2009, 13:18 Uhr

    Auch von mir ein paar Links.

    Design und Formulare: http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/

    Eye Tracking Studien zu Formulare: http://www.cxpartners.co.uk/thoughts/web_forms_design_guidelines_an_eyetracking_study.htm

    @Jens Grochtdreis
    Ich verweise ebenfalls wie Jens auf den Artikel bei Einfach für Alle. Sehr umfangreich und fundiert, wenn es um Formulare geht. http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/

    Kritik zur Sendung: Mir fehlen ein paar Links, die aus eurer Sicht lesenswert sind.

  • Fladi
    am 21. Dezember 2009, 14:07 Uhr

    File-Upload (input=file) zu stylen ist besonders tricky. Mir hat hier http://www.appelsiini.net/projects/filestyle sehr geholfen.

  • Marcel
    am 21. Dezember 2009, 14:14 Uhr

    @Leonid: Da meines Wissens nach der focus auch beim Drag & Drop in jedem Browser vor dem Einfügen kommt, ist dies mit JS sehr leicht lösbar. Natürlich gebe ich dir recht, dass wenn dies nicht funktioniert die funktion sehr nervig ist. Aus Sicht des Durchschnittsnutzers überwiegen jedoch die Vorteile, da es keinen einfacheren Weg gibt dem Nutzer zu kommunizieren, welche Funktionen die Suchfunktion alles abdecken kann.

  • Sascha Postner
    am 21. Dezember 2009, 14:21 Uhr

    Was wir gar nicht angesprochen haben waren in der Tat “Drag and Drop” Elemente in Formularen. In letzter Zeit entdecke ich immer wieder so Spielereien wie “Zieh dir die gewünschten Produkte in den Warenkorb”. Habe da noch keine wirklichen Praxiserfahrungen mit gemacht, aber selbst mir erschließt sich das nicht immer gleich… Wirkt eben eher wie Spielerei. (F: Warum machst du das? A: Weil’s geht!)

  • Marcel
    am 21. Dezember 2009, 14:33 Uhr

    @Sascha: Das wiederum ist ja nochmal ein ganz anderes Drag & Drop als eben angesprochen.

    Wenn man nicht einen extrem designorientierten Shop baut, bei dem die Shoppingexperience schon fast den eigentlichen Mehrwert darstellt, sollte man m.E.n. davon die Finger lassen. Kaum ein Endkunde kommt damit klar, kaum jemand hat jemals im Web mit Drag & Drop Erfahrungen gemacht.

    Aber wir entfernen uns von den Formularen ;-)

  • Leonid Lezner
    am 21. Dezember 2009, 14:51 Uhr

    Was noch niemand angesprochen hat, sind textlastige Elemente, bzw. das Element: Textarea. Selten denkt der Designer daran, dass der Besucher mehr als einen Satz schreibt und macht das Feld klein. 5 Zeilen, kaum breiter als die übrigen Elemente. Wenn man dann den Text eintippt, dann scrollt man ständig, um das ganze Geschriebene zu überblicken.

    Was soll man mit dem 24”-Monitor anfangen, wenn das Eingabefeld für den Text kaum über 150 px x 400 px geht?

    Auch wenn ich nicht viel Schreibe, möchte ich den Text auf einem Blick sehen (von einem Kommentar gesprochen).

    Gut dass, Safari hilft und die Textarea vergrößern lässt. Sonst wäre ich mit diesem Feld hier schon sehr unglücklich :)

  • Frank
    am 21. Dezember 2009, 15:22 Uhr

    Blogbeitrag „Formulare richtig gestalten“: http://usability-now.com/usability/formulare-richtig-gestalten/

    (Es wäre hilfreich, wenn ihr im Kommentarformular schreiben würdet, wie man Links schreiben soll bzw. welche Elemente man benutzen kann. Gutes Beispiel bei den Webkrauts.)

  • macx
    am 21. Dezember 2009, 15:32 Uhr

    @Frank
    Du kannst Textile als Formatierung benutzen, den Hinweis darauf bauen wir noch rein, danke!

  • Sylvia Egger
    am 22. Dezember 2009, 09:19 Uhr

    @Kritik – zu wenige Links zum Thema

    In dieser Sendung haben wir uns tatsächlich nur auf die 3 genannten Bücher bezogen – großteils, weil es ja interessant ist, dass genau zum Formularthema nach und nach in den letzten beiden Jahren Bücher erschienen sind.

    In Folge 2 wird es mehr Link zu Semantik geben, vor allem auch auf den von Jens genannten Artikel von Einfach für Alle, der trotz Alterserscheinungen noch gut lesbar geblieben ist.

  • macx
    am 22. Dezember 2009, 09:44 Uhr

    Die in der Sendung angesprochene Position des Absendebuttons in einem Formular kann man so oder so sehen.

    Auf einen Seite macht eine Ausrichtung links Sinn, wenn wir vom Lesefluss reden. Auf der anderen Seite predigen uns die Betriebssysteme schon immer, dass ein (Abschluss)Button immer rechts unten stehen soll.
    Allerdings sollte man in der Überlegung berücksichtigen, dass die Betriebssysteminformationen immer Dialoge und meist nicht eine ganze Seite sind.

    Was erwartet der Benutzer? Kann er unterscheiden zwischen dem Betriebssystem und einer Webseite, oder sollte dies vereinheitlicht werden?

  • Reinhard Söllradl
    am 22. Dezember 2009, 13:22 Uhr

    Aktueller Artikel bei dzineblog.com 30 Impressive Ways to Design Sign-Up Page/Form

  • Lippe
    am 22. Dezember 2009, 15:35 Uhr

    Ich würde mich sehr über eins der beiden Bücher freuen (egal ob schon korrigiert oder noch nicht)! Und passend zu eurer Sendung werfe ich einfach mal als Ressource die Diplomarbeit eines Kommilitonen ins Spiel:
    Barrierefreie Live Validierung von Formularen mit jQuery

  • Schepp
    am 22. Dezember 2009, 20:53 Uhr

    Eure Fragestellung, wo man denn den Absenden-Knopf bestenfalls platzieren sollte, erinnerte mich an die Tatsache, dass ja auch ein Dilemma bei der Anordnung von OK/Abbrechen-Knöpfen gibt – eines, das durch divergierende Interface-Guidelines von Microsoft einerseits und Apple anderseits hervorgerufen wird: Microsoft hätte gerne “OK” (oder die bestätigende Handlung) links und “Abbrechen” rechts, Apple umgekehrt. Jakob Nielsen meint dazu, es sei irgendwo alles herzlich Latte und wie’n Sack Reis in China, aber wenn man denn unbedingt eine Entscheidung auf empirisch erhobenen Daten fällen wollte, dass man sich dann eben an der Mehrheit der Besucher-Betriebsysteme orientieren möge.

  • HDValentin
    am 23. Dezember 2009, 05:58 Uhr

    Vielen Dank für eure Sendung, die ich mit Genuss gehört habe.

    Als Anregung habe ich die folgenden Formulare: – http://is.gd/5ya38 – http://is.gd/5ya6t – http://is.gd/5ya8F
    Hat jemand Tipps was man noch verbessern könnte?

  • Marcel
    am 23. Dezember 2009, 10:37 Uhr

    Das Element, dass den Nutzer weiter bringt, wie eben der besagte Absendebutton, gehört m.E.n. immer auf die rechte Seite. Denn bei fast allem was wir tun, kommen wir von links und gehen nach rechts. Rechts geht es also immer weiter.

    Wir blättern von Links nach recht (auch digital), wir lesen und schreiben von links nach rechts, auch bei 2D Jump ‘n Runs laufen wir immer nach rechts. Die Mehrzahl realer Bedienelemente ist auf der rechten Seite (wenn auch eher aus ergonomischen Gründen) und selbst bei dem Pro7 Introtrenner kommt der nächste Spot, wer hätte es gedacht, rechts. Oder denkt an die Steuerung eines CD-/DVD-Players: Auch hier spulen wir rechts weiter wohingegen es links immer zurück geht. In unserer Welt kommen wir also meist rechts weiter und diese Analogie hat sich sehr gut verankert. Aus guten Grund, denn wer nicht eh schon in Quelltext denkt, wenn er eine Website sieht, braucht viele dieser Analogien um etwas solch Abstraktes wie eine Internetseite überhaupt verarbeiten zu können.

  • Theo
    am 24. Dezember 2009, 08:35 Uhr

    Danke für diese Total-Sendung.
    Ich bin auch der Meinung, dass ein Formular auf einer Website sehr zentral ist, oft aber stiefmütterlich behandelt wird (auch bei uns). Das Formular stellt eine wichtige Schnittstelle zum Benutzer der Site dar. Also hat es auch entsprechende Aufmerksamkeit verdient.
    Ich habe folgende Links aus meinem Diigo-Verzeichnis herausgesucht:

  • Mirko
    am 25. Dezember 2009, 18:18 Uhr

    Ein Formular, dass mich kürzlich positiv überrascht hat, ist das Anmeldeformular von eprimo (eprimo.de durchklicken, ohne Session leider nicht direkt verlinkbar, Anm. d. Red.) mit u.a. übersichtlicher Struktur, Anreicherungen mit sinnvollen Tooltips, die sich positiv auf die besagten sozialen Kosten auswirken (“Warum brauchen wir das?:...”) und der Möglichkeit, die bisherigen Eingaben zwischenzuspeichern.
    Ein Lob an die Entwicklern von triplesense.

    Btw: ich finde nicht, dass man für die Konzeptphase eines Formulardesigns unbedingt noch ein passendes Buzzword benötigt… ;)

    Ansonsten anregende Sendung, wie bei so vielen Technikwürzen.

  • Theo
    am 27. Dezember 2009, 19:59 Uhr

    ... meine Links scheinen nicht “übersetzt” worden zu sein.
    Hier mein zweiter Versuch:

    Artikel über Labelplatzierung >> http://www.uie.com/articles/web_forms

    Guter Artikel über Formulare und ihre Elemente >> http://www.manuel-bieh.de/blog//schone-formulare-in-xhtmlcss

    Formulare erstellen >> http://wufoo.com/examples/

    Ich hoffe, es hat nun geklappt.

    Grüsse aus der Schweiz
    Theo

  • nikosch
    am 29. Dezember 2009, 20:18 Uhr

    Genau, die links > rechts -Orientierung der westlichen Welt würde ich jetzt auch als hinreichendes Kriterium für „Submit rechts“ sehen.
    Wenn nicht, sähe ich den Elementfluß zumindest nur dann gegeben, wenn der Button linksbündig zu den Eingabefeldern, nicht den Labels stünde.
    Für linksbündige Labels würde ich – meinetwegen auch entgegen gängigen Eye-Tracking-Studien – ins Feld führen: – bündige Schrift (also den Zeilenanfang) findet das Auge leichter. Die Argumentation des linearen Flusses wurde ja erwähnt und niemand käme wohl auf die Idee, bspw. eine Bullet-Liste rechtbündig anzuordnen.

    Btw. ist Eure Kommentarbox auch viel zu klein ;)

  • Sascha Postner
    am 30. Dezember 2009, 15:38 Uhr

    Die Verlosung ist hiermit beendet. Die Gewinner stehen fest: Hicore und Fladi.

    Herzlichen Glückwunsch! :-)

  • Hicore
    am 5. Januar 2010, 00:53 Uhr

    Nochmals vielen Dank fürs Verlosen. Freu mich schon aufs Buch.

    der Heiko

  • Thomas
    am 8. Januar 2010, 19:17 Uhr

    Ich habe zwar kein tolles Formulardesign im Angebot, aber die Diskussion um die Social Costs haben mich doch etwas grübeln lassen.
    Als sehr positiv empfinde ich beispielsweise das System der Elekronic Sports League (esl.eu). Dort meldet man sich nur mit Nickname und E-Mail an, kann aber in einem Profil weitere Daten ergänzen (Steckbriefmäßig).
    Nur wer “trusted” werden möchte, der muss weitere Daten angeben:
    Trust Level 1: Normale Registration, Validierung via Postweg
    Trust Level 2: Zusätzliche Angabe der Personalausweisnummer (nur Check, keine Speicherung)
    Trust Level 3: Personalausweis/Reisepass Kopie sowie das unterschriebene Anschreiben zur Bestätigung der Regeln einschicken
    Trust Level 4: ESL VISA Card Besitzer

    Das finde ich insgesamt sehr gut gelungen und mit den entsprechenden Datenschutzbestimmungen auch fair und übersichtlich.
    Allerdings wird man bei der registrierung nicht auf die weiteren Möglichkeiten aufmerksam gemacht ;-)

    ==
    Ansonsten fände ich gerade das Thema der persönlichen Daten im Internet für eine weitere Sendung gut geeignet.
    Von interner Speicherung über Personensuche oder soziale Netzwerke.
    Je nachdem mit Möglichkeiten zur Sicherung der Daten oder auch wissentlichen Aufbereitung durch Metaformate o.ä.

    Ansonsten weiter so… ich bin begeistert von dem Podcast :-D

  • Fldai
    am 11. Januar 2010, 12:00 Uhr

    Auch von mir nochmal vielen Dank. Habe leider erst kurz reinlesen können, aber macht einen guten Eindruck. Danke dafür!

Und was hast du zum Thema zu sagen?

Fülle bitte alle mit *-gekennzeichneten Felder aus.

Warning: Undefined variable $req in /var/www/vhosts/technikwuerze.de/httpdocs/blogmin/wp-content/themes/technikwuerze2/single.php on line 77
/>

Du darfst Textile verwenden, um deinen Beitrag auszuzeichen.