Die Suche nach intelligenteren Webformularen

Online-Formulare sind einer der schwierigsten Bereiche der Website-Entwicklung, um richtig zu werden, insbesondere bei so vielen Dingen, die schief gehen können. Die veränderte Art und Weise, wie Menschen auf Online-Inhalte zugreifen, hat sich auch auf eine Technologie ausgewirkt, die Jahre entwickelt wurde, bevor die Menschen mit einem Telefon erwarten konnten, was sie normalerweise nur mit einem Computer tun würden. Es ist eine Technologie, die sehr wenig weiterentwickelt wurde.

Die Gestaltung von Webformularen sollte ein eigenständiger Beruf sein. Website-Designer sollten die Dienste von professionellen Web-Formular-Vollzeit-Designern in Anspruch nehmen, um sie bei ihrer Aufgabe zu unterstützen. Dies wird jedoch nicht als wirtschaftlich genug angesehen. Daher ist der Site-Designer meist auch für die Gestaltung der auf der Site verwendeten Formulare verantwortlich.

Das Entwerfen von Formen ist jedoch eine hochspezialisierte Fähigkeit. Es erfordert zu verstehen, wie Menschen mit Informationen interagieren, und die besten Methoden zum Sammeln und Präsentieren von Informationen kennen. Bei allgemeinem Webdesign geht es hauptsächlich darum, Informationen und Bilder auf attraktive, aber praktische Weise zu präsentieren. Bei der Gestaltung von Formularen müssen wir uns auf die Art der Informationen konzentrieren und dann entscheiden, wie sie auf der Seite am besten strukturiert werden können beabsichtigt. Ästhetik ist in diesem Fall weniger wichtig, sollte aber nicht vergessen werden.

In diesem Artikel werfen wir einen Blick auf die Kunst des Webformularentwurfs und prüfen, ob wir einen Weg finden können, unsere Webformulare sowohl hinsichtlich ihres Aussehens als auch ihrer Funktionsweise intelligenter zu machen.

Die Werkzeuge für das Erstellen von Webformularen

Die Standard-Tools, die wir von Browser-Entwicklern und W3C zur Zusammenstellung unserer Webformulare erhalten haben, sind nicht gerade ideal, und vor der Anwendung von CSS sind sie ziemlich abscheulich. So sehen sie aus:

Es gibt auch eine andere Standardeingabesteuerung wählenDies sollte jedoch vermieden werden, es sei denn, Platz zu sparen ist ein ernstes Problem. Es gibt bessere Möglichkeiten, mit der durch das Auswahlsteuerelement ausgeführten Aufgabe umzugehen, wie wir später besprechen werden. Textarea-Steuerungen sollten nach Möglichkeit ebenfalls vermieden werden, da sie so problematisch und antiquarisch sind.

Neben diesen Standardeingabeelementen gibt es auch spezielle neue Einträge für HTML5. Außer wenn ein Dokument streng für den internen Gebrauch vorbereitet wird und die Browserumgebung bekannt ist, sollten nur Komponenten verwendet werden, die sowohl in Firefox als auch in Chrome funktionieren. Es ist gut, wenn eine Komponente auch in anderen Browsern funktioniert, sollte es aber nicht ausschließlich in anderen Browsern arbeiten. Hier sind die HTML5-Komponenten, wie sie in Firefox erscheinen:

Und ihr etwas anderes Aussehen in Chrome:

Natürlich ist es wirklich wichtig zu wissen, dass Ihre HTML5-Eingaben zwischen Chrome und Firefox unterschiedlich aussehen und funktionieren, aber sie funktionieren trotzdem. Die standardmäßigen Eingabesteuerelemente sehen in Chrome auch etwas schöner aus als in Firefox. Beachten Sie, dass Chrome den nordamerikanischen Datumsstandard vorschreibt, den die Benutzer möglicherweise nicht zu schätzen wissen. Auch die Chrome-Version des Datumssteuerelements macht es für die Anzeige ungeeignet und sollte nur für die Eingabe verwendet werden. Die Hinzufügung eines Datumsauswahlgeräts ist die Hauptverbesserung in Chrome, aber wir können davon ausgehen, dass dies in zukünftigen Firefox-Versionen erwartet wird.

