Overlap Studio UX knowledge How to present content on websites?

How to present content on websites?

min read

Even the most interesting text may not be read if the presentation is not appropriate. How to avoid this situation? How to improve user experience on websites? Below are some tips on how to make the presented texts easier to read.

1. Paragraphs and highlighting items

Voluminous text blocks can overwhelm users. Too long lines of text, no division into paragraphs, no headings and no highlighting of key information are common mistakes. Breaking the text into paragraphs and headings, as well as bullets and underlines, make the text easier to digest. The user can immediately find the information he is looking for.

2. Visual grouping and consistency

The chaotic arrangement of overly diverse elements and the lack of visual grouping of elements make it difficult for users to know which parts apply to the currently read article and what they relate to exactly. Properly grouped and unified headings and texts improve the readability of the text. The user does not feel chaos and does not need to overly concentrate reading or scanning the text.

3. Cross layout or left justification?

The cross-pattern of the text makes it difficult for users to scan and forces them to constantly shift their eyes from one side to the other. We read from left to right, so placing the text on the left side allows you to quickly search the content.

4. Fonts and colors of fonts

Too small fonts with uneven colors and cuts, and too low contrast between the text and the background make the content illegible. Text that meets the requirements of WCAG 2.0 in terms of contrast, size and typeface is pleasant to read. This is important not only for users with vision problems, but for all website users.

5. Text layout on mobile devices

Too large header fonts, too small line spacing and too narrow a column with inadequately broken text are common errors that make it impossible to read the article on devices with smaller screens.

Find out more:

1.   Nielsen Norman Group: Zigzag Image – Text Layouts Make Scanning Less Efficient by Kim Flaherty

2.   Interaction Design Foundation: Visual Hierarchy – Organizing content to follow natural eye mov… by Mads Soegaard

3.   Smashing Magazine: 10 Principles Of Readability And Web Typography by Matt Cronin

4.   UX Planet: 10 Tips On Typography in Web Design by Nick Babich

5.   UX Planet: Mobile UX – Great Typography Enables Clear Communication by Nick Babich

6.   UX Planet: Mobile Typography – 8 Steps Toward Powerful UI by Tubik Studio

7.   Design Shack: Web Design Best Practices – Minimalism & Typography by Jerry Cao

8.   Intechnic: Best Practices to Improve Text Readability for Optimal User Experience by Andrew Kucheriavy

9.   Muzli: Typography In Mobile Design – 15 Best Practices To Excellent UI by Trista liu

Want to know what we can do for you?

Contact us via e-mail

Overlap Studio

Let’s talk about your project

Email us at office@overlap.studio or send us your contact details so we can reach you.

Thank you! We received Your submission and get will back to you shortly!
Oops! Something went wrong while submitting the form.

No worries. We will not share your contact details. Just check our privacy policy.