Conception de meilleures infobulles pour les interfaces utilisateur mobiles

Les info-bulles sont de puissants modèles de conception mis en œuvre pour améliorer l'expérience de conception en fournissant des informations supplémentaires précisément lorsque les utilisateurs en ont besoin. Dans cet article, nous vous montrons comment concevoir des info-bulles qui amplifieront vos conceptions mobiles et expliquer où les info-bulles mobiles sont les plus efficaces.

Dans l'idéal, les conceptions mobiles seraient transparentes sans avoir besoin de documentation technique, d'aide en ligne ou d'info-bulles. En réalité, même les meilleurs designs peuvent bénéficier d'informations supplémentaires. Une info-bulle fournit ces informations supplémentaires lorsque les utilisateurs tapent sur une icône, une image, un lien hypertexte ou d'autres éléments dans une interface utilisateur mobile (UI). Par exemple:

En identifiant les fonctions «Remplissage solide» et «Remplissage radial», les infobulles illustrées ci-dessus facilitent l'utilisation utilisateurs pour trouver la fonction de dessin dont ils ont besoin. Ces info-bulles apparaissent dans le bon contexte et ne sont pas gênantes. Un utilisateur novice peut facilement comprendre la signification de chaque icône, tandis qu'un utilisateur expérimenté ne trouvera probablement pas ces info-bulles gênantes. En bref, le concepteur a équilibré les besoins des utilisateurs nouveaux et chevronnés. Le résultat de cet équilibre réussi est un ensemble d'infobulles que les utilisateurs percevront comme une extension naturelle de l'expérience de conception.

Trop souvent, cependant, les infobulles sont une réflexion après coup, comme le montre l'exemple suivant d'un vérificateur de contraste mobile:

Bien que l'explication sur le vérificateur de contraste soit claire, le texte est trop long et couvre des informations importantes à l'écran. Le résultat est une info-bulle maladroite qui confond autant qu'elle élucide. Pour éviter les info-bulles gênantes, il faut réfléchir et planifier.

Comment concevoir des info-bulles efficaces

La clé pour concevoir des info-bulles qui s'intègrent parfaitement dans la conception globale est de les planifier tôt dans le processus de conception. Plus précisément, la conception d'infobulles utiles nécessite:

• Un timing correct
  Prêter attention aux infobulles et aux techniques de conception associées au cours des étapes d'esquisse et de prototypage précoce.
