Sunday, June 25, 2017

Subscribe to the RSS Feed

UI Design Principle 2: Legibility and Readability

Posted by jc-Qualitystreet on 2011/02/17

Whether to progress one step ahead of the implementation by preparing and designing “just in time” contents of next iterations or to collaborate actively with developers on the functions that must be delivered during the sprint, one of the main activity of the AGILE UX PRACTIONNER consists in sharing with the team his knowledge of the design principles and User Interface patterns…

Legibility? Readability?

It consists in enabling easy reading and fostering a good understanding of what is displayed on the screen. This principle covers two dimensions: the physiological process of reading but also the understanding of what is read.

Make it legible: information is noticeable and distinguishable

Make it readable: information is identifiable, interpretable and attractive: it can be understood!

Legible, readable and attractive !

Legible, readable and attractive !

This UI principle refers to the lexical characteristics of the information displayed on the screen that can impede or facilitate the reading of this information (character brightness, contrast between the letter and the background, font size, interword spacing, text blocks, line spacing, paragraph spacing, line length…).

Small font size and low contrast between text and background are hard to read and often constitute the main users’ complaints. Accessibility issues and who will need to read the content need also to be taken into account.

Two bad examples…

Very bad contrast!

Very bad contrast!

So hard to read !

So hard to read !

But also very good practices…

Example

And the winner is...

And the winner is...

Example

Legible and readable content. Good contrast. Good blocks.

Legible and readable content. Good contrast. Good blocks.

Example

In both cases legible but sweeter and less visual fatigue with the grey version (for an interface used every day)

In both cases legible but sweeter and less visual "fatigue" with the grey version (for an interface used every day)

And finally some guidelines…

  • Use simple, common, and familiar fonts (sans serif font such as Verdana, Arial or Helvetica), designed for reading on screen
  • Use Mixed-Case for Prose Text
  • Avoid texts in all caps
  • Don’t overuse bold: use it only when you want to call attention or create a hierarchy
  • Use italics when you want to call attention
  • Use an underline only to indicate a navigation link
  • For line spacing use one to one and one-half times font size
  • For Web pages use 12 to 14 points for body text and 18 to 36 points for titles and headings
  • Present black text on plain, high-contrast backgrounds.
  • Ensure the readability of the text by adjusting the contrast with the background (contrast value of at least 80%)
  • On a light background (white / gray), avoid yellow, pale green or cyan, blue, red, purple
  • Use line lengths of about 75-100 characters if fast reading is required
  • Left-justify text
  • Use lists to present facts.
  • Make text scannable by using Bulleted listings, Tables, Headings and subheadings, Highlighted and emphasized important issues, short paragraphs

home | top