Fonctionnalité "hot spot" cliquable
J'ai du mal à rechercher un modèle de conception particulier parce que je ne sais pas comment l'appeler - en interne, nous appelons ce concept un "point chaud", mais cela ne semble pas être du jargon standard. Il s'agit de cliquer sur une icône dans une image, ce qui lance une superposition avec plus de détails.
Par exemple: vous pouvez avoir une photo d'une cuisine avec des icônes de symbole "+" à côté de certaines fonctionnalités, telles que l'évier, le lave-vaisselle, le micro-ondes, etc. Cliquez sur le symbole "+" pour afficher une superposition avec une vue plus grande de cet article et éventuellement une description textuelle d'accompagnement. C'est plus d'informations qu'une info-bulle, mais pas aussi extrême qu'une couche modale (car l'utilisateur peut toujours interagir avec d'autres éléments à l'écran, comme cliquer sur une autre icône "+").
Ma question est de savoir s'il existe des données/recherches sur la question de savoir s'il s'agit d'un modèle de conception efficace pour explorer les fonctionnalités (et si oui, a-t-il un nom commun)? Mon instinct est qu'il s'agit d'une relique de la "tout doit être au-dessus du pli" jours de conception, et est un moyen inefficace d'afficher des informations, car il nécessite un clic constant pour explorer les éléments et vous permet de voir une seule fonctionnalité à la fois (ma préférence serait soit d'afficher toutes les informations sur une page plus longue ou utiliser une interface de type galerie), mais je fais partie d'une équipe où cela est très fortement poussé comme une expérience plus "interactive/immersive" et j'ai besoin de quelque chose de plus que de l'intuition à utiliser comme réponse .
On dirait que vous décrivez quelque chose que j'appellerais un "pop-over". Comme vous le dites, ils sont utiles lorsque vous devez afficher plus d'informations (ou des informations plus complexes) qu'une simple info-bulle peut gérer mais moins d'informations qu'une superposition complète et sans supprimer l'utilisateur du contexte actuel.
Twitter Bootstrap a un widget JavaScript "popover" et vous trouverez un certain nombre d'exemples de conception montrant ce modèle si vous recherchez pop-over sur Dribbble .
Cela semble mûr pour les tests utilisateur, même s'il est très limité.
Placer quelqu'un devant l'interface utilisateur de la cuisine et dire "que pensez-vous pouvoir faire ici?" et regarder s'ils cliquent sur les popovers vous en dirait beaucoup. Et puis une fois qu'ils le feront, ils le liront et verront ce que cela fait, puis vous pourrez suivre "Qu'en avez-vous pensé?"
Cela semble trop contextuel pour avoir vraiment un modèle de conception canonique autour. Dans votre exemple où il s'agit d'une image d'une cuisine personnalisée, je pourrais voir que c'est une idée avec beaucoup de potentiel si l'interaction est élégante et discrète.
Il s'agit d'une fonctionnalité connue sous le nom de cartes d'images en HTML, qui existe depuis les années 90.
Vous pouvez essayer de rechercher sur le net des statistiques sur la fréquence à laquelle il est utilisé.
L'un des problèmes est que les régions cliquables ne ressemblent pas à des boutons - il n'y a pas de réaction à des événements tels que le survol de la souris.
De plus, si l'image n'est pas dessinée correctement, il n'y a pas assez de différenciation par rapport aux limites de la région, contrairement aux boutons qui utilisent souvent des bordures qui donnent une illusion 3D.
Une autre idée que vous pourriez envisager est d'utiliser une info-bulle pour montrer à l'utilisateur ce qui se passera s'il clique sur l'élément.