Desvanecer el borde del texto puede ser una alternativa útil a las elipses, y yo diría que es superior en algunos aspectos.

No confunda el contenido

Las elipses reemplazan el contenido del texto para hacer su trabajo, lo que puede causar confusión sobre cuál es el texto real. ¿Incluye el » … «? Si corto / copio / pego, ¿aparece? Un fundido cambia la forma en que se muestra el contenido .

En cierto sentido, los fundidos se ajustan a la noción de una separación entre la codificación visual y semántica y las elipses no.

En iOS 5, Apple cambió la barra de direcciones para que Safari móvil usara un fundido en lugar de elipses:

No o Solo está más claro cuál es la URL real, pero (al menos se siente) se puede ver un poco más a medida que desaparece.

Texto truncado verticalmente

Las elipses no funcionan verticalmente. Aquí hay un ejemplo de JIRA, donde el contenido inferior se desplaza, pero el encabezado permanece fijo (también está inteligentemente compactado justo antes de que esto suceda, no es tan chirriante como podría parecer). El fundido ayuda a comunicar que la parte que se está desplazando va a alguna parte .

Cuando el texto se desborda, es un contenedor pero no se puede ajustar

Aquí, en Gmail, el borde donde se corta el desbordamiento es difícil. El ancho es dinámico, por lo que las elipses deberían insertarse dinámicamente, lo cual no es práctico (supongo que no podrían hacerlo rápido). Yo diría que un desvanecimiento, o su primo el » escondido debajo de «, podría ayudar a comunicar lo que está sucediendo.

Algunos antecedentes generales

En general, el efecto de desvanecimiento proviene de un esqueumorfismo que proviene de un mayor contraste que es más fácil de analizar y parece » más cerca » del usuario, y un menor contraste es más difícil y parecer más distante – piense » desvaneciéndose en la puesta del sol «. Un relativo skeumorph más concreto de iOS resalta la idea:

Otro, oculto de Gmaps:

Claramente, esta no es una convención muy común, configurada para reemplazar el ajuste de texto o elipses. Solo encontré un ejemplo de exactamente de lo que estás hablando. Pero creo que es una opción válida en algunas circunstancias.

Comentarios

• +1 Eso ´ es una buena descripción general de diferentes tipos de gradientes. ¿Debería ´ haber sido una publicación de blog;) Espero que extienda la conclusión a más de » Pero creo que ‘ es una opción válida en algunas circunstancias. « como parece que ´ He pensado mucho en ello. Por cierto: el último imho es una » sombra interior «.Ah, y supongo que debes dividir las imágenes en ocho espacios para que la lista funcione.
• @kaiser Gracias por tus pensamientos. Reelaboré las listas. Además, probablemente los dos últimos podrían llamarse » sombra interna «, aunque la clave es que ‘ es una sombra interna en un contenedor que trunca el texto, de ahí por qué estaba tratando de dibujar el paralelo. Mi redacción necesita una revisión …

Resumido:

El punto con degradados y fundidos ²⁾ siempre es el mismo: no funcionan bien con monitores / LCD defectuosos.

El problema del contraste

_{Izquierda : se ve bien en el monitor de los diseñadores || Derecha : desapareciendo mucho antes.}

El problema de rango de color

Monitor incorrecto:

Buen monitor:

Como puede ver arriba, no todos los usuarios compartirán su experiencia personal en su monitor. Si recibió la luz del sol directamente en la pantalla, el resultado será uniforme ser peor.

Mi opinión:

No utilice desvanecimientos y degradados hasta que no pueda evitarlos .

Comentarios

• Esto no es ‘ t lo que pensaba que significaba » texto descolorido «. Mi impresión fue que ‘ es más parecido a: [~ 400 caracteres de texto sólido] [~ 50-100 caracteres de texto que se desvanece rápidamente], en cuyo caso la diferencia en la experiencia visual debido a fade » speed » woudn ‘ no es realmente significativo. Sin embargo, hasta que el OP aclare lo que quiso decir, esto es especulación.
• Claro, la parte posterior se eliminaría, pero eso no ‘ t importaría, ya que una pequeña cantidad de texto que se desvanece implica que ‘ no está destinado a ser leído, solo está destinado a ser una representación icónica del » más texto » que está disponible.
• Los gradientes no tienen dependencias de hardware, ni se ven significativamente dañados por la luz solar o los monitores defectuosos. Estás confundiendo un problema de diseño con un problema de UX. Por lo general, mostrará de 4 a 10 líneas sin superposición en absoluto, luego de 2 a 4 líneas con un desvanecimiento del 100% al 0%. Es irrelevante si ese fundido está representado exactamente en el monitor del ‘ del usuario; siempre que el usuario vea un desvanecimiento de algún tipo, el control ha cumplido su propósito de indicar más contenido.
• De nuevo, está malinterpretando. El degradado no cubre todo el texto , solo la parte inferior. Si el desvanecimiento es alto o bajo en esa parte final no es particularmente relevante para el valor como indicador de que hay más contenido disponible. La mayor parte del contenido es completamente visible. Ser consciente del hecho de que el gradiente puede ser menos visible para algunos usuarios es importante (para que pueda diseñar para el peor de los casos), pero eso no impide que cumpla su propósito independientemente de la calidad del usuario ‘ s.
• El punto clave es si el OP significa que el desvanecimiento ocurre a más de 10 millas o 10 mm. No ‘ no creo que sea ‘ claro, dada la breve descripción y la falta de ejemplo. Estoy ‘ estoy de acuerdo en que los grandes degradados sobre el texto son malos; los ejemplos que incluye se ven bastante horribles en las mejores condiciones. Pero el hecho de que la descripción sea vaga no ‘ no significa que deba asumir el peor de los casos. Yo ‘ tendría curiosidad por saber qué piensa de mi respuesta que aborda un caso en el que quizás las suposiciones sean más optimistas.

