it-swarm.com.de

Wie kann ein Benutzer einem Formular am besten eine URL hinzufügen?

Derzeit zeigt unsere Webanwendung lediglich ein Textfeld ohne Validierung an. Neben dem Textfeld befindet sich ein kleines Symbol, mit dem der Benutzer die URL in einem neuen Browserfenster öffnen kann, um die Gültigkeit zu überprüfen. Dies ist keine gute Möglichkeit, einen Benutzer zur Eingabe einer gültigen URL anzuregen. Da keine andere Validierung vorhanden ist, sind die Datenbanken unserer Kunden voll mit E-Mail-Adressen und "Siehe Hinweise". Wir möchten diese Situation wirklich verbessern, aber da wir keinen UX-Spezialisten in unserem Team haben, scheinen wir nicht in der Lage zu sein, einen geeigneten Weg zu finden, um URL-Eingaben zuzulassen.

Ich stelle mir vor, ein einfaches Textfeld wäre am einfachsten zu verwenden, aber auch am schwierigsten zu validieren. Zum Beispiel möchten wir zulassen, dass URLs als http://www.google.com/ oder www.google.com und nur als google.com eingegeben werden. Das Aufteilen des Protokolls und das Ermöglichen, dass Benutzer es in einer Dropdown-Liste auswählen (standardmäßig http: //), würde die Validierung erleichtern und möglicherweise auch die URL eingeben. Der Benutzer würde dann jedoch mit der technischen Terminologie abgehört. Nur etwa 1% der aktuellen URLs in der Datenbank wird das Protokoll ordnungsgemäß vorangestellt, und wir vermuten, dass dies das Ergebnis des Kopierens der URL aus der Adressleiste des Browsers ist.

Was die Validierung betrifft, weiß ich, dass es viele reguläre Ausdrücke für die URL-Validierung gibt, aber ich gehe davon aus, dass diese unter den gleichen Problemen leiden wie reguläre E-Mail-Adressausdrücke, da sie entweder zu streng oder sehr, sehr locker sind oder a ein paar Seiten lang.

Meine Fragen sind also:

  • Welche (Kombination von) Steuerelementen würde es dem Benutzer ermöglichen, eine URL so einfach wie möglich einzugeben?
  • Welche Art der Validierung würde ausreichen, damit alle gültigen URLs zulässig sind, die offensichtlichsten jedoch nicht?
12
Thorsal

Wenn Sie sich wirklich für UX interessieren, überprüfen Sie die URL automatisch. Z.B. Wenn der Benutzer "example.com" eingibt, ändern Sie ihn in " http://example.com ".

Wenn Sie die Möglichkeit hinzufügen möchten, zu der gerade eingegebenen URL zu navigieren, unterstreichen Sie sie einfach und machen Sie sie blau. Der Benutzer wird verstehen, dass dies ein Link ist.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

11
Dmitry Semenov

Warum schrecken Sie mit regulären Ausdrücken vor den Validierungen zurück? Sie können Ihre bereits ausgefüllte Datenbank nach den häufigsten Dateneinträgen durchsuchen (wie der Benutzer die URLs bisher wirklich eingibt) und Skripte für die Top 5 dieser Eingabeformulare schreiben.

Die Skripte sollten die Eingabe-URL auf eine korrekte erweitern und die richtige im Feld anzeigen, nachdem der Fokus verloren gegangen ist.

Sie können heutzutage auch eine Technik wie Facebook verwenden, eine Verbindung zur korrekt erweiterten URL herstellen und eine Vorschau abrufen. Sie können diese Vorschau neben dem Textfeld anzeigen. Dies stellt sicher, dass der Benutzer die richtige URL eingegeben hat.

facebook-like url validation

6
patrics

Vielleicht möchten Sie einen Blick auf Die neue und verbesserte Methode zum Erstellen von Formularen mit HTML5 aus dem Webdesign-Ledger werfen. Sie können einen Feldtyp als URL festlegen (<input type="url">), was in unterstützten Browsern zu einer clientseitigen Validierung führt - obwohl ich nicht sicher bin, welche Art von Regex für eine solche Validierung verwendet wird. Die Verwendung dieses Feldtyps hat auch den netten Effekt, dass dem Benutzer beim Surfen von einem iPhone aus eine URL-freundliche Tastatur angezeigt wird.

