Please, don’t make me squint!
As a designer I cast my eyes on lots of websites and lots of desktop applications. I see the good, the not so good and sometimes the darn right ugly. One of my pet peeves? Screens that make me squint.
Squinting is a symptom of poor readability. Readability refers to your ability to easily read screen texts without effort or distraction. Readability is one of the unsung heroes of usability. When readability is good, you don’t notice it. However, when readability is bad, it can be quite annoying.
Why readability matters
Why does readability matter? Well, think about it. In order to successfully use an application or website, people need to be able to understand the screens. In order to understand the screens, people first need to be able to read what is contained in the screens.
This is pretty simple logic, yet despite that there is a lot of design work out there that suffers from poor readability. If I were to speculate, I would guess this happens because:
- People get so distracted by the more ‘glamorous’ aspects of design— for example, graphics, video, widgets —that they forget to address the basic design components, like the text.
- People lack formal training in layout and design, and simply don’t know how to manage text effectively. Instead of making choices based on what science tells us, people might decide to use their favourite color (pink) for body text.
So what types of things make people squint? Here are some common culprits:
- Insufficient white space
- It’s almost like someone started a rumour that the goal of design is to squish in as many different things into a screen as possible. Yet read any textbook on layout and design, and you find out otherwise.
- Whitespace is critical for people to read effectively. Whitespace allows people to correctly distinguish between letters, words, paragraphs, headings, and other elements on a page. Whitespace also implies relationships between different screen elements, which can assist with workflow and navigation design.
- Text and background color combinations
- It is well established in human-computer interaction circles that certain color combinations are less readable than others, and some combinations even cause eye fatigue. For example, using fully saturated red text on a fully saturated blue background is a kick-ass recipe for causing eye fatigue. And yet I still see people using this color combination all the time.
- The strange thing with this particular issue is that you don’t need to be an expert to notice a bad color combination. Just stare at the text and background in question. If you find yourself squinting or your eyes hurt, pick some other colors. (And if you are looking for a reliable color combination, try good old-fashioned dark text on a white background.)
- Overuse of bolding
- Excessive bolding is doubly cursed:
- Excessive bolding can cause eye fatigue.
- Overuse of bolding also diminishes the impact that the bolding was intended to have in the first place. Bolding serves to emphasize key words or phrases and should be used sparingly. However, if a ¼ of the texts on the page are bolded, then in effect, the bolded texts lose their importance.
- Use of serif fonts rather than sans-serif fonts
- Serif fonts are the ones that have the fancy curly-cues at the end, for example, Times Roman. Sans-serif fonts have no fancy curly-cues, for example, Arial.
- Computer monitors do not render the curly-cue serif fonts well. Although monitor technology has improved a great deal, and browser features like automatic anti-aliasing help render texts better, the rendering of serif fonts — particularly at smaller sizes — is still not good. For body text in particular, it is still best to stick with sans-serif fonts.
- Text size
- Although I see a general improvement in the size of texts used in many designs, I still come across websites and applications with tiny text. If the text is important enough to be included in your design at all, then the text should be large enough to be read.
- My guess is that people reduce text size so that you can cram more stuff into a page layout. However, this is often a self-defeating strategy. In cases where there is insufficient space, you can use other tactics like replacing text with icons, using tooltips to provide more complete texts, etc.
Think about text
So if you are working on an application or a website, do your customers a favour. Before you supe-up your design with some Flash™ animation or the newest jQuery widget, spend some time considering how you will present text on your screens. Because really, your design shouldn’t make people squint.