web-dev-qa-db-fra.com

Info-bulle d'entrée dans la conception des matériaux

Où acceptez-vous l'explication du champ pour l'élément d'entrée lorsque vous suivez la conception d'entrée de conception de matériau. Bootstrap implements it in a very straightforward manner since it has static labels

Le problème que je rencontre est de savoir si afficher l'icône d'info-bulle uniquement lorsque l'élément d'entrée est au point, ou pour le montrer de côté à tout moment. Le problème avec ce dernier est qu'il est difficile de relier l'icône à son élément de formulaire correspondant lorsqu'il s'agit de formulaires plus grands - c'est-à-dire: il serait plus facile à associer si l'icône était plus proche de l'étiquette elle-même, contrairement à la capture d'écran ci-jointe. N'importe quelles idées seraient appréciées.

4
Adarsh Sosale

En fonction de la taille (et du but) de l'infobulle, je place généralement toutes les informations utiles pertinentes juste en dessous de l'élément d'entrée.

Si j'essaie de fournir des informations sur les règles de saisie appropriées (par exemple, les champs de mot de passe), je m'assure que les informations sont toujours visibles et sous la bonne entrée.

Cela aide avec quelques choses:

1) L'utilisateur n'a pas à cliquer sur l'entrée pour voir les informations utiles. Si, dès le départ, je l'informe que "le mot de passe doit comporter au moins 8 caractères et inclure des symboles et des chiffres", alors l'utilisateur est prêt à utiliser un mot de passe approprié, ce qui réduit les chances d'échouer à remplir le formulaire et de réduire les taux de conversion.

2) Il facilite la conception réactive. Les info-bulles "flottantes" ont tendance à être assez précaires avec leur placement dans différentes vues, en particulier les appareils mobiles où il n'y a pas assez d'espace. Si les informations se trouvent naturellement ci-dessous (et vous pouvez toujours les faire ressembler à une info-bulle), l'application de règles réactives au formulaire (même rétroactivement) a tendance à être plus facile.

Voici des exemples directement issus des directives de conception des matériaux

enter image description here

P.S Je respecte les mêmes règles avec la validation en ligne (c'est-à-dire informer l'utilisateur si les informations fournies sont correctes ou non)

1
Socrates Kolios

Info-bulles sont des étiquettes de texte qui apparaissent lorsque l'utilisateur survole, se concentre sur ou touche un élément.

Les info-bulles identifient un élément lors de leur activation. Ils peuvent contenir un bref texte d'aide sur sa fonction. Par exemple, ils peuvent contenir des informations textuelles sur les icônes exploitables.

Si vous le montrez sur le côté tout le temps -

  • Vous allez à l'encontre du modèle mental des utilisateurs.
  • Ce sera du contenu indésirable pour les utilisateurs qui connaissent le formulaire/champ.
  • Vous pouvez forcer tous les utilisateurs à le lire même s'ils ne le souhaitent pas.
  • Cela rendra l'interface utilisateur compliquée et ajoutera inutilement de la confusion.
  • Cela rend la tâche difficile à réaliser.

Éditer:

J'ai mal lu la partie icône de votre question.

Placez l'icône à côté de l'étiquette et gardez-la visible à tout moment.

4
DPS