Die obigen Informationen sind natürlich nur nützlich, wenn Benutzer mit einem HTML5-kompatiblen Browser surfen.

4
Gordon Kennedy

Sie können einen Link zum Anhängen bereitstellen, bevor Sie das Linkfeld speichern und aktualisieren, versuchen Sie, auf das URL-Ziel zuzugreifen. Wenn es in Ordnung ist, dann mach weiter.

Facebook Link Example

3
Pir Abdul

Wie wäre es mit einem Beispiel vor Ort?

Website: [Beispiel www.google.com]

Das Beispiel sollte verschwinden, sobald die Person klickt, um sich auf das Feld zu konzentrieren. Ich verstehe, dass dies keine Validierung ist, aber es bietet ein Beispiel dafür, was der Benutzer eingeben sollte.

2

Es gibt mehrere Möglichkeiten, eine URL-Eingabe eines Benutzers zu verarbeiten, und verschiedene Überlegungen, die Sie beim Entwerfen einer Eingabe wie dieser anstellen müssen:

  • Die meisten nicht technischen Benutzer werden den Begriff "URL" nicht unbedingt verstehen. Sie können stattdessen die Begriffe "Link", "Weblink", "Webadresse" oder eine Vielzahl anderer benutzerfreundlicherer Dinge ausprobieren.
  • Sie sollten die URL inline validieren und dem Benutzer sofort mitteilen, wenn seine Eingabe nicht mit Ihrem Format übereinstimmt.
  • Sie können Beispiele für eine gültige Eingabe im Formular inline angeben - genau dafür sind sowohl Platzhalter als auch Hilfetext gedacht.
  • Sie sollten die Benutzereingaben NICHT automatisch ändern. Dies ist aus vielen Gründen eine schlechte Praxis. Am wenigsten wissen Sie nicht, was der Benutzer erreichen möchte. Vielleicht geben sie aktiv eine Adresse ein oder haben eine eingefügt, die sie von einem anderen Ort kopiert haben. Vielleicht haben sie einen eingefügt und versuchen dann, einen Teil davon zu ändern - aber Sie wissen es zu diesem Zeitpunkt noch nicht, und wenn Sie ihn ändern, werden sie einfach abgeworfen.
  • Es gibt mehrere gültige Protokolle, wenn Sie nur nach einer "URL" suchen und nicht speziell nach der Adresse einer Webseite. http, https, ftp, file, data, mailto und einige weitere sind in diesen gültig Fälle.
  • Sie können ein Beispiel dafür anzeigen, wie der Link vom System interpretiert wird, damit der Benutzer darauf klicken und seine Gültigkeit bestätigen kann.
  • Sie können dem Benutzer Informationen von der URL anzeigen, damit der Benutzer bestätigt, dass sie gültig sind.
    • Durchsuchen Sie die Metadaten der Website, um den Titel, die Beschreibung, das Favicon usw. für den Benutzer anzuzeigen.
    • Zeigen Sie dem Benutzer einen Screenshot/eine Vorschau der URL an. Es gibt viele Methoden und Tools, um dies online zu tun. Beachten Sie jedoch, dass der Inhalt einiger URLs möglicherweise durch die Benutzeranmeldung blockiert wird, sodass in der Vorschau möglicherweise nur eine Anmeldeseite angezeigt wird.

Als Beispiel finden Sie hier eine Eingabe, die allen oben genannten Anforderungen entspricht.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Eine andere häufige Verwendung im Internet besteht darin, ein Auswahlfeld mit mehreren Auswahlmöglichkeiten für die zulässigen Protokolle anzubieten und das Protokoll dann automatisch von einer Eingabe-URL zu entfernen.

mockup

bmml Quelle herunterladen

1
Liam Hammett