Design Pattern: Ensure Foreground Content is not Obscured by Background
User Need
I need to easily perceive the content, for example:
- Text is clear because the background is plain.
- Media does not have distracting background noise.
What to Do
Do not overlay words on busy backgrounds. Provide an option to remove background noise behind auditory content or ensure background sounds do not interfere with the main auditory content.
For text:
- Use solid backgrounds for blocks of text.
- Use thick outlines with solid fills for text that is overlaid on background that has designs running through it.
- Use strong color contrast.
For auditory content:
- Avoid fast changing background content behind foreground auditory content (such as background conversations or unnecessary traffic noise).
- Provide an option to remove background noise behind auditory content.
How it Helps
Reading a sentence phrase by phrase conveys more meaning than reading individual words. Phrases are also easier to comprehend. The more words an individual can process in one glance, the faster they can read, the easier they can understand what’s written, and the more they stay interested. Most people can take in a whole line of text, or more at once. Fixating on many words at a time is necessary for comprehension for many people. A slow reader may read a sentence slowly using 6 to 9 eye fixations, sometimes taking in only a single word (or part of a word) at a time. Adding backgrounds reduces the number of words readers can fixate on. Removing backgrounds helps users comprehend more words at the same time.
Also, automatic word recognition is often used for reading comprehension. For example, approximately 200 words exist in the English language that do not fit traditional letter sound patterns. These words must be memorized and automatically recognized. If a user can’t recognize these words, the text is harder to understand. Backgrounds can increase the amount of time it takes users to recognize words.
Similarly, background noise in an audio track can make it harder to process and understand the main content.
Examples
Use:
- Easy to recognize words and content that can be easily distinguished from the background.
Avoid:
- Backgrounds that might make it difficult to read text, such as “Backgrounds behind text that make it difficult to recognize words and process text.”