11 Ways to Use Underlined Text To Improve User Experience

11 Ways to Use Underlined Text To Improve User Experience:

An underline is referred to as a horizontal line right under a specific portion of text. Usually, the underline is used to highlight key sections of the text. This may either be drawn by hand under that text or printed. Underline in the digital design world also has its own significance. It would not be wrong to say that underlined text has emerged as one of the most common, highly recognizable features online. It signifies a link.



So, how can underline be used for text online to improve the web experience?

Underlining Links:-

Links became an essential element of online experience after the introduction of the World Wide Web concept in the year 1991 by Tim Berners-Lee. It is often described as the glue that holds the internet together.

Web designers from the past had restricted toolbox elements. They could have nothing more than simpler typefaces and restricted number of colors. In those days, colored monitors displayed just 16 colors. Most of the monitors were available in black and white.

However, these designers wanted something that could help them emphasize links with a different style to help adopters make out the important elements on the page. In this case, underlining an important section was the simplest solution. Since then, HTML hyperlinks started to get embellished with underlining. This turned into the standard way of decorating hyperlinks. Although designers have tried a number of styles for links in the past three decades, underlining is still the most favorite among web designers. Presently, the blue underlined hyperlink is one of the most widely recognized and approved conventions on the internet.

Here are some of the ways underlined text can be used to enhance user experience:

1. Shorter the Better:-

The linked phrases should be as short as possible (3-5 words). More Number of words will simply clutter the text.

2. No Underlining for Simple Text:-

Do not underline a text that isn’t a link. Underlines have a strong association with Clickability online. So users can get confused and even irritated if underlined text doesn’t match their expectations. In case, you wish to emphasize certain words or sentences, simply use italics or bold. These are safer options.

3. Add Significance to Anchor Text:-

It is crucial to make the anchor text meaningful. Since it is the clickable text within a link, you need to make it descriptive so that users are able to predict the product they will get once they click on a link. Avoid anchor text such as “click here”. The user will not understand anything about the content behind the link. In fact, the text simply forces users to hunt for more info on what they would be clicking on. Such links also tend to make a website less accessible for visitors using screen readers. As per “Search Engine Starter Guide” of Google, including words that anticipate target page at the start point of link text is crucial.

4. Descender Crashes - A Big NO:-

Descender crashing is a major issue caused by underlines. In fact, it is the second most issue after clutter. The problem occurs when characters comprising of descenders (such as lowercase p, g, j, y, and q) are not taken into account and underline touches the letterforms. The situation may result in a cluttered, unsightly look. This also makes the text less readable. A favorable underline is always positioned under the baseline. It also skips descenders. When underline is hidden under certain characters, it works towards improving legibility and makes text appear more refined.

Since links are styled with the text-decoration (underline CSS property by default); the property does not consider descenders. You can prevent descender crash issue. The simplest of solutions to address this issue is to focus on ‘text-decoration-skip’ CSS property. This clearly specifies parts of an element’s content that needs to be ignored by text decoration. It will also control all text decoration lines drawn by an element combined with text decoration lines that had been drawn by its descendants.

5. Consistency is the Key:-

Always focus on designing links consistently. It is the best way to teach users what links look like on the site. Avoid situations wherein certain links get underlined on your site and others get ignored. Visitors can get confused by different visual signifiers used on different pages on the site. So choose a link design and follow it religiously. Consistency in design is crucial for smaller websites too.

6. Color:-

Color is a powerful tool in the designer’s toolkit. It can be used to distinguish links from other text.

7. NO Color for Non-Interactive Text:-

It is not advisable to use colored text for any text that isn’t a link. Users may easily confuse colored text to be a link.

8. The Blue Rule:-

Well, it is not really important to color the links blue. Experts believe that shades of blue offer the strongest signal for links. However, other colors also do a fair job. In case, you are free to choose a specific color for links, blue works the best. Presently, it is still the color with the strongest clickability. Also, this color holds a significant advantage over others. The reason is that the color is the most accessible for people with color deficiencies (deuteranopia and protanopia).

Expert Tip – Since blue is intensely associated with clickability, avoid using it for non-link text. This rule is applicable even if blue is not the color you chose for your link. Any blue colored text that is not clickable may lead to frustration.

9. No Underline for Lists of Links:-

There should be no underlining for lists wherein every item is a link. The layout will clearly indicate the function of the area. You don’t require underlining each element in this list. If you need assist so feel free to reach us with any question: smanikdesign.com

10. Differentiate Visited and Unvisited Links:-

User will have a smoother experience if visited and unvisited links are visually differentiated. It will help them keep a close track of what they have seen. Make sure the two colors you use for the links are variants or shades of the same color. The idea is to clearly relate them. The color for unvisited links needs to be more saturated. Keep the color for visited links dull.

11. No Links in Mobile Apps:-


It is advisable not to use underlined links in mobile applications. These are a part of the website model. They have no place for app model. Applications should include buttons, not links.
11 Ways to Use Underlined Text To Improve User Experience 11 Ways to Use Underlined Text To Improve User Experience Reviewed by pravesh maurya on February 05, 2018 Rating: 5

No comments:

Powered by Blogger.