24

Text on images seems to be very popular these days, and it does look nice. However, it can be hard to control the legibility of the text. I have darkened the background, and added text-shadow, and it looks fine to me now, but others still say it's not that easy to read.

I was wondering what is the consensus on UX for said design style? Are visitors more compelled to read it?

  • 1
    There is a big accessibility concern about this that is worth reading about if you haven't already - w3.org/TR/UNDERSTANDING-WCAG20/… – JonW Mar 19 '15 at 17:25
  • Facebook use a gradient overlay to go behind the text, and text shadow the bring out the text more, as they have no control over the type of image the text will be placed on. I don't see any other option in their situation. I have tried that, but it is tough to get the gradient to look as good as FB. – Source Mar 19 '15 at 17:49
  • 3
    The text overlay on image matter was discussed here: medium.com/@erikdkennedy/… – Ivan Chau Mar 20 '15 at 6:14
  • Great link @IvanChau (I really don't work for medium.com even though my answer sounds like an ad) -- :) – DaveAlger Mar 20 '15 at 22:02
  • 1
    Can text shadow enhance readability? is another related question worth reading for discussion of text shadow and accessibility. – Matt Obee Mar 20 '15 at 23:40
24

Readability is hard to get right

Great question. It's always good to question the point at which style destroys function.


Example scrim formats enter image description here


I've done quite a lot of user testing on scrim-based image captions (where there is a partial or complete semi-transparent overlay on the image and contrasting text).

Here's what I've found, in no particular order:

  • Overlays are hard to get right - To get an overlay right, you are balancing overlay color and transparency with text color, font and relative size of the text vs image. That is a LOT of variables.
  • It's even harder when images are not known in advance - For news sites, or social sites (FB, Pinterest) the site does not know what kinds of images will be posted, so creating a generic solution for text overlays is very difficult. When using the popular dark-scrim and light-text, the text will be more legible with low-contrast, light images and less visible with high-contrast, dark images. So some text will appear more readable than others, which can cause confusion or make the layout look weird.
  • Overlaid text works best with heavyweight fonts and short, 1-line captions. Heavy fonts carry enough visual mass to render the text legible against a variable background. If your caption is too long to fit in one line, I've found it's better to wrap it (see the BBC News app for example) rather than reduce the font size.
    • I would NOT use overlaid text for anything longer than 6-8 words. Users reported being really frustrated at reading longer text....overlaid text is really taxing on the brain because of the varying background so the task of reading can get really frustrating quickly.
  • Google's Material Design has some helpful tips on using scrims. Note that Material Design shows examples of both overlaid captions and captions below images: I think this is an acknowledgement that scrim captions are very difficult to work with.

My conclusion was, it's OK to use text overlays when:

  • Images are sparse
  • Heavyweight fonts can be used
  • Captions are small and ideally 1 line
  • Images are known/static
  • The text is not absolutely crucial (e.g. the title of a photo is often less important than the title of a news article)

If your app fails 1 of these conditions, it may still be usable. If it fails 2 or more of the conditions, I would think twice about using overlaid text.

  • 1
    +1 nice list of guidelines. (failing 1 may be okay but don't fail 2) – DaveAlger Mar 19 '15 at 17:26
  • 1
    Tohster as always a comprehensive answer. As I am working on accessibility its kind of on my mind all the time! So recently I came across a tool that overlays a filter on top of of the design to see how users with different vision defects view things. Thought it was great nifty tool and educates designers as well as improves the end result. – Okavango Mar 19 '15 at 17:33
  • @okavango what's the tool?? Sounds awesome! – tohster Mar 19 '15 at 17:42
  • Xscope and it does much more like overlaying gridlines etc Definitely worth it :) – Okavango Mar 19 '15 at 17:50
  • 1
    @Okavango thanks...i wasn't aware of that site. great resource – tohster Mar 19 '15 at 19:07
9

It is hard to provide more legible information than black text on a white background but not all things are black and white so let's look at an example...

1. Images provide emotion

Choosing anything other than a high contrast pattern of black on white or white on black makes text information harder to consume. Sometimes this is desirable. For example, placing emoticons inline with text does a better job of conveying feeling over plain text alone.

Medium is a tool where people can share their stories with each other online. At launch they chose to place a higher priority on emotional connection over readability (and succeeded in doing both)

Source: medium.com medium.com

2. Text provides information

The irony is that Medium has recently replaced their large image on the welcome screen with a more straight forward and responsive list of content that is easier to read. The page loads quicker and reads well on any device but notice the difference in tone. Doesn't it feel more formal, more distant and even a little colder?

Long time readers of Medium appreciate how easy it is now to access all the best content and how responsive the site is on any device but it comes at a cost.

new medium

3. The best of both worlds

Neither choice is better or worse than the other but here are a few things to keep in mind when choosing to place text on top of an image.

  • Don't use huge image files that bog down the site. If the image you are using slows down the loading speed of the page then you are more likely to get no response at all instead of the desired emotional response. Smaller devices should use smaller files that load faster.

  • Make sure the image provides proper context. For example, placing THIS IS CRITICAL text on top of clowns may elicit the wrong emotional response (unless you're a comedian)

  • Make sure the text is short because nobody wants to read a paragraph on top of a distracting image.

  • A user should know what to do without ever reading the text on an image (see below for an example where the text is mostly optional). If text is important and needs to be read then don't place an image under it.

enter image description here

  • 7
    You make some good points but because you've limited your examples to one website this feels more like an infomercial than an answer. I'm also a bit puzzled that you'd suggest the "Create an account" image as a good example when a section of it ("you're a part") is close to illegible. – Lilienthal Mar 20 '15 at 7:52
  • 1
    @DaveAlger I'm not sure why you might feel that Lilienthal downvoted this answer, as rep and privilege requirements says Lilienthal has never had the privilege to vote down here on UX. Also the downvote came long after the comment. – a CVn Mar 20 '15 at 15:02
  • @Lilienthal - There is nothing wrong with focusing on a single use case and I chose this example because Medium started down the text over image path before choosing a different approach. That last example is there to illustrate how "the text isn't important" here. The subliminal "jump in" image provides context to the call to action button which is clear regardless if the text is ever read. (@Michael - thanks. I removed my last comment and focused only on clarification of my answer here) – DaveAlger Mar 20 '15 at 15:34
  • 3
    @DaveAlger I don't think it's a bad answer (in fact I gave it an upvote), I just wanted to warn you that it had a bit of a commercial angle to it. But I had to read through your entire post to make sure so I only commented that it might be improved by sourcing examples elsewhere as well. – Lilienthal Mar 20 '15 at 20:09
2

I'm not a designer, but consider all of those meme posts with the white text with black outline? There is a reason for that. It's white to pick to highly contrasting colors and use one as an outline. Black and white is just one example.

-1

I was wondering what is the consensus on UX for said design style?

When it comes to broad visual design topics, there's rarely consensus.

Are visitors more compelled to read it?

This is a visual design question and depends entirely on the greater context...what the content is, what the image is, what the message is, the audience, the implementation of the design, etc.

If you're asking if you should place text on an image, well, again, it all depends on the design itself. Both in terms of concept and implementation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.