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"?
-
5Could you post an example of such toned text? Not only will this make it a lot more clear what you mean, but it will also give us the opportunity to conduct our own little study about it.– User 1Apr 19, 2012 at 11:45
-
I'm not sure I like the faded text approach. It would almost indicate that there's a problem with the layout.– AndroidHustleApr 19, 2012 at 12:18
-
2I'm not sure I've seen this ever used, do you have any examples?– Ben BrockaApr 19, 2012 at 12:40
-
2Another question, are the people in "I heard some people talking about faded text is a better user experience" in fact one person in your surroundings? Or is it from a study you can point to that would suggest that the faded text would be more intuitive than the conventional '..'?– AndroidHustleApr 19, 2012 at 13:29
-
1I have one reference for this: Android Mark... emm, I mean Google Play product descriptions - though I don't know if this is exactly what the OP meant. And it should be noted my example also has a "more" -button in addition to the faded text.– Ilari KajasteApr 20, 2012 at 10:40
|
Show 3 more comments
7 Answers
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.
answered Apr 20, 2012 at 20:13
-
+1 That´s a nice overview of different sorts of gradients. Should´ve been a blog post ;) I hope you extend the conclusion to more than »But I think it's a valid option in some circumstances.« as you seems that you´ve thought a lot about it. Btw: The last one imho is a "inner shadow". Oh, and I guess you need to intend the images by eight spaces to make the list work.– kaiserApr 25, 2012 at 12:31
-
@kaiser Thanks for the thoughts. I reworked the lists. Also, probably both of the last ones could be called an "inner shadow", though the key is that it's an inner shadow on a container that truncates text - hence why I was trying to draw the parallel. My wording needs some revision... Apr 25, 2012 at 15:41
Summed up:
The point with gradients and fadeouts 2) 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.
-
3This isn't what I thought "faded text" means. My impression was that it's more like: [~400 characters of solid text] [~50-100 characters of quickly fading text] - in which case difference in visual experience due to fade "speed" woudn't really be significant. However, until the OP clarifies what she meant, this is speculation. Apr 20, 2012 at 10:29
-
2Sure, the later part would be stripped, but that wouldn't matter, since the short amount of fading text implies it's not intended to be read, only intended more of as an iconic representation of the "more text" that is available. Apr 20, 2012 at 12:08
-
1Gradients have no hardware dependancies, nor are they significantly harmed by sunlight or bad monitors. You are confusing a design issue with a UX issue. Typically you will display 4-10 lines with no overlay at all, then 2-4 lines with a fade from 100% to 0%. It is irrelevant whether that fade is exactly represented on the user's monitor; as long as the user sees a fade of some kind, the control has served its purpose of indicating further content. Apr 24, 2012 at 16:21
-
3Again, you are misunderstanding. The gradient does not cover all the text, only the bottom portion. Whether the fade is high or low on that final portion is not particularly relevant to the value as an indicator that there is more content available. The majority of the content is fully visible. Being aware of the fact that the gradient may be less visible to some users is important (so that you can design for the worst case), but that does not prevent it from serving its purpose regardless of the quality of a user's screen. Apr 24, 2012 at 16:53
-
1The key point is whether the OP meant that the fade happens over 10 miles or 10 mm. I don't think it's clear, given the terse description and lack of example. I'd agree that huge gradients over text are bad - the examples you include look pretty awful in the best of conditions. But just because the description is vague doesn't mean you should assume the worst case. I'd be curious what you think of my answer that addresses a case where perhaps the assumptions are more optimistic. Apr 25, 2012 at 11:34
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?
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.
answered Jun 27, 2012 at 13:32
-
How do mini-maps relate to fading out of the margins of content that don't fit in the display? Jun 27, 2012 at 13:44
-
edited to clarify... it is the underlying concept I am alluding to. Jun 27, 2012 at 13:53
-
1Its a bar chart with colors per failures. I still don't see how this is relevant. Also why is the passed-all red and the most failures the lightest and with the rear-most z-order? Jun 27, 2012 at 13:58
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.
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.
This seems to work well with the concept of shape reading, http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx ,and word recognition. However, in theory I can only see this useful for horizontal (left to right) fades and not as well with Amazon's vertical fade.http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ We could equate this to a whisper, although the whisper is auditory this is a similar effect on a visual level. To my knowledge there haven't been ay studies but if anyone finds one please post here.
Here's a fade sample vs the standard ellipsis. http://www.theuxunicorn.com/fade_sample.png
