UI (User Interface) und UX (User Experience) spielen eine wichtige Rolle im konvertierungsfreundlichen Webdesign. UI macht Ihre Website schön und UX konzentriert sich auf die Benutzerfreundlichkeit und Benutzerfreundlichkeit der Website. Wenn eines dieser beiden Elemente fehlt oder nicht ausgeglichen ist, werden die Kunden geprellt. Website Form Design ist der Teil des Webdesigns, der eine nahtlose Leadgenerierung und Informationserfassung mit angemessener Benutzerzufriedenheit auf einer Website gewährleistet. In diesem Blog werden wir uns hauptsächlich auf UX konzentrieren, da UI sehr subjektiv ist und durch die Branding-Richtlinien Ihres Unternehmens oder Ihre Auswahl an Farben, Bannern und Schriftarten definiert wird.
Wikipedia sagt:
“User Experience Design (UX, UXD, UED oder XD) ist der Prozess der Verbesserung der Benutzerzufriedenheit mit einem Produkt durch Verbesserung der Benutzerfreundlichkeit, Zugänglichkeit und Vergnügen in der Interaktion mit dem Produkt.”
Wir verwenden auf unseren Webseiten zu fast jedem Teil verschiedene Formulare. Von Feedback-Formularen zu Checkout-Seite Alles hat seinen Zweck, und wenn sie nicht so konzipiert sind, wofür sie bestimmt sind, werden sie ihren Zweck nicht erfüllen.
In diesem Post werde ich 6 solche Fehler in einem Website-Formular-Design erklären, das Sie nie begehen sollten, wenn Sie Bounce-Backs und schlimmsten Benutzererfahrungen auf Ihrer Website vermeiden möchten.
1. Zu viele Informationen vom Benutzer anfordern
“40% der Nutzer geben eine Website auf, deren Ladezeit mehr als 3-Sekunden beträgt."-Kissmetrics. Dies ist, wenn die Website von 1 sec verlangsamt wird, stellen Sie sich vor, was die Reaktion wäre, wenn Ihre Website viel mehr Zeit verschwendet, indem Sie unnötige Details zum Ausfüllen der Formulare verlangen.
Vergeuden Sie also nicht Ihre Zeit und Ihre Konvertierung, indem Sie nach "nicht so wichtigen" Informationen fragen. Bitte beachten Sie, dass zwischen "unnötigen" Informationen und "nicht so wichtigen" Informationen unterschieden wird.
Informationen wie "Ethnizität" oder "Geburtsort" der Person können für eine E-Commerce-Website als unnötig erachtet werden, aber für die Website einer politischen Partei möglicherweise wichtig. Das ist also auch diskutabel und subjektiv, aber ich glaube, Sie haben die Idee.
'Nicht so wichtig' Felder können sein:
- Zusätzliche E-Mail-ID
- Zusätzliche Telefonnummer
- Geburtsdatum
- Faxnummer
- Sicherheitsfrage und Antwort
- Sozialversicherungsnummer usw.
Selbst wenn Sie diese Details benötigen, ist es nicht notwendig, auf einmal zu fragen, Sie können dem Benutzer immer eine Option zur Aktualisierung seines Profils geben. Denken Sie wie Linkedin oder Facebook, sie fragen nicht alles auf einmal, sondern Sie erhalten zuerst mit so wenig wie 3-5 Felder und dann geben Sie eine Option, um Ihr Profil später zu aktualisieren.
Es geht nur um Präsentation, also sollten Sie nur die wichtigsten Details fragen, die Sie benötigen: Wenn Sie das Formular für Feedback verwenden, fragen Sie nach deren Ansichten und Kommentaren, bevor Sie nach ihrem Namen oder ihrer E-Mail-ID fragen. Ebenso, wenn es ein Checkout-Formular ist und Sie bereits bestimmte Informationen über den Benutzer haben, dann fragen Sie nicht erneut nach diesen, sondern lassen Sie sie auf dem Formular ausgefüllt. Sie können beispielsweise die Informationen in der Rechnungsadresse vorbelegen, um das Zustellungsadressformular automatisch zu füllen, wenn beide Adressen identisch sind.
[Caption id = "attachment_4154" align = "Aligncenter" width = "509"]
Die Informationsvorbereitung von einem Formular zum anderen kann Zeit und Aufwand für die Benutzer sparen. [/ Caption]
2. Mehrdeutige oder nicht reagierende Etikettenpositionierung
Etiketten werden in den Webseitenformularen verwendet, um es dem Benutzer zu erleichtern, die erforderlichen Informationen zu füllen. Stellen Sie daher sicher, dass die Etiketten an einer korrekten Position platziert werden, die den Benutzer nicht darüber verwirrt, was er ausfüllen soll. Eine richtige Etikettenausrichtung ist im Wesentlichen erforderlich, wenn Sie ein Responsive-Formular entwerfen, das unterschiedlichen Bildschirmgrößen entspricht. Stellen Sie sicher, dass die Etiketten auf allen Bildschirmgrößen, auf denen das Formular geöffnet wird, korrekt ausgerichtet sind.
[Caption id = "attachment_4155" align = "Aligncenter" width = "291"]
Mobiles Kontaktformular [/ caption] 
Die meisten Website-Formulare verwenden dieselben Label-Platzierungen auf allen Bildschirmgrößen. Dies ist keine empfohlene Wahl. [/ Caption]
Benutzer auf Mobilgeräten verwenden Zoom, um die Bezeichnungen auf den Formularen deutlich zu sehen, damit sie die richtigen Informationen enthalten. Wie im Bild oben gezeigt, wenn Sie jedoch die gleiche Ausrichtung sowohl auf der Desktop- als auch auf der mobilen Version des Formulars beibehalten, werden alle Beschriftungen ausgeblendet, wenn Sie im Zoom-Modus auf das Formular klicken. Es wird den Benutzer zwingen, das Formular jedes Mal zu verkleinern, wenn er zum nächsten Eintrag wechselt.
Eine bessere Option für die Handhabung wäre die Verwendung von zwei verschiedenen Ausrichtungen in der Desktop- und mobilen Version des Formulars. Richten Sie die Labels bei mobilen Versionen nach oben aus und halten Sie sie rechtsbündig auf dem Desktop.
3. Ersetzen von Etiketten durch Platzhalter
Bei HTML 5 waren Platzhalter im Textattribut eine wertvolle Ergänzung. Sie werden effektiv verwendet, um einen kurzen Hinweis auf einen erwarteten Wert auf dem Gebiet zu geben.
[Caption id = "attachment_4157" align = "Aligncenter" width = "620"]
Platzhalter geben einen kurzen Hinweis auf erwartete Werte im Formularfeld [/ caption]
In der Regel bleibt ein Platzhalter sichtbar, bis der Benutzer in das Feld klickt. Sobald der Benutzer in das Feld klickt, um etwas einzugeben, verschwindet der Platzhalter. Die Verwendung von Platzhaltern im Design von Website-Formularen ist stark mit denen von Labels verwechselt. Viele Designer verwenden diese Platzhalter anstelle von Beschriftungen, um die Eingabefelder zu beschreiben, in der Hoffnung, ein saubereres Design zu erhalten. Dies ist ein großer Fehler, der die Benutzerfreundlichkeit beeinträchtigt.
Nehmen wir eine Situation, in der der Benutzer ein langes Formular wie ein Kassenformular ausfüllt. Nach dem Ausfüllen des Formulars möchte er die Details überprüfen, bevor er das Formular abschicken kann. Nun, wenn es kein Etikett in dem Formular gibt, wird er nur verwirrt über die Details, die er ausgefüllt hat.
[Caption id = "attachment_4158" align = "Aligncenter" width = "529"]
Die Verwendung von Platzhaltern anstelle von Etiketten verwirren Ihre Kunden besonders in langen Formularen. [/ Caption]
Also, verwende immer ein Label. Wenn Sie keine Labels verwenden, ist das zwar ein Platzsparer, aber Sie werden überrascht sein zu wissen, wie leicht die Leute vergessen, was das Label war, sobald sie die Informationen im Feld ausgefüllt haben.
4. Zu wenig Abstand und verzerrtes Layout
Ein weiterer großer Fehler, den wir beim Entwurf von Website-Formularen machen, besteht darin, zu viele Elemente auf einer Seite zu platzieren. Mehr sind die Anzahl der Elemente auf einer einzigen Seite mehr ist die Konkurrenz unter ihnen, um Aufmerksamkeit zu erregen.
Die Lösung besteht darin, zwischen den Elementen einen Atmungsraum zu lassen, indem weiße Räume beibehalten werden. Ein ordnungsgemäßer Fluss für Ihre Benutzer wird nur bereitgestellt, wenn Sie ausreichend Abstand zwischen den Feldern und den verschiedenen Abschnitten halten.
Dieses einseitige Auscheckformular zeigt, wie verschiedene Abschnitte getrennt werden können, selbst wenn zu viele Elemente auf einer einzelnen Seite vorhanden sind. Das Formular verwendet Abschnittsbeschriftungen, um verschiedene Abschnitte wie Anmeldeoptionen, Rechnungsadresse, Bestellbestätigung, Versandmethode und Zahlungsmethode zu trennen. Darüber hinaus macht das dreispaltige Layout die Form noch sauberer.
[Caption id = "attachment_4159" align = "Aligncenter" width = "648"]
Segmentieren verschiedener Abschnitte verhindert Überschneidungen zwischen verschiedenen Abschnitten [/ caption]
5. Unsichere Fehlermeldungen und Eingabevalidierungen
Beim Ausfüllen der Website-Formulare besteht die Möglichkeit, dass Benutzer Fehler machen, aufgrund derer das Formular nicht übermittelt wird. Fehler können auftreten, wenn ein Eintrag fehlt oder falsche Informationen eingegeben werden. Um diese Website zu bearbeiten, verwenden Designer Eingabeprüfungen, die beim Senden des Formulars die Fehlermeldung (en) anzeigen. Sie verwenden serverseitige Validierungen, die im Allgemeinen darauf warten, dass die Antwort des Servers die Fehler im Formular überprüft. Dies ist ein größerer Fehler, der den Benutzer sogar frustrieren kann, wenn nach dem Absenden des Formulars eine Fehlermeldung angezeigt wird.
Stattdessen können Sie die Inline-Überprüfung auf der Benutzerseite verwenden, die vor Ort meldet, ob der Benutzer einen falschen Eintrag in einem Feld ausfüllt. Auf diese Weise werden Benutzer nicht übersehen, wenn sie in einem Feld etwas Falsches eingegeben haben.
[Caption id = "attachment_4160" align = "Aligncenter" width = "648"]
Inline-Validierung zum Überprüfen und Anzeigen der Fehler vor Ort verhindert die Frustration nach der Formularübermittlung [/ caption]
Verwenden Sie außerdem keine verwirrenden Anweisungen in den Validierungsnachrichten. Erklären Sie einfach, warum der Eintrag falsch ist, indem Sie beschreiben, wie der richtige Eintrag aussehen würde.
6. Verwenden von Captcha, die nicht für Menschen gedacht sind
Captchas werden von den Websites verwendet, um Spam-Angriffe zu verhindern, indem sie einen Bot von Menschen unterscheiden. Es wird davon ausgegangen, dass diese Captchas eine Herausforderung darstellen, die für Menschen einfach ist, während Bots sie nicht passieren können. Bei der Spam-Abwehr werden Designer manchmal so verzweifelt, dass sie die Captchas integrieren, die selbst für die Menschen eine Herausforderung darstellen.
[Caption id = "attachment_4161" align = "Aligncenter" width = "319"]
Captcha, das Spam verhindert, aber menschliche Benutzer frustriert [/ caption]
Ich verstehe, dass die Verhinderung von Spam wichtig ist, aber Captcha kann für die Benutzer verwirrend und herausfordernd sein, sie zu dekodieren. Sie können eine alternative Lösung von sogenanntem Google re-Captcha verwenden, das eine erweiterte und einfache Version ist. Das neue Google Re-Captcha fordert den Benutzer einfach auf, in ein Kontrollkästchen zu klicken und die Überprüfung erfolgt ohne Eingabe einer schwierig zu erkennenden Textnachricht.
[Caption id = "attachment_4162" align = "Aligncenter" width = "319"]
Google re-Captcha ist vergleichsweise benutzerfreundlicher, obwohl es für Bots schwierig ist [/ caption]
Endlich,
Die Verbesserung der Benutzererfahrung ist ein kontinuierlicher Prozess, der nur mit regelmäßigen Updates unter Verwendung der besten verfügbaren Methoden erreicht werden kann. Ich hoffe, diese Designfehler zu skizzieren, wird Ihnen helfen, diese Verbesserung zu erreichen, indem Sie diese Fehler auf keinem der Formulare, die Sie auf Ihrer Website verwenden, begehen.
Ähnliche Beiträge:
- 5-Websiteelemente, die Ihre E-Commerce-Kunden enttäuschen können
- 5 bietet sichere Möglichkeiten zum Sammeln von E-Mail-Daten in Ihrem Online-Shop
- 6 Checkout-Seite Fehler, die Ihre Conversions möglicherweise töten
- 6 Prompt Tipps zum Erstellen einer effektiven Promotion-Kampagne auf Prestashop
- 6 Gründe, warum Sie eine Magento Mobile App für Ihren Fashion Store benötigen
