UI Design Principle 2: Legibility and ReadabilityTweeter
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…
- Principle 1: Visibility and Invitation
- Today Principle 2: 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!
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…
But also very good practices…
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
Tweets that mention UI Design Principle 2: Legibility and Readability | Agile UX -- Topsy.com said,
[…] This post was mentioned on Twitter by Jean Claude Grosjean and Domenico Polimeno, needmedia. needmedia said: UI Design Principle 2: Legibility and Readability | Agile UX – http://is.gd/PSHVWs […]
Friday Link Roundup | BlobFisk.com said,
[…] UI Design Principle 2: Legibility and Readability http://www.agile-ux.com/2011/02/17/ui-design-principle-2-legibility-and-readability/ […]
G F Mueden said,
The legibility will in the end depend on the viewer’s eyesight. One size or contrast does not fit all. That slightly less black will give me a hard time; I need the highest contrast I can get. Please let me have it by not disabling my accessibility settings, in my case my choice of font for incoming text. However good your work may look to good eyes, the accessibility settings may make it better for those with low vision.