Da Firefox Open Source ist, können Sie Ihre persönliche Version von Firefox so erstellen, dass die Eingaben auf dieselbe Weise wie in Chrome dargestellt werden, indem Sie den Quellcode des Open Source Chromium-Browsers, auf dem Chrome basiert, herunterladen und den entsprechenden Codeabschnitt in die Firefox-Quelle portieren Code (aber dann müssen Sie dies jedes Mal tun, wenn Sie Firefox auf eine neue Version aktualisieren).

Der Hauptpunkt ist jedoch, dass selbst mit den Verbesserungen von Chrome die Standardeinstellung der Eingabesteuerelemente klein und unattraktiv ist. Es gibt einige andere Steuerelemente. Da sie jedoch nicht in Chrome und Firefox funktionieren, sollten sie nicht auf Websites verwendet werden, die für die Öffentlichkeit bestimmt sind.

Bootstraps (fast ausreichende) Antwort

Bootstrap wendet die Standardsteuerelemente so an, dass deren Aussehen einigermaßen verbessert wird. Aufgrund der mobil-zentrierten Designphilosophie von Bootstrap verursacht dies jedoch unerwünschte Auswirkungen auf Formulare, die nicht als einzelne Spalte angezeigt werden sollen. Kurze Eingabefelder wirken komisch, wenn sie standardmäßig eine ganze Spalte umfassen. Die Welt mag mobil geworden sein, aber die Formulare wurden nicht für mobile Benutzer entwickelt.

Bootstrap erweitert Steuerelemente, um die horizontale Breite des Containers auszufüllen. Dies bedeutet, dass alle Steuerelemente die gleiche Breite haben, unabhängig davon, ob Sie dies tun oder nicht (sofern Sie dieses Verhalten nicht manuell außer Kraft setzen). Außerdem können Sie einige Steuerelementtypen mit zusätzlichem Effekt versehen. Die Lösung von Bootstrap ist elegant und überwindet einige Probleme der Steuerelemente, die in verschiedenen Browsern unterschiedlich aussehen, funktioniert jedoch nur mit den Standardsteuerelementen. Die HTML5-Steuerelemente werden in den aktuellen Versionen von Bootstrap nicht implementiert. Sie müssen diese also selbst gestalten.

Mit Bootstrap können Sie auch Steuerelemente miteinander kombinieren. Manchmal ist das gut und manchmal nicht so gut. Das Kombinieren einer Texteingabe mit einer Schaltfläche und einem Kontrollkästchen sieht zwar gut aus, kann jedoch den Benutzer verwirren, wie er mit einem so unbekannten Steuerelement interagieren soll.

Was Bootstrap bietet, ist zwei meiner Lieblingsgeräte zum Erstellen von Formularen, das Tafel und der Gut. Dies ist sehr nützlich, um Formulardaten zu gruppieren, um visuell anzuzeigen, welche Daten zu welchen anderen Daten gehören, und auch zum Trennen von Daten.

Smart Form Building 101

Jetzt sind wir bereit zu überlegen, wie Formen intelligenter konstruiert werden können. Um dies zu erreichen, müssen wir über die Standardwerte hinaus denken. Wir müssen uns der Desktop-gebundenen Wurzeln von Formularsteuerelementen sowie der Kompatibilität mit Mobilgeräten bewusst sein. Und wir müssen uns um Dinge wie Benutzerfreundlichkeit und Validierung kümmern (wenn das Formular zur Datenerfassung verwendet wird).

Der letzte Punkt ist gut, da Formularsteuerelemente zum Erfassen von Eingaben verwendet werden, sie jedoch auch zum Anzeigen gespeicherter Daten. Der durchschnittliche Webbenutzer ist (und sollte) mehr daran interessiert sein, Informationen von Ihnen zu erhalten, als Ihnen Informationen zu geben.

