Entwerfen von reaktionsschnellen und geräteunabhängigen Formularen

Unabhängig davon, ob es sich um einen Anmeldefluss oder einen Stepper mit mehreren Ansichten handelt, sind Formulare eine der wichtigsten Komponenten des digitalen Produktdesigns. Sie müssen sie daher so gestalten, dass sie auf Mobilgeräten effektiv funktionieren.

Hier erfahren Sie, wie Sie Formulare für mobile Geräte entwerfen, einschließlich eines kurzen Blicks auf wie man Flexbox benutzt .

01. Design für vertikale Schriftrolle

Ein einspaltiges Layout funktioniert besser



Ein einspaltiges Layout funktioniert besser

Unabhängig von der Gerätegröße ist das Ausfüllen eines Formulars am einfachsten linear. Mehrere Spalten stören die Dynamik eines Benutzers (die Benutzer interpretieren die Felder wahrscheinlich inkonsistent, was einen negativen Faktor für die Benutzerfreundlichkeit darstellt) und können dazu führen, dass Benutzer auf horizontales Scrollen zurückgreifen müssen.

Wenn Sie Formulare auslegen möchten, sollten Sie die Einträge in einer Spalte entwerfen: Wenn sich ein Formular in einer einzelnen Spalte befindet, ist der Pfad zum Ausfüllen eine gerade Linie auf der Seite.

02. Beschriftungen über den Feldern platzieren

Platzieren Sie Beschriftungen über Formularfeldern

Platzieren Sie Beschriftungen über Formularfeldern

Beschriftungen teilen den Benutzern mit, was die entsprechenden Eingabefelder bedeuten. Bei der Auswahl der Position Ihrer Etiketten haben Sie zwei Möglichkeiten: linksbündig oder obenbündig.

Linksbündige Beschriftungen funktionieren gut, wenn das Formular auf einem Desktop oder Tablet ausgefüllt wird. Sie sind jedoch eine schreckliche Lösung für mobile Geräte, bei denen der Bildschirm nur begrenzt verfügbar ist. Da linksbündige Beschriftungen vor dem Feld stehen müssen, lässt der schmale Bildschirm nur sehr wenig Platz für das Feld selbst - insbesondere, wenn sich das Gerät im Hochformat befindet. Dies führt zu zwei schwerwiegenden Usability-Problemen:

  • Das Formularfeld ist nicht breit genug, um die gesamte Eingabe des Benutzers anzuzeigen. Dadurch wird die Wahrscheinlichkeit erhöht, dass der Benutzer seine Antworten falsch eingibt, und es werden fehlerhaftere Formulare gesendet
  • Wenn ein Benutzer benachrichtigt wird, dass er fehlerhafte Informationen eingegeben hat, kann er das Problem möglicherweise nur schwer erkennen und beheben, da er nicht die gesamte ungültige Eingabe sehen kann

Wenn Sie die Beschriftung über dem Formularfeld platzieren, wenn ein Benutzer von einem mobilen Gerät aus surft, wird sichergestellt, dass Benutzer die maximale Breite für die Eingabe ihrer Details sehen können, da Sie für die Beschriftung keine verwenden müssen.

Das Schreiben Ihrer Beschriftungen über die Eingabefelder erleichtert Ihnen auch das Schreiben klarer und aussagekräftiger Feldbeschriftungen, da Sie nicht auf ein oder zwei Wörter beschränkt sind.

03. Tippziele verwenden

Tap-Ziele sollten unabhängig von der Größe des Geräts, auf dem sie angezeigt werden, einfach zu verwenden sein. Größere Ziele (Eingabefelder und Schaltflächen) sind für Benutzer mit geringerer Geschicklichkeit einfacher, unabhängig davon, ob es sich um einen dauerhaften oder einen vorübergehenden Zustand handelt, der durch die Umgebung verursacht wird.

Im Moment ist die größte Zielgröße für Touch-Geräte, daher müssen Sie Touch-First entwerfen. Dies stellt sicher, dass Benutzer nicht zoomen müssen, um den Text einzugeben oder eine Option auszuwählen. Klickbare Bereiche sollten der Fettfinger-Regel folgen und nicht in die Umgebung eindringen: Das durchschnittliche menschliche Fingerpad beträgt 10 x 14 mm und die durchschnittliche Fingerspitze 8-10 mm, was 10 x 10 mm zu einer guten Mindestgröße für Berührungsziele macht.

Ein Tap-Ziel sollte jedoch nicht nur die richtige Größe haben, sondern auch sicherstellen, dass zwischen mehreren Tap-Zielen genügend Platz ist. Wenn bei mobilen SEO-Tools der Fehler 'Tap-Zielgröße' angezeigt wird, liegt dies häufig daran, dass Ihre Tap-Ziele zu nahe beieinander liegen und das tatsächliche Tap-Ziel nicht zu klein ist.

Es kann schwierig sein, Inhalte auf Mobilgeräten zu lesen. Daher macht es einen großen Unterschied, die Eingaben zu 100% zu machen und sicherzustellen, dass der Text auf mindestens 16px (1em) eingestellt ist. Auf diese Weise ist kein Zoomen oder zusätzliches Scrollen erforderlich, um die erforderlichen Informationen zu lesen.

wie man wie Don Bluth zeichnet

04. Verwenden Sie HTML5-Formularfelder