Realmente no he visto que la técnica del «texto descolorido» se use mucho, pero creo que el objetivo de la experiencia del usuario es diseñar para lo que sea más fácil para el usuario . Si el usuario tiene que intentar adivinar lo que está sucediendo, creo que está frustrando el propósito. En la mayoría de los casos, simplemente agregar el […] o [más …] será suficiente y proporcionará un camino limpio y fácil de seguir. para que el usuario obtenga más información … ¿cuál es el punto de todos modos, verdad?

¿Preguntas acerca de si se ha probado el uso de texto descolorido?

Tal como lo veo, este es un ejemplo de la idea de usar «esencia de información» en una interfaz de usuario. En otras palabras, ¿cómo puede dar a los usuarios una idea visual de dónde se encuentran los datos en un spa de información? ce. En este caso, el desvanecimiento indica que hay más información en esta dirección a la que puede acceder si se desplaza o interactúa de alguna manera.

Discutimos mucho el concepto de aroma de información en la comunidad de visualización a finales de los noventa. Había mucha literatura de investigación en la comunidad de CHI, surgieron las teorías de búsqueda de información de Xerox Parc … hicieron muchos estudios en esta área. Me vienen a la mente los artículos de Peter Pirolli y Stu Card.

También puede aplicar aroma de información a las consultas. Entonces, por ejemplo, utilicé el aroma de la información en algunas visualizaciones que diseñé usando escalas de grises para mostrar cómo los datos cumplían con ciertos criterios establecidos en los controles deslizantes (el negro falló uno, el gris oscuro falló dos, etc.). En otras palabras, los puntos de datos negros son los que se encuentran justo fuera de su consulta … para que pueda mover rápidamente el control deslizante para incluirlos.

Bob Spence escribió un documento que resume muchos de estos información sobre técnicas de aroma / residuos .

Entonces, aunque no puedo proporcionar datos sobre esta técnica en particular, hay muchos estudios sobre cómo proporcionar este tipo de señales ayuda a las personas en tareas basadas en información.

Comentarios

• ¿Cómo se relacionan los minimapas con el desvanecimiento de los márgenes del contenido que no ‘ cabe en la pantalla?
• editado para aclarar … es el concepto subyacente al que me refiero.
• Es un gráfico de barras con colores por fallas. Todavía no ‘ Veamos qué tan relevante es esto. Además, ¿por qué el rojo pasado y la mayoría de las fallas es el más claro y con el orden z posterior?

Lo bueno de usar texto que se desvanece (para aquellos que no saben lo que esto significa: superposición transparente de degradado para que el texto se «desvanezca» en el color de fondo durante el curso si un par de líneas) es que es mucho más grande y más difícil de pasar por alto que la elipsis. Además, aunque los puntos suspensivos casi siempre sirven para indicar, a veces el texto parece terminar correctamente en el lugar correcto, por lo que no hay un concepto colgante que anime a los usuarios a buscar palabras adicionales. Los puntos suspensivos también son bastante pequeños y fáciles de pasar por alto, especialmente para aquellos con visión reducida (como los ancianos).

No tengo experiencia en su uso, y aunque puedo recordar un sitio que utilizo que lo tiene … No recuerdo qué sitio lo tengo. Pido disculpas. Puedo decir que me gusta el concepto y creo que funciona bien para su propósito. Tenga en cuenta que no reemplaza un botón «Más», simplemente proporciona una indicación mucho más grande y clara de contenido adicional. Aún necesita tener un área que permita hacer clic (sombra de ventana, botón Más) a la que los usuarios gravitarán cuando vean el efecto de desvanecimiento.

Este tipo de efecto solo sería apropiado para contenido de desplazamiento (es decir, tickers, feeds de noticias, etc.), donde se desplazan desde un lado (se desvanecen) y se desvanecen hacia el otro lado.

Esto parece funcionar bien con el concepto de lectura de formas, http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx y reconocimiento de palabras. Sin embargo, en teoría, solo puedo ver esto útil para desvanecimientos horizontales (de izquierda a derecha) y no también con Amazon «s desvanecimiento vertical. http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ Podríamos equiparar esto a un susurro, aunque el susurro es auditivo, este es un efecto similar en a nivel visual. Que yo sepa no ha habido ningún estudio pero si alguien encuentra uno por favor publíquelo aquí.

Aquí «una muestra de fade vs la elipsis estándar. http://www.theuxunicorn.com/fade_sample.png