Die Datenerfassung ist einfach. Die Leute füllen alles aus, was Sie ihnen davor halten, selbst wenn es ein Durcheinander ist. Bei der Anzeige von Daten sind sie jedoch umständlicher. Daher konzentrieren wir uns hier mehr auf die Verwendung von Formularen zur Anzeige von Daten als auf das Sammeln dieser Daten, da die Anzeige mehr Sorgfalt und mehr "Intelligenz" erfordert.

1. Brauchen wir ein Formular?

Bevor wir ein Formular erstellen, sollten wir prüfen, ob wir eines benötigen. Wenn die Daten angemessen und unauffällig als Tabelle dargestellt werden können, ist eine Tabelle normalerweise effizienter und praktischer.

Ein Formular ist erforderlich, wenn:

  • Wir holen Input vom Benutzer ein
  • Wir haben viele Daten zur Anzeige
  • Die Daten müssen klar segmentiert sein
  • Der Benutzer greift wahrscheinlich von einem mobilen Gerät auf die Daten zu

Wenn eines der oben genannten Elemente nicht wahr ist, muss kein Formular verwendet werden, und eine Tabelle reicht aus. Die Herausforderung der mobilen Kompatibilität besteht darin, dass weder Tabellen noch Formulare wirklich für ein mobiles Display geeignet sind. Die Tatsache, dass Smartphone-Designer ihren Benutzern die Möglichkeit gegeben haben, einen Browser im Hochformat zu verwenden, und dass die meisten Benutzer es vorziehen, ihre Handys auf diese Weise zu halten, führt zu den meisten Mobilitätskompatibilitätsproblemen, mit denen Site-Designer konfrontiert sind.

Ungeachtet dessen sind Formulare an eine mobile Anzeige besser anpassbar als Tabellen. Wenn Sie also wirklich sicherstellen müssen, dass alle Daten problemlos auf einem mobilen Display angezeigt werden können, sind Formulare die bessere Wahl als Tabellen… manchmal!

2. Gestalten Sie das Desktop-Layout

Es ist wahr, dass Sie im Allgemeinen ein mobiles Layout entwerfen sollten, aber wenn es um Formulare geht, ist dies nicht der beste Weg, da wir wissen müssen, wie Daten gruppiert werden, und das können wir nur, wenn wir kann alle Felder gleichzeitig sehen, was auf einem Handy nicht möglich ist, wenn Sie nicht so wenige Daten anzeigen, dass wir uns nicht mit dem Entwurf des Formulars beschäftigen müssen.

InkScape ist der schnellste Weg, um einen Formularentwurf zu simulieren. In diesem Beispiel erstellen wir ein System zum Verwalten von Personaldatensätzen. Hier ist das Mock-Up für den Desktop-Prototyp:

Das äußere Rechteck repräsentiert den gesamten Bereich einer 1024 x 768 px-Anzeige. In jedem Desktop-Browser haben wir keinen Zugriff auf so viele Pixel, es sei denn, der Benutzer befindet sich im Vollbildmodus (was selten der Fall ist). So unser

Das Design ist 900 x 600px, das in den verfügbaren Bereich der meisten Desktop-Bildschirme passen sollte.

Wenn der verfügbare Bereich weniger als 900px breit ist, werden unsere 2 x 450px-Spalten unterbrochen und erscheinen als eine zusammenhängende 450px-Spalte. Dies löst das Problem der Kompatibilität mit Mobiltelefonen, zumindest so lange, bis es von Google verlangt wird, dass alle unsere Websites in der Lage sind, auf eine Armbanduhr zu passen.

Sie werden feststellen, dass der Großteil der Anzeige nur aus gewöhnlichen Eingabefeldern besteht, die langweilig wirken können, aber in Wirklichkeit ist dies fast immer der beste Weg. Beachten Sie auch die Verwendung einer Schriftart mit fester Breite. Dies hilft, die Einheitlichkeit der Formgestaltung zu erhalten.

