4 Form Design UX-Tipps, die Sie kennen sollten (mit Beispielen)

Wir neigen dazu, über Formulare nur als Mittel zur Erfassung von Benutzerdaten nachzudenken, aber sie sind manchmal auch eine Möglichkeit der einzige Weg, für unsere Nutzer verbinde dich mit uns. Es ist wahrscheinlich wahnsinnig zu glauben, wir könnten Nutzer machen Liebe Formulare ausfüllen, ist aber durchaus möglich Lösungen zu finden, die sie nicht allzu sehr stören, und helfen Sie ihnen im Prozess.

Beim Surfen im Internet finden wir manchmal überraschende Lösungen, die zwar programmgesteuert korrekt sind, jedoch höchstwahrscheinlich so konzipiert sind bewirkt, dass viele Benutzer die Website aufgrund der schlechten Benutzererfahrung aufgeben.

Wenn unsere Formulare gut gestaltet sind, können wir nicht nur unsere Benutzer, sondern auch das Backend-Team zufriedenstellen, mit dem sie umgehen können viel weniger Benutzereingabefehler. In diesem Artikel werden wir also einen Blick darauf werfen, wie wir können Minimierung von Benutzereingabefehlern und weiterhin Halten Sie unsere Benutzer zufrieden.

Vorhersagen der Benutzeranforderungen

Websites und Anwendungen haben verschiedene Benutzerbasis und Ziele, Und selbst am selben Ort können viele Formulare gehostet werden, die verschiedene Arten von Daten erfassen, um nur die häufigsten zu nennen:

• Anmeldeformulare
• Anmeldeformulare
• Benutzerprofile
• Newsletter-Anmeldeformulare
• Checkout-Formulare
• Benutzerumfragen
• Kontaktformulare
• Kommentarformulare
• Formulare durchsuchen

Alle diese Formulartypen erfordern verschiedene Dinge. Beim Entwerfen eines Checkout-Formulars ist es wichtig, die Sicherheit der Benutzer glaubwürdig zu gewährleisten. Bei Kommentarformularen ist dies eine gute Idee Fügen Sie Emojis oder andere Methoden hinzu, mit denen Benutzer ihre tatsächliche Stimmung ausdrücken können.

Möglicherweise müssen jedoch auch ähnliche Formulartypen unterschiedlich gestaltet werden, da alle Websites über ihre verfügen eindeutige Benutzerbasis. Bevor Sie mit dem Entwurfsprozess beginnen, ist es immer eine gute Idee antizipieren, was unsere Nutzer brauchen, und entsprechend gestalten.

Beispiel: Social Logins, die auf Benutzeranforderungen abzielen

Das Anmeldeformular von Codepen enthält drei soziale Logins mit Github an der Spitze. Diese Wahl wäre für die meisten Websites nicht zumutbar.

Aber es ist perfekt für Codepen, Ihre Benutzerbasis besteht aus Entwicklern, von denen viele sich mit ihren Github-Konten anmelden oder ihre Entwicklungskonten gleichzeitig miteinander verbinden möchten.

Denken Sie zuerst an Mobile

Handy- und Desktop-Benutzer haben unterschiedliche Bedürfnisse, aber so Das Ausfüllen von Formularen ist auf einem mobilen Bildschirm eine viel größere Herausforderung, mit Handgesten als auf einer physischen Tastatur, a mobiler erster Ansatz kann uns weiter bringen, wenn wir brauchbare Formen entwerfen wollen.

Darüber hinaus funktionieren viele Formular-UI-Muster, die auf mobilen Geräten gut funktionieren, auch auf dem Desktop.

Beispiel: Bedienbare Steuerelemente

Qualitativ hochwertige mobile Formulare sind ohne nicht vorstellbar sichtbare Steuerelemente auf welche mobile Benutzer können leicht tippen mit ihren Fingern.

Das Newsletter-Anmeldeformular für die Webdesign-Konferenz An Event Apart passt sich der Art an, wie mobile Benutzer auf den Bildschirm zugreifen zwei einfach zu tippende Eingabefelder und ein Fingerspitzen-Taste.

