Readability on the Web: 16 Best Practices
•Als PPTX, PDF herunterladen•
1 gefällt mir•136 views
Your users visit your website to read and gather information. Here are 16 ways to ensure your website visitors are able to successfully complete this basic task.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Empfohlen
Empfohlen (20)
Readability on the Web: 16 Best Practices
- 1. Readability for the Web 16 Best Practices
- 2. Make the Easy Things Easy Reading Should be Easy
- 4. Chunk: Small Paragraphs Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Donec a massa vestibulum, semper augue eu, congue nunc. Praesent quis cursus nunc. Aenean congue lobortis enim, eu consequat orci pretium sit amet. Proin scelerisque elementum arcu non interdum. Quisque ligula dui, egestas eget condimentum et, viverra in nisi. Donec facilisis tortor justo, a rhoncus augue sodales ut. Donec sit amet odio vel ante lobortis bibendum ac non lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Donec a massa vestibulum, semper augue eu, congue nunc. Praesent quis cursus nunc. Aenean congue lobortis enim, eu consequat orci pretium sit amet. Proin scelerisque elementum arcu non interdum. Quisque ligula dui, egestas.
- 5. Chunk: Bullet Points Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. • nam fringilla odio dapibus • lacinia tortor sit amet • rutrum justo In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Donec a massa vestibulum, semper augue eu, congue nunc. Praesent quis cursus nunc. Aenean congue lobortis enim, eu consequat orci pretium sit amet. Proin scelerisque elementum arcu non interdum. Quisque ligula dui.
- 6. Chunk: Headings [Heading] Donec Facilisis Tortor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. • nam fringilla odio dapibus • lacinia tortor sit amet • rutrum justo [Heading] Praesent Quis Cursus In lacinia et tortor a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. • nam fringilla odio dapibus • lacinia tortor sit amet • rutrum justo In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. • donec a massa vestibulum
- 7. Chunk: Before + After [Heading] Donec Facilisis Tortor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. • nam fringilla odio dapibus • lacinia tortor sit amet • rutrum justo [Heading] Praesent Quis Cursus In lacinia et tortor a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Donec a massa vestibulum, semper augue eu, congue nunc. Praesent quis cursus nunc. Aenean congue lobortis enim, eu consequat orci pretium sit amet. Proin scelerisque elementum arcu non interdum. Quisque ligula dui, egestas eget condimentum et, viverra in nisi. Donec facilisis tortor justo, a rhoncus augue sodales ut. Donec sit amet odio vel ante lobortis bibendum ac non lorem.
- 8. Reading Level 8 Newspapers Best-Selling Novels Most Americans Grade 11 Grade 6-7 Grade 8 or less
- 9. Fewer Words Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Donec a massa vestibulum, semper augue eu, congue nunc. Praesent quis cursus nunc. Aenean congue lobortis enim, eu consequat orci pretium sit amet. Proin scelerisque elementum arcu non interdum. Quisque ligula dui, egestas eget condimentum et, viverra in nisi. Donec facilisis tortor justo, a rhoncus augue sodales ut. Donec sit amet odio vel ante lobortis bibendum ac non lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas.
- 12. Medium Width Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet.
- 13. Medium Width Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo.
- 14. Medium Width Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Donec a massa vestibulum, semper augue eu, congue nunc. Praesent quis cursus nunc.
- 15. Sans Serif + Serif Fonts OK Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo.
- 16. Novelty Fonts Rarely Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo.
- 17. Sentence or Title Case LOREM IPSUM DOLOR SIT AMET CONSECTETUR Lorem Ipsum Dolor Sit Amet Consectetur Lorem ipsum dolor sit amet consectetur
- 18. Bold for Emphasis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo.
- 19. Italics for Emphasis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo.
- 20. Font Color for Special Cases Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo.
- 21. Left Align Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus.
- 22. Large Font Size Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo.
- 23. Adequate Leading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus.
- 24. High Contrast Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Nam fringilla odio dapibus, lacinia tortor sit amet, rutrum justo. In lacinia et tortor a rhoncus. Nulla sed arcu ultrices, pulvinar mi id, egestas augue. Nullam posuere nisi non semper semper. Ut a ultrices leo.
- 25. Good Eye Flow
- 26. Ample White Space Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis est non sapien vehicula, ac facilisis odio egestas. Quisque ac egestas justo.
- 27. Alt Text
- 28. Recap
- 29. Chunking Reading Level 8 Fewer Words Clarity over Clever Medium Width Text Smart Font Choices Sentence or Title Case Bold + Italics for Emphasis Text Color for Special Cases Left Align Text Larger Text Size Adequate Leading High Contrast Good Eye Flow Ample White Space Alt Text
- 30. Learn More
- 32. Kristine Remer UX Researcher + Strategist @KristineRemer
Hinweis der Redaktion
- Chunk text into small paragraphs.
- Chunk text into bullet points.
- Use headings to break up multiple paragraphs.
- Use headings to break up multiple paragraphs.
- Check your content’s grade level in Microsoft Word or use similar online tools.
- Shorter amounts of content are easier to read than long ones.
- Simple, not multi-syllable. Straightforward, not clever. Layman’s terms, not jargon.
- When the text is too narrow, comprehension becomes more difficult.
- When text is too wide, eye strain increases, then eventually stops readers from continuing.
- Use white space (margins) and images to “squish” the width of the text to a comfortable size.
- Screen resolution has significantly improved in recent years. Serif fonts no longer look blurry.
- Script and other novelty fonts should be used very sparingly.
- All capital letters (ALL CAPS) are more difficult to read than sentence case or title case. (Plus, it looks like you’re shouting.)
- Bold should be used rarely and only for emphasis.
- Italics should be used rarely and only for emphasis.
- Colored text is usually difficult to read in long blocks.
- The consistent “hard” left edge makes reading smooth and effortless. Center- and right-aligned text causes readability issues due to the jagged left edge. It’s taxing on the eyes to search for the beginning of each new row.
- Depending on the font, a point size of 16pt is comfortable for most people.
- Most designers recommend leading (or line height) 1.5 times the font point size. Too much leading isn’t good either.
- Black text on a white background or white on black (or another very dark color) is ideal.
- Keep related content grouped together, rather than separating it.
- Adequate white space around a block of text is needed to help our eyes focus and give the content breathing room.
- Ensure images, tables, and other visual elements are translated properly by screen readers.