20

I'm being pressured to build a feature that would make it easy for users to create web pages that feature large text over large images. Like this:

Example of text over image scenario

I am of the strong opinion that this design pattern is problematic for several reasons:

  • Big images == big files sizes == bad
  • Inevitably leads to someone putting light text on a light image (or vice versa)
  • Reinforces the false assumption that everyone has a large screen

I feel like building this feature will encourage people to use this pattern and I'm having trouble convincing other stakeholders that this is a bad idea.

North, a set of standards and best practices have a section on Outdated Design patterns which is pretty clearly against this:

Large background images add a large amount of weight to a page for very little actual gain

and

Placing text over images should be avoided for variable length text as the combination of the two has a tendency to produce unexpected results and has a high likelihood of obscuring important parts of the image or overrunning and potentially covering the entire image if not well controlled.

The problem with those quotes is that they don't provide any empirical evidence.

There is a similar argument against using carousels. However, there are several studies that seem to 'prove' that carousels are a bad idea, see Carousel Interaction Stats, Rotating Offers: The scourge of home page design, and The rise of the carousel.

Are there any empirical studies or authoritative resources (besides North) which support my argument? Are there any which contradict it?

17
  • 24
    I believe all those problems you mention can be solved with careful development. You can have large image with a fairly small file size if compressed well, choose your image/font color wisely or use an overlay on the image, and have a mobile and desktop version of the image for different screen sizes. Also here is an article that seems to relate increased conversion to pages featuring large images: blog.crazyegg.com/2014/05/20/oversized-images
    – DasBeasto
    Sep 22, 2016 at 18:43
  • 11
    As far as carousels go... shouldiuseacarousel.com
    – Mattynabib
    Sep 22, 2016 at 20:06
  • 2
    Your second quote does not, necessarily, apply to what you are doing. It sounds like what the user ends up when using your tool is static text over a static image. Your second quote is about putting dynamic text over an image where no designer has looked to see if the text being used obscures important parts of the image or is not readable. Making sure that does not happen is the job of the person using your tool, not you. Your job should be that you provide ways for the text to be formatted such that it is readable on any background (e.g. different colors, halos, outlines, fonts/sizes, etc).
    – Makyen
    Sep 23, 2016 at 1:56
  • 19
    That image of yours looks really nice and makes me want to click the "Learn more" button.
    – AndreKR
    Sep 23, 2016 at 8:23
  • 8
    That image looks gorgeous and the text is perfectly easy to read. Sep 23, 2016 at 18:11

7 Answers 7

51

Yes, there are guidelines for placing text over images

Here is guidance from a few highly regarded organizations:

Nielsen/Norman Group provides good guidance on how to place text over images while ensuring high enough contrast to ensure readability:

When combining emotion-provoking imagery with informational text, ensure that the text is readable by creating a high-contrast ratio between the text and its background.

(Ensure High Contrast for Text Over Images by: Aurora Bedford)

The United States government has official tools to help you comply with Section 508 website usability standards. If the text on your site complies with these guidelines, you can rest assured its readability is acceptable.

Section 508 guidelines are based on globally accepted best practices of how text should look to accommodate readers with vision disabilities. The guidelines adopted by the U.S. Government are in accordance with those from the International Organization for Standardization (ISO), the American National Standards Institute (ANSI), and the current minimum contrast guidelines (SC 1.4.3 ) from Web Content Accessibility Guidelines (WCAG 2.1) published by the The World Wide Web Consortium (W3C).

Section 508 reads (Hyperlink added.):

A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision. The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

Please note that American National Standards Institute’s document references above, ANSI-HFES-100-1988, has been superseded by ANSI/HFES 100-2007.

Section 508 currently references the WCAG 2.1 AA standard for its requirements. This is likely to be updated to newer versions of this standard in the future.

Better guidelines to follow

Although I disagree with some of the conclusions you accepted from the article you quoted, you are correct to be concerned. (Ignore any comments in this Q&A that suggest this issue is a “no-brainer” — it is not — and make sure you get this right.)

