Quelles sont les meilleures pratiques pour les info-bulles sur les sites Web mobiles?
Quelles sont les meilleures pratiques pour les info-bulles sur les sites Web mobiles? Je conçois la version mobile d'un site Web pour les comptes des clients (où ils peuvent voir leur dernière facture et les paramètres de leurs comptes). Le site de bureau est rempli d'infobulles: pour expliquer les termes. Par exemple, sur une page pour modifier les paramètres des clients, il existe des info-bulles pour chaque paramètre (chaque paramètre peut également être coché). Nous avons également les pages de facturation des clients: les termes comptables ont des info-bulles.
Nous envisageons des info-bulles (une icône "i" à côté de chaque élément, mais chaque "i" devra être assez petit: pas vraiment utilisable), ou un seul bouton d'info-bulle en haut ou/et en bas de chaque page nécessitant une info-bulle . Ou une info-bulle épinglée en bas de la page.
Je pense que nous devons minimiser le nombre d'infobulles. De plus, je ne sais pas quelle est la meilleure pratique, en termes d'utilisation, pour les présenter sur un appareil mobile.
Comment afficher
Je ne disperserais pas votre interface utilisateur avec des icônes i ou des points d'interrogation. Au lieu de cela, utilisez un soulignement en pointillés pour indiquer clairement que l'utilisateur peut interagir avec le travail, mais pour le distinguer d'un lien.
Comment interagir
Gardez à l'esprit que sur les périphériques de curseur, l'infobulle est à nouveau masquée lors de la sortie de la souris. Vous ne pouvez pas le faire sur les appareils tactiles, alors assurez-vous que les info-bulles sont masquables par un double-clic (le premier clic ouvre l'info-bulle, le second le ferme). Vous pouvez même ajouter un joli message pour expliquer cela, comme Zurb's Foundation Framework propose:
Le projet sur lequel je travaille a des problèmes similaires avec la divulgation progressive. Notre site Web est jonché d'icônes d'informations qui sont soudainement inutiles dans le mobile. Bien que j'aime l'option de soulignement en pointillés, elle présente le problème de la façon de fermer la bulle d'informations une fois lue.
Réfléchissez à la façon d'exposer plus de couches d'informations avec les gestes mobiles de base de glisser, toucher ou faire glisser. Voir ci-dessous:
L'ajout de "i" à côté de chaque élément fera de votre interface mobile un océan de "i". L'application d'une info-bulle directement sur le texte lui-même permettra non seulement d'économiser de l'espace, mais sera également plus utilisable.
Lien de démonstration - http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/
Récemment vérifié fonctionne bien sur Android (sandwich à la crème glacée)
Cela dépend de la taille des icônes, par exemple, si ce sont de GRANDS boutons, et que l'utilisateur va utiliser le site de manière linéaire (de gauche à droite ou de haut en bas), vous pouvez implémenter quelque chose de similaire à la page à propos de stackexchange (voir: https://ux.stackexchange.com/about ) où lorsque l'utilisateur fait défiler les astuces, une autre méthode serait d'implémenter quelque chose comme YouTube l'a fait avec son nouveau "guide" bouton, la première fois que l'utilisateur visite le site, il passe par un didacticiel guidé par javascript avec des bulles de message à côté des boutons, puis il clique sur OK, l'a compris, et il n'apparaît plus. Plus de précisions sur le site Web, la taille, les utilisateurs, etc., seraient très utiles et me permettraient d'améliorer ma réponse et d'aller plus loin.
Il semble que le site Web soit porté de manière simplifiée du bureau vers le mobile. Chaque page doit être entièrement repensée pour permettre à l'utilisateur d'accomplir la tâche sur un mobile au lieu de faire fonctionner le site Web de bureau sur le mobile.