Hyperlinks. Interacting with them is perhaps the most frequent action done by users every time they go online. A 2010 Nielsen report estimated that the average user visits 2,646 different web pages per day, each of which may have up to 100 hyperlinks on them. That is 88 webpages a day, and almost 900 links seen, if not clicked.
Based on the above figures, it can be estimated that on average, users are running across 27,000 links a month, or 324,000 links a year. No wonder that hyperlinks are integral to the internet experience and have been since the dawn of inter connectivity, when Tim Berners-Lee described the web as simply “documents and links.”
Links – “text or a graphic that indicates it can be clicked,” in Microsoft’s words, are still the primary means by which users navigate the web, moving within a site or to external related sites through clicks. Usable links mean, according to Justin Mifsud, that users can “achieve the objective of why they are in your website… (which) will positively affect their experience.”
Usable hyperlinks are the essence of good user experience.
Despite hyperlinks’ centrality to the user experience, connecting pages, sites, people and ideas with a single click, hyperlink design and its impact on usability is not a hot UI/UX discussion topic. They are just always there, which might be why site owners and web designers do not focus on link usability issues as much as they should. The majority of sites follow the convention of blue underlined hyperlinks with greater or lesser adherence to the best practices found on W3C’s Web Content Accessibility Guidelines. But conventional hyperlink design has both good and bad implications for user experience, particularly in the constantly evolving UI landscape.
In the 3 decades since Berners-Lee nominated the link as the foundational element of web surfing, everything has changed. Is it time for the hyperlink to change too?
The History of Hyperlinks
The blue underline formatting of conventional hyperlinks is a vestigial trait from the days when UI designers had very little scope for design creativity. In the very first browser prototypes, such as Berners-Lee’s original WWW Browser Prototype, the display was limited to 16 colours and blue was the next darkest to black. Some monitor displays only catered for black and white, which led to the addition of the underline.
Three decades later and the blue underline still has a stranglehold on link marker visualization, even though internet consumption habits, device use, interfaces and even how we point and click, have gone through a revolution.
Blue Underlined Hyperlinks and Usability
The Pros
So why has the blue underline proved so long-lived? A clue lies in the fact that, according to Jakob Nielsen, “life is too short to click on things you do not understand.” He is right; links have to be instantly recognizable as such to be usable. Simply put, links lack ‘affordance’. It is impossible to figure out their function from their appearance. You have to know through experience or learning. In this regard, the way they are visualized is vital to their success.
The familiarity of blue underlined hyperlinks goes a long way to explaining its longevity as design element, despite being a relic from a simpler time. Nielsen, whose views on link visualization have evolved over the years, notes that “consistency is the key to teaching users what link colours mean,”. Blue has historically provided that consistency, cementing the psychological association of blue with clickability.
Blue hyperlinks side-step problems of accessibility for those who suffer from the most common forms of colour-blindness – 8% of male users and 0.4% of female users (Andy Rutledge has some great images for how links look to colour-blind users). Even if users have problems seeing colour, the underlined part of the conventional hyperlink comes into play: if you do not perceive the blue you still perceive the underline.
Underline also has other benefits. According to a 2003 study from the University of Hamburg, underlined links function as a sort of sub subheading within the text, guiding users to important information when skimming. The underline also makes it easier to find links and to increase click-through rates, even if they are not highlighted by any other means.
The Cons
So far so great for the blue underline, right? But the blue underline’s negative usability impacts are also compelling. For starters, blue is not a panacea for accessibility problems; elderly users actually have greater trouble perceiving blue, according to a study by Karyn Graves. She also points out that “the eye gets progressively less sensitive to the colour blue compared to other colours over time, and so the ability to focus on blue decreases with age.” As the online population ages, sites geared towards full accessibility will begin to have the edge.
The interruptive nature of the underline is great for skimmers, but has been shown to impede readability on a more general level. Not only does the underline disrupt the natural flow of the gaze over text (according to the Hamburg study), but it also cuts up the low-hanging letters and makes them harder to decipher. This negative impact on readability led Google to ditch the underlined link in 2014, citing a desire to “improve readability and create an overall cleaner look.” Google’s decision certainly fits into the wider trend for interface minimalism and flat design, which sit uneasily with the blue underlined hyperlink.
Another sea-change at odds with the blue underlined hyperlink is device use. When the blue underlined hyperlink was born, no one could have imagined the powerful mini computers we would all carry in our pockets within a generation. Touchscreens and wearables have revolutionized the way we interact with devices, and the hyperlink starts to look more than a little clunky on mobile devices. They are hard to click, often fall outside of the thumbzone, and juggling multiple pages is a nightmare.
Anthony T, writing in Smashing Magazine, notes that users should not have to think about how they are tapping a target such as a link: “if the user has to take their attention away from using your application to the way they move, orient or arc their finger to tap a target, it degrades their experience of the application.” The challenge for designers is figuring out how to make links that are finger-size and finger-friendly without jeopardizing overall usability.
The blue underlined link may have the weight of history on its side, but as Nielsen Norman Group’s Hoa Loranger points out, “signifiers can evolve over time as web users gain more exposure to different interaction cues and get to learn these new cues.” For designers and UXers who want to experiment with link visualization, there are some viable alternatives out there, each with its own usability pros and cons to take into account.
Alternative Hyperlink Visualization Techniques
Colour
We know blue brings about more clicks, but what kind of blue should UI designers be using, exactly? A few years ago, Gmail users were split tested with 40 different link colours along the blue-green scale: the bluer the links the more clicks they got, whereas links towards the green end of the spectrum discouraged clicks.
While this is likely just down to user expectations – blue means links, green means… what now?, these expectations can perhaps be overcome by playing with background colours. The Graves study found that background colour had a substantial impact on readability: green text on yellow background was the fastest to read, whereas red on green was slowest, while dark text on light backgrounds was much more readable than light text on dark. Bright colours are “extra noticeable and distracting” to the eye, noted Graves, and make it difficult to read smoothly. One of Graves’s users claimed that the bright blue links “drew the eyes away from the text”. Good for clicks, bad for content.
Overall, there seems to be growing consensus that link colour matters a lot less than consistency, with influencers such as Jakob Nielsen noting that “shades of blue provide the strongest signal for links, but other colours work almost as well.” This recognition frees designers up to create hyperlinks in line with branding and overall product design, rather than being strong-armed into including blue links on sites where the aesthetic simply does not support blue-toned elements.
- Good for: designers trying to create greater brand coherence
- Bad for: sites that rely on click-throughs, as any colour that is not blue is likely to get less of them
Highlighting and Decoration
Highlighting or shading around a hyperlink has its advantages – there is little impact on text style, no extra pixels are needed and you can even overlap links if necessary (although this is not advisable on either aesthetic or usability grounds). The downside of highlighting is that it complicates the colour palette of the design and, like other decorative techniques such as bolding, reduces your options if you need to emphasise a particular phrase.
Also, there is something about highlighting that just looks clunky. This might be why among the websites named in the 2015 Webby Awards Best Visual Design (Aesthetic) category, not one of them disposed of highlighted links.
Designer Andy Rutledge points out that highlighting is not the only method of ‘link decoration’, proposing link marking techniques such as “various border types/positions/configurations, background colours/images, and even less advisable decorations like a line-through.” Border decoration and the occasional icon are one thing, but a line-through is only ever going to compromise both readability and usability.
- Good for: designers looking to eye-catching novelty
- Bad for: less savvy web-users, and even savvy ones, who may wonder what the heck is going on with all these line-throughs
Hover to Reveal / Links on Demand
If there is one thing you should never do, says Hoa Loranger, it is making “users rely on ‘mouse-overs’ to determine if a text is clickable.” Links that only become apparent when hovered over, or when the user presses a certain key when they want to see a page’s links, are great for minimalist design fanatics and those who want pristine text at all costs, but that comes at a high cost. “People treat clicks like currency”, states Loranger, “and they do not spend it frivolously”.
- Good for: committed minimalists
- Bad for: users
Symbols
Historically, UI designers have even experimented with adding symbols to a word or phrase between lines of text – a pointing hand or an arrow being the most common. Graves is dismissive of these techniques, emphasizing that they “do not provide end points to the links, interfere with page formatting, or waste screen space, while also being confusing.”
- Good for: designers who love SVG files
- Bad for: users with small screen devices
Mobile First
As more designers put mobile first, new conventions and best practices around hyperlinks are starting to arise, such as cutting the overall number of touch targets (including hyperlinks) and ‘padding’ around each link to match the average digit size, so users have more chance of hitting their target area first time round.
Sitepoint counsels that content and UI designers “take care with their phrasing” and endeavour to place hyperlinks a reasonable distance apart, with mobile users in mind. And obviously, any on-hover changes built into web UIs are just not going to happen on mobile devices. When designing mobile-first, a link has to manifest its clickability right at first sight. These emerging mobile-friendly link conventions may well be a glimpse into the future of hyperlink visualization.
- Good for: The 1.4 billion people who buy touchscreen devices every year
- Bad for: Content producers
Hyperlink Usability Guidelines
Irrespective of how hyperlinks are visualized, there are some basic design precepts that should be applied across the board to ensure usability:
- Hyperlink meaningful text: Linking to a ‘click here’ label is bad for SEO and bad for users, who are implicitly forced to hunt for more information on what exactly they are clicking on. Users are wary of spyware. Let them know where the link will take them.
- Cut the blue text: Even if your links are not blue, the colour is so strongly associated with clickability that any blue text is bound to encourage users to click. If the blue text is not clickable, this results in frustration.
- Make links obvious: Users should not have to interact with the interface to find links
- Pick a hyperlink design and stick to it: There should be no variation in the way links are visualized across the site
- Visited links: Let users know which links they have clicked on by toning done to a ‘worn’ hue, or red-shifting the colour, as google search does from bright blue to purple-ish colour.
- Mouse-over: Links should change style on mouse-over, emphasizing to users that they are clickable
- Padding: Adding padding to a link makes it easier for thumb-wielding mobile users to tap in the general vicinity of a link, and still go where they want to go
Link Visualization – the Takeaway
It seems that hyperlink design is in limbo. While the blue underlined hyperlink is obviously a relic from simpler days and looks outdated, users feel a deep-rooted connection between the blue underline and clickability; anything else simply does not get clicked as often as a blue underline.
However, the alternatives for link visualization, such as colour variation and decoration, come with their own issues – readability, clickability and contextual understanding are all impacted by hyperlink design. Any designer varying from the blue underlined convention will probably want to run a whole lot of split tests to see if users understand and appreciate the variation from the norm.
In the end, it might be mobile-first that decides the future of the hyperlink, as designers increasingly look for ways to make touch targets more accessible. The next 30 years might not be quite as predictable for the hyperlink as the past 3 decades.
Source: Usability Geek
Author: Cassandra Naji