Die Texteingabefelder sind wie üblich höher, so dass mobile Benutzer sie leicht antippen können, und die große, orangefarbene Schaltfläche mit einem Häkchensymbol ermuntert die Benutzer außerdem, das Formular zu senden.

Die Desktopversion der Site verwendet den gleichen Formularentwurf, da es auch gut aussieht und auf größeren Bildschirmen gut funktioniert.

Beispiel: Verbrauchsmaterial

Beim Entwerfen von Formularen für mobile Geräte ist es immer wichtig zu überlegen, wie wir das können Minimieren Sie den Platz, den wir verwenden. Das Verbrauchsmaterial Das Designmuster der Benutzeroberfläche ist in letzter Zeit sehr beliebt und funktioniert besonders gut auf dem Handy.

Booking.com nutzt dieses Muster im Suchformular auf seiner mobilen Website. Wenn der Benutzer das Suchfeld antippt, wird es erweitert um lassen Sie mehr Raum für Gesten, darunter erscheint eine Auswahlliste mit Empfehlungen.

Wenn der Benutzer das Feld antippt, schrumpft es und die zusätzlichen Informationen werden ausgeblendet.

Beispiel: Morphing Button

Tasten verwandeln Nehmen Sie das verbrauchbare Eingabemuster noch einen Schritt weiter, da Benutzer zuerst eine Schaltfläche sehen, die dann erscheint verwandelt sich in eine Form wenn sie darauf tippen.

Der nachstehende Screenshot stammt aus dem brillanten Artikel von The Startup zum innovativen Formulardesign, das auch viele andere kreative Lösungen enthält.

Erleichtern Sie die Eingabe

Lange Formulare tendieren dazu, Benutzer abzuschrecken. Das Beste, was wir tun können, ist zu fragen Sie nur nach dem Input, den wir wirklich brauchen. Dies ist nicht nur aus Sicht der Benutzererfahrung wichtig, sondern Benutzer können auch zögern, zu viele persönliche Informationen preiszugeben Bedenken hinsichtlich des Datenschutzes.

Manchmal aber wir immer noch müssen mit längeren Formen mitgehen. In diesem Fall ist es eine gute Idee Schneide sie in kleinere Stücke, und dienen die Brocken als aufeinanderfolgende Bildschirme.

Viele E-Commerce-Sites (z. B. Amazon) verwenden diese Lösung, um die Anzahl der Abgaben zu senken.

Wenn Sie das Ausfüllen von Formularfeldern vereinfachen möchten, gilt als Faustregel Reduzieren Sie sowohl Ablenkungen als auch Benutzeraktionen so viel wie möglich.

Beispiel: Personalisierte Eingabeauswahl

Unterschiedliche Inhaltswähler, z. B. Datumsauswahl oder Farbwähler, erleichtern nicht nur die richtige Eingabe, sondern machen auch das Formular attraktiver, und wesentlich Benutzerfehler reduzieren.

Die Todoist-App zum Auflisten von Listen gibt personalisierte Hinweise in seiner Datumsauswahl, wenn sich der Benutzer über die Tage bewegt.

Auf dem folgenden Screenshot kann der Benutzer beispielsweise sehen, dass er für den 31. August bereits zwei fällige Aufgaben hat, und diese Informationen berücksichtigen, wenn er den richtigen Termin für die Aufgaben festlegt. Dies ist eine ausgezeichnete Idee für eine App, bei der die Produktivität das Hauptanliegen des Benutzers ist.

Beispiel: Drag-and-Drop-Eingabe

Drag & Drop-Designs Normalerweise funktionieren sie mit Datei-Upload-Feldern gut, besonders wenn Benutzer Bilder hochladen sollen.

Sie reduzieren Benutzeraktionen wahrscheinlich nicht so sehr im Vergleich zum gewöhnlichen Upload einer Datei-Schaltfläche, aber sie machen es viel einfacher Wählen Sie aus, welche Datei der Benutzer hochladen möchte, Dadurch wird die Wahrscheinlichkeit verringert, dass eine falsche Datei gesendet wird.

WordPress.com bietet eine elegante und intuitive Drag-and-Drop-Benutzerschnittstelle in seinem Post-Editor-Formular. Das kleine Thumbnails und das visuelle Darstellung der bereits hochgeladenen Dateien hilft Benutzern dabei, den Upload schnell auszuführen.

