web-dev-qa-db-fra.com

Info-bulles pour raccourcir votre contenu

Dans mon travail, il n'y a pas d'expert UX, ce qui peut être frustrant car la plupart des discussions quotidiennes que j'ai avec des collègues portent sur l'expérience/l'interaction utilisateur.

En ce moment, il y a une discussion sur les info-bulles/bulles (personnalisées) sur un site Web, le concept est `` nous avons trop de contenu '' alors ils essaient de le raccourcir et de placer une icône d'information derrière avec une info-bulle. L'info-bulle contiendra (probablement) beaucoup d'informations - je les ai vus utiliser des info-bulles comme celle-ci pour afficher les spécifications du matériel, y compris les images.

La raison derrière la minimisation du contenu est que nous en avons trop et notre vendeur veut se concentrer sur son bouton "vendre vendre vendre".

À mon avis, les info-bulles ne devraient être utilisées que pour les formulaires/éléments d'entrée où plus d'informations sont vraiment nécessaires, les informations contenues dans une info-bulle doivent être courtes et descriptives et ne nécessiter aucune interaction (liens par exemple) sauf si l'étiquette est déjà suffisamment claire.

De plus, je pense que vous pourriez endommager un peu la confiance de vos utilisateurs si vous cachez à peu près toutes les données importantes derrière une petite icône après un texte axé sur les ventes.

Je suis donc intéressé d'entendre ce que les vraies personnes UX ici pensent de ce problème/'solution'.

C'est essentiellement ce qu'ils me demandent de créer pour eux: Example usage

(Une petite note est que nous essayons de faire de notre site Web un touch-friendly autant que possible et de petites icônes comme celle-ci sont des cibles tactiles peu pratiques.)

2
CharlesLeaf

Pour quelque chose comme ça, j'envisagerais d'utiliser une interface de style accordéon, où la copie de vente récapitulative ressemble un peu à un titre/bouton et le contenu peut être développé si cet article est cliqué.

Rendez votre interface claire avec quelque chose comme un signe plus pour montrer qu'ils peuvent l'étendre. Ce problème a été résolu assez largement par les systèmes FAQ.

Prenons ceci par exemple (même si je ferais probablement mieux le contraste des signes plus):

FAQ Page with Expandables

Voici un lien vers le site interactif:

https://www.updater.com/faqs

1
James Thompson

Si l'information peut être cachée derrière une info-bulle, est-elle pertinente du tout?

Une fois que vous commencez à cacher des informations derrière des éléments interactifs, vous rencontrez de nouveaux obstacles. Si cela fonctionne en survol sur un navigateur de bureau, cela devra être au clic pour un téléphone, mais le fait d'afficher l'info-bulle sur un téléphone peut couvrir complètement l'appel à l'action jusqu'à ce qu'il soit fermé. Cela irait à l'encontre du but de la création des info-bulles en premier lieu - ce qui rendrait le CTA plus pertinent.

Vous devriez également envisager de réorganiser l'emplacement de ces CTA et informations. Les tableaux de prix sont un excellent exemple de mise en dessous des boutons CTA.

enter image description here

Cela vous permettra de "faire la vente" en haut et d'informer l'utilisateur en dessous. Le tableau des prix met également le même bouton CTA sous les détails afin qu'un utilisateur ait facilement accès à "S'inscrire" ou "Acheter" avant ou après avoir lu les détails.

1
ckaufman

D'après les commentaires, je comprends que vous devez proposer deux variantes d'un produit. J'examinerai cet aspect et comment il pourrait être pris en charge:

  • Les variantes sont très similaires, mais leur prix diffère considérablement.

  • Ils sont tellement similaires que, en comparaison directe, il n'y a pas beaucoup de raisons de payer le prix plus élevé.

Mais vous supposez toujours que vous pouvez vendre les deux variantes. Cela implique que vous supposez qu'il existe deux types de clients:

  • le "client normal" - que vous attendez avec le prix inférieur
  • une sorte de client avancé, qui sera probablement disposé à payer le prix plus élevé

C'est tout à fait possible - par exemple, le produit pourrait être proposé dans deux contextes, où l'un est lié à des produits plus chers que l'autre. Ou il pourrait s'agir uniquement de consommateurs et de clients commerciaux.

Ce que vous voulez, c'est offrir deux "identités de produit" distinctes;
Vous devez donc faire exactement cela: Séparez complètement les offres, en utilisant deux sites Web différents, des styles de page, éventuellement même des noms de domaine différents.

De cette façon, vous pouvez expliquer aux deux groupes indépendamment pourquoi ils peuvent le vouloir, et la différence étant petite devient non pertinente.

J'espère que la quantité de contenu que vous devez gérer serait plus petite pour chacune des variantes, car elle n'est pertinente que pour un groupe en partie.

0
Volker Siegel

Je laisserais également des info-bulles pour former des entrées et créer des listes comme celles-ci extensibles/pliables ou créer un lien vers des pages différentes.

0
Spencer Williams

Considérez la publicité dans le texte comme un exemple de technologie, comme Vibrant ou Infolinks . Vous pouvez utiliser une sorte de lien qui se distingue du lien souligné normal, par exemple par un soulignement pointillé ou un soulignement double. Ainsi, vous pouvez dire exactement à l'utilisateur ce qui a une description supplémentaire. En appuyant sur ce lien ou en le survolant, vous activez une fenêtre contextuelle contenant des informations supplémentaires de tout type dont vous avez besoin - technique, marketing, etc.

0
Serg

Heureusement que vous avez mentionné que vous devez rendre le site Web convivial. Si le contenu est trop, il n'est pas du tout préférable d'utiliser des infobulles. Selon le type de contenu que vous souhaitez avoir dans l'info-bulle, vous pouvez utiliser les options suivantes.

Pop-overs

Pliables

De plus, il n'y a aucun problème à avoir peu d'éléments interactifs (CTA) dans le pop-over lui-même. Comme des boutons ou des liens. Assurez-vous simplement qu'ils ne sont pas trop importants pour l'utilisateur à première vue.

Si vous pouvez fournir plus d'informations sur le contenu et le contexte, ce serait plus utile.

0
Krunal Rasik Patel