Meilleure façon d'afficher "plus d'informations", info-bulle ou aucune info-bulle?
Quelle est la meilleure façon d'afficher plus d'informations à côté d'une option tout en remplissant un formulaire de manière minimale et peu d'espace?
- l'icône "i" qui peut être cliquée ou survolée et une info-bulle apparaît
- cliquez simplement à l'intérieur de la zone de texte et une info-bulle apparaît
- pas d'infobulle, l'info apparaît dès le début
Il existe une tendance à utiliser CSS et/ou Javascript pour afficher et masquer le contenu secondaire ou supplémentaire sur le Web. Voici un exemple plus ancien de CSSNewbie : Cliquez sur "Voir plus" pour afficher le contenu caché:
Cliquez sur "Masquer plus" pour masquer le contenu révélé:
Je vous laisse le soin de déterminer quelle approche est la "meilleure". Cette approche - concevoir "Plus d'infos" comme un div caché qui se révèle au clic - est une méthode de plus en plus populaire pour implémenter divulgation progressive sur le Web.
Le problème d'avoir une information à côté de chaque champ est que, dans de nombreux cas, elle n'est pas nécessaire, c'est-à-dire qu'il s'agit d'informations répétées ou évidentes. Vous finirez par être obligé de le remplir pour tout, même si vous ne le souhaitez pas. C'est bien dans les deux exemples que vous avez, mais en tant que modèle de conception souvent utilisé, vous souhaiterez peut-être bientôt ne pas vous y être engagé.
Dans ce cas, vous feriez mieux de placer les informations dans un "i" de vol stationnaire au niveau de l'en-tête. Cela aidera également à réduire la taille du champ.
Jetez un oeil à la façon dont eBay le fait, lorsque vous vous invitez à lister plus d'informations sur quelque chose que vous vendez.
Comme toujours, c'est une question de contexte:
La plupart du temps, le survol du "i" fonctionne bien. Nous avons testé un système médical dans un cabinet de médecin. Les médecins étaient prêts à planer, mais les deux réceptionnistes plus âgés, qui l'utilisaient le plus souvent, n'utilisaient jamais Internet à la maison, et ne savaient pas à quoi il servait et comment l'utiliser. Ils constituaient un sous-ensemble d'utilisateurs important mais mineur pour un système national, nous avons donc envisagé de rendre les instructions plus évidentes. Cependant, ils utiliseraient le système plusieurs fois par jour, de sorte qu'ils gagneraient rapidement de l'expertise et n'auraient de toute façon pas besoin de l'aide. De plus, ils auraient une formation. Dans ce cas, la décision a donc été de ne pas modifier l'interface et de conserver le survol. Si leurs numéros de type d'utilisateur étaient plus grands et/ou que leur utilisation était moins fréquente, nous avons peut-être changé cela.
plutôt que d'avoir le "i" si vous l'avez, une fois que la souris survole l'option et qu'une boîte de dialogue/info-bulle apparaît, j'ai trouvé que c'était le meilleur. Cela peut être facile pour l'utilisateur car la plupart des gens semblent passer la souris sur les options lorsqu'ils essaient de les comprendre de toute façon.
J'aime la solution de elev.io - même idée que le combo "i"/info-bulle, mais en utilisant juste un point animé au lieu du "i", ainsi que de changer le curseur en "?" au survol.