NYX Ditech

Categories
Brand & Identity Design SEO Technology

5 Tips To Improve Website Readability

The copy is the backbone of your website; we all know that. But, do users really read the copy on websites? Do they have an attention span long enough to read all the content you want them to read? The answer is NO! According to past research published by Nielsen Norman Group, 79% of users scan any new page they come across and only 16% of them read word by word. The same holds true today, with users finding time to read only 28% of the copy on an average visit. The human attention span has dropped drastically over the last few decades; today it stands at eight seconds only. Therefore writing an engaging copy to convert your website visitor into a customer is a crucial task, and these tips will surely help you in improving the readability of your website content.

1. Ensure The Perceived Benefit Outweighs The Perceived Cost

Readers always do a cost-benefit analysis before they read anything (unknowingly mostly). They ask themselves two things:

  • How much time and effort would reading this web page take?
  • What useful information/solution will I extract from this web page?

If the perceived benefit outweighs the perceived cost, they read.

Hence, it is essential first to identify your target audience. Everyone has a liking to their own style of writing. But, does that style suits your target audience? Understanding the readability level of your target audience is the primary exercise that you must do before putting your pen to paper. 

One of the effective ways of writing is to use the inverted pyramid style of writing. In this approach, you make your point right up and then go on to explain the specifics. It helps users easily scan the main points and then decide for themselves if they want to go into the details. Further, use contextual headings, subheadings, and keywords in bold so that the user can scan what you are offering. 

The other effective approach is to use the APP (Agree, problem, preview) method. You start with a statement to get the agreement from readers. Once the reader agrees with it, the handshake is made. Then you state the problem and make a promise to solve it. This is where the user is assured of the value from the post. And, then we present a preview of the solution and how it will change things for the better.

2. Use Words That Users Can Comprehend

Users get comfortable with your writing when you filter out unnecessary jargon and trim down on fancy vocabulary. Using words that users can relate to is the key. Readability tests such as Dale-Chall use a list of familiar words to gauge readability. However, in order to use words that your user is familiar with, you have to be familiar with your reader first. Give a little thought to the audience you are writing for, and try to keep your copy in sync with their cultural and educational background for better readability.

3. Use Legible Typography

Copywriters and content specialists cannot do much about visual design. A copy-friendly visual design uses default typefaces, backgrounds, and layouts that improve the legibility of your copy. Use contrasting texts and text hierarchy. The text color should appear distinct against the background. Use headings and subheadings and bullet points to make the copy structured and organized. Shorter sentences and new paragraphs every 3-4 lines would also give your readers some breathing space— it might hook them till the end.

A short line height also increases the horizontal eye movement and exhausts our eyes. Scanning through the text becomes easy with the optimum line length and height. It also makes reading less strenuous for the human eye. Responsive web design takes care of adapting the line length to different device screens. You need not worry about fixing the line length with different screen sizes. Also, it would be best if you avoided smaller fonts as larger fonts are easier to read. The font size ideally should vary between 14 px to 16 px.

4. Follow The SUCCES Principles

Chip Heath, a professor at Stanford Graduate School of Business, and his brother Dan Heath, a Senior Fellow at Duke University’s CASE center, authored a book called ‘Made To Stick. In that book, they summarise conveying impressionable ideas in six principles:

(S) Simplicity: Avoid complexity in the language and structure.

(U) Unexpectedness: Make your copy interesting. Surprises could be interesting bits of information or surprising data, fun facts that are relevant, examples to illustrate.

(C) Concreteness: Be specific with numbers. Use stats and figures. Don’t use vague adjectives and long paragraphs. Listicles are popular for the same reason.

(C) Credibility: Data points and numbers are instinctive to grasp on. The user remembers them more. They also make your copy more credible.

(E) Emotion: Using emotion in your copy is to make it relatable – if readers relate, they remember. But be aware of the dangers of overstating a point.

(S) Story: Stories stick to users. Create stories!

Adding emotion and stories is subjective from copy to copy. Emotional copies may not go down well when what is required is a rational approach. Use these elements with caution, when feasible.

5. Drive Attention Using Images

The more you can break down the text pattern, the easier it is to read. Images are perfect for this. People also “get” visuals much faster than text. Relevant images solve the purpose of storytelling and emotional appeal. Also, images can be used effectively to shift the user’s attention to the copy on web pages. 

Not just images, image captions are scannable elements as well. They are read 50% more than the rest of the copy and have a recall rate of almost 100%. Write your captions to capture interest just as you write headlines to woo the reader.
Readers on the web do have a small attention span, but they read with a purpose. Your copy must be able to extract the purpose effectively to be highly readable. Our experts can guide you more on this topic. Talk to them now!

