Alternatives aux info-bulles dans les tablettes?
Je comprends que cette question a été discutée plusieurs fois sur le site. Cependant, il ne semble pas obtenir la réponse ou l'inspiration que je recherche. BTW, mon fond est un programmeur au cas où je sonnerais trop idiot.
Disons que nous avons une application Web. La question est de savoir comment transmettre des informations que nous ne voulons pas remplir l'écran tout le temps et qui doivent cependant être disponibles lorsque vous le souhaitez. Le texte en survol était bon pour cela, mais ne fonctionne bien que lorsqu'une souris est impliquée. Maintenant, nous devons prendre en charge cette application Web pour qu'elle fonctionne raisonnablement bien sur quelques combinaisons tablettes/navigateur ciblées (y compris iPad, Andriod Samsung et plus).
Pour jeter une clé, parfois les éléments sont non seulement "activés par le survol" pour afficher du contenu dynamique supplémentaire, mais aussi cliquables pour déclencher une action principale (comme aller sur une autre page). L'immobilier étant très limité, l'ajout d'une icône "info" n'est pas une option. Le fait que le contenu de l'infobulle soit dynamique exclut également l'option de "légende du graphique".
Voici un cas d'utilisation concret.
Dans l'écran ci-dessous, il y a un widget de calendrier avec un espace immobilier très limité. La façon dont cela fonctionne avec une souris est la suivante: 1) lorsque vous passez la souris sur "24/11/2014", le texte en survol indique qu'il s'agit d'actions de grâces et d'autres informations.
2) lorsque l'utilisateur final clique sur une cellule de date spécifique, l'utilisateur final accède à une autre page.
Cela fonctionne très bien avec une souris, mais pas "tactile". Ce que nous espérons pour le "toucher", c'est:
1) Même base de code, fonctionne bien dans les principaux navigateurs sur les ordinateurs de bureau et les principales tablettes
2) Préserver les fonctionnalités existantes (informations supplémentaires pour chaque cellule de date et événement cliquable sur chaque cellule de date)
La question devient, en théorie, si nous avions conçu ces écrans en pensant aux tablettes, qu'aurions-nous pu faire différemment pour ne même pas nous fier au texte flottant? Aurions-nous pu faire quelque chose qui fonctionne de la même manière pour le toucher et la souris? Il n'est pas nécessaire de "survoler pour afficher l'info-bulle", alors quelles options avons-nous?
ÉDITEZ : ajoutez un autre cas d'utilisateur qui ne nécessite aucun bien immobilier supplémentaire Par exemple, de nombreuses valeurs de colonne peuvent avoir un survol pour fournir des informations supplémentaires. 
Vous n'avez pas obtenu de réponse satisfaisante car il n'y a pas de réponse satisfaisante. Vous essayez de faire fonctionner une application conçue avec des ordinateurs de bureau sur un écran tactile sans changer votre conception de base, ce qui n'est pas possible.
Sur un bureau, vous avez plusieurs façons de déclencher des actions sur quelque chose (cliquez et survolez), tandis que sur un écran tactile, vous n'avez (en gros) qu'une seule - toucher. Il n'y a aucun moyen de contourner cette limitation.
Si vous devez utiliser le même design pour les deux plates-formes, vous devez commencer par créer un bon design pour les écrans tactiles, puis l'adapter au bureau. Ce sera beaucoup plus facile, car l'interface à écran tactile est la plus restrictive des deux. La plupart des interfaces à écran tactile peuvent simplement être utilisées sur un bureau sans modification (même si elles ne sont pas idéales pour l'environnement). En ce moment, vous essayez l'inverse, et cela ne peut que donner des résultats insatisfaisants.
Outre le problème de survol, votre conception présente d'autres problèmes potentiels au toucher, comme des commandes qui seront trop petites pour être utilisées.
Étant donné qu'un calendrier est l'une des applications de base disponibles sur chaque appareil à écran tactile, vous devriez vraiment regarder comment ces calendriers fonctionnent et les émuler. Non seulement cela vous évitera d'avoir à réinventer une solution à ce problème, mais il en résultera également une conception plus familière à l'utilisateur.
J'ai récemment eu un projet avec un défi similaire. J'ai été accusé de reconstruire une application qui comptait beaucoup sur le texte en survol pour obtenir de l'aide. Avec les mises à jour axées sur les tablettes et les appareils, j'ai dû trouver une nouvelle façon de présenter ces informations. En conséquence, je me suis appuyé sur beaucoup de tapotements pour étendre l'interaction.
Après avoir regardé votre exemple. Je suis très content que l'application n'ait pas de calendrier. J'incorpore une maquette d'une interaction de base. Vous voyez le contenu se déplacer pour accueillir l'espace et se ferme lorsqu'il n'est pas nécessaire.
Vous pouvez également chevaucher ou couvrir du contenu. Mon client a estimé qu'il était important que le contenu reste visible, mais si ce n'est pas le problème, un chevauchement serait parfait.
Je sais que vous ne vouliez pas réécrire de code. J'avoue que quelqu'un d'autre a construit le produit final, donc je ne peux pas dire combien de code a dû être réécrit, mais il a été construit et toutes les interactions fonctionnent très bien sur tablette et bureau.
Je ne pense pas qu'il existe de bonnes approches qui ne nécessitent aucune modification du site. Je suppose que vous pourriez envisager une option "toucher et maintenir" pour plus d'informations (certains téléphones le font), mais c'est loin d'être une approche universelle. Personnellement, je ne ferais pas ça, mais juste jouer l'avocat du diable lol
Si j'étais dans cette situation, je verrais ce qui pourrait être fait pour ajouter une petite icône à côté de ces éléments: par exemple, mettez un "?" ou une icône "i" à côté de l'outil en question. Avec une souris, l'utilisateur peut survoler cette icône pour voir l'info-bulle. Avec une tablette, l'utilisateur cliquerait sur cette icône pour voir l'info-bulle. Dans ce dernier cas, il peut être plus judicieux de configurer les info-bulles afin qu'elles aient également la possibilité de les fermer manuellement. Cela le maintient contextuel et à la demande.
Tout ce qui me vient à l'esprit exigerait beaucoup plus de travail et ne semble pas réalisable compte tenu de vos contraintes.
Pourquoi ne pas utiliser un seul robinet pour faire apparaître une boîte de dialogue de survol qui montre l'info-bulle d'information. Par exemple, Thanksgiving. Dans la même boîte de dialogue, présentez un moyen de fermer la boîte de dialogue, ainsi qu'un lien/bouton qui les mène à la page de détails. Fondamentalement, vous forcez l'utilisateur à afficher l'info-bulle par défaut au premier tapotement. Ensuite, le robinet suivant les amène à la page qu'ils recherchaient à l'origine.
Vous voudrez peut-être voir ce que les directives de conception de matériaux de Google disent sur les info-bulles de l'interface utilisateur tactile.
http://www.google.com/design/spec/components/tooltips.html#tooltips-touch-ui-tooltips
On dirait qu'il est déclenché par un toucher et une prise. Ensuite, lorsque l'utilisateur relâche, il termine l'action souhaitée. Cela semble être un bon moyen de le gérer.
Voici ce que je considère comme une meilleure solution et les deux Apple et Google sont d'accord.
Appuyez sur la commande (widget, peu importe) Si vous souhaitez sélectionner la commande, cliquez simplement dessus. Pas de temps perdu Si vous souhaitez une info-bulle, maintenez-la enfoncée et après 200 ms, l'infobulle s'affichera jusqu'à ce que le toucher soit relâché. répéter
Il s'agit d'une relation étroite avec l'action du bureau, car les info-bulles n'apparaissent généralement pas tant que le curseur de la souris n'a pas survolé le contrôle pendant une courte période.
Je suppose que ce que les gens sont censés savoir vient de leur familiarité avec les appareils tactiles.