web-dev-qa-db-fra.com

Comment afficher des info-bulles sur un écran tactile ou existe-t-il une meilleure méthode?

Sur un PC avec une souris, on utiliserait le survol. Sur les écrans tactiles, quelle est la meilleure façon de fournir ce type d'informations?

touch-screenhovertooltips
6
rotaercz

J'ai remarqué qu'une Q&R avait déjà eu lieu sur l'info-bulle ou non: Pour l'info-bulle ou non pour l'info-bulle? Donc, en toute équité, il peut être utile de répondre à la question du demandeur sans débat supplémentaire sur si oui ou non au péage.

enter image description here

-

Je préconise deux solutions principales:

1. EN UTILISANT TOUCH & HOLD

Il s'agit d'un modèle d'interaction plus naturel. De nombreuses applications l'utilisent pour révéler plus d'informations lorsque vous cliquez. Lorsqu'un utilisateur appuie longuement (touche et maintient), affichez les conseils. Vous pouvez utiliser des requêtes multimédias pour détecter lorsqu'un utilisateur se trouve sur un appareil tactile, puis implémenter la solution.

Merci à @Diodeus ici https://stackoverflow.com/questions/2625210/long-press-in-javascript pour cette solution:

    var pressTimer;

    $("a").mouseup(function(){
      clearTimeout(pressTimer);
      // Clear timeout
      return false;
    }).mousedown(function(){
      // Set timeout
      pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
      return false; 
    });



.Element-Being-Pressed {
    -webkit-animation: 1s longpress;
            animation: 1s longpress;
}

@-webkit-keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

@keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

-

2. EN UTILISANT DES ROBINETS DOUBLES

Selon ce principe, lorsqu'un utilisateur tape une fois, les conseils apparaissent et lorsqu'ils tapent deux fois, ils navigueront vers la destination du lien. Cela semble compliqué, surtout si les utilisateurs ne sont pas informés au préalable de ce modèle de comportement.

Merci à @kevink de CSS Tricks pour cela. Remplacez le lien se déplaçant vers la droite en affichant votre info-bulle à la place.

Vous pouvez superposer le lien qui montre l'info-bulle sur un lien d'aspect identique qui ira à la destination finale dans votre code. Si l'utilisateur est sur un appareil compatible avec la souris, le lien qui révèle le conseil est affiché par défaut. Pour que cela fonctionne de manière élégante, vous devez actualiser les liens après quelques secondes afin que les conseils puissent réapparaître.

http://jsfiddle.net/kevinkirchner/LuL5R/embedded/result/

<p class="parent">
    <a href="http://example.com">
        <span class="animate">Show my animation before leaving</span>
        <span class="double-tap"> </span>
    </a>
</p>



