- Remove
- How not to do it
- Focus on whats core
- Kill lame features
- What if the user...?
- But our customers want it
- Solutions, not processes
- When features dont matter
- Will it hurt?
- Prioritizing features
- Load
- Decisions
- Distractions
- Smart defaults
- Options and preferences
- When one option is too many
- Errors
- Visual clutter
- Removing words
- Simplifying sentences
- Removing too much
- You can do it
- Focus
This chapter is from the book
This chapter is from the book
This chapter is from the book
Visual clutter
Removing visual clutter means people have to process less information and can concentrate on what’s important on the page. I’ve noticed that users describe interfaces they like as “clean,” meaning free from clutter.
The designer Edward Tufte talks about needing to make the “data-ink ratio” as high as possible. In other words, ink (or pixels) shouldn’t be wasted on anything that isn’t content or in repeating content. So he removes the gridlines on graphs, leaving just the axes and the zigzag line of the graph itself. He reasons that the gridlines distract the reader from the important data: the shape of the graph.
The process for removing clutter is simple. Look at each element in the design and ask why it is needed. Is it critical information or there for support? Try to remove it from the design. If the design no longer works, replace the element.
Here are some good ways to limit visual clutter:
- Use white space or subtle background tints to divide up the page rather than lines. Why? Because lines sit in the foreground, so you pay more attention to them than tints or white space that sit in the background.
- Use the minimum possible emphasis. Don’t make something bold, large, and red, if simply making it bold will do.
- Avoid thick dark lines where fine, light lines will do.
- Limit the levels of information. If you have more than two or three levels of information on a page you may be confusing the user. For instance, limit the number, sizes, and weights of fonts. Try to keep to just two or three levels in total, e.g., a headline, subheading, and body text.
- Limit the variation in sizes of elements. For instance, if you’re designing an online newspaper, you might have a large block of text for the main story and five smaller blocks of text for secondary stories, rather than six blocks of text in different sizes.
- Limit the variation in shapes of elements. Stick to one button style rather than using three or four different ones.
You’ll be surprised how much clutter you can remove from a page.
)
)