Mobile Geräte bieten benutzerdefinierte Softwaretastaturen für verschiedene Eingabetypen. HTML5-Formularfelder sind der einfachste Weg, um die Benutzererfahrung Ihrer Formulare zu verbessern. Diese Eingabetypen geben dem Browser Hinweise darauf, welche Art von Tastaturlayout für Bildschirmtastaturen angezeigt werden soll.

Geben Sie die Eingabetypen von an Nummer , Email , Telefon , URL und Datum und die Tastatureingabe auf Ihren Mobilgeräten wird aktualisiert, um dem Benutzer das Ausfüllen des Formulars zu erleichtern. Sie müssen keine zusätzlichen Klassen hinzufügen, um Formulareingaben zu formatieren. Sie müssen lediglich gültige HTML5-Eingabetypen verwenden:

05. Verwenden Sie Flexbox

Seien wir ehrlich - es ist schwierig, ein ansprechendes Layout in HTML zu erstellen. Die meisten von uns haben irgendwann damit zu kämpfen. Obwohl es immer möglich war, Layouts mithilfe spezieller Technologien wie erwartet zu verhalten, war der Prozess nie einfach.

Technologien für den Umgang mit strukturierten Layouts sind im Laufe der Jahre gekommen und gegangen: Entwickler haben HTML-Frames, HTML-Tabellen, Float-basierte Layouts und in jüngerer Zeit verschiedene Grid-Systeme verwendet, die von CSS-Frameworks wie z Bootstrap .

Aber mit dem Aufkommen des HTML Flexible Box-Modells (oder Flexbox ) Hat HTML endlich eine umfangreiche Box-Formatierungs-Engine erhalten, die komplexe Layouts, einschließlich HTML-Formulare, behandelt.

Flexbox bietet uns große Flexibilität, um schnell schöne Formen zu erstellen. Das Wichtigste, was Sie über Flexbox wissen sollten, ist, dass es sich um ein Tool zur Manipulation von Containern handelt: Es soll eine effizientere Möglichkeit bieten, den Platz zwischen Elementen in einem Container zu gestalten, auszurichten und zu verteilen, selbst wenn ihre Größe unbekannt und / oder dynamisch ist (daher das Wort 'flex').

Interessant ist, dass Flexbox uns große Flexibilität bietet, um unser Formular schnell zu erstellen, ohne Medienabfragen zu verwenden. Außerdem unterstützen es alle aktuellen Browser.

Unser Webdesigner-Handbuch zu Flexbox In diesem Artikel erfahren Sie mehr, aber jetzt üben wir etwas und lernen, wie Sie Flexbox nutzen können, um ein ansprechendes Formular zu erstellen. Als erstes definieren wir die HTML-Struktur für unser Formular:

 
       
  • First Name
  •    
  • Last Name
  •    
  • Email
  •    
  • Phone
  •    
  • Message
  •     
  • Submit
  •  

Beachten Sie, dass jedes der Listenelemente in unserem Formular eine Klasse von hat biegen . Diese Klasse identifiziert den Flex-Container in unserem Formular. Einer der großen Vorteile von Flexbox ist die Möglichkeit, jedes HTML-Element zum Definieren seiner Container und Elemente zu verwenden.

Sie können das Flexbox-Styling auf jedes HTML-Element anwenden, sodass Sie Elemente problemlos unabhängig voneinander neu formatieren und neu fließen lassen können. Beachten Sie, dass Flexbox nur ein Styling-Mechanismus ist, dh Sie können ihn nach Belieben hinzufügen und entfernen.

Lassen Sie uns die Flex-Container in unserem CSS identifizieren. Zusätzlich möchten wir die Flex-Elemente vertikal über die Querachse zentrieren. Es ist ziemlich einfach, das anzugeben, wir müssen nur eine einfache CSS-Regel einrichten:

.flex li {   display: flex;   flex-wrap: wrap; align-items: center; }

Der nächste Schritt besteht darin, die Breiten für die Flex-Elemente anzugeben. Die Hauptanforderungen:

wie man die Belichtung in Photoshop ändert
  • Die Etiketten sollten mindestens 100 Pixel und höchstens 200 Pixel groß sein
  • Formularelemente, die nach den Beschriftungen kommen, sollten mindestens 200 Pixel groß sein

Was gibt uns das? Jede Beschriftung und das zugehörige Formularelement werden in einer einzelnen horizontalen Zeile angezeigt, wenn die Breite des Formulars mindestens 300 Pixel beträgt (denken Sie daran, dass hier rechtsbündige Beschriftungen verwendet werden).

.flex > li > label {   flex: 1 0 100px;   max-width: 200px; } .flex > li > label + * {   flex: 1 0 200px; }

Zuletzt definieren wir für die Schaltfläche 'Senden', die auch ein flexibles Element ist, einige grundlegende Stile:

.flex li button {   margin: auto;   padding: 22px 46px; }

Wie Sie sehen können, haben wir mit minimalem Aufschlag und der Leistung von Flexbox ein ansprechendes Formular erstellt.

Bei mehr Benutzern, die mobile Geräte tragen, ist es entscheidend, auf jedem Gerät eine benutzerfreundliche Erfahrung zu bieten. Der entscheidende Punkt ist die Anpassung sowohl an die Bedürfnisse des Benutzers als auch an die Fähigkeiten des Geräts.

Dieser Artikel wurde ursprünglich in Ausgabe 287 von veröffentlicht Netzmagazin , das Magazin für professionelle Webdesigner und -entwickler - mit den neuesten Webtrends, -technologien und -techniken. Abonnieren Sie net hier.

Zum Thema passende Artikel: