Formulare total 1 (Formulardesign)

Kommentare (45)

• Jens Grochtdreis

  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

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

• Leonid Lezner

  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..

  • Marcel

    @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.

• Peter

  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

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

• Sascha Postner

  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

    @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

  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

  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

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

• Sylvia Egger

  @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

  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

  Aktueller Artikel bei dzineblog.com "30 Impressive Ways to Design Sign-Up Page/Form":http://bit.ly/7yA8po

• Lippe

  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":http://www.felixnagel.com/blog/artikel/2009/11/16/barrierefreie-live-validierung-von-formularen-mit-jquery/

• Schepp

  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":http://www.useit.com/alertbox/ok-cancel.html, 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

  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

  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

  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

  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

  ... 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

  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

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

  Herzlichen Glückwunsch! :-)

• Hicore

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

  der Heiko

• Thomas

  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

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