Beispiel: Überlagerung zum Entfernen von Ablenkungen

Wenn Benutzer beim Ausfüllen unseres Formulars abgelenkt werden, sind sie fehleranfälliger und ärgern sich auch leichter

Inhaltsüberlagerungen sind eine großartige Alternative zum minimalistischen Formulardesign. Sie sind gebraucht durch komplexere Standorte die verschiedene Arten von Informationen auf demselben Bildschirm anzeigen möchten.

Auf dem Screenshot unten sehen Sie die Desktopversion von Booking.com. Wenn sich Benutzer im Suchformular bewegen, wird der Rest des Inhalts angezeigt bedeckt von einem grauen Überzug Ihnen helfen Konzentrieren Sie sich auf das Ausfüllen von Formularen.

Geben Sie den Benutzern ein Feedback

Geben die richtiges Feedback zur richtigen Zeit kann die Benutzererfahrung erheblich verbessern.

Im Formdesign gibt es zwei Arten von Benutzer-Feedbacks:

1. Feedback gegeben Vor Formulareinreichung - damit Fehler reduzieren und Abbruchquoten, B. Fortschrittsanzeigen, sofortige Eingabeprüfung, die Benutzer sofort für die korrekte Eingabe belohnt, oder Tooltips für Helfer
2. Feedback gegeben nach dem Formulareinreichung - um die Benutzer wissen zu lassen Sie haben einen Fehler begangen, wie Fehlermeldungen

Die Art des Benutzerfeedbacks, das unsere Benutzer benötigen, hängt in hohem Maße von den Merkmalen unserer Zielgruppe und dem Ziel unserer Website ab.

Beispiel: Progress Tracker

Formulare, die länger als eine Seite sind, z. B. Umfragen und die meisten E-Commerce-Checkout-Formulare, können die Nutzung der Fortschrittstracker Entwurfsmuster. Fortschrittsanzeiger geben ein Sofortiges visuelles Feedback Nutzer über ihren Status informieren und ermutigen, den Prozess fortzusetzen.

Die SnapSurveys-Umfrage-Ersteller-Web-App zeigt einen kleinen Fortschrittsanzeiger direkt über den Senden-Schaltflächen, so dass Benutzer dies tun können natürlich erblicken.

Der Progress Tracker verwendet keine Etiketten, sondern die Art und Weise, wie er entworfen wurde macht sein Ziel klar - Die Anzahl der Kreise gibt die Anzahl der Schritte an, die bereits ausgeführten Schritte werden blau und Benutzer können leicht erkennen, wie viele Schritte noch vor ihnen liegen.

Beispiel: Echtzeitvalidierung

Der Body Shop-Kosmetikeinzelhändler verwendet Echtzeit-Validierung in seinem Benutzerprofil-Formular, um Fehler zu beseitigen und die UX des Formularabwicklungsprozesses zu verbessern.

Eingaben werden geprüft, während Benutzer das Formular ausfüllen, und die richtigen und falschen Antworten werden sofort mit angezeigt leicht erkennbare Symbole etwas weiter rechts, aber immer noch im sichtbaren Bereich.

Beispiel: Expressive Tooltips

Verständliche Mikrokopie ist auch ein wesentlicher Bestandteil eines erfolgreichen Benutzerfeedbacks im Formulardesign. Per Definition besteht die Mikrokopie einer Website aus kleine Textstücke in verschiedenen Elementen verwendet - Beschriftungen, Schaltflächen, Fehlermeldungen, QuickInfos usw.

In seinem Anmeldeformular beantwortet die Bankgruppe von Barclay die Fragen, die Benutzer möglicherweise mit Hilfe von fragen gut gestaltete Tooltips das beinhaltet leicht verständliche Mikrokopie.

Die Tooltips sind hinter wenig versteckt? Symbole Benutzer nicht ablenken wer weiß, wie man das Anmeldeformular ausfüllt, aber immer präsent sein für Benutzer, die unsicher sind.

Einige der Tooltips enthalten sogar ein kleines Bild einer kommentierten Debitkarte So können Benutzer leicht die Daten finden, die sie in das Anmeldeformular eingeben müssen.