.parent { position: relative;}
.parent a { position: absolute;}
.parent .double-tap { display:none; }
.parent .double-tap { display:block; }
a .animate {
    display:block;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.3s ease-in-out 0.2s;
    -o-transition: -o-transform 0.3s ease-in-out 0.2s;
    -ms-transition: -ms-transform 0.3s ease-in-out 0.2s;
    transition: transform 0.3s ease-in-out 0.2s;
}
a:hover .animate {
    -webkit-transform: translateX(52px);
    -moz-transform: translateX(52px);
    -o-transform: translateX(52px);
    -ms-transform: translateX(52px);
    transform: translateX(52px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    -ms-transition: -ms-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

Rappelez-vous toujours que les utilisateurs peuvent avoir besoin d'indices visuels pour pouvoir voir qu'une zone ou un lien est en fait quelque chose qui peut afficher des conseils.

-

UTILISER LES FAITS SAILLANTS LORSQUE LA CHARGE DE PAGE EST LA PREMIÈRE FOIS

Essayez de mettre en évidence les points chauds d'une manière ou d'une autre, puis laissez ces reflets s'estomper après une seconde ou deux.

-

UTILISATION DES CONSEILS/ICÔNES

En utilisant des indices comme une petite flèche ou un point d'interrogation, vous pouvez faire voir à l'utilisateur que toucher quelque chose pourrait présenter un deuxième état.

Voici quelques sources pour une lecture plus approfondie: Quelles sont les alternatives au "survol" sur les appareils tactiles?

3
Babalwa Mehlomane

À l'époque où de nombreux appareils étaient livrés avec un contrôle du pouce en bas de l'écran, j'ai utilisé pour conseiller que les éléments avec des états de vol stationnaire devraient également avoir des états de focus qui effectuent exactement les mêmes actions - de cette façon, lorsqu'un utilisateur fait défiler la écran avec leur contrôle du pouce, les états de vol stationnaire seraient activés pour chaque élément qu'ils ont passé. Cela nous a permis d'avertir l'utilisateur de la présence de boutons cliquables, de liens et d'infobulles.

Maintenant, cependant, ces contrôles sont moins courants, nous devons donc réfléchir plus attentivement à la façon dont nous concevons les interfaces tactiles.

Il existe quelques solutions potentielles, notamment:

  • Faites apparaître les conseils/info-bulles sous forme de texte visible sur la page - Ne masquez pas le texte dans une info-bulle, mais affichez-le par défaut dans la page à côté ou sous le nom du champ.
  • Ajouter un lien 'indice' - Ajoutez une icône (généralement un point d'interrogation '?') Près du nom du champ afin qu'un utilisateur puisse choisir de consulter l'indice/info-bulle en appuyant sur l'icône
  • Touche contextuelle - ajoutez une fonction tactile longue (touchez et maintenez enfoncée) qui fait apparaître tous les contrôles contextuels associés à l'élément pertinent qui peuvent inclure le conseil/l'infobulle

Comme avec la plupart des choses dans UX, je conseillerais de tester avec de vrais utilisateurs pour déterminer l'approche correcte pour ce produit.

2
Andrew Martin

Sur les écrans tactiles, quelle est la meilleure façon de fournir ce type d'informations?

Simple, ne le cachez pas dans une info-bulle.

S'il s'agit d'informations essentielles, montrez-les en permanence aux utilisateurs de tous les appareils. Si ce n'est pas essentiel, ne le montrez pas.

Si vous pensez que votre conception ne sera pas utilisable par certains utilisateurs sans leur apporter une aide supplémentaire, alors vous devriez peut-être revoir votre conception. Je suis convaincu qu'une info-bulle est fondamentalement un aveu que vous avez foiré et que vous n'avez pas rendu votre formulaire/application assez facile à utiliser en premier lieu.

1
Seth Warburton

D'abord une citation:

Une interface qui a besoin d'outils pour être compréhensible doit être repensée, mal (cf. Jef Raskin: The Humane Interface).

Passons maintenant à votre question.

Appuyez dessus
C'est la principale voie à suivre. Appuyez sur une icône et affichez les informations supplémentaires.
Exemple
enter image description here

Problème
Si l'élément avec l'infobulle fournit une autre action de clic (par exemple un lien d'ancrage), cela ne fonctionnera pas.

appuyer et maintenir
C'est ainsi que Google utilise une info-bulle dans Material Design

Une info-bulle est déclenchée en appuyant et en maintenant un élément. Gardez l'infobulle affichée tant que l'utilisateur continue de tenir l'élément.

Cela fonctionne très bien avec des éléments qui ont déjà une action de tabulation, liez un bouton d'actualisation dans une application (exemple).
Exemple
enter image description hereenter image description here

Problème
Si l'élément a déjà une action de longue pression (comme une balise d'ancrage ou une image), l'info-bulle sera sous le menu contextuel du système d'exploitation:
enter image description here

Conclusion
Les info-bulles sur mobile sont plus difficiles à utiliser. Essayez donc de les éviter et de concevoir une interface utilisateur qui n'en a pas besoin. Si vous y parvenez, le site est également mieux utilisable sur le bureau.
Si vous ne pouvez pas (ou ne voulez pas) éviter une info-bulle, gardez deux choses à l'esprit quand il s'agit de décider quelle interaction vous utiliserez:
existe-t-il déjà une action par défaut
évitez de déclencher une info-bulle avec une interaction par défaut (par exemple, appuyez sur la balise d'ancrage).
accessibilité
L'utilisateur s'attend-il à ce qu'une infobulle ou autre chose se produise? (par exemple, un soulignement en pointillé sur une étiquette indique principalement une info-bulle ou une autre interaction qui n'est pas la norme).

1
Michael Schmidt

Retournez à la conception d'interaction pour trouver une solution. Il n'y a pas de réponse unique pour afficher les info-bulles sur un écran tactile, car les info-bulles sont utilisées à de nombreuses fins différentes. Je pense que la réponse à votre question va être, examinez la raison pourquoi vous utilisez une info-bulle sur le bureau et concevez une manière différente que les gens peut accomplir la même tâche sur mobile.

Par exemple, si vous utilisez des info-bulles pour révéler le libellé d'un bouton d'icône uniquement, vous pouvez repenser cette interaction pour mobile de plusieurs manières; le plus évident (et simpliste) est de toujours montrer les étiquettes des boutons dans le texte. Si vous les utilisez pour révéler un texte de "conseil" sur un contrôle ou un concept, vous pouvez alors introduire un autre élément (comme le point d'interrogation mentionné par quelqu'un d'autre) qui, une fois appuyé, révèle le texte de conseil.

Si vous choisissez d'utiliser différents gestes tactiles (par exemple, un appui long) pour activer les info-bulles, n'oubliez pas que vous pouvez remplacer le comportement par défaut du navigateur, ce qui est une démarche assez risquée juste pour une info-bulle (à mon avis).

0
Nate Green