Unsere Spalten werden tatsächlich etwas mehr als 450px sein, mehr wie 600px, aber wenn wir die Spaltenbreite auf 450px setzen wollen, reduzieren wir einfach unsere Spaltengröße von 6 auf 5. Eine 600px-Säule sollte jedoch ohnehin im Hochformat auf einen mobilen Bildschirm passen.

Wir testen unser Layout mit diesem Code:

Und wir können sehen, dass alles gut aussieht (weil wir vorübergehend Grenzen hinzugefügt haben, um uns zu zeigen).

Das Linux-Bildschirmlineal-Widget ist offensichtlich nicht Teil der Webseite, aber es zeigt uns, dass unsere Spalten auf einer kleineren Anzeige nicht so stark brechen. Was passiert bei verschiedenen Bildschirmbreiten:

3. Benutzerdefinierte Eingabeformate und Etikettenposition erstellen

Wenn wir einfach alles in Standardeinstellung belassen, ohne ein benutzerdefiniertes CSS hinzuzufügen, geschieht dies, wenn wir die erste Zeile der Eingabesteuerelemente hinzufügen:

Dies geschieht, weil die Beschriftung für jede Eingabe links von der Eingabe vorgegeben ist und wir keine benutzerdefinierte Breite für die Eingabesteuerelemente festgelegt haben. Wir können beide Probleme mit CSS beheben.

Jetzt setzen wir einfach die Anzeigeeigenschaft von Kennzeichnungselementen auf "blockieren", setzen die Felder von First und Last auf die Klasse "in40w" und das Feld MI auf die Klasse "in10w", und alles sollte viel schöner aussehen.

Wie Sie sehen, sieht es besser aus, aber das Layout ist nicht mehr korrekt. Nun sind die Boxen gestapelt. Wie wir das beheben können, ist die Idee, das Label-Element überhaupt nicht zu verwenden, weil wir das nicht wirklich brauchen. Wir werden nur unsere anwenden in40w und in10w Klassen, und machen Sie eine neue Klasse aufgerufen inLeftOf.

Wenn das Problem einmal angewendet wurde, wird es wie folgt behoben:

Dies lässt jedoch nicht genug Platz für das SSN-Feld. Das liegt daran, dass unsere linke Spalte größer ist als erwartet. Daher ist 40% tatsächlich mehr Platz, als wir für diese Felder benötigen, sodass wir sie tatsächlich reduzieren können in30wund das mittlere Feld ist größer als es sein muss, damit wir das schaffen können in5w. Folgendes passiert:

Jetzt ist mehr als genug Platz, um das SSN-Feld hinzuzufügen, das die erste Zeile unseres Eingabeformulars ausfüllt. Nach dem Glätten all dieser Details sollte der Rest der linken Säule sehr einfach sein. Wir können jetzt den temporären Rahmen loswerden und den korrekten Hintergrund auf die Spalte anwenden. Hier ist die obere Hälfte des Panels, bevor wir zu speziellen Bereichen des Formulars gelangen:

In dieser Phase sind einige Dinge passiert. Der erste Teil war der einfache Teil beim Festlegen der Hintergrundfarbe für die Spalte (rgb (235,235,246)). Obwohl Sie sie hier nicht sehen können, wurde die Textfarbe für alle Eingaben auf #427DB4 und die Schriftstärke eingestellt wurde fett gesetzt, um die Augenbelastung zu reduzieren. Der Text wurde so eingestellt, dass er mit der CSS-Eigenschaft text-transformation automatisch in Großbuchstaben umgewandelt wird, um die Dateneingabe zu beschleunigen und Fehler zu reduzieren.

