[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"Z6tTnHt_2DKtjtyVm7fOa9DgImwsDALZiuqWVBr8vYI":75,"VucjVG5gQ6eUdRqhM65WSFn4nkFizFOj-W5ejGoSdTg":160,"_apollo:default":205},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":150,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":153,"author":154},"NodeWpPost","1127","Formulardesign",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1328686414,"UTC","+00:00","2012-02-08T07:33:34+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/formulardesign",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Formulardesign | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/formulardesign","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","492","Formular","/tag/formular",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"1385","Usability","/tag/usability",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"1489","Webdesign","/tag/webdesign",{"__typename":151,"processed":152,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch5>Hallo!\u003C/h5>\n\u003Cp>Als frisches Teammitglied von Liechtenecker beschäftige ich mich in meinem ersten Blogeintrag mit einem (auf den ersten Blick) trockenen Thema: Dem Design von Formularen.\u003Cbr>\nTäglich sind wir im Internet mit vielen unterschiedlichen Typen von Formularen konfrontiert: Dabei reicht die Spanne von Loginformularen, über die Registrierung bei Websites bis hin zu hochkomplexen und mehrstufigen Formularen, z.B. für das Finanzamt. Wie man den Prozess des Ausfüllens für die User einfacher und vor allem frustfreier gestalten kann, werde ich im Folgenden beschreiben.\u003C/p>\n\u003Ch5>Validierung, Validierung, Validierung\u003C/h5>\n\u003Cp>Über Jahren dominierte das Thema der Formularvalidierung alle Artikel über Usability bei Formularen auf Webseiten. Im Laufe der Jahre sind immer ausgereiftere Methoden und Frameworks entwickelt worden, um die Validierung für den User so einfach und nachvollziehbar wie möglich zu machen.\u003Cbr>\nTrotz des großen Interesses und der Vielzahl an Artikeln über diesen Aspekt, gehört die Validierung von Usereingaben immer noch zu den schwierigsten, aber gleichzeitig auch wichtigsten Aspekten, bei der Gestaltung eines guten Formulars.\u003Cbr>\nDazu zählen zunächst die grundlegenden Anforderungen. Der Benutzer sollte seine Daten nur einmal eingeben müssen und Fehlermeldungen sollten aussagekräftig und klar formuliert werden. In diesen Punkten hat sich in den letzten Jahren mit Sicherheit am meisten getan. Zusätzlich zu solch offensichtlichen Punkten sollten aber auch alle Entscheidungen, die der User getroffen hat, berücksichtigt werden. Dazu zählen vor allem die Auswahlmöglichkeiten bezüglich Newslettern, AGB oder sonstigen Daten, die per Checkbox abgefragt werden. Nichts kann den User mehr nerven (und gegebenenfalls den Prozess des Ausfüllens abbrechen lassen), als Wünsche nach einem Fehler, immer und immer wieder eingeben zu müssen.\u003C/p>\n\u003Ch5>Eingabe\u003C/h5>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg?itok=2Pr2i5WW\" data-rel=\"lightbox-gallery-Olodlz7n\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"Verschiedene Möglichkeiten der Ausrichtung von Textlabels bei Formularfeldern\" data-entity-type=\"media\" data-entity-uuid=\"9b7eb750-5e5c-4303-9c40-f038afd69413\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=tf7zHu_Y 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=Ap5ocTWG 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"1787\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=GYnK1rYY 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=3bR8ZnHt 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"1787\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=fqoRq2QV 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=15bWY8eq 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"1787\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=_NaizEiz 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=71KeGiVT 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"1588\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=STLCCter 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.webp?itok=DaY-v7hf 2x\" type=\"image/webp\" width=\"540\" height=\"1787\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"1787\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign11-1.jpg.jpg?itok=DaY-v7hf\" alt=\"Verschiedene Möglichkeiten der Ausrichtung von Textlabels bei Formularfeldern\" title=\"Textlabels von Formularfeldern\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Selten gibt es im Internet Formulare, die nicht eines oder mehrere optionale Felder haben. Besonders beliebt ist hierbei die Telefonnummer. Beim Design von Formularen sollte man sich aber stets fragen: Benötige ich überhaupt optionale Angaben oder wäre es besser, diese gleich ganz wegzulassen. Dies ist natürlich vor allem von der Branche abhängig – denn was macht z.B. ein Forum mit meiner Telefonnummer?\u003Cbr>\nDie Reduzierung auf die wichtigsten Angaben hat für beide Seiten Vorteile: Der User muss kein unendlich langes Formular ausfüllen und ist motivierter, den Prozess abzuschließen. Auf der anderen Seite können sich die Betreiber der Website durch weniger Kunden, die das Ausfüllen im Prozess abbrechen, über mehr Kunden und Daten freuen.\u003Cbr>\nNeben Eingabefeldern sieht man häufig Anweisungen für den User, wie er die eingegebene Information zu formatieren hat, also z.B. bei Telefonnummern die Aufforderung, die Nummer in bestimmtes Format zu bringen.\u003Cbr>\nDas Ausfüllen des Formulars sollte für den User aber ein Prozess sein, der ohne Hürden (sind sie auch noch so klein) zu bewältigen sind. Gutes Formulardesign ist dadurch erkennbar, dass der User nicht dazu genötigt wird, seine Daten in Formate zu bringen, die dem Designer des Formulars vorschweben. Viel besser wäre es, die Daten nachträglich und ohne Zutun des Users zu formatieren (Leerzeichen und Sonderzeichen entfernen, …) um sie dann einheitlich in der Datenbank abzuspeichern.\u003Cbr>\nTextlabels vertikal, links oder rechts ausgerichtet?\u003Cbr>\nFolgende Grafik bereitet die Möglichkeiten bei der Ausrichtung von Textlabels von Formularfeldern visuell auf.\u003Cbr>\n\u003Cbr>\nAls Faustregel gilt: für kurze Formulare mit wenig Feldern kann das Textlabel vertikal angeordnet werden, das erhöht die Geschwindigkeit beim Ausfüllen und sieht übersichtlich aus.\u003Cbr>\nBei längeren Formularen scheidet diese Variante durch den enorm gesteigerten, vertikalen Platzbedarf jedoch aus. Dann fällt die Entscheidung zwischen rechts- oder linksausgerichteten Textlabels. Linksausgerichtete Labels sind für den User schneller lesbar und wirken geordneter, nach rechts ausgerichtete Labels erhöhen den Zusammenhang zwischen Label und Eingabefeld.\u003C/p>\n\u003Ch5>Abschnitte\u003C/h5>\n\u003Cp>Wichtig ist, das Formular nicht zu lang werden zu lassen sondern an gegebenen Stellen abzutrennen und ein “Mehr-Schritt-System” daraus zu machen. Gute Beispiele hierfür sind vor allem Webshops mit dem üblichen Ablauf Warenkorb > Daten > Zahlung > Zusammenfassung.\u003Cbr>\nDabei ist es wichtig, dem Benutzer jederzeit Feedback darüber zu geben, in welchem Schritt des Prozesses er sich befindet und welche Schritte noch vor ihm liegen.\u003Cbr>\nRechnet der User z.B. seine Bestellung nochmals überprüfen zu können, bevor er diese Abschickt, das Formular aber einerseits keine Information darüber gibt, wo im Prozess er sich befindet und andererseits auch keine Seite mit Zusammenfassung existiert, birgt das enormes Frustpotential.\u003C/p>\n\u003Ch5>Sekundäre Buttons\u003C/h5>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg?itok=E3MjPxvC\" data-rel=\"lightbox-gallery-Olodlz7n\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"Grafische Aufbereitung der Sekundärbutton\" data-entity-type=\"media\" data-entity-uuid=\"331a3033-33f8-459b-9568-e951015608b3\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=RXrlVVAW 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=_-P-AWIZ 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"540\" height=\"683\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=cICF03zv 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=BvX946ue 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"540\" height=\"683\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=Ani6RX-s 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=LNMd4P9Z 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"540\" height=\"683\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=scZG-3U1 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=xGL4xnJn 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"607\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=pprz3rCS 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.webp?itok=DFxLpQ0n 2x\" type=\"image/webp\" width=\"540\" height=\"683\">\n                  \u003Cimg loading=\"lazy\" width=\"540\" height=\"683\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2012/02/Formulardesign_21-1.jpg.jpg?itok=DFxLpQ0n\" alt=\"Grafische Aufbereitung der Sekundärbutton\" title=\"Sekundärbutton\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Häufig trifft man neben den essentiellen Primärbuttons am Ende eines Formulars auch auf Sekundärbuttons, die es dem User z.B. ermöglichen sollen, das Formular mit einem Klick zurückzusetzen oder den Prozess abzubrechen.\u003Cbr>\nDa dies zwar durchaus nützliche Funktionen sein können aber vom Benutzer nicht ausgeführt und vor allem nicht unabsichtlich ausgelöst werden sollten muss darauf geachtet werden, auch das Verhältnis zwischen Primärbutton und Sekundärbutton in der grafischen Aufbereitung widerzuspiegeln.\u003Cbr>\n\u003C/p>\n\u003Ch5>Abschluss\u003C/h5>\n\u003Cp>Ein kurze Zusammenfassung ergibt also: Das Ausfüllen eines Formulars sollte für den User so schnell und einfach wie möglich gehen. Dabei sollte der User auf Fehler bei seinen Eingaben hingewiesen werden und vor allem zu nichts gezwungen werden. Große Formulare sollten in kleinere Teile heruntergebrochen werden, der User sollte aber generell immer über seinen Fortschritt beim Ausfüllen informiert werden. Frustrierende Fallen (unabsichtliches Rücksetzen des Formulars) sollten nach Möglichkeit abgeschwächt werden.\u003Cbr>\nGenerell gilt lieber mehr Zeit in die Entwicklung eines Formulars zu stecken als im späteren Verlauf Kunden zu verlieren, die durch ein Problem in der Usability abgeschreckt worden sind.\u003Cbr>\nIch hoffe ich konnte mit diesem Blogbeitrag einige Aspekte des Formulardesigns aufgreifen und behandeln und freue mich schon auf meinen nächsten Beitrag!\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://liechtenecker.at/blog/formulardesign/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Formulardesign - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Hallo! Als frisches Teammitglied von Liechtenecker beschäftige ich mich in meinem ersten Blogeintrag mit einem (auf den ersten Blick) trockenen Thema: Dem Design von Formularen. Täglich sind wir im Internet mit vielen unterschiedlichen Typen von Formularen konfrontiert: Dabei reicht die Spanne von Loginformularen, über die Registrierung bei Websites bis hin zu hochkomplexen und mehrstufigen Formularen, […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/formulardesign/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2012-02-08T08:33:34+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2012/02/Formulardesign11-1.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"5 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/formulardesign/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2012/02/Formulardesign11-1.jpg\",\"width\":540,\"height\":1787,\"caption\":\"Verschiedene M\\u00f6glichkeiten der Ausrichtung von Textlabels bei Formularfeldern\"},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/formulardesign/#webpage\",\"url\":\"https://liechtenecker.at/blog/formulardesign/\",\"name\":\"Formulardesign - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/formulardesign/#primaryimage\"},\"datePublished\":\"2012-02-08T08:33:34+00:00\",\"dateModified\":\"2012-02-08T08:33:34+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/formulardesign/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":155,"id":156,"myRole":157,"name":158,"nickname":159},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":161},[162,180,193],{"__typename":79,"id":163,"title":164,"path":165,"wpTeaserText":166,"wpPromotedTeaserImage":13,"wpHeaderImage":167},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":168,"id":169,"excludeFromScreenreader":13,"mediaImage":170,"name":178,"path":179,"status":20},"MediaImage","3364",{"__typename":171,"url":172,"width":173,"height":174,"alt":175,"title":13,"size":176,"mime":177},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":181,"title":182,"path":183,"wpTeaserText":184,"wpPromotedTeaserImage":13,"wpHeaderImage":185},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":168,"id":186,"excludeFromScreenreader":13,"mediaImage":187,"name":191,"path":192,"status":20},"3355",{"__typename":171,"url":188,"width":173,"height":174,"alt":189,"title":13,"size":190,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":194,"title":195,"path":196,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":197},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":168,"id":198,"excludeFromScreenreader":21,"mediaImage":199,"name":203,"path":204,"status":20},"3303",{"__typename":171,"url":200,"width":173,"height":174,"alt":201,"title":13,"size":202,"mime":177},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":206,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":207,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":211,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":214,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":217,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":220,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":223,"Menu:nuxt-main-menu":226,"ROOT_QUERY":240,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":256,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":259,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":262,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":265,"Menu:footer":268,"TermCategories:8":278,"TermTags:492":289,"TermTags:1385":290,"TermTags:1489":291,"User:23":292,"NodeWpPost:1127":293,"MediaImage:3364":316,"NodeWpPost:1619":318,"MediaImage:3355":321,"NodeWpPost:1616":323,"MediaImage:3303":326,"NodeWpPost:1606":328},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",208,"internal",20,"expanded",21,"attributes",210],{"__ref":209},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",212,"internal",20,"expanded",21,"attributes",213],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",215,"internal",20,"expanded",21,"attributes",216],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",218,"internal",20,"expanded",21,"attributes",219],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",221,"internal",20,"expanded",21,"attributes",222],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",224,"internal",20,"expanded",21,"attributes",225],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",227],[228,230,232,234,236,238],{"__ref":229},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":231},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":233},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":235},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":237},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":239},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",241,"menu({\"name\":\"NUXT_MAIN_MENU\"})",242,"menu({\"name\":\"FOOTER\"})",244,"route({\"path\":\"/blog/formulardesign\"})",246,"latestKnowhow({\"excludeId\":\"1127\",\"limit\":3})",249],"Query",{"__ref":243},"Menu:nuxt-main-menu",{"__ref":245},"Menu:footer",["null","__typename",77,"entity",247],{"__ref":248},"NodeWpPost:1127",[250,252,254],{"__ref":251},"NodeWpPost:1619",{"__ref":253},"NodeWpPost:1616",{"__ref":255},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",257,"internal",20,"expanded",21,"attributes",258],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",260,"internal",20,"expanded",21,"attributes",261],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",263,"internal",20,"expanded",21,"attributes",264],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",266,"internal",21,"expanded",21,"attributes",267],{"__ref":209},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",269],[270,272,274,276],{"__ref":271},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":273},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":275},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":277},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",279,"langcode",280,"changed",281,"metatag",282],["null","__typename",118,"processed",119,"format",120],{"__ref":209},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[283,285,287],["null","__typename",93,"tag",94,"attributes",284],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",286],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",288],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",155,"id",156,"myRole",157,"name",158,"nickname",159],["null","__typename",79,"id",80,"title",81,"changed",294,"created",295,"langcode",296,"path",90,"promote",21,"status",20,"sticky",21,"metatag",297,"category",304,"contentElements",13,"evergreen",13,"tags",306,"wpBody",313,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",153,"author",314],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":209},[298,300,302],["null","__typename",93,"tag",94,"attributes",299],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",301],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",303],["null","__typename",109,"property",110,"content",81],{"__ref":305},"TermCategories:8",[307,309,311],{"__ref":308},"TermTags:492",{"__ref":310},"TermTags:1385",{"__ref":312},"TermTags:1489",["null","__typename",151,"processed",152,"format",120,"summary",13],{"__ref":315},"User:23",["null","__typename",168,"id",169,"excludeFromScreenreader",13,"mediaImage",317,"name",178,"path",179,"status",20],["null","__typename",171,"url",172,"width",173,"height",174,"alt",175,"title",13,"size",176,"mime",177],["null","__typename",79,"id",163,"title",164,"path",165,"wpTeaserText",166,"wpPromotedTeaserImage",13,"wpHeaderImage",319],{"__ref":320},"MediaImage:3364",["null","__typename",168,"id",186,"excludeFromScreenreader",13,"mediaImage",322,"name",191,"path",192,"status",20],["null","__typename",171,"url",188,"width",173,"height",174,"alt",189,"title",13,"size",190,"mime",177],["null","__typename",79,"id",181,"title",182,"path",183,"wpTeaserText",184,"wpPromotedTeaserImage",13,"wpHeaderImage",324],{"__ref":325},"MediaImage:3355",["null","__typename",168,"id",198,"excludeFromScreenreader",21,"mediaImage",327,"name",203,"path",204,"status",20],["null","__typename",171,"url",200,"width",173,"height",174,"alt",201,"title",13,"size",202,"mime",177],["null","__typename",79,"id",194,"title",195,"path",196,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",329],{"__ref":330},"MediaImage:3303"]