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.
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?
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.
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.
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.
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:
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.
should be as short as possible (3-5 words). More Number of words will simply clutter
the text.
2. No Underlining for Simple
Text:-
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.
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.
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.
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.
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.
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.
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.
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).
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.
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
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:-
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.
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.
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.
