Comment puis-je rendre évident qu'un élément de page doit être survolé?
Sur ma page Web, j'ai cinq cases contenant les noms de chaque étape d'un processus en cinq étapes. Lorsque l'utilisateur survole l'une des cases, il se développe et affiche du texte expliquant ce processus.
Comment puis-je donner l'impression que les boîtes doivent être survolées avec la souris? Actuellement, ce ne sont que des carrés de couleur unie, et rien ne dit "Survolez-moi" à moins qu'ils ne le fassent par accident.
J'ai vu des sites qui ont une icône de loupe intégrée dans la bordure ou directement en dessous des éléments qui devraient être survolés.
Tout d'abord, demandez-vous si c'est la meilleure façon d'afficher le contenu. À quelle fréquence le contenu est-il utilisé? Quelle est l'importance du contenu. Si son utilisation est fréquente ou très importante, envisagez d'afficher le contenu d'une autre manière.
Si vous êtes sûr que ce modèle "en vol stationnaire" est le bon, alors vous devez attirer l'attention dessus. Généralement, cet effet est utilisé sur du texte comme votre nom d'utilisateur stackexchange. C'est juste le même style qu'un lien normal. Généralement, l'idée est que les utilisateurs découvrent cela par eux-mêmes, c'est pourquoi vous ne mettez pas d'informations importantes ici. Ou vous offrez également un onlclick pour amener l'utilisateur à une vue plus détaillée.
Si l'élément auquel vous ajoutez l'événement de survol est plus qu'un simple lien de texte, vous pouvez peut-être utiliser une forme d'icône pour suggérer des informations supplémentaires.
Exigences
vous avez besoin d'un appel à l'action qui attire l'utilisateur - cela devrait donc prendre la forme d'un message et/ou d'une image/d'une icône qui offre une certaine interaction - par exemple, une icône d'information, une icône de point d'interrogation, une loupe, une icône de panier, une flèche directionnelle, ou quelque chose dans le contexte de votre application.
Il doit s'agir d'une zone autonome (par exemple, ne pas se fondre dans l'environnement) mais ne pas ressembler trop à un bouton autonome car l'utilisateur trop s'attend à pouvoir cliquer dessus - il y a des besoins être un sous-ton subtil qui dit que c'est actif mais ce n'est pas un bouton, sinon la pensée "ceci est un bouton" sera trop importante.
L'action de survol devrait s'activer immédiatement - ne pas attendre deux secondes comme de nombreux textes d'aide de style info-bulle. Cela facilite également la découverte accidentelle lorsque l'utilisateur passe la souris dessus et dissipe toute autre pensée `` ceci est un bouton ''
N'utilisez pas le mécanisme partout car les actions instantanées en survol vraiment deviennent ennuyeuses lorsqu'elles apparaissent un peu partout. Limitez le survol instantané à des domaines d'intérêt spécifiques.
Le popup devrait se cacher dès que vous vous déplacez en dehors de son propre espace, et non pas l'espace de la zone d'origine qui a activé le popup.
Si possible, essayez d'indiquer ce qui va se passer, par exemple, montrez un extrait `` coupé '' du contenu afin qu'il ressemble vraiment à quelque chose qui va sortir ou être exposé, ou une flèche sortant du bord de une zone pour indiquer que vous allez retirer une page ou une fenêtre contextuelle.
Exemples
Les scénarios typiques qui combinent ces étapes se trouvent sur:
- sites de commerce électronique - par exemple pour les détails du produit - prix du panier/liste - tous les détails transitoires
- formulaires Web pour obtenir de l'aide sur chaque élément
- éléments du menu de navigation
Voici un exemple sur un carrousel (au moment de la rédaction utilisé sur johnlewis.com site d'achat en ligne)
Il y a un appel à l'action clair, il est évident ce qui va se passer à cause de la flèche et du contenu à moitié caché sur le popup, l'action de survol est immédiate, il n'y a pas d'autre contenu interactif à proximité, et le popup disparaît dès que je bouge loin de là.
Extrêmes
Pour un exemple extrême d'utilisation du survol - essayez de regarder dontclick.it/ où après la première page TOUTES les interactions se font avec le survol et aucun clic n'est requis du tout .
J'ai également vu un comportement intéressant qui commence à s'estomper progressivement dans un petit panneau d'informations lorsque vous commencez à déplacer la souris plus près vers l'objet en vol stationnaire (à une distance maximale), de sorte que vous ne ' il ne faut pas passer la souris dessus avant de commencer à voir le panneau. Cela peut prendre un peu d'essais et d'erreurs pour être correct pour un scénario donné et cela repose en quelque sorte sur le fait que l'objet survolé soit quelque peu séparé du contenu principal ou d'autres zones d'interaction. Malheureusement, je ne me souviens pas où j'ai vu cela. Les tests seraient essentiels avec ce concept!
J'irais jusqu'à dire que seules les informations Nice-to-have optionnelles devraient être affichées en survol. Il est vraiment difficile de compter sur les utilisateurs qui tentent de survoler quelque chose, même si le délai de survol est vraiment faible. Donc, si c'est le seul endroit où le texte d'explication serait affiché, vous devrez peut-être repenser un peu les choses.
Placez ce qui semble être un lien vers plus d'informations dans chacune des cases. Lorsque l'utilisateur va cliquer sur le lien (c'est-à-dire qu'il déplace la souris dans la boîte), supprimez simplement le lien et développez la boîte avec toutes les informations. Un lien sans clic.
Le lien pourrait être textuel, comme "plus d'infos ..." ou "aide", ou ce pourrait être l'un de ces petits "?" dans un cercle d'icônes.
Je voudrais m'appuyer sur les réponses ci-dessus; Une icône avec un "?" dans ce document, ne serait probablement que suggestif pour les utilisateurs à la recherche d'aide. Pourquoi ne pas utiliser une icône d'information ( voici quelques exemples )? Je pense que ceux-ci sont plus évocateurs pour ceux qui recherchent "plus d'informations".
Vous pouvez le faire avec CSS s'il est pris en charge par le navigateur. IE 6 est toujours utilisé et il ne prend pas en charge de nombreuses fonctionnalités CSS plus récentes.
Vous pouvez utiliser des couleurs pour attirer l'attention sur la zone et/ou également utiliser un événement, comme un clic de souris pour estomper le reste de la page, mais mettre en surbrillance la zone exacte vers laquelle vous souhaitez que l'utilisateur navigue.
Un texte informatif serait également possible si la mise en page ne se prête pas intrinsèquement à la navigation.
Je suis contre l'abus du modèle de conception de vol stationnaire parce que le vol stationnaire peut être accidentel (l'utilisateur n'utilise pas la souris, déplace la souris hors du chemin ...). Le survol est très agréable pour les boutons ou autres contenus qui ne modifient pas la disposition de la page. Le comportement de vol stationnaire ennuyeux (IMO) provient des éléments en expansion.
Cela dit, j'aime la réponse de ScottK : affiche une icône de loupe.