Studies or experience on using faded text to indicate more content?

Question

Text that ends with ... normally indicates that there is more to read. But now I heard some people talking about faded text is a better user experience? Has anyone tested this or has experience from toned texts to indicate "more to read"?

Answer 1

Fading the edge of text can be a useful alternative to ellipses, and I would argue is superior in some ways.

---

Don't Confuse the Content

Ellipses replace text content to do their job, which can cause confusion about what the actual text is. Does it include the "..."? If I cut/copy/paste, does that come along? A fade changes the way the content is displayed.

In a sense, fades conform to the notion of a separation between visual and semantic encoding and ellipses don't.

In iOS 5, Apple changed the address bar for mobile Safari to use a fade instead of ellipses:

Not only is it more clear what the actual URL is, but (at least it feels like) you can see a little more of it as it trails off.

---

Vertically truncated text

Ellipses don't work vertically. Here is an example from JIRA, where the lower content is scrolled, but the header stays put (it's also cleverly compacted just before this happens - it's not as janky as that might sound). The fade helps communicate that the part that is scrolling is going somewhere.

---

When text overflow it's container but can't wrap

Here, in Gmail, edge where the overflow is cut off is hard. The width is dynamic, so ellipses would need to be dynamically inserted, which isn't practical (I assume they couldn't make it snappy). I would argue that a fade out, or it's cousin the "tuck under", could help communicate what's going on.

---

Some general background

In general, the fadeout effect stems from a skeumorphism that comes from higher contrast being easier to parse and seeming "closer" to the user, and lower contrast being more difficult and seeming more distant - think "fading in the sunset". A more concrete skeumorph relative from iOS highlights the idea:

Another, tuck-under from Gmaps:

Clearly this isn't a super-common convention, set to replace text-wrapping or ellipses. I only found one example of exactly what you are talking about. But I think it's a valid option in some circumstances.

Answer 2

Summed up:

The point with gradients and fadeouts ²⁾ always is the same: They don't play well with bad monitors/LCDs.

The Contrast problem

_{Left: looks good on designers monitor || Right: fading out much earlier.}

The colour range problem

Bad Monitor:

Good Monitor:

As you can see above, not every user will share your personal experience on your monitor. If you got sunlight directly on the screen, then the result will even be worse.

My opinion:

Don't use fadeouts and gradients until you can't avoid it.

Answer 3

I really haven't see the "faded text" technique used much, but I think the point of the user experience is to design for whatever makes it easy for the user. If the user has to try to guess what is going on, I think you are defeating the purpose. In most cases just adding the [...] or [more...] will suffice and provide a clean easy to follow path for the user to get more information...which is the whole point anyway right?

Answer 4

The nice thing about using fading text (for those who don't know what this means: gradient transparent overlay so that the text 'fades away' into the background color over the course if a couple lines) is that it is much larger and harder to miss than ellipsis. In addition, while ellipsis almost always work to indicate, sometimes the text just seems to end properly at the correct spot, so there is no dangling concept that encourages users to look for additional words. Ellipsis are also quite small and easy to miss, particularly for those with reduced vision (such as the elderly).

I have no experience using it myself, and while I can remember a site I use which has it... I can't remember which site I use that has it. I apologize. I can say that I like the concept and I believe it works well for its purpose. Be aware that it doesn't replace a 'More' button, it simply provides a much larger and clearer indication of additional content. You still need to have an area which affords clicking (window shade, More button) that users will gravitate to when they see the fading effect.

Answer 5

You ask about whether the use of faded text has been tested at all?

As I see it this is an example of the idea of using "information scent" in a user interface. In other words how can you visually give users a sense of where the data lies in an information space. In this case the fading indicates that there is more information in this direction that you can get to if you scroll or interact in some way.

We discussed the concept of information scent a lot in the visualisation community in the late nineties. There was a lot of research literature in the CHI community, came out Xerox Parc's information foraging theories.... they did lots of studies in this area. Peter Pirolli and Stu Card's papers spring to mind.

You can also apply information scent to queries. So for instance I used information scent in some visualisations I designed using gray scales to show how data fufilled certain criteria set on sliders (black failed one, dark grey failed two etc). In other words black data point are ones that lie just outside your query ... so you can quickly move the slider to include them.

Bob Spence wrote a paper summarizing lots of these information scent/residue techniques.

So although I can't provide data on this particular technique there are indeed lots of studies about how providing these sort of cues supports peoples in information based tasks.

Answer 6

This type of effect would only be appropriate for scrolling content (i.e tickers, news feeds etc), where they scroll from one side (fade in) and fade out to other side.