As adhering to Section 508 guidelines/the WCAG standard may help shield your company from liability, they are excellent guidelines to present to your stakeholders, regardless of whether your company is marketing towards users with vision disabilities.

Facilitating Compliance by Other Teams

Regarding ensuring compliance on a site that will be maintained by others in a CMS, there are two basic strategies for dealing with this:

  1. Establish a process, and then train and trust key staff to comply.
  2. Develop a design and system that enforces compliance technologically.

In a recent project of mine, we started with the first strategy and switched to the second. The content managers simply found it was easier and quicker to find images that looked good within the tigher site design constraints, rather than to restrict themselves to the much smaller set of images that would be compliant.

Enforcing High Contrast within a Design

We managed this by creating a layout which places white text on a black semi-opaque background above the image. To test, make the background image completely white and check the contrast — if it is compliant in that context, your settings will (mathematically) work with any image. The Nielsen Norman Group article shows examples of this.

These days you may also be able to enforce high contrast with stroke (a.k.a., text shadow) although I haven’t really seen this done beautifully.

A note on image sizes

I’m not sure the example you provided should be considered a “large background image.” Seems like a typical, moderate sized web banner to me. Just make sure your organization optimizes/compresses the images for web consumption.

Small Screens

The image the in the example above would not be so great on a phone, and thus it should not appear on a phone. An (optional or mandatory) second field should be included in the CMS that would provide a background image for small screens (phones). Ideally, this would be another version of the same image. In this example, perhaps just the surf without the creatures. That will give consistency of experience across devices.

5
  • 2
    I decided not to address the OP’s side notes about the effectiveness carousels in this answer. I think those (very valid) concerns are a separate question.
    – Tim Grant
    Sep 23, 2016 at 12:04
  • 5
    +1 for the 508 standards. I recently worked on a site that was required to comply, and now I want every other site to comply too! Sep 23, 2016 at 12:27
  • 1
    In the specific example the OP gave, the contrast ratio is about 2.2 to 1 (obviously it changes as the image changes, but that’s a reasonable average). That fails the 3:1 single-A level. Sep 24, 2016 at 16:49
  • 2
    The other problem that graphic designers often fail to take account of is that their 27" IPS iMac isn’t exactly the same level of quality as their users’ 8 year old TN laptop screen. At my last job we had a not-so-good screen in the office for testing potential contrast issues. At my current one we just mandate double-AA 4.5:1 minimum 😊 Sep 24, 2016 at 17:00
  • Thanks for the feedback! The Section 508 Contrast Ratio guidelines are particularly useful. Sep 30, 2016 at 20:32
17

Those problems you mentioned are not really "problems" and the current state of www is a good demonstration of that.

However, your question was about convincing people, so I suggest you do exactly what you did here. You introduce the problem visually, so that people can "touch" it.

7

The above comments have discussed how the issues mentioned by you are not real issues and can actually be resolved by simple engineering. However, I'm going to help your cause and try to find reasons on how you can convince your stakeholders.

1. Readability is hard to get and could often go wrong if they decide to change the image
The text overlay is not the easiest thing to get and there are a lot of variables that you might need to consider. Overlay color, transparency, color of text, size of text with respect to the image. You wanna ask the question if that information is really worth that hassle.

2. Images provide emotion, Text provides information
Yes, the image definitely makes it catchy but does that force you to compromise on important content? Are your content strategist breaking their head over how to come up with the right content so that the combination looks good.You need to remind them that content is the king and its quality with the right quantity will determine the success of this experiment.

3. W3C : Contrast Understanding

The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). For people without color deficiencies, hue and saturation have minimal or no effect on legibility as assessed by reading performance (Knoblauch et al., 1991). Color deficiencies can affect luminance contrast somewhat. Therefore, in the recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background

This is a great point if you want to convince your business against Text over images.You can read further at W3C : Contrast Understanding

You should read up on this answer by

Here are few links that could help you create an argument:

I hope this helps.

