Design Pattern: Use White Spacing
User Need
I need a good use of white space, so that the chunks are clear and the page does not get overwhelming.
What to Do
Put white space around objects and text, including boxes, paragraph headings, and content, so that each section is clearly separated.
How it Helps
White space (also called negative space or the background color) reduces clutter and provides definition to content. This gives the viewer a clear overview of a web page. It is used by designers to enhance text and the position of objects on a page.
Using white space aids navigation through a page and helps people read it. It can help the user find important elements on a page. For those with cognitive and learning disabilities, white space has been shown to ease reading difficulties and improve understanding of content.
Make sure users can also adjust the amount of white space around objects and text via a web extension or user setting. This supports the ability to identify important elements in the content of a web page.
More Details
Use clear spacing between letters, words, sentences lines, paragraphs, and blocks of text.
Allow for the ability to easily adjust white space around objects and text, including boxes, paragraph headings, and content, to a degree that suits the user and does not disrupt the overall integrity of a web page. Do not add so much white space that important content cannot be seen above the scroll.
Note that “white space” is a term that means the background color. It does not always need to be always white!
Examples
Use:
- White space around separate sections of the content.
Avoid:
- Dense pages.
Related Information
User Story
Personas
- Amy: An Autistic Computer Scientist
- George:
- Gopal: A Retired Lawyer with Dementia
- Kwame: A Traumatic Brain Injury Survivor
- Sam: A Librarian who has a Hemiplegia and Aphasia
- Tal: A Student who has Dyslexia and Impaired Eye Hand Coordination
- Yuki: A Yoga Teacher who has AD(H)D