zus\u00e4tzlichen Fehlertext<\/strong>.<\/p>\n\n\n\nMobil zuerst<\/h2>\n\n\n\n
Bitte bitte achtet darauf, wie das Formular mobil aussehen wird. Das bedeutet die Nutzung von Responsive Design<\/strong>, aber auch das Testen auf echten Ger\u00e4ten um zu sehen, wieviel Platz die Tastatur<\/strong> einnimmt, oder ob Autovervollst\u00e4ndigung<\/strong> und automatisches Ausf\u00fclle<\/strong>n so funktionieren, wie sie sollen.
Einige Browser und Werkzeuge k\u00f6nnen kleinere Bildschirmgr\u00f6\u00dfen emulieren, aber ein echtes Ger\u00e4t h\u00e4lt manchmal noch einige unerwartete T\u00fccken bereit (ich spreche da aus Erfahrung).
Mobile Browser<\/strong> haben andere Standards (und Bugs) als die auf dem Desktop und immer daran denken, dass ein Telefon Landschafts- und Portrait-Modus<\/strong> kann.<\/p>\n\n\n\nFeld-Typen und Validatoren<\/h2>\n\n\n\n
Sogar HTML kann verschiedene Typen von Eingabefeldern<\/strong> unterscheiden. Es gibt z.B. Text, numeral oder eMail – und die sollten definitiv auch benutzt werden. Wieder geht es hier besonders um mobile Ger\u00e4te, auf denen der Benutzer besser einen Nummernblock angezeigt bekommen sollte, wenn er seine Kartennummer eingeben muss (statt der normalen Tastatur).<\/p>\n\n\n\nDie Benennung von Feldern<\/strong> in HTML wird h\u00e4ufig \u00fcbersehen. Neben der besseren Syntax sind Funktionen wie automatisches Ausf\u00fcllen davon abh\u00e4ngig, dass ein eMail-Feld auch mit “email” benannt ist (\u00fcber die id und\/oder den Namen des Input-Tags). Wenn wir schon bei dem Thema sind; Label sollten so kurz und selbsterkl\u00e4rend wie m\u00f6glich sein. Im Zweifelsfall sorgen Info-Icons<\/strong> mit einem Popup f\u00fcr die n\u00f6tigen Zusatzinformationen.<\/p>\n\n\n\nDann gibt es Platzhalter<\/strong> und vor-ausgef\u00fcllte Felder<\/strong>, die dem Nutzer das Ausf\u00fcllen erleichtern.<\/p>\n\n\n\nAlle Frameworks enthalten irgendeine Art von Validatoren<\/strong> f\u00fcr Formular-Felder. Vom \u00fcberpr\u00fcfen des korrekten Formats einer eMail-Adresse, \u00fcber die korrekte L\u00e4nge einer Nummer bis zur Information mehrerer Felder, die in Kombination eine besondere Voraussetzung erf\u00fcllen und so weiter. Trotzdem sollten Validatoren eher zur\u00fcckhaltend verwendet werden; nur die wirklich notwendigen Felder sollten Pflichtfelder<\/strong> sein (das ist auch eine Frage von Datenschutz) und zu krasse Einschr\u00e4nkungen k\u00f6nnen auch unerw\u00fcnschte Effekte haben (z.B. f\u00fcr ungew\u00f6hnliche Namen).
Wird ein komplizierter Validator angewandt, dann sollte der Benutzer dar\u00fcber informiert<\/strong> werden. Das ist z.B. f\u00fcr das Setzen eines Passworts relevant, wenn die Regeln hierf\u00fcr sonst eher verwirren, als f\u00fcr mehr Sicherheit sorgen.<\/p>\n\n\n\nNavigation<\/h2>\n\n\n\n
Wenn das Formular mehrere Felder umfasst, dann sollte es seine eigene Seite<\/strong> erhalten. Am besten mit einer kurzen Willkommen<\/strong>-Seite, welche das Formular vorstellt, worum es dabei geht und wie lange der Benutzer zum Ausf\u00fcllen voraussichtlich ben\u00f6tigt. Nach dem erfolgreichen Absenden des Formulars muss es noch eine entsprechende Benachrichtigung geben, per eMail und Erfolg-Seite<\/strong>.<\/p>\n\n\n\nWenn Teile des Formulars optional sind sollten sie besser nur dann angezeigt werden, wenn sie auch relevant sind.<\/p>\n\n\n\n
Weitere Design-Prinzipien<\/h2>\n\n\n\n- Nutze leicht verst\u00e4ndliche Sprache f\u00fcr Fragen und Fehlermeldungen.<\/li>
- Beachte die Tabulator-Reihenfolge f\u00fcr Barrierefreiheit.<\/li>
- …<\/li><\/ul>\n\n\n\n
Lasst mich wissen, wenn ich noch fundamentale Design-Grundlagen \u00fcbersehen habe. Hier nochmal eine klare Empfehlung f\u00fcr die verlinkten Artikel – sie enthalten detaillierte Listen mit Tipps und Fallstricken, wenn es um das entwerfen von Web-Formularen geht.<\/p>\n\n\n\n
Checkliste<\/h2>\n\n\n\n- Der Farbkontrast zwischen Hintergrund und Text sollte hoch genug sein, um Barrierefreiheit zu erm\u00f6glichen (das betrifft Input-Felder und Label).<\/li>
- Felder sind nach Themen gruppiert und bei Bedarf auf mehrere Seiten verteilt.<\/li>
- Felder sind programmatisch korrekt mit id, name, label, Platzhalter, Info-Button und Tabulator-Reihenfolge versehen.<\/li>
- Validatoren werden mit Hilfe von Feld-Typen hinzugef\u00fcgt, nach dem Prinzip so viel wie n\u00f6tig.<\/li>
- Fehler werden am Feld und mit einer f\u00fcr den Benutzer eindeutigen Nachricht angezeigt.<\/li>
- Das Formular wird mit Willkommen- und Erfolgs-Seite, sowie einer Fortschrittsanzeige eingerahmt.<\/li>
- Responsive Desing ist wichtig, um das Formular mobil zug\u00e4nglich zu machen.<\/li>
- Abh\u00e4ngigkeiten zwischen Feldern (bez\u00fcglich Validierung und Sichtbarkeit) m\u00fcssen eindeutig im Vorfeld definiert werden.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
Manche Webanwendungen kommen nicht um mehr oder weniger umfangreiche Formulare herum. Hier gilt das richtige Vorgehen, angefangen beim durchdachten Design.<\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,36],"tags":[40,39,38],"class_list":["post-341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","category-web-programming","tag-design","tag-forms","tag-web"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":true},"de":{"title":true,"content":true,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/comments?post=341"}],"version-history":[{"count":14,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/341\/revisions"}],"predecessor-version":[{"id":378,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/341\/revisions\/378"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}