Souligner la zone de texte sans la rendre désactivée
Je voudrais mettre l'accent sur le contenu des champs de texte suivants lorsque l'une des listes déroulantes est sélectionnée. Je ne veux pas les rendre gris car cela suggérerait qu'ils sont désactivés. Ils deviennent effectivement des informations lorsqu'une liste déroulante est utilisée, mais ils sont toujours disponibles pour modification, auquel cas ils redeviendront importants. Quelle est la meilleure façon d'y parvenir?
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Contexte
Nous avons une application Web utilisée pour l'analyse des données et vous sélectionnez la plage de temps à regarder en utilisant deux champs de texte simples (avec des commandes de calendrier attachées):
Nous introduisons expérimentalement des préréglages pour permettre facilement la sélection de plages de temps communes. Nous ne voulons cependant pas supprimer les champs horaires existants afin de permettre la sélection d'heures arbitraires si nécessaire. Ils servent également à montrer la plage de temps exacte choisie lorsqu'un préréglage est utilisé (comme dans l'exemple ci-dessus).
Si un préréglage est sélectionné dans le menu déroulant, les champs de texte sont mis à jour pour correspondre. Si les champs de texte sont modifiés, la liste déroulante est effacée. Cela signifie qu'un seul ensemble de commandes est utilisé à la fois.
Ce que je voudrais, c'est que lorsqu'un preset est sélectionné, les champs de texte devraient être mis en valeur d'une manière ou d'une autre, pour montrer qu'ils ne sont pas utilisés. L'approche la plus simple serait de griser ou même de désactiver les commandes mais je ne veux pas le faire car elles sont toujours parfaitement utilisables si besoin.
Quelle serait une bonne façon de résoudre ce problème?
Il se peut que je me concentre trop sur les champs de texte. Mon objectif principal est d'indiquer qu'un seul ensemble de commandes est utilisé mais que l'autre ensemble peut facilement être utilisé. Mon objectif secondaire est également de ne pas changer l'interface utilisateur trop radicalement pour réduire les frictions avec les utilisateurs existants du système.
En vous basant sur la contrainte que vous souhaitez que les deux ensembles de champs restent visibles et indiquez qu'ils sont tous les deux utilisables à tout moment, vous pouvez les encapsuler dans un groupe de boutons radio si ce n'est pas trop déroutant pour vos utilisateurs, car ce que vous essayez de dire à l'utilisateur (si je vous interprète correctement) est qu'ils peuvent utiliser un préréglage, ou ils peuvent définir une plage spécifique.
Ensuite, si l'utilisateur modifie les champs de plage ou sélectionne le deuxième bouton radio, vous retournez le bouton radio pour indiquer que c'est ce qui est utilisé et effacez les préréglages comme vous l'avez décrit s'ils entrent dans une plage personnalisée.
Il peut être utile de "désactiver" les contrôles qui ne sont pas utilisés uniquement pour les désaccentuer. Les boutons radio indiquent à l'utilisateur qu'il peut utiliser l'une ou l'autre option.
Je ne pense pas que les deux options devraient être visibles en même temps. Le fait d'avoir un contrôle qui permet de visualiser une option à la fois simplifie considérablement l'interface et réduit la charge cognitive. Vous devez décider quelle option doit être une option par défaut en fonction des besoins de l'entreprise et des analyses d'utilisation passées. Je pense que les onglets permettent de résoudre ce problème assez efficacement.
Nous utilisons une solution similaire au travail depuis plusieurs années sans rétroaction négative.