• Implémentation correcte
  Considérant attentivement le contexte, le placement et la clarté des infobulles. [19659019] Synchronisation

  La synchronisation fait référence au moment où, pendant le processus de conception, il faut tenir compte des infobulles. En se référant au sprint de conception largement utilisé, développé par Jake Knapp, nous pouvons identifier les bonnes étapes du processus de conception pour prendre des décisions sur les éléments de conception tels que les info-bulles.

  Le processus de sprint de Knapp consiste à cartographier le problème, esquisser des solutions, choisir une solution, construire un prototype, puis tester ce prototype. En bref, générer une idée, la construire et la tester . L'image suivante montre le processus de sprint de conception de Knapp sur cinq jours. J'ai ajouté du texte aux jours de l'esquisse et du prototype pour montrer quand les concepteurs et les développeurs devraient commencer à réfléchir aux info-bulles.

  

  L'esquisse est le point de départ logique lorsque l'on considère les infobulles, car des points de confusion potentiels apparaissent au fur et à mesure que la mise en page et le contenu préliminaire prennent forme. Comme les esquisses initiales n'incluent souvent pas de contenu complet ou détaillé, il n'est pas nécessaire d'identifier toutes les info-bulles possibles ou même d'inclure toutes les info-bulles désignées à ce stade. Il s'agit plutôt d'identifier les parties de l'interface utilisateur où une info-bulle bien conçue aiderait les utilisateurs à terminer la tâche à accomplir ou à comprendre plus facilement le contenu.

  Par exemple, une info-bulle sur une étiquette de champ facilite le remplissage des forme tout en réduisant les erreurs de saisie de données. Si vous ne savez pas encore si une info-bulle est nécessaire, ajoutez simplement une légende avec une question comme indiqué dans la figure ci-dessous.

  

  La légende ci-dessus sert de rappel à l'équipe pour discuter avant de construire le prototype. Dans l'exemple «CVV» ci-dessus, l'équipe peut décider qu'une personne représente des utilisateurs qui ne connaissent pas les termes financiers et les abréviations. Pour ce groupe, une info-bulle CVV serait probablement utile et pourrait facilement être incorporée dans le prototype comme indiqué ci-dessous.

  

  Considérer le besoin d'infobulles et d'autres informations supplémentaires au début du processus de conception augmente les chances de développer un prototype utile et utilisable.

  Implémentation [19659020] La complexité croissante des applications mobiles et l'espace limité sur les appareils mobiles posent un défi de taille à la conception d'infobulles efficaces.

  Les concepteurs peuvent relever ce défi en se concentrant sur:

  • Contexte
    Vérifier, vérifier et revérifier le contexte de chaque info-bulle. Ce qui peut vous paraître évident en tant que concepteur peut facilement dérouter un utilisateur novice. Le principe d'assister au contexte s'applique à tous les aspects de la conception UX et UI. C'est particulièrement important pour les info-bulles car leur brièveté nécessaire laissera les utilisateurs confus si le contexte n'est pas clair.
  • Emplacement
    Les info-bulles doivent être visibles et faciles à trouver, mais ne doivent pas gêner les informations importantes à l'écran.
  • Clarté et brièveté
    Modifiez chaque info-bulle pour plus de clarté et de concision. Comme de nombreux éditeurs le disent à leurs rédacteurs: "Coupez, coupez et coupez encore plus." Il est normal d'écrire un texte d'info-bulle plus long dans les premières itérations tant que vous vous souvenez de continuer à éditer et à condenser pour plus de clarté.

  L'info-bulle de l'exemple suivant remplit ces critères en fournissant des informations essentielles sans perturber le flux dans le formulaire mobile.

  

  Étant donné que l'espace est limité sur les appareils mobiles, la clarté, la brièveté et l'emplacement sont essentiels. L'info-bulle sur l'écran d'enregistrement Mint illustré ci-dessus est bien conçue. Elle est claire, concise et apparaît directement sous le champ du code postal lorsque les utilisateurs appuient sur l'icône d'information.

  L'application mobile Square illustrée ci-dessous fournit un autre exemple de bonne conception d'infobulles en aidant les utilisateurs bilingues à sélectionner leur langue préférée.

  

  L'infobulle «English / Español» illustrée ci-dessus est claire, brève et correctement placée. Lorsque les utilisateurs tapent sur l'icône du drapeau ou sur le texte «anglais», une info-bulle apparaît avec l'option de sélectionner «anglais» ou «espagnol».

  Des info-bulles bien placées améliorent la conception visuelle en fournissant des explications courtes et spécifiques lorsque les utilisateurs en ont besoin. Dans l'exemple ci-dessus, les utilisateurs qui recherchent des informations dans d'autres langues savent immédiatement qu'ils peuvent choisir entre l'anglais ou l'espagnol pour ce site Web. L'info-bulle de langue aide les hispanophones natifs qui peuvent bien lire l'anglais, mais qui se sentent plus à l'aise avec l'application Square dans leur langue maternelle.

  L'utilité est essentielle mais pas suffisante. Les info-bulles efficaces doivent être discrètes au point que les utilisateurs enregistrent à peine leur présence. Les utilisateurs ne manquent les info-bulles que lorsqu'ils ne sont pas là. Cette approche des info-bulles est un exemple de la vision de longue date selon laquelle un grand design est invisible . De ce point de vue, les utilisateurs ne remarquent jamais le design. Au lieu de cela, ils se sentent engagés et accomplissent facilement la tâche à accomplir.

  L'infobulle illustrée ci-dessous sur l'application Google Maps est facile à trouver mais subtilement intégrée à la conception existante:

  • L'icône de désactivation / réactivation du son apparaît dans une rangée verticale d'icônes.
  • L'emplacement de ces icônes sur la droite les rend faciles à voir sans obscurcir les informations importantes sur la carte.
  • L'icône muet / réactiver suit le même style et même jeu de couleurs que l'icône de recherche juste au-dessus.

  

  Cette info-bulle Google Map fonctionne parce que:

  • Le contexte est clair . L'option d'activer le son (avant de sortir de l'allée) est utile car il est plus facile et plus sûr d'écouter les directions en conduisant que de regarder le téléphone.
  • L'emplacement de l'icône de désactivation / réactivation du son dans un groupe d'icônes existantes permet de voir facilement sans obscurcir les informations importantes sur la carte.
  • L'info-bulle en un seul mot est brève et sa signification est claire .

  En revanche, le L'infobulle illustrée dans l'application mobile MyZone fitness ci-dessous est mal conçue.

  

  Bien que le contexte soit clair, l'info-bulle de l'application MyZone pose des problèmes:

  • Le placement est maladroite car elle masque des informations importantes.
  • Le texte de l'info-bulle est long et l'explication de «Max HR» prête à confusion.

  Pour accueillir ce long texte et la barre verte distrayante en haut, l'info-bulle est inutilement volumineuse. Le résultat est une info-bulle qui n'est pas discrète; cela ne semble pas être une extension naturelle de la conception.

  Un mauvais placement et des explications confuses ne sont pas les seuls problèmes que les utilisateurs rencontrent avec les infobulles mobiles. L'info-bulle redondante est un problème très courant . L'exemple d'infobulle ci-dessous fait partie d'une illustration d'animation fluide des feuilles de style en cascade (CSS). L'animation fonctionne et l'illustration elle-même est claire; le problème est que l'info-bulle répète simplement le texte du bouton.

  

  Dans l'article sur l'animation CSS, l'illustration ci-dessus est uniquement à des fins de démonstration. Néanmoins, l'image serait plus utile avec une info-bulle claire et utile. Telle qu'utilisée ici, l'infobulle n'est pas utile.

  Bien que les infobulles redondantes soient inutiles, les infobulles qui apparaissent dans la mauvaise partie de l'interface utilisateur sont particulièrement problématiques car elles distraient les utilisateurs de la tâche à accomplir.

  

  L'écran ci-dessus comprend un titre en gros caractères avec une déclaration sur l'augmentation des revenus. Pourtant, l'info-bulle fait référence à une icône d'info-bulle du système de grille qui «augmente la valeur de votre conception». Au mieux, il existe un lien ténu entre l'info-bulle et le thème principal de cet écran, ce qui augmente les revenus. L'icône et l'info-bulle peuvent être importants, mais ils sont au mauvais endroit dans cette application.

  Plus largement, le contexte est un principe UX fondamental et s'applique à tous les éléments de conception. Par exemple, une image d'une voiture de sport de 150 000 $ sur un site ou une application ciblant les acheteurs de voitures à petit budget semblerait incongrue, car l'image ne correspondrait pas aux attentes de l'utilisateur. En bref, l'image confondrait probablement le groupe d'utilisateurs ciblé.

  Le contexte est particulièrement important pour les info-bulles car le but d'une info-bulle est de clarifier et de fournir des informations supplémentaires. Une info-bulle mal placée fait le contraire; cela sème la confusion.

  Où utiliser les info-bulles

  Le contexte est également une considération essentielle pour décider où utiliser les info-bulles. Étant donné que les info-bulles fonctionnent mieux lorsqu'elles amplifient une interface utilisateur bien conçue, elles sont particulièrement efficaces pour:

  • Aide contextuelle,
  • Instructions brèves,
  • Nouvelles fonctionnalités.

  Aide contextuelle

  L'aide contextuelle apparaît lorsque les utilisateurs se trouvent dans une partie spécifique de l'interface utilisateur. L'exemple suivant provient d'Airbnb. Appuyez sur l'icône ou sur le texte «3 avis» pour afficher une info-bulle contenant une explication des avis et un lien qui redirige les utilisateurs vers les avis sur la personne affichée à l'écran (l'auteur, dans cet exemple).

  Grand aperçu )

  L'info-bulle ci-dessus est informative car elle explique ce que les avis signifient dans l'application Airbnb et, plus précisément, dans le contexte d'un profil unique. En bref, des info-bulles spécifiques au contexte apparaissent au moment précis où les utilisateurs ont besoin d'informations supplémentaires. La différence est que certains aspects d'une application mobile peuvent nécessiter une explication à chaque étape pour garantir que les utilisateurs peuvent effectuer la tâche à accomplir. Par exemple:

  

  Chaque info-bulle de cette partie de l'application IRS est associée à une tâche spécifique telle que la saisie d'un numéro de sécurité sociale , date de naissance ou adresse postale. Étant donné que chaque info-bulle est spécifique au contexte, les utilisateurs peuvent facilement apprendre ce qu'ils doivent faire à chaque étape et pourquoi l'IRS a besoin de ces informations.

  Nouvelles fonctionnalités

  Comme l'explique Sofia Quintero dans Info-bulles: votre arme secrète pour améliorant la découverte des fonctionnalités les infobulles sont un moyen efficace d'attirer l'attention de l'utilisateur sur les nouvelles fonctionnalités, «Pour promouvoir et faire connaître ses nouveaux GIF, Twitter a affiché un message en plein écran aux utilisateurs avant de les diriger gentiment sur la façon d'incorporer des GIF dans leur tweets en utilisant une info-bulle traditionnelle. »

  

  La fonction GIF a été introduite il y a quelques années, mais il se présente comme une présentation utile d'une nouvelle fonctionnalité. Il est clair et net, se démarque sans dominer l'interface utilisateur. Les nouveaux utilisateurs le verront tandis que les utilisateurs expérimentés peuvent procéder sans distraction car l'info-bulle est bien intégrée dans l'interface utilisateur et ne couvre pas les autres éléments de l'écran.

  Conclusion

  Les info-bulles amplifient une interface utilisateur mobile en fournissant des informations supplémentaires précisément lorsque les utilisateurs besoin de ça. Tirez parti de la puissance des info-bulles en les prenant en compte lors de l'esquisse de conceptions et de la construction des premiers prototypes. Lors de la mise en œuvre, assurez-vous que les info-bulles aideront les utilisateurs en se concentrant sur:

  • Contexte
    Les info-bulles efficaces apparaissent précisément lorsque les utilisateurs en ont besoin.
  • Emplacement
    Les info-bulles doivent être visibles et faciles à trouver, mais ne doivent pas obstruer les informations importantes à l'écran.
  • Clarté et brièveté
    Examinez chaque info-bulle de votre application pour vous assurer qu'elle a du sens. Modifier pour plus de brièveté.

  Pour que les info-bulles renforcent une interface utilisateur bien conçue, utilisez-les dans les parties de l'interface utilisateur où elles fonctionnent le mieux, telles que:

  • Aide contextuelle,
  • Instructions brèves,
  • Nouvelles fonctionnalités. [19659041] Les info-bulles sont un modèle de conception puissant avec une empreinte légère qui améliore les conceptions mobiles lorsqu'il est utilisé judicieusement.

    Ressources supplémentaires

    (ah, vf, yk, il)