Read About Copy-First Approach of Designing a Website Here

Categories
Brand & Identity Design Mobile Apps UI Design UX Design Web Design

5 Factors That Influence Readability and Legibility of a UI

No matter how exciting and compelling your story is, it will not be able to create an impact on users if it isn’t presented in a clear and readable layout. People generally focus more on the content than its packaging. No doubt content is the king, but packaging plays a crucial role in determining its success. Readability and legibility are two key aspects of user experience design. To simply put – app and web users will not read your content if it doesn’t look clean, clear, and consumable. In this article, we will cover the factors that influence readability and legibility in user interfaces and why it’s important to care about them.

Readability

As the name suggests, readability is the ease of written content perception. It refers to the comprehension of the text content. It includes – the simplicity of words and sentences, ease of consuming information, and clarity of thoughts. Readability is determined by considering your website’s typeface, which takes font size, font style, line length, and line-height into account.

Legibility

Legibility is a much narrower concept than readability. It refers to how easily your audience can recognize and differentiate between individual characters in lines of copy on your website. Legibility is determined primarily by your typeface design. We can say that legibility is one of the components to fall under the bigger umbrella of readability. It is generally analyzed by examining users’ reading speed in terms of words-per-minute.

Factors Influencing Readability and Legibility

There are plenty of factors that directly impact the readability and legibility of the content. Here are the five most important ones:

1. Typography

Typography refers to the font style. There are some fonts that are easy on users’ eyes and create a delightful reading experience. On the other hand, some fonts are not so pleasing. The choice of fonts directly impacts the readability and legibility of your copy. Font size, width, color, and text structure – every single element matters. Fonts also add to the visual element, just like images. Typography in design is the art of balancing the aesthetic aspect of the text and the ability to read it quickly.

Negative space, alignment, tracking, the spacing between baselines of text, line length, etc. are all key elements to clear typography and comprehendible content. Designers must avoid too little space between the words, very less distance between the lines or letters, tiny font size, and non-contrasting text and background colors.

2. Background

Just like printed books and newspapers, the background color has a significant impact on the ability to read and comprehend the content on websites. It allows readers to distinguish both interactive elements and content. For instance, black text on white or light background appears more significant than the white text on a dark background. An improper color scheme will mostly result in reduced readability, leading to poor user experience. Relevant content or useful data that is unreadable is of no use; users will most likely not read it.

The nature of the content also plays a role in selecting the color scheme. Text-heavy interfaces aimed at reading as the main activity should use color schemes based on light backgrounds. In contrast, the image-heavy interfaces should use dark backgrounds to amplify the pictures’ performance.

3. Writing

The UX writing must be clear, concise, useful and consistent. Text is a vital part of the visual design and user experience. The best you can do with the written content on your website, app, or blog is to make it human-like communication. When you interact with your users through text, at any level, they must feel as if they are interacting with a real human being and not a bot. 

Remember – users don’t read on the web, but scan through the content. Be short and consistent in your written copy. An extended form of writing pushes off users. You must also build a solid text hierarchy so that users can quickly scan your page content. Use numbers, marked elements, and textual variants to catch attention. Marking out specific information by using bold and italic fonts, unusual text sizes, different colors, highlighting, etc. has worked well for years and still holds its significance; however, avoid overdoing it.

4. Visual Hierarchy

Visual hierarchy refers to prioritizing the content into different levels. It is based on the Gestalt theory that deals with the psychology of visual perception of elements. The theory shows how people tend to group visual elements. It organizes UI components so that the brain could distinguish the objects based on their physical differences, such as size, color, contrast, style, etc.

As mentioned earlier, people scan content over the web. So, if we take an example of a blog, they will first notice the headline, then subheadings and only then copy blocks. This is a typical pattern. Users scan the headline and subheadings to understand if the article is interesting and useful to them. Only then will they read the entire blog. The headline and subheadings should be framed in a way that is both informative and enticing. On the other hand, if users see the vast and long sheet of text, they will be scared to read it.

To build an effective visual hierarchy, the text is divided into three levels:

  • The primary level – It includes the biggest type like in headlines. 
  • The secondary level – This is the type of element that supports scannability, such as subheaders or captions.
  • The tertiary level – This one is for the body text and additional data. 

5. White space

White space or negative space is the area of the layout that is left empty. It can be either around the objects you place in the layout or between and inside them. Negative space provides breathing space for all the objects by clearing the unwanted clutter from the page. White space is a strong tool to improve the readability of your text and thereby enhancing the user experience. It also helps in creating a connection between the text and non-text elements of a user interface. 

Many more factors influence the readability and legibility of the content of a user interface; however, these are the most important ones. If you feel like discussing them further in detail, our team of experts will be more than happy to assist you.