Meilleure façon de communiquer l'action d'un contrôle sans bouton
Résumé de la question: Je me demande quelles sont les approches recommandées pour communiquer à l'utilisateur ce qui se passera une fois qu'il clique sur un objet, dans le cas où il n'est pas possible d'énoncer l'action sur l'objet lui-même (c'est-à-dire que l'objet n'est pas un bouton classique).
Dans le cas où l'objet a un titre de texte, l'approche traditionnelle que je connais consiste simplement à transformer le texte du titre en hyperlien; cependant, dans le cas où ce n'est pas un site Web traditionnel, je pense que l'utilisateur n'a peut-être aucune idée de ce qui se passera réellement une fois qu'il sera cliqué! (en revanche, pour les sites Web, le paradigme "naviguer vers une autre page" est très bien défini, donc les hyperliens fonctionnent bien pour les pages Web).
Voici ma situation en particulier:
J'ai une page avec environ 20 à 30 indicateurs de mesure différents, semblable à une page d'accueil Google Analytics. Chaque indicateur a un graphique de tendance sparkline, la valeur actuelle de la mesure et une petite flèche haut/bas indiquant le delta (changement) de la dernière période.
J'ai deux actions que l'utilisateur doit faire pour chaque indicateur:
- (1) Pouvoir étendre l'indicateur pour révéler plus d'informations (afficher des statistiques supplémentaires pour la mesure, les notes, etc.) - cette expansion se produit dans le contexte et ne conduit pas l'utilisateur à une autre page.
- (2) Sélectionnez l'indicateur et accédez à une autre page qui est l'étape 2 du flux de travail, où l'utilisateur peut évaluer et explorer l'indicateur plus en détail. La 2e action est la principale action que l'utilisateur entreprendra le plus fréquemment.
Comme je l'ai mentionné ci-dessus, je pourrais simplement faire du nom de l'indicateur un lien hypertexte et simplement communiquer à l'utilisateur qu'il est cliquable. Cependant, je veux éviter d'obliger les utilisateurs à cliquer sur quelque chose sans avoir aucune idée de ce qui va se passer (et qu'ils seront en fait dirigés vers une autre page, entre autres) - cela ressemble presque à demander à l'utilisateur de cliquer sur un bouton sans étiquette!
L'essentiel que je souhaite communiquer à l'utilisateur est qu'en sélectionnant un indicateur, il commencera un workflow d'analyse qui commencera par "évaluer" l'indicateur plus en détail. Le contrôle est encore compliqué par le fait qu'il y a également une action secondaire de "développement" sur l'indicateur comme mentionné ci-dessus.
Une solution évidente consiste simplement à mettre un bouton "Évaluer" à côté de chaque objet. Cependant, je souhaite éviter d'avoir 20-30 boutons "Évaluer" sur la page (vu que j'ai 20-30 indicateurs).
Option A: une façon de résoudre ce problème est de simplement s'appuyer sur une info-bulle; en d'autres termes, la zone entière de l'indicateur est cliquable (indiquée en surlignant/décrivant la zone au survol de la souris) et au survol d'une info-bulle apparaît qui lit "Évaluer l'indicateur x"
Option B: une autre approche à laquelle j'ai pensé pourrait être de révéler l'étiquette "Évaluer" au survol de la souris, mais plutôt qu'une info-bulle, l'étiquette devrait faire partie de la zone de surbrillance, donc très similaire à l'info-bulle conception, sauf que ce n'est pas une superposition flottante mais un peu plus intégrée dans l'objet indicateur.
Option C: cela me semble incorrect mais je le mentionne pour la discussion - restez avec l'idée du bouton 'Évaluer', mais ne faites apparaître le bouton qu'au survol de la souris. Je me souviens avoir lu qu'une interaction "survoler, rendre le contrôle visible, puis cliquer" n'est pas recommandée car le contrôle rendu visible peut disparaître pendant que l'utilisateur est en train de déplacer le curseur de la souris de la zone de focus "survoler" vers l'objet lui-même.
En ce qui concerne l'action secondaire "élargir l'indicateur", je pensais simplement avoir un petit contrôle "+" ou "plus d'infos" à côté de chaque indicateur.
Des règles de conception UX que B ou C enfreignent? Avez-vous des recommandations sur la meilleure (ou meilleure) approche?
Pour référence, ce que l'application fait en ce moment est de mettre un bouton Évaluer à l'intérieur de l'expansion de l'indicateur et d'avoir l'indicateur entier comme objet de clic d'expansion. Évidemment, c'est faux, car l'utilisateur doit toujours d'abord développer l'indicateur (qui est un flux de travail secondaire et parfois non nécessaire) afin d'accéder au bouton Évaluer.
Sommaire
Un moyen d'obtenir un bon prix et de réduire les actions de navigation consiste à fournir deux itinéraires à "évaluer". Un itinéraire utilise un bouton avec une bonne accessibilité, l'autre est directement à partir des sparklines. Le résultat combiné est une interface utilisateur qui est découvrable - les utilisateurs trouveront la fonction d'évaluation - et elle est efficace - les utilisateurs expérimentés pourront l'utiliser avec un minimum d'étapes.
Illustrer cela
En utilisant un modèle master-details , montrez Assess bouton une fois. La maquette utilise une arborescence modifiée pour faire les détails principaux (un seul niveau), ici avec les détails pour la Belgique développés:
Cliquer sur un bouton [+] ferme les éléments ouverts et donne plus de détails sur cet élément sparkline - et comme illustré, le Assess bouton. Cela évite une prolifération de boutons.
Pour améliorer l'abordabilité ailleurs, donnez aux sparklines eux-mêmes un changement de style pour indiquer qu'ils font quelque chose si vous cliquez dessus. Vous pouvez afficher une info-bulle après un délai de 2,5 secondes plus long que la normale pour le survol. Les info-bulles ne gêneront pas les utilisateurs expérimentés, mais donneront à de nouveaux utilisateurs explorant l'interface lentement un indice supplémentaire. L'info-bulle est un supplément facultatif. Vous avez évité d'en dépendre, car les utilisateurs occasionnels peuvent déjà facilement découvrir un moyen raisonnable de "s'évaluer".
Si vous le souhaitez, vous pouvez plutôt créer des hyperliens ou des boutons pour les noms des indicateurs, et les déplacer un peu plus loin des commandes [+] [-], en utilisant à nouveau une info-bulle lente de la même manière.
Un aspect plus important que l'info-bulle est que l'action `` évaluer '' est réversible et qu'elle peut facilement être arrêtée, surtout si elle prend du temps - afin de pouvoir explorer l'interface en toute sécurité.