Quelles sont les façons de mettre en évidence une option ou un lien sélectionné sans utiliser de gras?
Quelle est la meilleure façon de mettre en surbrillance une option sélectionnée au format texte/lien sans utiliser <strong> ou <b>?
Je ne peux pas utiliser le soulignement car ils sont déjà des liens et sont donc le soulignement est utilisé pour montrer qu'ils sont cliquables.
Je ne veux pas utiliser <em> ou en italique car je pense que c'est trop subtil et ne correspond pas à la conception du site.
La meilleure façon serait d'utiliser le gras, mais faire une sélection de texte en gras augmente la TAILLE du texte, changeant la disposition de la boîte dans certains cas. Voici un exemple:
Actuellement ordonné par "épisodes" et donc "Episodes" est en gras et "Treatment Days" est souligné - vous pouvez immédiatement dire que vous regardez par "Episodes" et vous pouvez changer l'ordre pour être par "Treatment Days".
Cependant, lorsque vous effectuez cette opération, les "Jours de traitement" deviennent en gras et, en tant que tels, s'agrandissent, en enveloppant la ligne de texte sur la ligne suivante en tant que telle:
En plus d'avoir l'air mauvais, il pousse également les "épisodes" vers le bas, ce qui peut être légèrement déroutant ou gênant pour les utilisateurs.
Comment mieux afficher cette boîte? Gardez à l'esprit que la boîte elle-même est assez petite (bien qu'elle puisse changer de largeur/hauteur - c'est une cellule dans un <table> et sa largeur et sa hauteur dépendent des lignes et des colonnes du tableau), mais il s'agit de la taille "générale" qu'il pourrait s'agir. Par exemple, avoir des puces ou tout autre élément peut être inutilisable car cela augmente l'espace.
Edit: après les idées et les réponses de @ mervinj, j'ai joué avec les couleurs - j'ai eu du mal parce que la boîte elle-même est assez sombre, et différentes couleurs n'apparaissaient pas bien sur le fond. J'ai donc trouvé ceci: c'est-à-dire changer le <span> couleur d'arrière-plan et couleur du texte pour montrer ce qui est sélectionné et ce qui est sélectionnable.
Est-ce que ça a du sens? Est-ce que ça a l'air "bien"? Je pense que ça a l'air un peu criard. Pourriez-vous voir d'un coup d'œil quelle zone est "sélectionnée" et quelle zone n'a pas été sélectionnée?
Edit 2: disant que ... j'aime un peu ça (maison de transition)
Pourquoi ne le faites-vous pas comme le Metro UI de Microsoft le gère en donnant au texte sélectionné une couleur plus claire et en grisant le reste. De cette façon, la taille du texte peut rester la même mais l'élément de menu sélectionné serait mis en surbrillance.
Un autre exemple de son utilisation sur des sites Web
Donc, dans votre exemple, cela ressemblerait à ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Consultez les sites ci-dessous pour des suggestions de contraste de couleur
Une chose qui peut être améliorée dans toutes vos propositions est la distinction visuelle entre les 3 éléments différents.
Si l'on regarde 3, par exemple, les trois éléments ont chacun un style différent, il est donc difficile de regrouper les deux options dans l'en-tête.
De plus, en raison du retour à la ligne des `` jours de traitement '' (en particulier lorsque les `` jours '' commencent par une majuscule), vous pourriez rencontrer des problèmes avec les utilisateurs qui pensent que `` traitement '', `` jour et épisodes '' sont toutes des options différentes.
Dans les exemples ci-dessous, j'ai choisi de regrouper les options en leur donnant un retrait. Ensuite, Top est basé sur une sélection colorée, B sur une gradation non sélectionnée, C sur un symbole de contrôle.
Je pense qu'il est assez clair de voir que C est le plus attrayant pour les yeux.
Bien que cela puisse paraître drôle pour certains (tandis que pour d'autres pas drôle du tout), je vous recommande de vous familiariser brièvement avec les Principes de la Gestalt - Ils peuvent vraiment aider avec des questions comme la vôtre sans que vous ayez à lire des centaines de fois de pages sur le design.