2
  • yes, but you're making an argument for when things are done wrong, thus the so called problem ceases to exist if correctly done. With this approach, absolutely everything (and I mean EVERYTHING) is wrong, because... it can be done wrong. As you may imagine, not a very good logical suggestion to make. Also, this is not a forum to provide counseling on human relationships, but to provide advise on UX. And from an UX point of view, the OP has to accept there's the option to do things right rather than suggest something a little web surfing will demonstrate incorrect
    – Devin
    Sep 22, 2016 at 22:44
  • I agree, that if correctly done this problem wouldn't exist in the first place. But clearly OP has an opinion "I am of the strong opinion that this design pattern is problematic for several reasons " and UX many times is a matter of perspective. OP has already made up his mind that this feature/design pattern is a bad idea. And that is a whole another story to argue if the idea is bad or not. My answer is assisting the user to convice the stakeholders that it is a bad idea. Lets not get into the discussion what this forum and UX is about. I understand your point though.
    – Nodnin
    Sep 23, 2016 at 16:01
3

Disclaimer: I'm neither experienced much with user interface design nor with "front-end design". I like my terminal, emacs and a tiling window manager. I even access Google from the command line.

I'm being pressured to build a feature that would make it easy for users to create web pages that feature large text over large images.

Basically your users are the people creating web pages, am I right? I'd like to introduce a different point of view then:

I'm one of your users. I'd like to create a shiny web page. I've seen some examples on the web with nice big pictures and cool text over them, I want that too.

Possibility 1: The tool you provide makes it hard or impossible to create a design similar to what you showed in the question. Oh man, probably I should get another tool to do the job ...

Possibility 2: You implement it / make it easy to achieve designs similar to what you showed us. Great I'll use that ... [2 months later] ... ah, another complaint about unreadable text / site load time / accessibility issues ... if only I'd used a different design back then ... (and maybe switched tools, too)

Both of the possibilities can lead to frustration for your users. Thus I'd instead suggest the following:

Possibility 3: Make it easy to create such a design, but inform your user as soon as possible about the issues that might arrive from such a design.

This can be warning with the points you've given here in your question, e.g. when a user selects this design (template). You can go further and tell your users information like

  • Minimum required / ideal display size for current design
  • Estimated site load time on (whatever) mobile connection

You could also check text on images for readability (generate small regions around the "intersection" between the text and the background, estimate contrast, warn if outside of some boundary) though this might be a lot of work to implement.

However you do it, make your user aware about the implications of their choices.

2

Just like DasBeasto accurately mentions in his comment, anyone who knows how to develop sites will overcome these trivial issues (please note trivial is the keyword here).

As for advantages of images and research.... well, rather than wandering the web for that report about a single specific site, I did just a quick search of some unicorns:

While I don't know the inside info for these companies, I know for a fact they have big UX and research departments. And all of them are doing what that North company says is wrong. So, what would you think is the correct answer here?

3
  • The Uber and GV homepages don't have the pattern in question. Sep 22, 2016 at 20:55
  • 1
    @AndreDickson, the GV link was because I took the examples from GV's projects. Uber does have that pattern in my locale, but for clarity I have replaced unicorns, so to speak, thank you for noticing it
    – Devin
    Sep 22, 2016 at 21:25
  • It’s trivial to create an ad with readable text. It’s not so trivial to create a system that will ensure ads created by internal users, of indeterminate technical ability, will always be readable, while ensuring the system retain maximum flexibility to produce creative ads. I’d suggest removing the language here where you imply the OP struggling with “trivial” issues.
    – Tim Grant
    Sep 25, 2016 at 13:00
2

I think that the custom aspect of the stakeholders wants makes this challenging but not the worst idea ever. If you don't feel like they understand the potential pitfalls, make some mockups which capture some of potential worst case scenarios help illustrate your concern. The image you posted is an ideal situation and looks great. Neither is quantitative data, but it doesn't need to be.

1

I agree with some of the comments above. There are ways to add in safe practices what would reinforce the text clarity on a background image. As mentioned, there are several ways to do this. One example that comes from the print world and is often forgotten today. By placing a shadow that is blurred out, you can increase the contrast. Most people don't even notice the blurred shadow. This has been done in print for a long time to help resolve this issue. Just one idea here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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