web-dev-qa-db-fra.com

Des études ou de l'expérience sur l'utilisation de texte décoloré pour indiquer plus de contenu?

Le texte qui se termine par ... indique normalement qu'il y a plus à lire. Mais maintenant, j'ai entendu certaines personnes parler de texte décoloré est une meilleure expérience utilisateur? Quelqu'un a-t-il testé cela ou a-t-il l'expérience de textes toniques pour indiquer "plus à lire"?

19
Elsa Gentry Kant

La décoloration du bord du texte peut être une alternative utile aux ellipses, et je dirais que c'est supérieur à certains égards.


Ne confondez pas le contenu

Les ellipses remplacent le contenu du texte pour faire leur travail, ce qui peut prêter à confusion sur le texte réel. Comprend-il le "..."? Si je coupe/copie/colle, cela se produit-il? Un fondu change la façon dont le contenu est affiché .

Dans un sens, les fondus sont conformes à la notion de séparation entre l'encodage visuel et sémantique et les ellipses ne le font pas.

Dans iOS 5, Apple a changé la barre d'adresse pour que Safari mobile utilise un fondu au lieu des ellipses:

enter image description here

Non seulement il est plus clair de savoir quelle est l'URL réelle, mais (au moins, c'est comme), vous pouvez en voir un peu plus au fur et à mesure.


Texte tronqué verticalement

Les ellipses ne fonctionnent pas verticalement. Voici un exemple de JIRA, où le contenu inférieur est défilé, mais l'en-tête reste en place (il est également intelligemment compacté juste avant que cela ne se produise - ce n'est pas aussi bizarre que cela puisse paraître). Le fondu permet de communiquer que la partie qui défile va quelque part .

enter image description here


Lorsque le texte déborde, c'est le conteneur, mais ne peut pas envelopper

Ici, dans Gmail, Edge où le débordement est coupé est difficile. La largeur est dynamique, donc les ellipses devraient être insérées dynamiquement, ce qui n'est pas pratique (je suppose qu'ils ne pouvaient pas le rendre accrocheur). Je dirais qu'un fondu, ou c'est le cousin du "repli sous", pourrait aider à communiquer ce qui se passe.

enter image description here


Quelques informations générales

En général, l'effet de fondu découle d'un skeumorphisme qui vient d'un contraste plus élevé étant plus facile à analyser et semblant "plus proche" de l'utilisateur, et un contraste plus faible étant plus difficile et semblant plus éloigné - pensez à "s'estomper au coucher du soleil". Un parent skeumorphe plus concret d'iOS met en évidence l'idée:

enter image description here

Un autre, glissé sous Gmaps:

enter image description here

De toute évidence, ce n'est pas une convention super courante, définie pour remplacer l'habillage de texte ou les ellipses. Je n'ai trouvé qu'un seul exemple de ce dont vous parlez. Mais je pense que c'est une option valable dans certaines circonstances.

24
peteorpeter

Résumé:

Le point avec des dégradés et des fondus 2) est toujours le même: ils ne jouent pas bien avec de mauvais moniteurs/LCD.

Le problème du contraste

enter image description here

Gauche: semble bien sur le moniteur des concepteurs || Droite: disparaître beaucoup plus tôt.

Le problème de la gamme de couleurs

Mauvais moniteur:

Bon moniteur:

Comme vous pouvez le voir ci-dessus, tous les utilisateurs ne partageront pas votre expérience personnelle sur votre moniteur. Si vous avez la lumière du soleil directement sur l'écran, le résultat sera encore pire.

Mon avis:

N'utilisez pas de fondus et de dégradés tant que vous ne pouvez pas l'éviter .

5
kaiser

Je ne vois vraiment pas la technique du "texte décoloré" beaucoup utilisée, mais je pense que le but de l'expérience utilisateur est de concevoir pour tout ce qui le rend facile pour l'utilisateur. Si l'utilisateur doit essayer de deviner ce qui se passe, je pense que vous allez à l'encontre de l'objectif. Dans la plupart des cas, l'ajout de [...] ou [plus ...] suffira et fournira un chemin propre et facile à suivre pour que l'utilisateur obtienne plus d'informations ... quel est le point de toute façon, non?

