Quelle serait la meilleure façon de laisser un utilisateur ajouter une URL à un formulaire?
Actuellement, notre application Web affiche simplement une zone de texte sans aucune validation. Une petite icône placée à côté de la zone de texte permet à l'utilisateur d'ouvrir l'URL dans une nouvelle fenêtre de navigateur pour vérifier la validité. Ce n'est pas un bon moyen d'inciter un utilisateur à entrer une URL valide et sans autre validation en place, nos bases de données clients sont remplies de trucs comme les adresses e-mail et "Voir les notes". Nous aimerions vraiment améliorer cette situation, mais sans spécialiste UX dans notre équipe, il semble que nous ne soyons pas en mesure de trouver un moyen approprié d'autoriser la saisie d'URL.
J'imagine qu'une simple zone de texte serait plus facile à utiliser, mais serait également plus difficile à valider. Par exemple, nous aimerions autoriser le à saisir des URL sous la forme http://www.google.com/ ou www.google.com et uniquement google.com. Fractionner le protocole et permettre aux utilisateurs de le sélectionner dans une liste déroulante (par défaut à http: //) faciliterait la validation et peut-être également entrer l'URL. Cependant, l'utilisateur serait alors buggé avec la terminologie technique. Environ 1% seulement des URL actuelles de la base de données sont correctement préfixées avec le protocole et nous pensons que cela résulte de la copie de l'URL à partir de la barre d'adresse des navigateurs.
En ce qui concerne la validation, je sais qu'il existe de nombreuses expressions régulières pour la validation d'URL, mais je suppose qu'elles souffrent des mêmes problèmes que les expressions régulières d'adresse de messagerie en ce qu'elles sont trop strictes ou très, très lâches, ou sont un quelques pages de long.
Mes questions sont donc:
- Quel (combinaison de) contrôle (s) permettrait à l'utilisateur de saisir une URL aussi facilement que possible?
- Quel type de validation suffirait pour que toutes les URL valides soient autorisées, mais les plus manifestement erronées ne le sont pas?
Si vous vous souciez vraiment de l'UX - validez l'URL automatiquement. Par exemple. si l'utilisateur tape "example.com" - changez-le en " http://example.com ".
Si vous souhaitez ajouter une possibilité de naviguer vers l'URL qui vient d'être tapée - il suffit de le souligner et de le rendre bleu; l'utilisateur comprendra qu'il s'agit d'un lien.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Pourquoi avez-vous peur des validations avec des expressions régulières? Vous pouvez rechercher dans votre base de données déjà remplie les entrées de données les plus courantes (comment l'utilisateur a réellement saisi les URL jusqu'à présent) et écrire des scripts pour les 5 premiers de ces formulaires de saisie.
Les scripts doivent développer l'URL d'entrée en une URL correcte et afficher la bonne dans le champ après avoir perdu le focus.
Vous pouvez également utiliser une technique comme Facebook ces jours-ci, vous connecter à l'URL correctement développée et récupérer un aperçu. vous pouvez afficher cet aperçu à côté du champ de texte. cela garantit à l'utilisateur qu'il a entré l'URL correcte.
Vous voudrez peut-être jeter un œil à La nouvelle façon améliorée de créer des formulaires avec HTML5 de Web Design Ledger. Vous pouvez définir un type de champ comme URL (<input type="url">), ce qui entraîne une validation côté client dans les navigateurs pris en charge - bien que je ne sois pas sûr du type d'expression régulière utilisé pour une telle validation. L'utilisation de ce type de champ a également pour effet agréable de présenter à l'utilisateur un clavier convivial pour la saisie d'URL lors de la navigation à partir d'un iPhone.
Bien sûr, les informations ci-dessus ne seront utiles que si les utilisateurs naviguent avec un navigateur compatible HTML5.
Vous pouvez fournir un lien attaché, avant d'enregistrer et de mettre à jour le champ du lien, essayez d'accéder à la destination de l'url. si ça va, alors allez-y.
Que diriez-vous de donner un exemple dans le domaine lui-même?
Site Web: [exemple www.google.com]
L'exemple devrait disparaître une fois que la personne clique pour se concentrer sur le champ. Je comprends que ce n'est pas de la validation, mais cela fournit un exemple de ce que l'utilisateur doit saisir.
Il existe plusieurs façons de gérer une entrée URL par un utilisateur et plusieurs considérations à prendre en compte lorsque vous concevez une entrée comme celle-ci:
- La plupart des utilisateurs non techniques ne comprendront pas nécessairement le terme "URL". Vous pouvez essayer les termes "lien", "lien Web", "adresse Web" ou une variété d'autres choses plus conviviales à sa place.
- Vous devez valider l'URL en ligne et informer immédiatement l'utilisateur si son entrée ne correspond pas à votre format.
- Vous pouvez donner des exemples d'une entrée valide dans le formulaire en ligne - c'est exactement à cela que servent les espaces réservés et le texte d'aide.
- Vous ne devez PAS modifier automatiquement l'entrée de l'utilisateur. Il s'agit d'une mauvaise pratique pour de nombreuses raisons, dont la moindre est que vous ne savez pas ce que l'utilisateur essaie d'accomplir. Peut-être qu'ils tapent activement une adresse, ou qu'ils en ont collé une qu'ils ont copiée ailleurs. Peut-être qu'ils en ont collé un et essaient ensuite d'en changer une partie - mais vous ne le savez pas à ce stade, et le modifier ne fera que le jeter.
- Il existe plusieurs protocoles valides si vous recherchez simplement une "URL" et non pas spécifiquement l'adresse d'une page Web.
http,https,ftp,file,data,mailto, et plusieurs autres sont tous valides dans ces cas. - Vous pouvez afficher un exemple de la façon dont le lien sera interprété par le système, afin que l'utilisateur puisse cliquer dessus et confirmer qu'il est valide.
- Vous pouvez afficher des informations de l'URL à l'utilisateur pour lui permettre de confirmer sa validité.
- Grattez les métadonnées du site Web pour obtenir le titre, la description, le favicon, etc. à afficher à l'utilisateur.
- Affichez une capture d'écran/un aperçu de l'URL pour l'utilisateur - il existe de nombreuses méthodes et outils pour le faire disponibles en ligne. Cependant, une chose à retenir ici est que le contenu de certaines URL peut être bloqué par la connexion de l'utilisateur, donc l'aperçu peut simplement afficher une page de connexion.
Pour un exemple, voici une entrée conforme à tout ce qui précède.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Une autre utilisation courante sur le Web consiste à proposer une zone de sélection avec plusieurs choix pour les protocoles autorisés, puis à supprimer automatiquement le protocole de toute URL d'entrée.
