Formulare total 1 (Formulardesign) Technikwürze 157
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.
Transkript der Folge
-
Sascha Herzlich willkommen zu einer neuen Folge Technikwürze. Heute die Folge hundert siebenundfünfzig. Mit mir im virtuellen Skype-Studio sind diesmal die Silvia Egger.
-
Sylvia Hallo.
-
Sascha Und der Daniel Jack sind.
-
Daniel Hallo.
-
Sascha Und es wird heute gehen um Formulardesign und Formularentwicklung.
-
Einspieler Herzlich willkommen zu Technikwürze, eurem Design- und Webstandards-Podcast.
-
Sascha Ja, hallo ihr beiden. Schön, dass ihr ins virtuelle Studio gefunden habt und wir heute zusammen diese, hoffentlich spannende Folge über Formulare, über Webformulare aufnehmen können. An alle Zuhörer da draußen kann ich schon mal vorweg verraten, dass das quasi der erste Teil eines kleinen Formular-Specials, einer Doppelfolge Formulare total in Technikwürze sein wird.
Wir werden uns in dieser Folge etwas quasi mit der Entwicklung und dem Design von, Formularen auseinandersetzen und dann in der nächsten Folge in der Technikwürze hundertachtundfünfzig mit, mit dem Problem von barrierefreien Formularen oder der Zugänglichkeit von Verla, Formularen auseinandersetzen. Ja, wir steigen gleich ins Thema ein. Unser Problem ist natürlich ein bisschen, dass wir, wenn wir über Formulare reden, idealerweise visuelle Beispiele zeigen wollen können würden.
Das geht natürlich bei einem Audio-Podcast relativ schlecht. Deshalb haben wir uns entschlossen, vor allen Dingen ein bisschen, uns mit der Entwicklung und mit den Punkten zu beschäftigen, die man rund um Formular Design beachten sollte. Und wir haben das ein bisschen aufgeteilt, werden ein bisschen über die Planung sprechen, dann über den Entwurf.
Dann, setzen wir uns ein bisschen mit dem Erscheinungsbild tatsächlich auseinander, hoffen, dass das auch ohne die visuellen Beispiele relativ gut geht. Sprechen dann über progressive Verbesserungen, Progressive Enhancement und, ganz zum Schluss noch mal das ganz Wichtige, nämlich die Tests, die Usability-Tests. Ja, dann der erste, der erste Abschnitt, da geht’s ein bisschen um die Planung. Ein, sehr wichtiger und oft übergangener Punkt.
Wir, finden, dass eine, ein erster Punkt quasi ist, sehr wichtig, sich mit dem Ziel des Formulars auseinanderzusetzen. Es gibt ja ganz unterschiedliche, Gründe, warum man Formulare auf Webseiten einsetzt. Und, da, versuche ich jetzt mal, den Ball an euch ein bisschen rüberzuspielen. Wie, wie ist es sinnvoll, quasi, in die Planungsphase, für Formulare einzusteigen?
-
Daniel Wir beide gleichzeitig antworten, oder?
-
Sascha Vielleicht machen-- gehen wir, gehen wir einer nach dem anderen vor. Ladies first.
-
Sylvia Ach so, ja. Das ist ja immer... Vielleicht, ich meine, wir wollen das ohnehin mehr so als, Roundtable eher gestalten, ne? Du hast es ja schon erwähnt, dass es ein bisschen schwierig ist, das alles zu visualisieren. Ich denke, vielleicht sollten wir auch kurz sagen, warum wir überhaupt auf das Thema gekommen sind, weil das ist ja auch irgendwie ganz interessant.
Ich denk, es ist halt jetzt, es sind jetzt in rascher Folge Bücher erschienen zu dem Thema und, ja, dann dachte ich mir, jetzt sollte man vielleicht doch mal, langsam und du hast das Thema ohnehin schon lang, irgendwie vorgehabt, Sascha, ne. Und, ja, dann haben wir gesagt: „Gut, dann gucken wir da einfach mal rein und schauen, ob wir da eine Struktur kriegen." Mm, ich denke, mit der Planung von Formularen, hab ich sozusagen in meiner normalen Arbeitsweise weniger zu tun.
Ich krieg quasi schon, die festen Vorgaben, welche Formularfelder, zu machen sind und setze das dann um. Oder muss halt mit der Programmierung drüber sprechen, wenn etwas schwierig ist. Tja, also wie nennt man das überhaupt? Planning? Oder, oder wie sagt man da überhaupt dazu? Wie heißt diese Stufe eigentlich?
-
Sascha Ja, das ist, ich meine, wir, wir tun uns ja alle immer ein bisschen schwier, schwer damit, quasi so, wie soll ich sagen, Standards oder kommunikative Standards zu finden, wenn’s um Webdesign geht. Und ganz schlimm wird’s ja dann, wenn man, quasi mit tatsächlich englischen, Agenturen oder so zusammenarbeitet. Hm, ich glaube, jetzt wird irgendwie gerade die Verbindung ein bisschen schlecht. Kannst du noch mal was sagen, Silvia? Du, irgendwie, du brummst gerade ein bisschen.
-
Sylvia Ich brumme? Eigentlich nicht.
-
Sascha Nee, jetzt, jetzt nicht mehr. Ja, irgendwie, war da irgendwie so eine kleine Brummstreife.
-
Sylvia Vielleicht weil ich ein, ein Buch in die Hand genommen hab.
-
Sascha Ah ja, das, Buch. Genau, das kann natürlich sein.
-
Sylvia Ich bin entdeckt worden.
-
Sascha Ey, man muss dazu sagen, Silvia hat ein neues Headset, wofür wir dich nur beglückwünschen können, aber, es hat gerade etwas gebrummt. Das kommt vor.
-
Sylvia Ich bin ganz-
-
Sascha Also genau, Buch ganz weit weg vom Körper halten.
-
Sylvia Mhm. Ja.
-
Sascha Also es fängt ja schon damit an, dass man mittlerweile Formulare nicht mal immer mehr als Formulare erkennt, denn letztendlich gibt’s mittlerweile so viele unterschiedliche, Eingabemöglichkeiten und Erweiterungen und man, man braucht halt Formulare nichtsdestotrotz, in, in jeder Situation, wo man halt ein bisschen Interaktivität auf ’ner Webseite oder, oder, oder User Input auf ’ner Webseite zur Verfügung stellen will. Das heißt, Formulare sind einfach, überall und ziemlich wichtig.
Und, tatsächlich wird dieser Planungspunkt sehr gerne, weggelassen, weil man so im Kopf hat: Na ja, ich weiß ja ungefähr, wie ein Formular funktioniert, wie das auszusehen hat. Ich weiß, wie ein Shopping Cart geht. Ja, und das, ist meines Erachtens tatsächlich ein, ein großes Problem und wir hatten halt vor allen Dingen in den Büchern, die du angesprochen hast, ja, immer wieder auch Hinweise darauf, dass Leute oder dass, dass User einfach ein Problem haben, ihre Daten in Formulare einzugeben.
Und zwar gar nicht mal unbedingt technischer Natur, sondern halt, das, was, in einem Buch so schön soziale Kosten genannt worden sind. Also gebe ich wirklich mein Geburtsdatum ein? Wie sicher sind meine Kreditkartendaten, wenn ich das eingebe? Möchte ich zum Beispiel in, in einer Umfrage oder so, möchte ich da wirklich meine, mein, mein, mein Jahresgehalt eingeben? Das wird-
-
Sylvia Ich fand das heute zum Beispiel, also aktuelles Beispiel, da musste ich gerade an die Sendung denken. Ich habe heute irgendwie, bei O'Reilly, eine Video Session, so eine Art Webinar gekauft, ne. Und da muss man natürlich am Schluss, um das zu kaufen, auch ein Formular ausfüllen, aber das ist ja im Grunde ein Download. Und da musste man aber wirklich seine Adresse und alles ausfüllen.
Da dachte ich mir: Okay, also die müssen eigentlich jetzt nicht wissen, wo ich wohne, weil ich lade das nur runter, ne. Also da wäre auch so eine, ich denke, das ist eben die Frage, die man sich am Anfang stellen muss: Welche Daten braucht man unbedingt und auf welche kann man schlicht verzichten? Ich denke auch, dass die ganzen Kontaktformulare meistens einfach überladen sind, ja.
-
Sascha Absolut.
-
Sylvia Also wenn, dann soll man es, ich glaube, es wurde immer darauf hingewiesen, wenn, dann soll man das in Steps machen, ja. Oder irgendwann später, wenn man sich dann eingeloggt hat, dann kann man von mir aus noch irgendwelche anderen Dinge abfordern von den Leuten. Aber die meisten Daten brauchen die Leute überhaupt wahrscheinlich auch nicht oder aus welchen Zwecken sie das sammeln, ist ja auch sowieso meistens immer dann im Dunkeln. Ja.
Ja, also es bläht im Grunde nur Datenbanken auf und, könnte man echt... Ich denke, das ist die Frage, ne: Was brauche ich und warum brauche, was will ich von den Leuten eigentlich, ne? Und kann ich sie sofort, wenn sie auf meiner Webseite sind, mit einem Formular konfrontieren?
-
Sascha Ja, ganz klar.
-
Sylvia Und jetzt sofort, ein Feld ausfüllen.
-
Sascha Das, das ist auf jeden Fall so und, du hast es gerade schon gesagt, also ein ganz, wichtiger Effekt. Ich kenne das, jetzt so aus einer, aus der großen Firma, in der ich arbeite, dass tatsächlich ge-gerne Daten ja auch erhoben werden, die teilweise auch Sinn machen würden, ne, also die man vielleicht für Marketingzwecke irgendwie nutzen könnte oder die auch man auch auswerten könnte, aber dass tatsächlich dies in vielen Fällen gar nicht gemacht wird.
Also aus, aus reiner, aus reinem,, nicht aus reinem Desinteresse, sondern weil einfach der Workload sowieso schon zu groß ist, um jetzt noch auszuwerten oder vielleicht dann tatsächlich gerade das Beispiel Geburtsdatum, irgendwelche,, in Geburtstagskarten zu verschicken oder solche Dinge, ja. Und da ist halt auf jeden Fall wichtig, tatsächlich zu schauen: Was brauche ich wirklich?
Also, und sich dann zum Beispiel auch, wenn man jetzt in einem größeren Unternehmen Formulare designt, hinzusetzen und zu sagen: „Okay, wer sind die Stakeholder?
Also für, um wen geht es hier eigentlich?" Also zum Beispiel die, in dem Fall, die, wird sich vielleicht die Marketing, Abteilung von O'Reilly da schon, drüber freuen, dass sie die Adressen haben, aber wenn die zum Beispiel sagen: „Na ja, das interessiert uns eigentlich in dem Fall gar nicht, weil die Leute schreiben da sowieso ziemlich viel Quatsch rein", dann kann man das auch gleich weglassen.
-
Sylvia Ja, vor allem, wenn O'Reilly, das ist ja dann eher die internationale Gruppe gewesen, die haben dann wenig von meiner Adresse, ne.
-
Sascha Ja, ja.
-
Daniel Vielleicht, vielleicht brauchen sie die Adresse, weil sie, weil sie die für, für die Abrechnungszwecke brauchen. Das weiß man ja nicht. Aber da wäre ja dann auch mal, um da ein bisschen vorzugreifen, ein guter Punkt, das, das zu sagen einfach, ne, wofür die Adresse gebraucht wird.
-
Sylvia Wenn sich der Nutzer fragt: „Warum brauchen die für einen Download meine, Adresse?", dann ist dann schon irgendwie ein Knackpunkt, ne. Darüber müsste man eigentlich dann schon nachdenken.
-
Sascha Absolut, ja.
-
Sylvia Und ich weiß, ich halte mich ja ohnehin immer für den dümmsten aller User bei diesen Dingen, ne. Ich werde auch immer für Steve wagen genutzt, weil ich sage immer so: „Warum ist das jetzt so? Also, das verstehe ich jetzt nicht." Ja. Ich glaube, ich habe da immer ein, ein relativ gutes Sensorium zu sagen: „Das glaube ich, ist jetzt ein Overhead", oder: „Das ist jetzt einfach, nicht rund, ne, im Ablauf eines Formulars." Also wir haben ja relativ, sehr viel mit Formularen zu tun.
Also wir arbeiten mit den Send-Formularen, mit dem ganzen Send-Framework, was halt natürlich ein ziemlicher Overhead dann ist, ne. Aber andererseits hast du eine extreme Dynamik, weil du legst es halt einmal fest und dann läuft es halt durch. Was aber einen natürlich nicht davon abhält, es immer zu kontrollieren, ne, was ich leidvoll immer dann wieder erfahre.
Aber, es ist eben eine ganz andere Form der Herangehensweise, weil du kannst halt in diesen einzelnen Const-Zeichen auch festlegen, welches Formular dann tatsächlich was enthalten soll. Aber man muss viel früher anfangen, wie du auch sagst. Man muss, im Grunde müsste man eben beim Kunden oder wer auch immer diese Informationen braucht, viel früher einfach, Test Cases anlegen, ne. Was braucht ihr eigentlich für, für wen und warum, ja, und wie soll es ausgewertet werden?
Ich glaube, dass die einfach eben von vorneherein einfach in die Zukunft hindenken, ne. Wie du sagst, eben: „Ach, vielleicht wollen wir mal eine Geburtstagskarte verschicken", oder: „Wir wollen was weiß ich machen." Ja. Und, das ist aber eigentlich unsinnig.
-
Sascha Ja, oder die Formulare werden auch einfach von, von,, Wettbewerbern oder, oder irgendwo aus dem Internet, ich sage mal, kopiert. Ja. Also.
-
Sylvia Die machen es, ne.
-
Sascha Genau, das macht halt jeder so. Und ich meine, da kommt auch noch dazu, dass zum Beispiel gerade in so Shops, die dann mit OS Commerce aufgebaut waren oder so, da war einfach standardmäßig zum Beispiel der Geburtstag drin. Das heißt, man hätte ihn aktiv deaktivieren müssen, damit dann halt, im Shopping Cart hinten bei der Anmeldung dann eben nicht das Ding kommt.
Ich bin zum Beispiel auch jemand, der sich sehr freut, wenn er sich nicht registrieren muss in so einem, Shop, weil die meisten Sachen, da kaufe ich irgendwas, was ich nie wieder kaufen werde. Da-da-- Also das, das, das freut mich dann, regelrecht. Und wir sind tatsächlich, wenn wir jetzt über diesen Planungsbereich reden, da reden wir ja noch gar nicht über, über tatsächlich über Design oder solche Sachen, sondern da geht es jetzt wirklich erst mal nur darum: Was brauche ich?
Warum brauche ich das? Was wird damit gemacht? Das, was ich ganz spannend fand: Wir haben, gerade schon vor der Sendung kurz diskutiert, dass die Bücher, die wir da gefunden haben, von denen, von denen wir auch noch welche verlosen werden am Ende der Sendung, - Teilweise sehr unterschiedliche Schwerpunkte setzen und auch unterschiedlich gut sind. Aber einen, einen wichtigen Punkt fand ich zum Beispiel, sich tatsächlich auch mit der, Schwierigkeit der Fragen auseinanderzusetzen.
Das heißt, es gibt so, so relativ einfache Fragen, auf die man einfache Antworten findet. Das sind dann so der eigene Name, vielleicht zum Beispiel die Adresse. Dann gibt's,, Fragen, auf die man, auch noch Antworten selber recherchieren kann, in Anführungsstrichen. Dazu gehören so Sachen wie, Kreditkartennummern oder so was. Ausweisnummern oder so was, weil die habe ich, da kann ich, da muss ich dann in meiner Wohnung irgendwo hingehen, dann finde ich das.
Vielleicht mag es auch den einen oder anderen geben, der seine Kreditkartennummer auswendig weiß. Möglich, aber, ich gehöre nicht dazu. Und dann gibt es aber auch Fragen, die zum Beispiel, wo, wo ich wirklich, intensiv mich, drum kümmern muss und möglicherweise Dritte fragen..
-
Sylvia Das ist der Telefonjoker.
-
Sascha So ungefähr, genau. Das wäre dann der Telefonjoker. Und das sind so Sachen, die, einfach sehr hohen, sehr hohe soziale Kosten quasi, generieren, wo ich schon ein extrem hohes, Bedürfnis haben muss, das Formular zum Beispiel auszufüllen und, und, und ein relativ hohes Vertrauen haben muss, dass ich, dass mir das was bringt und dass ich das auch machen möchte.
Ich erlebe das bei mir zum Beispiel gerne bei so längeren,, Umfragen oder so was, dass ich dann halt die ersten, zwei Seiten ausgefüllt habe. Und dann kommt so eine Frage, wo ich so denke: Boah, ich bin ja gerne bereit, euch jetzt irgendwie ein paar Minuten meiner Zeit zu opfern, aber das hier, da muss ich ja quasi erst mal meine, meine, meine Mutter anrufen, ja, und, und, meinen Stammbaum recherchieren, um das beantworten zu können. Da habe ich jetzt irgendwie überhaupt keine Lust drauf.
-
Daniel Welche Umfragen machst du denn?
-
Sascha Ja, ich habe zum Beispiel gerade heute ging durch die, durch die Twitter-Welt.
-
Sylvia Ja, die
-
Daniel Ja, genau, genau. Zum Beispiel. Ja, ich meine, das war jetzt, das ist jetzt, da war es nicht so. Also, das habe ich halt komplett durchgeklickt, so. Ja, aber das, das sind halt so Sachen, mit denen man sich halt tatsächlich auseinander, auseinandersetzen sollte. Ja..
-
Sylvia Ja, ich meine, du hast ja auch gut unterschieden, ne. Also es gibt ja diese Schwierigkeitsgrade, ne. Es gibt, so un, unter Anführungszeichen standardisierte Kurzformen wie dieses, Kontakt, ne, Formular. Da ist ja meistens immer so ein gleiches Potenzial da, eine gleiche Anzahl von Feldern, vielleicht ab und zu variiert was, aber das sind diese Einfachformulare.
Aber es gibt eben dann so Formulare wie zum Beispiel eben Krankenkassen, die halt dann tatsächlich ganze Anmeldeprozeduren in so Formularen abbilden müssen, ne. Das ist, also die Sachen, die man normalerweise auf Ämtern ausfüllt, ne, werden jetzt ins Web transportiert und da ist ja schon allein, also da zum Beispiel hat man sehr stark diese Schnittstelle: Wie, ne, was ist jetzt wirklich wichtig fürs Web?
Oder wie, wie muss ich-- Ich kann im Web das ja nicht eins zu eins quasi abbilden, sondern ich muss versuchen, das in irgendeiner Form zu transportieren, ne. Und, da steht man dann wirklich an. Also da ist man wirklich in diesem Planungsprozess mit drinnen, dass man dann sagt so: „Nee, also das würde ich, das ist jetzt zu komplex", wie du sagst eben, ne. Da sitze ich jetzt irgendwie drei Stunden, um diese ganzen,, Select-Felder durchzugehen, diese ganzen Optionen durchzugehen.
Das ist einfach viel zu verwirrend. Während wir oft auf Ämtern haben wir ja schon ein Problem, teilweise eben diese Formulare auszufüllen und im Web ist es dann teilweise ganz, ganz, tragisch, solche Dinge dann auszufüllen. Und deswegen denke ich mir, wir müssen immer gucken: Auf was beziehen wir uns, ne? Also es ist auch einfacher, eben so, so ein Kontaktformular zu kopieren, als eben so komplexe Strukturen.
-
Daniel Absolut, ja.
-
Sylvia Und davon ist halt-
-
Daniel Auch solche komplexen Strukturen gehen ja, wenn man die richtige Planung gemacht hat, wenn man gleich in der Planung rausgefunden hat: Okay, ist jetzt ein sehr komplexes Formular, das da braucht der Benutzer höchstwahrscheinlich, kann er das nicht in einem, einem Abwasch machen.
Das muss er, muss er halt, muss er halt auch irgendeine Möglichkeit haben, seine Fragen, seine, seine Antworten zu den Fragen halt irgendwie abzuspeichern oder, oder halt später, für später halt einfach mal weitermachen können. Oder er muss halt einfach, das, das Formular muss, muss halt auch auf die Komplexität halt angepasst sein.
-
Sylvia Genau, genau.
-
Sascha Genau, und ja.
-
Sylvia Mach du. Du hast.
-
Sascha Und da-dazu kommt dann halt eben, eben auch, dass, also man, man möchte ja das nicht nur ins Netz holen, weil das alle nachfragen, sondern meistens hat das ja auch 'n, 'n, 'n Grund, also zum Beispiel Einsparungspotenziale oder solche Dinge. Und da muss man sich dann halt auch überlegen: Wie kann ich die Leute quasi bei der Stange halten? Wie kann ich sie motivieren?
Dazu gehören dann so, so Grundregeln wie: Also stell erst mal die, die Fragen, die erwartet werden, bevor dann überraschende Fragen, die wirklich gestellt werden müssen, die den User vielleicht trotzdem in dem Moment überraschen. Stell die halt vorher, erklär, warum du sie brauchst, und biete quasi auch Anreize.
Also weil, wenn ich dann jetzt, also, ne, um bei dem Beispiel zu bleiben, irgendwie ein, ein Formular, was ich halt normalerweise in, in Paperform vielleicht für 'n, für 'n Amt mache, also und, und mich damit wirklich online auseinandersetze, dann, dann, dann muss ich halt auch einen Anreiz haben, warum ich, warum ich, warum ich das machen soll.
Also, das kann zum Beispiel natürlich schon sein, dass man halt weiß, auf dem Amt würde ich halt irgendwie 'n, 'n halben Tag unbezahlten Urlaub verbrauchen. Ja. Und, und online kostet mich das halt nicht so viel, aber möglicherweise gibt's auch noch halt andere Gratifikationen, die man mitnehmen kann.
-
Sylvia Ja, das habe ich ja so in diesen englischsprachigen Büchern, es sind ja eh nur englischsprachige Bücher, nicht so verstanden, was mit den Gratifikationen gemeint ist. Ich glaube, das war in diesem Forms that Works, ne.
-
Sascha Ja, ja.
-
Sylvia Der immer davon sprach. Ich dachte mir immer so, das kommt mir vor wie so 'ne,, ja für Kinder, ne. Man gibt denen irgendwas, damit sie sich freuen. Also-
-
Sascha Genau, man gibt ihnen einen Lolli dann am Ende.
-
Sylvia Ja, ja genau, diese Lolli-,, -aktionen. Ich habe das nicht so ganz verstanden. Das wurde immer nur so angerissen, diese Gratifikation. Und ich frag mich wirklich ganz ehrlich. Man muss auch sagen, die Beispiele, die sie da immer anführen, ne. Das ist ja eher auf Usability zugeschnitten, das Buch. Die waren erstens mal potthässlich. Ja, also ehrlich gesagt, ich würde mich auf so einem Formular gar nicht aufhalten wollen. Ja.
Und wie sie dann angefangen haben, diese potthässlichen Formulare auch noch irgendwie usability-technisch durchzuackern, dachte ich mir: Wahnsinn. Aber wahrscheinlich sehen die so aus, dort. Keine Ahnung. Aber ich habe einfach, teilweise nicht so ganz verstanden, was mit diesem, Gratifikationsschritt tatsächlich gemeint ist. Weil ehrlich gesagt, wenn du so ein Formular ausfüllst, kann ich mir nicht vorstellen, was sie mir da anbieten.
Also ich meine, auch wenn es ein bisschen hübscher ausschauen würde, wüsste ich nicht, ne-
-
Daniel Na, ich glaub, also in dem Buch ging es, ging's dann wohl auch irgendwie um, also dann Formulare für, für Unternehmen und, die, die müssen dieses Formular ausfüllen. Da gibt's also das Gesetz, dass das ausgefüllt werden muss, weil sie ja dann ihre Umsatzsteuererklärung damit machen oder irgend so was. Das ist eine ganz gute, ganz gute Anreiz, dass es ein Gesetz gibt, dass man das machen muss dann.
-
Sascha Also ich wollt grad sagen, ich glaube, es ging jetzt weniger um so Sachen wie: „Hey, füll doch mal unser Formular aus und dann bekommst du zum Beispiel kostenlos, kannst du dir hier ein Musikalbum runterladen" oder solche Sachen, ja.
-
Sylvia Irgendwie erschließt sich mir das ein bisschen.
-
Sascha Nee, ich glaube, das ging tatsächlich dann jetzt quasi mehr um, so ähnlich wie, ne, wenn man jetzt über soziale Kosten redet, so um, um eben eine Form von sozialer Gratifikation. Also, um bei dem Beispiel zu bleiben: Es reicht zum, vielleicht bei einem Formular, das ich jetzt, ausfüllen müsste, um und jetzt Beispiel: Ich möchte mich von der GEZ befreien lassen oder so was, ja, und ich müsste normalerweise, in, ins Sozialamt laufen und das da vor Ort mit dem, mit dem Sachbearbeiter machen.
Dann kann vielleicht 'ne, 'ne Form von Gratifikation schon sein, dass ich das halt zügig zu Hause machen kann und, und mir diesen Weg spare. Also ich glaub, das, es geht quasi mehr um, um, ja, um so 'ne virtuelle soziale Form von Belohnung. So, und, das, also das, also das habe ich da drunter verstanden.
So, also, ich-- Beispiel: Wenn ich jetzt mal von dem Shop vorhin sprach irgendwie und sage, ich möchte die Leute dazu bringen, dass sie sich doch anmelden, dass sie halt diesen längeren Prozess durchgehen und ich dann die Daten halt irgendwie mitnehme, dann muss ich ihnen halt irgendwie was an die Hand geben, was ihnen was bringt. Ja, und das kann ja schon sein, dass man halt darauf hinweist: „Okay, wenn du nächstes Mal kommst, musst du diesen ganzen Schrössel hier nicht noch mal eingeben." Ja.
Und du hast wieder ein Buch in die Hand genommen. Wir, wir merken das.
-
Sylvia Ja, jetzt weiß ich's. Ich glaub, das ist ein
-
Sascha Nee, wobei das-
-
Daniel Wir sind kein Psychic-Podcast hier.
-
Sascha Das klingt schon, das klingt schon mehr so tatsächlich so ein bisschen außerirdisch jetzt irgendwie in dem Moment.
-
Sylvia Ich, ich bin aber ganz ruhig hier. Ich hab hier keine außerirdischen-
-
Sascha Nee, jetzt ist auch wieder gut. Also das ist halt irgendwie, es klingt mehr so, als wenn, wenn irgendwas ins Kabel stört oder.
-
Sylvia Ah, okay. Mhm.
-
Sascha Keine Ahnung.
-
Sylvia Ja, ich mein, ich kann's abnehmen und dann, versuche ich halt normal mit dem Laptop.
-
Sascha Nee, nee, das ist schon okay. Das ist jetzt, ist ja jetzt noch nicht, nicht so, nicht so, nicht so oft passiert.
-
Daniel Nicht bewegen.
-
Sylvia Ja, ja, ich bin ganz ruhig.
-
Sascha Nicht atmen. Was, was, was wir jetzt quasi immer grundsätzlich ein bisschen vorausgesetzt haben, vielleicht kann man das, wenn wir jetzt in den, in den zweiten Bereich, so in den Bereich Entwurf, ein bisschen reinschnuppern, vielleicht kann man das, noch mal ein bisschen mit einbeziehen: Wir haben ja jetzt quasi immer von Riesenformularen geredet, ne. Wir haben immer gesagt, okay, es geht irgendwie um Anmeldungen, um Shopping Carts, um irgendwelche Umfragen oder so.
Letztendlich ist ja zum Beispiel so ein kleines Suchfeld, was ich auf meiner Seite habe oder, das, die Google-Suche auf der Google-Seite ist ja auch schon ein Formular und es besteht quasi ja nur aus einem Button und einem,, Texteingabefeld. Und, und auch dabei kann man ja, viele Sachen beachten oder sollte man viele Sachen beachten und, richtig machen.
Also das heißt, wenn wir jetzt quasi in den nächsten Bereich springen, können wir ja mal versuchen, ein bisschen das, den Begriff Formular noch ein bisschen weiter zu fassen. Wir haben uns halt hier dafür auch ein paar Notizen gemacht. Und eins meiner neuen Lieblingsthemen steht an erster Stelle. Das habe ich ja auf dem Barcamp Hamburg, hatte ich eine kleine Session dazu, zum Thema Wireframing.
Und, ich muss zugeben, dass ich tatsächlich zu Wireframing auch durch Formular, durch ein Formular gekommen bin, weil ich finde, dass gerade da es Sinn macht und es geht so ein bisschen mit in die Planungsphase. Also wenn man halt so ein bisschen abgeklopft hat, was, will ich überhaupt abfragen, was gehört überhaupt dazu, ein, ein Wireframe zu machen, macht meines Erachtens sehr viel Sinn. Seid ihr damit auch konfrontiert oder ist das, seht ihr das anders?
-
Daniel Ja, also ich hab, bis jetzt eigentlich eher weniger mit Wireframes gearbeitet. Ich hab das dann eher direkt in Photoshop halt so 'n, so 'n Mockup gemacht, aber, ich sehe durchaus den, den Sinn und die Zeitersparnis, das mit Wireframing zu machen, mit Wireframing-Tools zu machen, so wie Balsamic oder so.
Also weil das einfach viel schneller geht und, und, und auch nicht, den meinen Kunden dann die falsche Hoffnung geben würde, dass das, was ich ihm da jetzt gerade gebe, auch, halt auch die, die grafische, den grafischen Aspekt halt dann schon berücksichtigt. Weil das ist ja das Schöne bei Wireframing, das sieht dann alles so schön, skizzenhaft aus.
Da, da kommt man eigentlich gar nicht auf, auf die Idee, dass das jetzt schon fertig aus, also gestaltet, gestaltungstechnisch halt schon fertig wäre.
-
Sascha Ja, ich hab, auf dem, auf dem Barcamp Hamburg unter anderem, ein paar Formulare gesehen, die der Marcel mir gezeigt hat, hier der Marcel Böttcher, Co-Moderator, oder Hauptmoderator mittlerweile bei Technikbörse auch. Und da waren schon einige wirklich sehr komplexe Shop, Formulare drin für, für richtig große Firmen. Und das, also da macht, da macht es halt Sinn, weil man sich dann tatsächlich zum Beispiel mit diesen Dingern auch noch mal mit dem, mit der, mit der Firma auseinandersetzen kann.
Und, man kann halt ja, ich sag mal in Anführungsstrichen, kleine Usability-Tests schon machen, ohne dass das Formular funktioniert. Also man kann sich ein bisschen, wie bei einer Papier-Skizze damit auseinandersetzen: Fragen wir eigentlich in der richtigen Reihenfolge? Also, habe ich zum Beispiel eine Frage, die, ganze Blöcke hinterher überflüssig macht?
Also wenn derjenige da an der Stelle antwortet, um das Beispiel zu nennen vorhin, wie du meintest, O'Reilly, vielleicht wäre es sinnvoll zu sagen: „Na ja gut, wenn du Germany als Land auswählst, dann brauchst du da auch keine Adresse mehr eingeben", ne, weil das, das brauchen wir halt nicht. Ja. Und so kann man dann halt mit, mit so 'nem, mit so 'nem, Wireframe schon vorab ein bisschen schauen Sind wir überhaupt, was die Struktur und die, die Reihenfolge angeht, gut.
Und was man halt auch gut machen kann, ist halt quasi, sich mit, mit überhaupt mit der Positionierung der, der, der Labels und der Felder und auch so Hilfetexte auseinanderzusetzen und so. Bei dem Thema habe ich halt ehrlich gesagt durch die Bücher festgestellt, dass es da sehr große Inkonsistenzen bei Vor..., bei Ratschlägen oder Guidelines gibt, ja.
Also der eine, sagt halt: „Auf, auf jeden Fall müssen die Labels linksbündig sein.", ja, dann kommen Leute, die sagen: „Ja, aber es ist irgendwie viel besser, dass die Labels irgendwie rechtsbündig an das jeweilige Element rangerückt werden, weil sich dann die Augen-,, -bewegungen minimieren lassen." Und das fand ich ein bisschen unbefriedigend, muss ich sagen, so durch die Bücher hindurch.
-
Sylvia Ja, ich meine, das, das eine Buch sagt ja, du kannst es eigentlich machen, wie du möchtest. Du musst es halt einfach nur testen, ob es funktioniert. Das ist dann natürlich die einfachste Lösung. Also für das Buch jetzt.
-
Sascha Ja, ja, genau.
-
Sylvia Ja, ich glaube, die, die höchste Quote ist, glaube ich, so in dem Usability-Test immer gewesen. Ich glaube, das war dem Luke W., ne, Webform-Design, dass eigentlich das Label über dem Feld steht. Also da ist halt der schnellste Zusammenhang. Es ist quasi der Vorteil der Linksbündigkeit, ne, wo man ja am schnellsten guckt und auch noch am schnellsten am Feld gebunden, ne, weil das Feld nicht rechts davon steht, sondern eben gleich drunter.
Das hat natürlich dann, ich glaube, das stand in einem anderen Buch dann, das Problem, dass du eben extrem viel Platz verbrauchst.
-
Sascha Ja, in, ja genau, also vertikal.
-
Sylvia Vertikal, genau.
-
Sascha Was ich jetzt an und für sich nicht so schlimm finde, aber der, der, ein Hinweis war ja dann auch so, dass es halt einfach so viel, also das Formular wird einfach lang. Ja, also es w..., es, es, es wirkt lang, so.
-
Sylvia Ja, und kein Kunde will das.
-
Sascha Ja, ja.
-
Sylvia Also ich habe bis jetzt, glaube ich, in meinen zehn Jahren Arbeit keinen Kunden gefunden, der, ein Label über ein Feld setzen will. Es sei denn, es ist zweispaltig, ne. Also dass du eben das links und rechts hast, ne. Aber das will man dann ja auch wieder vermeiden. Also ich muss sagen, also diese Linksbündigkeit plus, Feld hat sich eigentlich dann eher durchgesetzt als der optimalste Fall. Rechtsbündig finde ich halt immer so flatter.
Also wenn das dann so rechts, dann so flattersatzmäßig, gerade wenn dann zum Beispiel Zweizeiligkeiten sind. Ich glaube, das wurde auch erwähnt, dass das dann schwierig ist für die Leute, noch zu verbinden, weil da musst du dann schon ziemlich gut layouten, damit das nicht irgendwie völlig verwirrt. Und, ja, also diese Label-Geschichten, da gibt es ja, glaube ich, einfach nur Mehrheiten, die da immer untersucht werden. Ich glaube, der Luke W. macht das ja regelmäßig.
Ist schon spannend, diese Eye-Tracking-Geschichten, ne. Aber ich sage auch so, im Einzelfall, setzt sich ja ohnehin so ein Standard durch, ne. Also auch wenn man jetzt zum Beispiel die Wien-Preisträger anschaut, ist fast alles linksbündig. Also.
-
Sascha Also was ich ganz nett fand, da, ich glaube, das ist halt wirklich eine Sache, da muss man sich dann halt selber auch noch mal so ein bisschen durch die Ressourcen durch, durchfräsen, um sich einfach Anregungen zu holen. Und da hattest du, Daniel, ja recht. Also ich glaube, es ist so gut wie alles erlaubt, wenn es halt funktioniert, ne. Also, und ich fand zum Beispiel... Also ich kann mit diesen zweispaltigen Formularen gar nichts, gar nicht.
Also da, das, ich bin so ein User, der, der, der da total verwirrt wird. Ganz schlimm ist dann vor allen Dingen, weil ich z... sehr viel, Tastatur benutze, dann um von Feld zu Feld zu springen. Und teilweise springen die halt nicht so, wie man sich das wünschen würde. Da werden wir sicherlich in der nächsten Sendung dann noch mal drauf eingehen. Aber ich, ich kann zum Beispiel absolut nicht ausstehen, wenn ich-- Na, was heißt, ich glaube, das kann so gut wie keiner.
Wenn ich dann meinen Nachnamen eingebe, rechts daneben ist der Vorname, aber es springt erst runter in die Straße oder so.
-
Sylvia Da ist die Frage, wie man es halt gebaut hat, ne.
-
Sascha Genau, ja selbstverständlich. Aber, ich, ich, ich, ich orientiere mich halt, wenn, dann lieber von oben nach unten und es waren in den Büchern waren so schöne Ausnahmen wie eben zum Beispiel beim Namen. Also wenn ich dann halt quasi als, als, eine Zeile den Namen habe, aber es sind zwei Felder für Vor- und Nachname- Muss man sich schon wieder fragen: Was machen Leute mit mehreren Vornamen? Aber egal.
Und, und zum Beispiel fand ich ein schönes Beispiel, dass dann, zum Beispiel fand ich ein schönes Beispiel, ja, dass, vorne Name dransteht und dann in dem Feld quasi in so einem leicht gräulichen, in so einer leicht gräulichen Schrift noch mal Vorname, Nachname drinsteht, der dann natürlich weggeht, wenn ich reinklicke. So, das fand ich zum Beispiel, sah zumindest ganz nett aus.
Müsste man dann halt erstens testen, ob das auch, vom, vom, vom Kontrast her brauchbar genug ist und ob da jeder mit, ob da jeder mit klarkommt, ne.
-
Sylvia Ja, das ist eine Sache, die halt dann für die Barrierefreiheit kritisch mittlerweile gesehen wird, weil du dann halt diese Wiederholungen hast, ne. Also das kann ich dann später in einer anderen Sendung erklären. Wenn du Vorbelegungen hast, wird dann quasi doppelt und dreifach die Sachen dann irgendwie vorgelesen und das ist ein bisschen anstrengend. Ich sage immer so: Wenn man die Formulare gut verdrahtet, ja, dann muss eigentlich klar sein, was in dem Feld einzutragen ist.
Weil Vorname ist eigentlich relativ eindeutig. Es sei denn, wie du sag, wie du sagst, jemand hat fünfzehn Vornamen, gut, dann muss er die halt alle da eintragen. Dann weiß er aber Bescheid, weil er hat halt so viele. Aber ich denke, Formulare müssen eindeutig sein. Das ist das Wichtigste. Und die müssen so gebaut sein, wie du eben sagst, dass man durchgehen kann und sich zurechtfindet.
Ich glaube auch, das mit diesen zweispaltigen Formularen, ich, wenn ich jetzt so überlege, das war vor einigen Jahren einfach total hip, ja. Ich glaube, dass das abgenommen hat. Also ich glaube, mein letztes zweispaltiges, Formular habe ich sicher vor zwei, drei Jahren gemacht. Ich glaube, das war einfach, das hat sich vielleicht auch ein bisschen irgendwie verschoben jetzt, dass man tatsächlich jetzt wieder mehr so lineare Strukturen baut. Vielleicht auch durch die Dynamisierung.
Das weiß man ja nicht, ne. Also einfach, dass mehr Leute vielleicht Engines nutzen, ja. Da kann man das nämlich dann eher vergessen. Oder zum Beispiel, es gibt ja auch Quick Forms, ne, für PAP. Wenn man das nutzt, da bist, du kannst das alles machen mit der Zweispaltigkeit, aber es ist einfach, schon anstrengender. Ja.
Du bist schneller, wenn du es tatsächlich in einer linearen Form baust, weil du musst für jede Sache, die halt anders ist, eine Ausnahme bauen, ne, weil die das ja in der Form natürlich nicht vorsehen, ja. Also insofern, es kann schon sein, dass das ein bisschen, das ist jetzt eher so, so ein, eine Vorstellung ins Blaue, dass das vielleicht damit zusammenhängt, dass eben die Leute nicht mehr alle Formulare per Hand bauen.
-
Sascha Ja, also ein, ein letzter Punkt, den wir jetzt hier noch quasi im Entwurfbereich drin haben, wobei der schon fast Ein bisschen in, in, in Erscheinungsbild rüberrutscht. Sind so, so, so, Kennzeichnungen und, so Fehlermeldungen, Hinweistexte und solche Sachen. Auch da gilt ja irgendwie so ein bisschen, wenn's funktioniert, ist erlaubt. Was ich tatsächlich, finde und da widersprechen sich die Bücher und da können wir uns gerne kurz auch drüber streiten.
Also ich find, es, also ich hab gefühlt schon ein bisschen, Standards, die, also, oder ich fühle Standards für, Pflichtfelder zum Beispiel. Also ich find, dieses Sternchen versteht halt selbst meine Mutter, ja. Also, das, die hört diesen Podcast nicht, deshalb darf ich das sagen..
-
Sylvia Ach, spricht durchaus für deine Mutter, ne.
-
Sascha Ja, ja, genau. Also ich hab, da gab's halt auch unterschiedliche Aussagen in den Büchern zu drin, ob man jetzt mit Sternchen arbeiten sollte oder nicht. Ich hab dann auch noch mal einen Aufsatz gelesen, der, davon Abstand nimmt, was ich halt ein bisschen irritierend finde.
Ich teile die Ansicht, dass wenn jetzt man quasi den umgekehrten Weg geht und sagt: „Okay, also der User geht eigentlich immer davon aus, dass alle Felder auszufüllen sind und wenn ich ihn darauf aufmerksam möchte, dass ein Feld nicht ausgefüllt werden muss, dann schreibe ich da optional dran.“ Da-das kann ich nachvollziehen.
Ich find eben, Sternchen für Pflichtfelder eigentlich relativ, standardisiert, wobei man natürlich da wieder aufpassen muss und, ich hatte sehr schön, schöne Beispiele gesehen, wie man das, wie man das halt hinbekommen kann, dass das halt auch barrierefrei ist, ne.
-
Sylvia Ja, also ich, lege auf Sternchen dann überhaupt keinen Wert, aber gut. Es ist halt die Frage, du, für Sternchen musst du halt für Barrierefreiheit wieder zusätzliche Dinge machen, weil Sternchen halt auch belegt ist im Screenreader. Das heißt, da musst du dann wieder so Dress machen, wie 'ne Abkürzung drum oder so oder ein Title-Attribut. Ich find halt so was, man kann das einfach auch Pflicht nennen. Weißt du? Also okay, required ist ein bisschen länger, ne.
Das ist klar, wenn's Englisch ist, aber im Deutschsprachigen ist es eigentlich ziemlich knapp. Und, man könnte die Methode ja tatsächlich ausweiten, wie du gesagt hast. Man guckt: Wie viel Felder müssen tatsächlich ausgefüllt werden? Sind es jetzt nur zwei oder so, dann reicht ja für die Pflicht zu schreiben. Sind eh alle Pflicht und sind tatsächlich nur ein, zwei optional, dann kann man da optional reinschreiben.
Also, das ist auch wieder eine Sache, dass man eben den Prozess schon davor beginnen lässt und einfach, ne, guckt: Was muss tatsächlich, ausgefüllt werden? Dann kann man vielleicht zuerst mal sagen: Müssen diese optionalen Felder dann sein? Könnt man nicht vorher dann einfach schon reduzieren.
-
Sascha Ja, absolut.
-
Sylvia Und, ich mein, du hast recht: Sternchen ist ein absoluter Standard. Möchte ich jetzt auch nicht, irgendwie, quasi ablehnen oder so, ne. Also ich, ich, seh's überall und, ich versuch's halt, bei unseren Formularen tatsächlich eine Pflicht durchzudrücken. Ist jetzt vielleicht 'ne Entscheidung, ne. Aber, tatsächlich und, wie können wir überhaupt über Standards reden? Es gibt ja in Formularen tatsächlich Standards. Wenn man aber dann, also required, das geht noch, das ist relativ standardisiert.
Leider steht required oder dieses, die Erklärung, was dieses Sternchen ist, oft unten.
-
Sascha Mhm. Ja, auch das, das finde ich auch, dass das ganz doof ist, ja.
-
Sylvia Ne? Mhm. Du musst erst mal runterschauen. Okay, Sternchen, weil das alle wissen, guckt eh keiner runter. Ja. Aber trotzdem, also das ist oft so ein Verständnis, dass man nicht im Fluss liest, sondern irgendwie: Aha, da unten steht jetzt noch was zum Sternchen. Könnte ja auch was ganz anderes stehen, ne. Und, und die, Fehlermeldung, was du als nächsten Punkt noch aufgeführt hast, also da ist ja der völlige Raubbau.
Also wenn du dann mal, wie die Leute ihre, Fehlermeldungen machen und, wo sie sie setzen. Am schlimmsten glaube ich in einem Buch stand sogar, dass das Sternchen danach stehen soll, ne.
-
Sascha Mhm, ja.
-
Sylvia Die haben das dann layouttechnisch ins Label mit absoluter Positionierung, dann rechts rausgesetzt.
-
Sascha Mhm. Genau, hin, hinters Feld quasi.
-
Sylvia Ja, ja, ganz merkwürdig. Also ich meine, okay, optisch siehst du das immer, aber ich find, vom, vom, vom normalen linearen Fluss ist es absurd, das dahinter zu setzen. Ja. Das gehört immer ans Label eigentlich ran, ja.
-
Sascha Also das ist ja zum Beispiel tatsächlich was, wenn man sich jetzt diese Eye-Tracking-Studien anguckt, da, was das auch einfach belegt, weil man hat, also das ist ja, ich mein, was ich so mitnehme aus diesen ganzen Eye-Tracking-Studien ist, dass halt Webuser einfach 'n Tunnelblick haben. Also es ist, wirklich unglaublich, was da teilweise nicht gesehen wird. Und wir hatten jetzt grade, Daniel weiß das, sehr leidvoll, 'nen kleinen Usability-Test mit 'nem Webprojekt.
Und ich bin, ich hab da daneben gesessen, hat mich gefragt: „Sag mal, wieso? Da ist doch, der Button ist doch da." Also ich mein, hallo, ihr musst doch nur noch mal kurz mit der Maus so drei, vier Zentimeter nach rechts gehen und das ist einfach nicht gesehen worden, ne. Und, das ist halt, dann fragt man sich, wie jemand wirklich ernsthaft empfehlen kann: Auf jeden Fall der, das, das muss rechts sein, ja.
Wo ich doch mit meinen Augen wahrscheinlich beim Label irgendwie links bin und auch von links anfange zu schreiben.
Du bist absolut jetzt gerade mal wieder gar nicht zu verstehen.
-
Sylvia Ja, stimmt. Aber es ist auch, es klackert so.
-
Sascha Genau, jetzt ist gerade irgendwie-- Und jetzt, jetzt ist es, glaub ich, wieder weg.
-
Sylvia Aber da, ich hab jetzt gar nichts gemacht. Ich hab jetzt nur gesprochen. Ich hab, weder aufgestanden noch so-
-
Sascha Das ist irgendeine Wasserader. Ich bin mir da relativ sicher.
-
Sylvia Genau. Ja, ja, genau. Ach deswegen. Ja, aber du meintest ja auch mit dem Button, das ist ja auch noch so 'ne Geschichte, ne. Der wird ja auch, manchmal nach links, mal nach rechts. Sogar mittige Buttons sieht man ja auch. Nicht oft, aber sieht man. Also insofern, heißt es ja usabilitytechnisch soll der immer links sein, ne. Was ja vom Fluss ja auch stimmt, ne. Ich will ja nicht nach rechts gehen, um dann was zu klicken.
Einzig nur bei Formularen, die blättern, ist es wohl, weiter und zurück, ne, dass die dann eher dann rechtsbündig werden. Aber da bin ich mir auch nicht sicher. Da müsste man auch noch mehr Studien dazu lesen. Aber du hast schon recht, mit dem Tunnelblick ist es immer faszinierend, diese Eye-Tracking-Sachen tatsächlich, diese Heatmaps, ne, sich zu angucken. Und die Leute, eigentlich im Grunde ist man froh, wenn die Leute überhaupt auf der Webseite waren, ne.
-
Sascha Ja, genau, genau.
-
Sylvia Formulare vielleicht gleich im Kopf machen, weil sonst kommt eh keiner hin.
-
Sascha Ja, das ist, geil lustig. Also, wenn du jetzt die Button ansprichst, können wir quasi mal einen kurzen, Schritt weitermachen zum, zum, zum Erscheinungsbild. Also,, ich hab tatsächlich, Immer wieder mit Buttons ein Problem. Eins der Highlights für mich, und da, da könntest du mir vielleicht auch noch mal helfen, ob das aus irgendwelchen, User t--, Quatsch, Usability-Barriere,, gründen Sinn macht, ist der,, Reset-Button, ja. Also das ganze Formular zurückzusetzen. Ich kann mir das-
-
Sylvia Es gibt schon seit, seit zehn Jahren soll es schon keine Reset-Button mehr geben.
-
Sascha Ja, ich bin beruhigt, dass das so ist, weil, ich kann mir das beim besten Willen nicht vorstellen, weil, das würde ja bedeuten, dass, ich am Ende festgestellt habe, ich hab alles falsch eingegeben. Ja, also deshalb, selbst wenn jemand jetzt quasi, zum Beispiel, darauf angewiesen ist, die Tastatur zu benutzen, geht das ja auch nicht, langsamer, als wenn ich das mache, ja, der jetzt irgendwie mit der Maus und der Tastatur arbeitet oder so.
Und ich hab so oft schon Formulare irgendwie komplett ausgefüllt und unten, püff, draufgeklickt und dann war alles weg. Ja, das, ist, ist 'ne Katastrophe und ich finde zum Beispiel da, ohne jetzt Standards nennen zu können, dass es schon 'ne Reihenfolge, also der Anordnung gibt in so einem Fall zum Beispiel, ob der Button jetzt Sinn, Sinn macht oder nicht, lassen wir dahingestellt.
Und ich zum Beispiel muss sagen, dass ich eigentlich 'n, 'n, 'n Abschlussbutton irgendwie eher unten rechts erwarte als unten links. So, ja. Also wenn ich, wenn ich jetzt so, so, so, wenn, wenn so zwei Button nebeneinander stehen. Und was ich schön fand zum Beispiel, war der Hinweis, den ich hat-- Ich glaub, das war ein anderer Aufsatz, den ich noch gelesen hatte, war die Verwendung zum Beispiel von, von Farben für solche Dinge.
Also, es gibt halt so gewisse psychologische Effekte, die, in der Mehrzahl aller Fälle gelten, nämlich zum Beispiel, dass Grün eher positiv aufgeladen ist als Rot. Das heißt, wenn ich da, zum Beispiel einen Abbrechen-Button hab und einen Speichern-Button, dann mache ich den Speichern-Button grün und den Abbrechen-Button rot. So. Das empfinde ich, das empfinde ich als relativ, gesetzt.
Also das kann natürlich nicht das Einzige sein, aber ähnlich könnte ich mir vorstellen, dass so was zum Beispiel auch, was, was die, was die Anordnung links und rechts angeht, tatsächlich existiert, so. Ich hab aber keine, keine Beweise dafür jetzt.
-
Sylvia Mhm. Also ich denke, es gibt halt, das ist immer eine Frage des Ablaufs, ne, eines Formulars. Also wenn du wirklich nur ein einseitiges Formular hast, denke ich, ist die Position unten links tatsächlich die präferierte Position. Weil du gehst einfach linear runter und schickst ab. Ohne jetzt Reset. Also von, von dem, von dem Abbrechen-Button möchte ich gar nicht reden, weil der ist wirklich seit Jahren, ein No-Go. Ja.
Also ich meine, es sei denn, du hast wirklich was ganz Komplexes und musst irgendeinen Vorgang unterbrechen oder so. Ja, aber dann würde der Button vielleicht einfach anders heißen, Zwischenspeichern oder was auch immer. Ja.
-
Sascha Ja, ja.
-
Sylvia Aber, dieses-- Ich denke, das ist einfach ein Rudiment aus den Jahren vor, vor zwanzig Jahren oder so. Ja, da gab's den halt. Ja, den gab's vielleicht aus irgendwelchen Gründen, d-d-das mir jetzt auch nicht mehr wirklich präsent ist, aber der hat sich irgendwie leider in, einfach noch gehalten. Aber ich sehe den auch kaum mehr wo. Also, die meisten verzichten mittlerweile auf diesen Button.
Aber wenn du eben einen Prozess im Formular hast, dass du eben Steps oder Schritte definierst, dann, ne, zurück links, weiter rechts. Also ich denke, diese Standards gibt's einfach. Weil weiter natürlich ein Prozess ist, dass du quasi im Kopf blätterst, mit dem Auge blätterst. Da sind wir auch noch sehr printorientiert, printlastig. Und dann ist die Frage: Man könnte natürlich auch sagen, der Zurück-Button kann auch neben dem Weiter-Button rechts sein, ne.
Also es gibt dann, da müsste man halt wieder einfach schauen. Andererseits soll man sich immer komplett nach diesen, Eye-Tracking-Studien richten. Weiß ich jetzt auch nicht so wirklich..
-
Sascha Ja, vor allen Dingen glaube ich tatsächlich, dass es, also das, sagt ja auch eigentlich jeder seriöse, Researcher, der mit diesen Eye-Tracking-Studien arbeitet. Das bezieht sich ja auch immer tatsächlich auf den Einzelfall. Klar kann man da Guidelines draus ab-ableiten. Und sicherlich sind, gibt's einfach, um da mal Jakob Nielsen zu zitieren, viel zu viel, die glauben, sie wären Sonderfall irgendwie. Aber, es, es hängt schon dann irgendwie auch vom Einzelfall ab.
Deshalb, die eigenen Usability-Tests, lassen sich halt nicht ersetzen eigentlich, ne. Also, ich glaub, das ist schon wichtig, weil alleine zum Beispiel ja unterschiedliche Zielgruppen vielleicht ganz unterschiedlich funktionieren. Also wenn ich halt weiß, ich hab, so was wie Schüler-VZ, dann, dann möge, mögen da im, im, im, im Kopf andere Standards existieren, als wenn ich so was wie Senioren-VZ habe oder so was, ja. Man muss da vielleicht auch ganz anders drauf eingehen.
So, also das, das, das kann ich mir schon vorstellen. Ja, also wir hatten, wenn wir über Erscheinungsbild reden und das ist zum Beispiel was, was ich immer wieder bemerke, also, ich finde, Formulare sind schon kniffelig zu stylen, also mit, mit, mit Style Sheets und ein, ein, eins meiner, größten Probleme in Anführungsstrichen. Also ich meine, die sind natürlich umgehbar, aber ist zum Beispiel tatsächlich, dass es einfach, dass alles Input ist. Ja.
Also dass ich, wenn ich einen allgemeinen Style für Input mache, dass dann nicht das Ja, das, das war, das war Fancy Form Design, ne. Ja, ja, genau. Genau.
-
Sylvia Das fand ich, fand ich-- Ja, ich meine, es ist okay, dass er diese Thematik da reingebracht hat, aber das ist ja eine allgemein gültige Thematik, ne. Die muss jetzt nicht unbedingt auf Formulare speziell angewendet werden, fand ich dann, ne. Aber, das mit dem Input ist schon eine gute, einen guten Hinweis, den du machst, ne. Also das ist aber auch eben eine historische Geschichte mittlerweile. Das ist halt die Frage, wie weit du runter musst mit den Browsern, ne.
Also wir brauchen den Browser nicht nennen oder wir können es tun. Der IE6 konnte halt, diese Inputs nicht einzeln ansprechen, ne. Das war das Problem. Und mittlerweile geht das ja. Ist halt die Frage, wie weit man runter muss. Wenn man nicht mehr so weit runter muss, dann kann man ja tatsächlich die Inputs einzeln ansprechen, ne. Sonst sah das ja wirklich, wirklich, schlimm aus, ne. Das stimmt schon. Das war immer sehr interessant, wenn Input dann am unten ist.
-
Sascha Genau, da sind die Checkboxen auch, ewig groß oder respektive die Buttons, ja.
-
Sylvia Ja, und dann schöne Borders und so, ne. Ist ja eine Echtzeit-Schönheit, ne. Nee, aber ich denke, dass, dass wir ja jetzt, das ist auch eine historische Sache, die sich einfach jetzt bald erledigt haben wird. Also dadurch wird es besser.
Also ich find, dieser Punkt war früher echt ein Problem, hat sich aber mittlerweile schon bis auf jetzt Select, die halt immer noch ein bisschen, ne, schwierig sind und so, aber man kann die schon, vor allem allein die ganzen Breiten, dass wir die jetzt alle so geregelt kriegen. Früher musstest du ja Weichen für die einzelnen Browser einstellen, dass die alle gleich breit waren, net? Weil der Kunde setzt sich ja vielleicht hin mit dem, mit dem Maßband und schaut, ob alle gleich breit sind, ne.
-
Sascha Was man ja auf jeden Fall auch erwarten kann, ja.
-
Sylvia Und das ist ja alles viel besser geworden. Also insofern bin ich da jetzt echt viel entspannter, ne.
-
Sascha Also ich glaube, was man halt tatsächlich generell zur Erscheinungs-, also z-z-zum, zum tatsächlich optischen Stylen sagen kann, ist, wenn man sich mal hinsetzt und so ein bisschen sich Inspiration holt, dann ist man teilweise sehr beeindruckt, was da, was man aus, Formularen doch durch einfache Style Sheets, herausholen kann.
Das ist jetzt, hier steht noch so ein Stichpunkt in unseren Notizen, so was wie: Man kann halt durch so kleine Verläufe oder durch eben unterschiedliche Border oder so kann man halt relativ-
-
Sylvia Runde Ecken.
-
Sascha Genau, solche Sachen. Und also man kann wirklich relativ viel machen. Man kann es dann so übertreiben, dass das Formular hinterher gar nicht mehr als Formular zu erkennen ist. Auch da sollte man natürlich ein bisschen aufpassen.
Also ich habe auch schon sehr abgefahrene Such-,, Formulare gesehen, wo einfach keiner, wirklich mit klarkommt und ich kann aus dem Nähkästchen plaudern, dass in einem Projekt von mir einer der meistgesuchten Begriffe zum Beispiel, so viel zum Thema vorausgefüllt, Suche ist. Ja. Und das andere, aus einem anderen Projekt, und da kann man einfach von schlechter Arbeit von meiner Seite aus sprechen.
Da werden einfach unfassbar viele E-Mail-Adressen gesucht, weil, oder, oder wurden gesucht – ich habe das mittlerweile optimiert – weil die Leute das für die Eingabefeld für so einen Newsletter gehalten haben.
-
Sylvia Oh Gott, Entschuldigung. Was ist denn mit denen?
-
Sascha Ja, das, das passiert halt, das passiert halt auch, ne, wenn das halt schlecht, wenn es schlecht gestaltet ist. Also wobei, da kann man schon fast eher von der, von der, von dem Entwurf sprechen und nicht unbedingt von dem, von dem Styling dann hinterher, ne.
-
Sylvia Ja, es war, es war ja teilweise früher eher das Problem, also ich fand diese Sachen immer absolut absurd, weil man eben diese Sachen nicht stylen konnte, runde Ecken und so weiter und Verläufe, ne. Wurde dann quasi das normale Input-Feld, ne, das Standard-Input-Feld mit etwas quasi JavaScript überlegt, ne.
-
Sascha Ja, ja, genau.
-
Sylvia Also man hat etwas draufgelegt. Also ich fand, ich fand das dann immer, es sah vielleicht schön aus, ja, aber ich habe mich immer gefragt: Meine Güte, was für ein Aufwand, ne? Und das Beispiel, was du jetzt mit den Icons in Feldern hast, das ist jetzt zum Beispiel jetzt in HTML5 findest du ja diese Beispiele, ne. Also ich meine, die Icons sind nicht sonderlich schön, ne.
Vielleicht kann man die ja irgendwann auch mal schöner machen, aber da ist ja dann ein E-Mail-Feld tatsächlich mit einem E-Mail, mit so einer kleinen, E-Mail,, ne, ge-gekennzeichnet oder so. Also das geht ja tatsächlich in die Richtung, ne. Und ich fände es ja auch gut, wenn wir das nicht immer tun müssten, ne. Andererseits hast du dann ja keine Möglichkeit mehr, etwas einzustellen individuelles, sondern das Feld sieht halt dann tatsächlich überall dann so aus, ne.
Das wird, das ist halt die, die, die Frage der Standards, ne.
-
Daniel Das ist ja auch ein Vorteil, wenn die überall gleich aussieht, dann kämpft man ja sofort: Oh, da muss ich meine E-Mail-Adresse eingeben.
-
Sylvia Ja, aber ich, ich, ich höre jetzt schon Kunden sagen: „Mir gefällt das Icon aber nicht."
-
Sascha Oh ja, die höre ich auch sagen. Ja, ja.
-
Sylvia Oder können, oder, oder: „Könnten Sie mir dieses Icon bitte einfärben für unsere, für unsere Farbumgebung?", ne. Oder so, was ja teilweise eben zum Beispiel bei, bei, bei, irgendwelchen Playern ist, ne, dass die dann sagen, sie wollen das irgendwie in ihrer Farbe haben. Also das könnte ich mir vorstellen, dass das dann bei solchen Feldern auch kommt, dass sie anfragen. Das sehe ich jetzt schon irgendwie Legende. Die stehen alle schon da und wollen das. Na ja.
-
Sascha Ja übrigens, vielleicht kann ich das an der Stelle mal sagen, weil, weil, wir haben ja das Problem, dass wir jetzt eben gerade nicht, nicht, nicht visuelle Beispiele bringen wollten. Ich hatte überlegt, dass, ich, wir hat, wir haben quasi zweimal, wenn du, wenn du noch zu deinem Wort, stehst und das Buch auch verlosen möchtest quasi, Silvia, bist du da noch-- Möchtest du das noch oder, oder findest du es im Regal ganz schön?
-
Sylvia Ich würd's schon verlosen, nur ich fürchte, ich bin leider ein Mensch, der immer alles anstreicht mit Farben und so. Also wenn ich's so wie in Amazon durchgeben könnte, ist leider schon mit, kleineren Korrekturen oder Anstreichungen behaftet. Dann würde ich es verlosen. Ist es weder verfetzt noch...
-
Sascha Also wir haben zweimal quasi das Buch Forms, That Work abzugeben. Einmal, völlig unbenutzt, ja, und einmal mit Anstreichungen und, -
-
Daniel Verbessert.
-
Sascha Genau, einmal verbessert. Genau, so, so sollte man es vielleicht sagen. Und einmal ungenutzt. Und-
-
Sylvia Ich kann's auch signieren, wenn sie es möchte.
-
Sascha Damit wird's was wert auf jeden Fall. Und ich hatte mir überlegt, ob man vielleicht sagt: „Okay, wir verlosen unter quasi allen Kommentaren diese zwei Bücher, und zwar unter allen Kommentaren, die, auf irgendeine, entweder auf ein, ein, ein, also auf Ressourcen verlinken, die optisch schön, gestaltete oder usabilitytechnisch gut optimierte Formulare oder eben irgendwelche Artikel verlinken, die, sich damit auseinandersetzen.
Und wir bewerten das jetzt nicht, dass das halt quasi wirklich ein barrierefreies Formular sein soll, sondern einfach, auf von den Hörern gut gemeinte Linktipps quasi. So, und, dann würde ich sagen, verlosen wir quasi, randomisiert, wer das verbesserte und wer das nicht gelesene Buch bekommt. Genau, weil dann haben wir quasi, dann haben wir noch, vielleicht kommen dann so ein paar Links zusammen zu irgendwie, ganz netten, netten Beispielen. So.
-
Sylvia Ist 'ne gute Idee.
-
Sascha Was uns quasi zu 'nem nächsten Punkt, bringt und du hast grade vorhin schon so 'n bisschen diese JavaScript-Geschichte angesprochen. Das hab ich quasi auch aus dem einen E-Book von SitePoint übernommen, die, der Abschnitt progressive Verbesserung, ja. Ich weiß nicht genau, warum ich da als ersten Punkt 'ne Prozessanzeige reingeschrieben habe, weil die find ich an der Stelle eigentlich überhaupt nicht angebracht.
Die hätte man, viel früher bringen sollen, denn bei 'nem mehrstufigen, Formular ist es einfach unfassbar wichtig, dass man da 'ne Prozessanzeige- -reinmacht. Also einfach sagt: „Okay, du bist jetzt bei Schritt drei von fünf“, oder solchen Sachen. Das hat mich heute zum Beispiel dazu gebracht, dieses, was war das? Liste Part, ne, oder?.
-
Sylvia Liste Part, mhm.
-
Sascha Genau, das hat mich heute dazu gebracht, die, das abzuschließen auch, weil ich dachte: „Na ja, jetzt kommen ja nur noch zwei Schritte, Gott sei Dank." Ne. Sonst wär ich, glaub ich, irgendwann ausgestiegen.
-
Sylvia Ja, bei Frage, Frage fünfzig oder so, ne.
-
Sascha Ja, ja, genau. Aber, was jetzt mit progressiven Verbesserungen gemeint ist, quasi, eher, wie kann ich zum Beispiel mit dem allseits beliebten jQuery die Funktionalität aufwerten? Ja. Also zum Beispiel, wenn's um Eingabefeld für Daten, für 'n Datum geht, könnt ich ja zum Beispiel 'n Date Picker dazu bringen, ne. So was in der Richtung. Und, es ist quasi ja eigentlich schon nicht mehr erwähnenswert, aber klar ist, dass das halt quasi auch ohne funktionieren muss. So.
Wo wir da auch beim Thema Barrieren sind. Was ich abgefahren finde, ist tatsächlich, das hatte ich am Anfang der Sendung schon mal kurz erwähnt, dass es mittlerweile so viele Sachen gibt, die eigentlich Formularelemente sein können, die man aber klassischerweise eigentlich gar nicht mehr so als Formular sieht. Ich hatte zum Beispiel vorgestern ein Formular, wo ich mit Google Maps, 'nen Ort auswählen musste.
Dann wurde quasi dadurch, durch meine Auswahl, das Formular irgendwie abgeschickt und es ging so Umkreisgeschichten, ne.
-
Sylvia Genau, also von hier nach dorthin, ne. So 'ne Routenberechnung ist das, ne, die direkt auf der, auf der Map geschieht, ne.
-
Sascha In dem Fall war das, ging's eher um, 'ne Umkreissuche.
-
Sylvia Ah, okay.
-
Sascha Ja. Und das ist zum Beispiel so 'n Ding. Oder es gibt ja mittlerweile so Slider, ja. Wenn ich zum Beispiel irgendwo, bei Amazon oder so sag: „Okay, ich will, zeig mir alles im Bereich von da bis da an Preisen an." Also, sagen wir, alles, was mehr als fünfzig Euro kostet und weniger als zweihundert, dann, ne, hab ich da vielleicht so 'n Slider oder solche Sachen. Ja, da kann man viel mit machen.
-
Sylvia Also, ich fand das ja in diesem, Fancy Form Design. Also, da, deswegen hat mir das Buch am Anfang ganz gut gefallen. Auch wenn es nachher 'n bisschen schwächer wird, weil es eben, ich glaub, dem ganzen ersten Teil sich diesen unter Anführungszeichen neuen Formen-
-
Sascha Ja, absolut.
-
Sylvia -von Formularen widmen, ne. Und, ich hab auch eins wiedergefunden, das ich ja selber in unserem Content-Management-System auch nicht verstanden hab, beziehungsweise nicht wahrgenommen hab, das aber ta-tatsächlich bei Amazon auch gibt. Das sind die, was 'n normaler Button, wie 'n normaler Button erscheint, aber 'n ganz kleines, Pfeilchen nach unten hat, ja. Und wenn man auf dieses Pfeilchen geht, dann erhält man quasi so 'ne Art Select-Auswahl, ne.
-
Sascha Genau, ja.
-
Sylvia Und ich hab das lange Zeit überhaupt nicht als solches wahrgenommen, weil ich immer dachte, es ist halt 'n Button, ne.
-
Sascha Ja, ja, ja.
-
Sylvia Und auch diese Sachen werden vorgestellt und teilweise waren da ganz abgefahrene Sachen, also auch so, da klappen sich ja dann noch mehr Dinge auf und so. Also ich denke, wir haben im Kopf noch sehr stark auch 'n, sehr herkömmliches Bild von Formularelementen, ne. Und, deswegen find ich auch den Schwenk, wir machen dann heute auch 'n bisschen Schwenk zu WAI-ARIA, zum Beispiel diese Spezifikation versucht sehr stark, metatechnisch zu arbeiten.
Da ist 'n Input-Feld nicht unser herkömmliches, Textfeld, sondern damit ist gemeint: alles, ja, die gehen eher so Usability-technisch an, alles, wo ein User Eingaben machen muss. Das kann jetzt alles möglich sein. Das ist 'ne Text Area, das kann irgendwie dieses sein, jenes sein. Das fand ich sehr spannend, weil damit versuchen sie eben auch, auf 'ne ganz andere Ebene zu gehen und zu sagen: „Ja, es kann alles Mögliche.
Später tun wir dann einfach noch mehr reinschreiben, was, alles noch an Feldern hier möglich wäre", ne. Das ist 'ne ganz gute Herangehensweise und macht den Kopf auch 'n bisschen freier in die Richtung: Ach ja, unsere Formulare sind eigentlich jetzt nicht mehr das, was wir gewöhnlich als Kontaktformular erleben-
-
Sascha Absolut.
-
Sylvia -wie du auch schon mehrmals gesagt hast. Das find ich eben spannend. Das hat mir an der Vorbereitung und auch an diesem einen Buch, Fancy Form Design, ganz gut gefallen, dass man einfach, den Blick jetzt einfach erweitert hat. Ach ja, stimmt. Und jetzt guckt man auch viel mehr, ne, auf diese Sachen, wenn man sich 'n bisschen damit beschäftigt. Ach ja, das ist auch wieder 'n nettes, interessantes Feature, das ja im Grunde auch wieder 'n Formularelement ist, ne.
-
Sascha Genau. Also, tatsächlich, das war in dem, in dem, in dem, Buch also wirklich, ganz, ganz, ausführlich beschrieben. Da gehören dann eben zum Beispiel auch so Sachen wie zum Beispiel 'n Color Picker oder so, ja.
-
Sylvia Mhm, genau.
-
Sascha Und ich find, also wie gesagt, da werden wir in der nä-, in der nächsten Folge quasi dann,, noch mal genauer drauf eingehen, aber ich find den Ansatz tatsächlich genau den richtigen, weil wer weiß, was da noch kommt. Also, ne, da, es ist ja vor, vor, acht Jahren hätte sich halt keiner,, träumen lassen, dass man zum Beispiel vielleicht 'ne Adresse nicht mehr eintippt, sondern irgendwie mit Google Maps raussucht oder so. Ob das jetzt sinnvoll ist, lassen wir mal hingestellt.
Aber, das, so, so bleibt man ja quasi, erweiterungsoffen, ne.
-
Sylvia Ja, genau. Ja.
-
Daniel Ja, ich finde aber allerdings, dass diese Erweiterung, also du hast ja schon an-angedacht, ob das jetzt sinnvoll ist, 'ne, 'ne Adresse über Google Maps rauszusuchen. Diese, diese Erweiterungen sollten schon wenigstens irgendwie bekannt sein von dem Benutzer. Und da, da sollte man also nicht Vorreiter spielen und jetzt irgendwas Neues, ausprobieren, was die Welt noch nie gesehen hat, sondern, sondern sich halt an, an dem anderen großen, Bereich, orientieren, der, den der Benutzer kennt.
Und das ist sowohl auch das, sowohl das Betriebssystem und die Programme, die darauf laufen und die Eingabefelder, die, die da benutzt werden und da schon, schon, sich durch, sich, sich durchgesetzt haben. Also, das sind ja eigentlich alle, alle diese neuen, Web 9 Eingabefelder kommen aus dem Betriebssystemfeld oder sind da schon Schon benutzt worden.
-
Sascha Also ich würd, ich würd, ich würd ungerne, die L-Leser, nicht quasi die Leser, die Hörer bremsen wollen. Also wenn da jetzt jemand die sensationelle Idee hat, kann er das gerne ausprobieren, aber im Prinzip gebe ich dir recht, weil man ja einfach schon so unfassbar viel machen kann, ohne jetzt quasi das Rad neu zu erfinden, ne? Also, man, man stößt ja immer wieder über so die zwanzig besten jQuery-Plugins, um, seine Formulare zu, aufzuwerten mit, was weiß ich, Passwort-, Safety-Anzeige, ne?
Also wo das, wo ich angezeigt bekomme, ob das Passwort jetzt schon sicher genug ist in Anführungsstrichen oder irgendwelchen Auto vervollständigen, ver-vervollständigung. Oder was ich zum Beispiel sehr nett finde: Wenn man es gut macht, ne, das ist immer die Hau-Hauptvoraussetzung, ist zum Beispiel so eben abschnittsweise Einblendung.
Also wenn ich halt, ne, hab ich ja vorhin schon mal gesagt, wenn ich eine bestimmte Frage mit, mit Ja oder Nein beantworte, dann halt erst bestimmte, neue Felder einzublenden. Wenn es zu viel wird, ist schlimm, weil man dann immer nicht genau weiß, wie viel muss ich denn jetzt hier eigentlich noch machen? Weil was, was kommt da? Klappt da gleich noch eine DIN-A4-Seite aus oder was? Aber ich finde es teilweise sehr hilfreich, wenn das dann zum Beispiel weniger wird oder so, ne.
-
Sylvia Ja, ich fand, in dem einen Buch fand ich mit dem Autocomplete das auch sehr lustig, wie er aufgezeigt hat, dass es tatsächlich Autocomplete, Felder gibt, die, wenn du einen Buchstaben reinsetzt, ja, irgendwie dann schon reagieren und gar nicht abwarten, dass du einfach mal was Sinnvolles eingibst, ne?
Das ist ja, das kann man ja tatsächlich mit diesen, Such, Skripten tatsächlich einstellen, ab wie viel Buchstaben, ne, muss es etwas Sinnvolles sein und so weiter, soll erst dann die Funktion starten und, -
-
Sascha Genau, oder ab wie viel zei, wie viel Verzü, wie viel Zögerung, ja, wie viel Verzögerung. Weil wenn jemand das so durchtippt, dann, macht das ja auch nicht viel Sinn.
-
Sylvia Ja, auch diese Passwortgeneratorfunktion habe ich auch mal drüber nachgedacht. Früher haben wir unsere Passwörter einfach so angegeben, ne? Also das hat sich ja auch historisch verändert. Jetzt bin ich natürlich froh, wenn es diesen Indikator gibt, weil sonst sitze ich ja Stunden, bis zu wis, um zu wissen, dass ich tatsächlich das richtige Passwort eingegeben habe, dass es auch einigermaßen sicher ist und so weiter, ne. Und das hat sich ja auch entwickelt.
Ich meine, vor Jahren haben wir uns darum überhaupt nicht gekümmert, ob das jetzt, ne, haben wir diese Prozessindikatoren gab es da einfach nicht.
-
Sascha Ja, ja, absolut, ja.
-
Sylvia Und jetzt, jetzt können wir fast schon immer ohne irgendwie Indikatoren, gerade so bei diesen ganzen sozialen, Netzwerksdiensten, weil sonst, ist man ja komplett verloren, ne.
-
Sascha Aber was ich zum Beispiel übrigens,, zum Thema Passwort, ein echtes Best Practice, finde, ist, wenn man jetzt, nachdem man sich schon angemeldet hat und irgendwie erneut auf einer Seite an, einloggen möchte, ja, und, der, man jetzt sein Passwort eingibt und das funktioniert nicht, weil es nicht zum Usernamen passt oder so, ja. Ich habe jetzt, einmal, erlebt, dass, quasi mir, mir ein Hinweis darauf gegeben wurde, wie das Passwort aufgebaut sein muss, ja.
Weil dann stand da so was wie, : „Erinnerre dich daran, da müss, da müssen Zahlen drin vorkommen und Sonderzeichen." Ja, und in dem Moment dachte ich so: Ach ja, dann weiß ich auch, wahrscheinlich habe ich,, eins meiner Standardpasswörter benutzt und habe halt zum Beispiel noch irgendwie ein Fragezeichen drangehängt oder solche Sachen, ja.
Und, oder zum Beispiel auch, : Das Passwort muss länger sein als, du hast auf jeden Fall ein Passwort, das länger ist als acht Buchstaben oder irgendwie solche Sachen, ja. Das fand ich ganz hilfreich und ich kann mir beim besten Willen nicht vorstellen, dass das jetzt Hackern unbedingt hilft, quasi, die, die, eher, eher dann ranzukommen, ja. Während ich dann zum Beispiel verzichten konnte darauf, die, ich-habe-mein-Passwort-vergessen-Funktion zu nutzen.
-
Sylvia Mhm. Genau, ja.
-
Daniel Ja, das hilft Hackern ja nicht. Die können das ja in der Registrierungsform genauso lesen, weil da muss es ja stehen.
-
Sascha Absolut, genau. Ja.
-
Sylvia Daniel hört sich aber auch ziemlich weit weg an, blechern.
-
Sascha Ich kann aus eigener Erfahrung sagen, dass das nicht an ihm liegt, genauso wie du aus eigener Erfahrung weißt, dass du nicht dumpf klingst. Also. Ja, also jetzt wäre quasi der letzte Punkt, den wir schon ein paar Mal angesprochen haben, Usability Tests und, ich finde tatsächlich, dass man das nicht oft genug sagen kann. Und, hier ist ein, hier ist ein Punkt dazu geschrieben worden, der, ich bin mir relativ sicher, dass der von Daniel kommt.
Da steht nämlich: Am besten so früh wie möglich testen, Planungsphase und Entwurfsphase. Das könnte daran liegen, dass, d-du letzte Woche quasi einen Usability-Test um die Ohren geknallt bekommen hast, für ein Projekt. Ist das, ist das von dir oder habe ich das da reingeschrieben?
-
Daniel Das ist von mir, ja. Und, teilweise liegt das wohl daran, ja. Ich weiß ja nicht, wer so alles zuführt.
-
Sascha Nee, ich glaube niemand, der daran teilgenommen hat. Nee, aber es ist halt tatsächlich wichtig, weil, wir haben, also ich versuche, mich da schon dran zu halten. Trotzdem f-- es kommt manchmal vor, dass man dann halt doch irgendwie sich diesem, Dogma entzieht. Und es war jetzt wieder so ein Beispiel, wo man einfach davor sitzt und merkt, das, das kann doch nicht wahr sein. Also wieso, wieso, wieso ist das nicht klar?
Und wenn man, das ist so die, die, die super goldene Handregel, wenn man mit fünf Usern testet, die entweder wenn man halt ein total breites Spektrum hat, natürlich möglichst gestreut sind, sonst sich wirklich nah an der Zielgruppe bewegen oder an denen, die das hinterher benutzen, dann hat man eigentlich achtzig bis neunzig Prozent der Probleme gemeistert. Also wenn man die, das Feedback dann halt auch beachtet.
So, und, das war jetzt so ein Beispiel letzte Woche, wo wir, durchaus gemerkt haben: Hm, da haben wir wohl ein bisschen an den Leuten vorbeigeplant an bestimmten Stellen, weil man dann so im Projekt drin ist, dass man halt, den Wald vor lauter Bäumen nicht mehr sieht.
-
Sylvia Ja, vor allem meistens ist es ja, wenn man quasi am Schluss das macht, ist ja das Kind dann quasi schon im Brunnen, ne.
-
Sascha In der Tat, ja.
-
Sylvia Da kann man dann auch meistens nicht mehr viel machen. Erstens ist wahrscheinlich das Budget schon aus und zweitens:, oh Gott, da müsste ich jetzt noch mal an die Engine ran oder an die Templates und so weiter und so fort, ne. Und dann spätestens, geht man wieder zum Kunden und sagt: Nee, eigentlich müssen wir das Formular noch mal von vorne aufrollen. Und dann ist es ohnehin alles vorbei.
-
Sascha Ja, deshalb, das quasi sollte für diese Sendung einer der großen Schlussappelle sein, nämlich Usability testen, Usability testen, Usability testen.
-
Sylvia Und möglichst davor.
-
Sascha Genau, und, und zwar möglichst ganz weit vorne schon und, und auch möglichst vielleicht im Prozess durch. Und, bei uns hat sich zum Beispiel gezeigt, dass es genug Leute, also wir sind allerdings eine interdisziplinäre Abteilung so, aber dass es genug Leute gibt, die erstens mit dem Projekt nicht beschäftigt sind und zweitens auch nicht so webaffin sind, dass sie einfach schon immer alles können, ja.
Sodass man halt dann manchmal denkt: „Ah, okay, das war jetzt vielleicht doch, zu experimentell.“ Ja, so was weiß ich. Zum Beispiel so ein Slider, wo dann jemand nicht, nicht mit klarkommt. Und das reicht dann meistens schon. Also man muss da jetzt nicht irgendwie die, Riesen-Cases bringen. Wobei ich übrigens und das fand ich auch ganz spannend in den Büchern, das hattest du im Vorgespräch auch noch mal kurz gesagt, diesen, Effekt von, Personennähe, Personas.
-
Sylvia Persona, Personanähe.
-
Sascha Genau, ganz, ganz interessant fand. Also ich würde das mal deutsch mit Archetyp, übersetzen. Also dass man sich quasi User,, überlegt und die im Kopf so ein bisschen rollenspielmäßig ausarbeitet und sagt: „Ich habe also die achtundzwanzigjährige, Medizinstudentin, die, sich im Web einigermaßen auskennt, die irgendwie auf Facebook unterwegs ist und so weiter.
Und dann zum Beispiel habe ich irgendwie einen, achtundsechzigjährigen Rentner, der, sich gerade in der Volkshochschule noch mal einen Internetkurs gemacht hat und so weiter.“ Also dass man halt die sich ausarbeitet und die selber quasi testet, also sich selbst die Persona im Kopf,, versucht auszuarbeiten und damit dann auch das, Formular losgeht.
Da kommt man, glaube ich, auch am Anfang schon an den einen oder anderen Punkt, wo man denkt: „Ah, ob der das jetzt so wüsste, wage ich zu bezweifeln.“ Zum Beispiel.
-
Sylvia Ja, also das fand ich ja in den Büchern spannend. Das-- Also ich-- Schade, dass es halt nicht in die Tiefe geht, ne. Bei diesen Konzepten. Also das, wenn ich zwei Konzepte mitgenommen habe in der Vorbereitung, war das tatsächlich eben dieses Persona-Konzept, wo ich einfach gedacht habe, das finde ich spannend, da will ich, mehr dazu wissen. Und das zweite waren für mich halt, Wireframing und Grid, weil ich tatsächlich, damit im realen Leben wenig zu tun habe.
Ich meine, ich bin halt klassisch in der Programmierung eher beheimatet und, das macht bei uns die Kreation, ne. Die arbeiten tatsächlich dann mit Grid und Wireframing. Aber deswegen dachte ich mir: Oh, gerade so die Dreispartigkeit der Formulare, die haben wir jetzt nicht ausführlich, angesprochen, fand ich sehr spannend und, da will ich dann auch mal ein bisschen, mich noch mehr informieren. Also die Bücher, das ist vielleicht jetzt ein bisschen schräg angekommen.
Sie sind natürlich eher an der Oberfläche. Das liegt am Thema. Ich denke, die haben versucht, einfach möglichst viel, an Informationen in die einzelnen Bücher zu packen. Schön wäre, wenn da quasi Folgebücher kämen, ne? Also quasi einfach für, für Professionals.
-
Sascha Ja, Part zwei, genau.
-
Sylvia Genau, Part zwei.
-
Sascha Extended.
-
Sylvia Aber ich denke, ich habe mir immer doch, ich habe ja viel rumgekritzelt. Ich habe mir doch einige Sachen rausgeschrieben und so und werde die auch noch mal, einzeln dann später durchgehen. Also sie sind schon, also kann man sich schon kaufen und sie sind ja auch nicht so superteuer, ne.
-
Sascha Ja, absolut.
-
Sylvia Und es ist ja ein spannendes Thema.
-
Daniel Also, liebe Hörer, ihr könnt hier keinen Scheiß gewinnen. Ihr könnt auch rein, was Lesbares.
-
Sascha Genau. Also wir, wir schreiben auf jeden Fall die, drei Bücher auch noch mal in die, in die, in die Show Notes rein. Und, wie gesagt, kommentiert die, die Sendung mit einem Link auf einen, netten Artikel zum Thema Formdesign oder Form Usability oder auf, einer, ein eurer Meinung nach Best-Practice-Beispiel. Und wir verlosen dann unter allen Leuten, die kommentieren, zwei, Forms That Work-Bücher von Carolyn Jared und Gary Giff-Giff-Giffney, sage ich jetzt einfach mal.
Und, übrigens doppelte Kommentare zählen dann nicht doppelt. Also ihr könnt nicht beide Bücher gewinnen. Ja, also jeder pro Person nur ein Buch. So. Und dann-
-
Daniel Rechtweg ist ausgeschlossen.
-
Sascha Genau, der Rechtsweg ist selbstverständlich ausgeschlossen und, Web,, Technikwürze-Moderatoren können nicht gewinnen, sage ich jetzt einfach mal so. Genau, du hättest jetzt mitgemacht. So, dann bleibt uns quasi erst mal nach dieser, ähnlich wie die Bücher jetzt dieses Mal recht oberflächlichen,, Sendung erstens auf die nächste zu verweisen, wo wir uns mit barrierefreien Formularen oder mit der Zugänglichkeit für Formularen auseinandersetzen.
Wir freuen uns auch vor allen Dingen auf einige Tonbeispiele von Screenreadern. Da können wir nämlich ein bisschen mehr bieten als visuell und, wünschen euch, im Namen des gesamten Technikwürze-Teams, frohe Weihnachten. Das ist ja, wenn ich mich recht entsinne, in dieser Woche, ich denke mal in der, in der Zukunft, und, bieten euch dann quasi zwischen den Jahren die Formular Total Teil zwei-Sendung zu zugänglichen Formularen. Ich sage mal Tschüss.
-
Daniel Da schließe ich mich an und auch von mir frohe Weihnachten.
-
Sylvia Ja und tschüss.
-
Einspieler Mehr Qualität im Webdesign durch Webstandards. Tipps und Tricks zur Umsetzung findet ihr bei den Webkrauts auf Webkrauts.de für ein besseres Web.
Weitere Informationen und die Links zur Sendung auf technikwürze.de.
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.
bordereinertextarea) andere aber nicht (selects,input type=checkboxoderinput 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 (US) – 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.
Erwähnungen 19
Kommentare 26
-
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!
-
Fürs entwickeln von Formularen mit CSS gibt es einen interessanten Artikel bei Smashingmagazine http://bit.ly/5loIDQ
-
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..
-
@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.
-
-
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.
-
File-Upload (input=file) zu stylen ist besonders tricky. Mir hat hier http://www.appelsiini.net/projects/filestyle sehr geholfen.
-
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!)
-
@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 ;-)
-
-
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 :)
-
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.)
-
@Frank
Du kannst Textile als Formatierung benutzen, den Hinweis darauf bauen wir noch rein, danke!
-
-
@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.
-
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?
-
Aktueller Artikel bei dzineblog.com 30 Impressive Ways to Design Sign-Up Page/Form
-
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 -
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.
-
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?
-
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.
-
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: -
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.
-
... 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 -
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 ;)
-
Die Verlosung ist hiermit beendet. Die Gewinner stehen fest: Hicore und Fladi.
Herzlichen Glückwunsch! :-)
-
Nochmals vielen Dank fürs Verlosen. Freu mich schon aufs Buch.
der Heiko
-
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 BesitzerDas 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
-
Auch von mir nochmal vielen Dank. Habe leider erst kurz reinlesen können, aber macht einen guten Eindruck. Danke dafür!