Les infobulles à l'ère du toucher
Les info-bulles sont un paradigme d’interface extrêmement utile pour connaître une application. Ils constituent le mappage entre le contrôle visuel et l'action spécifique à l'application associée à ce contrôle. L'utilisateur peut explorer l'action sans l'invoquer en survolant le pointeur de la souris.
Les dispositifs tactiles rendent ce paradigme fondamentalement impossible. Cela limite la convivialité de l'application, qui devient parfois assez mystérieuse.
Savez-vous s'il existe un substitut au concept d'infobulle pour les appareils tactiles? Ils manquent effectivement d’un degré de liberté dans l’interaction ui: la position du pointeur. Comment retrouver ce canal de communication efficacement?
Selon votre interlocuteur, ils pourraient même vous dire qu'une interface qui a besoin de astuces pour être compréhensible doit être repensée, mal (cf. Jef Raskin : L'interface humaine ).
En fait, les info-bulles sont une solution à un problème spécifique très : des boutons iconiques sans libellés, comme ceux affichés dans les barres d’outils. Chaque fois que vous avez des étiquettes, utilisez-les. Inutile de fournir une info-bulle, car vous avez déjà du texte indiquant ce qu'un contrôle particulier va faire.
De plus, les interfaces tactiles ne correspondent pas très bien au modèle d'interface actuel WIMP . De nombreux contrôles sont faciles à manipuler avec les pointeurs de la souris, mais sont frustrants à utiliser avec un doigt. Les menus, les cases à cocher, les boutons radio me viennent à l’esprit. Ainsi, le paradigme d'interface pour les interfaces tactiles doit être assez différent des interfaces actuelles pilotées par la souris et le clavier.
Donc, je pense que le problème n’est pas tant le manque de conseils en matière d’outils, mais bien que nous n’ayons pas exploré de nombreuses nouvelles façons d’interagir avec un ordinateur au cours des 30 dernières années (en gros, pas depuis la recherche effectuée par Doug Engelbart et Xerox PARC dans les années 60 et 70).
La saisie tactile est juste assez similaire pour que un peu fonctionne dans la plupart des cas. Mais il ne manque pas seulement un composant d'emplacement sans contact mais également de précision. Fondamentalement, toute la saisie tactile est bonne pour toucher et faire glisser quelque chose. Même le double-tap est difficile, donc ce dont nous avons besoin est un changement fondamental dans la façon de concevoir et de créer une interface utilisateur spécifiquement pour une interface tactile.
Vous en verrez une partie dans des appareils dédiés, tels que l'iPhone, simplement parce que c'est une plate-forme qui n'a ni pointeur de souris ni clavier et uniquement tactile . Cela signifie que vous n'avez pas besoin de créer une interface utilisateur qui doit être utilisable avec toutes les méthodes d'interaction possibles (un problème de peste Windows actuellement; j'ai un ordinateur portable multi-touch mais pour de nombreuses tâches, touch ne fonctionne tout simplement pas) mais seulement avec un. Mais une solution polyvalente pour les logiciels et les ordinateurs "normaux" est assez éloignée pour le moment, je pense.
Je vous conseillerais donc de penser un peu différemment à propos de comment vous concevez votre interface utilisateur. Comme indiqué précédemment (et peut être lu dans le À propos de Face ) d'Alan Cooper, les info-bulles servent à étiqueter les contrôles qui ne le sont pas. avoir des étiquettes ou où l'espace ne suffirait pas pour les placer. Le scénario d'utilisation clé ici est constitué de barres d'outils. Mais une interface conçue pour le toucher rendrait toutes les commandes plus grandes de toute façon. De nombreuses petites icônes, étroitement groupées ensemble, sont difficiles à utiliser avec la saisie tactile même si vous aviez des info-bulles, tout simplement parce que cela manquait de précision.
Lire ici m'a fait réfléchir. Les info-bulles sont généralement utilisées pour attribuer une étiquette aux boutons sans texte, mais constituent également un excellent moyen de donner plus d'informations dans un espace réduit disponible dans une interface. Parfois, il est utilisé pour fournir une aide contextuelle ou une explication détaillée d'un widget unique.
Tchalvakidée de de donner à tous les éléments de l'interface graphique un comportement commun en un clic, et de fournir une info-bulle sur le double clic a ses avantages, et peut même être un peu découvrable, comme beaucoup de gens sont utilisés pour double-cliquer sur tout ce qu'ils voient , quel que soit l'élément.
Mais je me suis rappelé le vieux ? bouton qui était si populaire années en arrière, qui, une fois cliqué, transformerait le curseur en un point d'interrogation. Une fois que vous avez cliqué sur un widget, vous verrez une petite info-bulle ou une info-bulle. Je crois que quelque chose comme ça pourrait être facilement utilisé sur une interface tactile. En raison de l’absence de curseur, un autre signal visuel doit être indiqué à l’utilisateur lui indiquant qu’il est en mode et fournit de l’aide . Peut-être changer la teinte de l'écran et donner un petit texte. Cela pourrait se faire également par multitouch en exigeant la ? bouton à appuyer tout en appuyant sur un autre widget pour obtenir l'info-bulle (qui doit être affiché dans un endroit légèrement séparé pour ne pas être trop obscurci par le doigt).
Mais même s'il est possible de garder la même fonctionnalité technique pour que les programmeurs puissent avoir des info-bulles, nous devrions penser à l'intention , pour quoi nous l'utilisons.
Je ne l'utiliserais que pour donner une aide étendue lorsque vous êtes confronté à un petit écran. Sinon, faites en sorte qu'une zone d'aide soit visible en permanence au bas de la "fenêtre" (en vous référant à tout type d'io-interface de forme carrée) , qui modifie son contenu pour fournir une explication détaillée et/ou une aide pour le widget sélectionné, comme dans certaines fenêtres de préférences en survol.
En conclusion, même si nous sommes capables de fournir des info-bulles faciles à utiliser, nous devrions penser à ce que vous y mettriez. Dans une interface tactile, je ne mettrais pas un bouton ambigu sans labeur qui nécessite une info-bulle pour être compris. , mais l’utiliserait pour fournir une aide avancée et un dépannage contextuels.
Les infobulles sur les claviers à l'écran - rappel de la lettre touchée - sont suffisamment pour démontrer que les infobulles sont très utiles sur une interface tactile. Je suis venu à cet article pour voir comment je pouvais implémenter cela sur une page Web mobile.
Je peux penser à quelques solutions à ce problème
1) Concevez votre application pour ne pas avoir besoin d’infobulle. Mettez du texte sur des boutons (aussi petits que ceux-ci), utilisez des icônes simples ou affichez une "bulle d'aide" lors de la "première utilisation d'un bouton" (avec l'option de "ne plus afficher ce message" une fois que l'utilisateur a appris à quoi sert un bouton)
2) Répondez aux événements sur retouche, pas toucher. Répondez aux touches qui ont été retenues pendant 0,5 à 1 seconde en affichant une bulle "d'aide". Si la bulle d'aide s'affiche, l'événement normal du bouton ne se déclenche pas lors du retouche (les utilisateurs recherchant de l'aide ne finissent donc pas par déclencher des actions).
3) Utilisez le paradigme glisser/déposer du "point d'interrogation" que @voyager a suggéré. Ou demandez à l'utilisateur de "taper" d'abord sur le point d'interrogation, puis sur l'élément pour lequel il a besoin d'aide.
Peut-être des étiquettes persistantes décrivant brièvement chacune des fonctionnalités plus ou moins "obscures" disponibles sur l'interface, combinées avec des messages de notification contextuels lorsque des actions sont effectuées -eg: l'utilisateur modifie les données => bouton qui mettrait brièvement en évidence lors de cette notification.
L’avantage de l’info-bulle est qu’elle ajoute une étape recouvrant d’informations (très mineures) avant qu’une action ne se produise. Il me semble donc que rajouter cette couche via un "double clic" pour effectuer l'action en un "simple clic" afin d'afficher des informations serait une idée équivalente.
Je pense que nous avons tous vu les films avec les futures interfaces d'écran où quelqu'un touche l'écran et crée une forme géométrique d'informations autour de ce contact. Pourquoi ne pas utiliser ce concept, demandez à la première touche de développer les informations sur l'action en tant qu'info-bulle utile dans la page, puis si vous cliquez une seconde fois au même endroit pour confirmer/exécuter l'action.
Si ce n'est pas "click-on-item-montre-outil-deuxième-clic-effectue-action" que diriez-vous de proximité? Si vous souhaitez obtenir des informations sur un widget d'interface utilisateur avec un espacement suffisant, vous pouvez appuyer sur à côté du widget et recevoir des informations à son sujet, appuyez sur le widget et effectuez l'action.
En général, les info-bulles fournissent si peu d’informations (pointeur contre main, info-bulle de texte, survol en gras) que je pense que vous pouvez également dupliquer les informations d’info-bulle en prêtant une attention particulière à l’action de l’utilisateur historique. S'ils ont cliqué sur deux éléments plus fréquemment que d'autres récemment, affichez l'info-bulle par défaut et la valeur ajoutée par défaut pour les éléments les plus fréquemment cliqués au lieu des autres.
Edit: En outre, en y réfléchissant davantage, glisser dans un espace qui n'a pas besoin de défilement ou autre semble ressembler à un très bon déclencheur pour les informations des info-bulles. Prenez le clavier de l'iphone, par exemple. Chaque lettre contient une info-bulle pendant que vous la faites glisser, alors que la lettre elle-même est activée lorsque vous relâchez. Aide à repositionner la précision.
Au-delà de cela, je pense que les détails entrent en jeu. Parlez-vous tablette portable? interface tactile de téléphone avec un espace très limité? Je pense que l'espace disponible joue un rôle important dans la façon dont vous devez faire les choses avec une interface tactile.
Qu'en est-il toucher et tenir? Je pense que ce serait une règle d’interface assez simple en termes de convivialité et de mise en œuvre. Comme beaucoup de choses à faire avec la facilité d'utilisation bien qu'il sera difficile de dire jusqu'à ce qu'une idée ait été autour pendant un peu de temps pour le voir utilisé dans un tas de différents contextes.
Cela peut être utile:
Ils disent que les info-bulles sont
Invoqué par:
- Survoler un élément avec un curseur
- Se concentrer sur un élément avec un clavier (généralement la touche de tabulation)
- Au toucher
Il ne contient pas beaucoup d'informations sur le mobile uniquement. Le seul contact que vous pouvez rencontrer est le contact tactile, ce qui est frustrant si votre bouton fait quelque chose, vous ne voulez pas le toucher avant de savoir ce qu'il fait. Une pression longue peut fonctionner, mais certaines applications nécessitent une pression longue pour d'autres fonctions. Il s'agit d'un chemin d'accès UX utilisé et un utilisateur ne s'attendrait pas à de longues astuces d'outils de presse, à moins que vous ne le lui indiquiez.
Je pense que les infobulles ne fonctionneront peut-être pas avec les merveilles sur mobile comme sur le bureau. Sans survol, vous avez besoin d'un autre moyen réservé pour rappeler ou montrer rapidement à un utilisateur le fonctionnement d'une icône ou d'un bouton.
La meilleure chose à laquelle je puisse penser est le mode aide. Appuyez sur Paramètres, puis sur «Aide» pour afficher une courte carte en bas indiquant «Cliquez sur un élément pour obtenir de l'aide» et sur un bouton «Ignorer». Ensuite, en appuyant sur les éléments inclinés, vous obtiendrez des informations supplémentaires.
Je vois au-dessus de cela mais un autre cas d’utilisation moderne est celui des jeux. Ils sont souvent conçus avec une manette de commande, ce qui signifie qu’ils ont environ 14 boutons sur lesquels travailler, mais que la plupart sont utilisés par les fonctions du jeu.
Dans les jeux de rôle, ils ont généralement des écrans de statistiques complexes qui sont garantis inconnus du joueur (souvent, ils inventent de nouveaux systèmes pour chaque jeu), pleins de chiffres importants, mais les joueurs ne le savent pas. Beaucoup d'entre eux vous permettent d'appuyer sur le bouton de sélection pour entrer dans un mode infobulle/explication.
Cela pourrait bien fonctionner dans une application suffisamment complexe pour nécessiter des info-bulles sur mobile et constitue le seul motif que je peux voir actuellement qui ne soit pas si éloigné des conceptions ux courantes.
Ma réponse n'est peut-être pas si pratique, mais ...
Le problème serait résolu si toutes les applications prenaient en charge la fonctionnalité d'annulation, et que les gens s'habituaient à savoir qu'ils pouvaient TOUJOURS inverser toute action.
Comme le dit Andreas, "si vous n'êtes pas sûr de certaines fonctionnalités, vous hésiteriez à cliquer sur un bouton".
Mais avec l'annulation comme filet de sécurité, il peut y avoir plus de "faire" et moins "d'hésitation, d'inquiétude, de savoir ce qui se passera avant que je tape ... tape".
C'est l'une des raisons pour lesquelles le bouton Précédent est si populaire et qu'Android l'a même exploité à l'échelle du système.
Malheureusement (voici les impraticables ...)
- construire une annulation omniprésente fiable est bien plus difficile que les info-bulles
- suffisamment d'applications doivent le supporter pour changer la mentalité de tous les utilisateurs (ha!)
Gardez à l'esprit que les infobulles de survol constituent une aide précieuse pour les débutants et qu'ils n'ont besoin de rien pour les apprendre, car les débutants sont toujours lents et ils apparaissent lorsque le curseur n'est pas déplacé. Par contre, ils sont excellents car ils ne ralentissent pas les utilisateurs avec pouvoir.
Pour les tablettes, je reprendrais l’idée du point d’interrogation mais ajouterais un peu plus de complexité:
1) Lorsque vous appuyez sur le point d'interrogation, le mode "Aide" est activé . 2) vous pouvez appuyer sur le contrôle en question et afficher l'info-bulle . 3) si vous appuyez ensuite sur la touche Même contrôle à nouveau, il met fin au mode d’aide et exécute ce que le contrôle doit faire . 4) si vous appuyez sur un autre contrôle, il affiche son infobulle et le mode d’aide reste activé . 5) un Vous pouvez mettre fin au mode d’aide en appuyant à nouveau sur le point d’interrogation.
Pour paraphraser Einstein, un contact doit être aussi simple qu'il le faut, mais pas plus simple.
Le problème sous-jacent n’est pas le toucher, mais l’état. Dans quel état se trouve l'objet quand vous le touchez? Est-ce que le toucher change d'état? Comment le changement d'état est-il reflété pour l'utilisateur?
Du point de vue de la conception, essayer d’englober toutes les actions en une seule touche ne fonctionnera que dans les cas les plus simples. Pour toute application plus utile, un premier contact peut changer d'état, et cet état peut être reflété par des modifications dans l'image d'un objet, par des info-bulles (même les info-bulles transitoires qui disparaissent après un certain temps) ou par d'autres moyens. Toucher un objet sélectionné doit avoir une signification différente de celle de toucher un objet non sélectionné. Cela doit être un aspect découvrable de l'interface.