2
Stephen

Vous demandez si l'utilisation de texte décoloré a été testée?

Comme je le vois, c'est un exemple de l'idée d'utiliser le "parfum d'information" dans une interface utilisateur. En d'autres termes, comment pouvez-vous donner visuellement aux utilisateurs une idée de l'emplacement des données dans un espace d'informations. Dans ce cas, la décoloration indique qu'il y a plus d'informations dans cette direction que vous pouvez obtenir si vous faites défiler ou interagissez d'une manière ou d'une autre.

Nous avons beaucoup discuté du concept de parfum d'information dans la communauté de la visualisation à la fin des années 90. Il y avait beaucoup de littérature de recherche dans la communauté CHI, sont sorties les théories de recherche de l'information de Xerox Parc ... ils ont fait beaucoup d'études dans ce domaine. Les papiers de Peter Pirolli et Stu Card me viennent à l'esprit.

Vous pouvez également appliquer un parfum d'informations aux requêtes. Ainsi, par exemple, j'ai utilisé un parfum d'information dans certaines visualisations que j'ai conçues en utilisant des échelles de gris pour montrer comment les données remplissaient certains critères définis sur les curseurs (noir échoué un, gris foncé échoué deux, etc.). En d'autres termes, les points de données noirs sont situés juste en dehors de votre requête ... vous pouvez donc déplacer rapidement le curseur pour les inclure.

enter image description here

Bob Spence a écrit un article résumant beaucoup de ces techniques d'information sur les odeurs/résidus .

Donc, bien que je ne puisse pas fournir de données sur cette technique particulière, il existe en effet de nombreuses études sur la façon dont la fourniture de ce type d'indices aide les gens à effectuer des tâches basées sur l'information.

2
Lisa Tweedie

La bonne chose à propos de l'utilisation du texte en fondu (pour ceux qui ne savent pas ce que cela signifie: superposition transparente en dégradé de sorte que le texte `` disparaît '' dans la couleur d'arrière-plan au cours du parcours si quelques lignes) est qu'il est beaucoup plus grand et plus difficile manquer qu'Ellipsis. De plus, alors que les ellipses fonctionnent presque toujours pour indiquer, parfois le texte semble juste se terminer correctement au bon endroit, il n'y a donc pas de concept pendant qui encourage les utilisateurs à rechercher des mots supplémentaires. Les ellipses sont également assez petites et faciles à manquer, en particulier pour les personnes ayant une vision réduite (comme les personnes âgées).

Je n'ai aucune expérience de son utilisation moi-même, et même si je me souviens d'un site que j'utilise qui l'a ... Je ne me souviens pas lequel site que j'utilise qui l'a. Je m'excuse. Je peux dire que j'aime le concept et je crois qu'il fonctionne bien pour son objectif. Sachez qu'il ne remplace pas un bouton `` Plus '', il fournit simplement une indication beaucoup plus large et plus claire de contenu supplémentaire. Vous devez toujours avoir une zone permettant de cliquer (ombre de la fenêtre, bouton Plus) vers laquelle les utilisateurs graviteront lorsqu'ils verront l'effet de décoloration.

1
Myrddin Emrys

Ce type d'effet serait ne convient que pour le défilement du conten (c'est-à-dire les tickers, les flux d'actualités, etc.), où ils défilent d'un côté (fondu en entrée) et fondu en sortie de l'autre côté.

1
Ades

Cela semble bien fonctionner avec le concept de lecture de forme, http://www.Microsoft.com/typography/ctfonts/WordRecognition.aspx , et la reconnaissance de mots. Cependant, en théorie, je ne vois cela utile que pour les fondus horizontaux (de gauche à droite) et pas aussi bien avec le fondu vertical d'Amazon . http : //softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ Nous pourrions assimiler cela à un chuchotement, bien que le chuchotement soit auditif, c'est un effet similaire au niveau visuel. À ma connaissance, il n'y a pas eu d'études, mais si quelqu'un en trouve une, veuillez la poster ici.

Voici un exemple de fondu par rapport aux points de suspension standard. http://www.theuxunicorn.com/fade_sample.png

0
Jonathan Bowman