Die komplexere Angelegenheit, die Steuerelemente auszurichten und sicherzustellen, dass sie bei jedem Anzeigetyp eine anständige Ausrichtung beibehalten, erforderte mehr Überlegung. Sie haben bereits die Technik für die erste Zeile der Eingaben und ihre Beschriftungen gesehen. Diese Technik funktioniert, wenn zwischen den Eingaben kein zusätzlicher Abstand erforderlich ist. Wenn Sie jedoch Platz hinzufügen müssen, ist es besser, eine andere Technik zu verwenden.

Bei dieser anderen Technik wird eine verschachtelte Spaltenreihe in unserer Hauptspalte erstellt, die dazu beiträgt, die Steuerelemente im richtigen Abstand zu halten. Die Anzahl der Spalten und ihre Größe hängt von den Anforderungen der einzelnen Steuerelemente ab. Denken Sie daran, dass alles ansprechend ist. Wenn also die Größe einer Spalte geändert wird, wird alles in der Spalte versucht, die Größe entsprechend der Änderung anzupassen. Dies ist eine gute Nachricht für sehbehinderte Benutzer, da sie die Vergrößerung auf ihrem Display vergrößern können und alles wie jedes andere Benutzer richtig ausgerichtet ist.

Um auf den komplexeren Teil der linken Spalte zu gelangen, war für das ursprüngliche Konzept, das im Modell beschrieben wurde, eine Struktur erforderlich, die schwer zu implementieren gewesen wäre. Glücklicherweise stellte ich fest, dass die Daten im Berechtigungspanel verdoppelt werden konnten, wenn standardmäßige Kontrollkästchen verwendet wurden. Dies löste das Problem mit der Komplexität des Layouts:

Die leichteren Platten an den Spezialsektionen sind nur gewöhnliche Bootstrap-Wells. Für die Eingabe von Religionsdaten ist es notwendig, aus einer festgelegten Liste von vordefinierten offiziellen Religionen (einschließlich „anderer“) auszuwählen. Das Entwickeln der rechten Seitenspalten war noch einfacher und verwendete nur die gleichen Techniken aus dem ersten Satz von Steuerelementen in der linken Spalte, wobei die Steuerelemente in einem Tabellenformat organisiert wurden, jedoch ohne eine Tabelle zu verwenden.

Damit dieses Projekt erfolgreich sein kann, muss es auf allen offiziellen Displaygrößen perfekte Reaktionsfähigkeit bieten. Mal sehen, wie sich das Ergebnis entwickelt hat. Zuerst mit der Vollauflösungsversion:

Das ist dem Prototyp so nahe, dass wir damit zufrieden sein können. In der Tat ist es sogar eine Verbesserung. Lassen Sie uns nun das responsive Layout in den verschiedenen Bereichen der Seite anzeigen:

Bootstrap und HTML5 haben die Formularentwicklung schneller und einfacher als je zuvor gemacht, aber viele Entwickler unterminieren diesen Fortschritt, indem sie die Formulare zu kompliziert machen (indem sie die speziellen HTML5-Formularelemente verwenden, nur weil sie dazu da sind, statt für das Projekt benötigt zu werden ) und indem Sie vollständig eindimensionale Formen erstellen, die nicht einmal versuchen, Responsive Design zu nutzen. Mit nur ein wenig Sorgfalt und zusätzlicher Arbeit können alle Daten auf jeder Bildschirmgröße besser dargestellt werden.

Bei der kleinsten Bildschirmgröße im Hochformat gibt es möglicherweise ein paar kleinere Störungen (bei der kleinsten Bildschirmgröße (bei diesem Projekt ist das mittlere Anfangsfeld in der ersten Zeile etwas kleiner als es ideal wäre), im Allgemeinen jedoch für mobile Benutzer Akzeptieren Sie, dass dies der Kompromiss ist, den sie einhalten müssen, wenn Sie ihre Handys nicht richtig halten.

Tun Sie es richtig und Ihre Datenformulare können folgendermaßen aussehen:

Anstelle von ...

Headerbild mit freundlicher Genehmigung von

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.