A hyperlink, or link, serves as the foundational interface element on web pages. Its origins can be traced back to Tim Berners-Lee’s ENQUIRE system, where every new page was required to be linked to another. Links are integral to the cohesion of digital content, existing in various forms, from inline text links to navigational menus.
This article delves into the art of hyperlink design, offering insights and best practices to enhance their creation. We will conclude with a showcase of exceptional hyperlink designs found in real-world web sites.
Links are the fundamental interactive bridge between a user and a web page: A user clicks a link, and it directs them to another page. Their importance is undeniable, yet they often fade into the background amidst more modern UI elements such as web forms, animated tooltips, and call-to-action buttons (which are essentially links styled to appear differently). Given their omnipresence, links are frequently overlooked in design considerations.
Before proceeding, it is beneficial to address the fundamental aspects of hyperlinks.
Hyperlink States
In the design of link interfaces, it is crucial to consider and understand the various link states that need to be addressed.
There are five states that a link element can exhibit:
Normal state: The standard appearance of a hyperlink
Visited state: When the link has been clicked on previously
Hover state: When the user’s mouse cursor is over the link
Active state: When the link is clicked (or the Enter key is pressed on a focused link)
Focus state: When the link is navigated to using the Tab key
These states are referred to as pseudo-classes. It is important to note that web browsers treat these states differently by default. For instance, in Firefox, the :link and :visited pseudo-classes are displayed with a dashed gray border, controlled by the border property.
In contrast, in Google Chrome (and other WebKit-based browsers), :link links have no style, while :visited links are displayed with a default yellow border.
Below are examples of each link state as displayed in Google Chrome 6.0:
It is advisable to have distinct styles for each state to ensure that users are aware of the status of each hyperlink on a web page. For example, changing the color of a link when hovered over can enhance the perception that it is clickable.
Common CSS Properties for Styling Hyperlinks
There are numerous CSS properties available for styling hyperlinks to enhance their design.
Some popular CSS properties related to the visual appearance of links include:
Color: The color of the hyperlink text
Text-decoration: Removing the default underline with the ‘none’ value
Background-color: Changing the background color in the :hover state
Border: Removing default borders with the ‘none’ value using the ‘border’ property; this is not recommended as it hinders web accessibility
Font-weight: Boldening the link text for distinction
Bottom border: Adding a bottom border for additional control, experimenting with thickness, color, and style
There are many more CSS properties that can be adjusted, but the above are among the most commonly used.
Below, you can observe various hyperlink styles on Flickr. The text “Your Photostream” changes color when hovered over. The main menu links are styled as bold and without underlines.
The “Recent Activity” link resembles the standard blue, underlined hyperlink.
Here are some suggestions and widely-accepted best practices when dealing with the style and design of hyperlinks.
Simplicity in Link Styles
The standard blue, underlined hyperlink is still widely recognized and effective. It remains the default style and serves its purpose well.
Effective hyperlinks should be distinguishable from other text on a web page. According to usability researcher Dr. Nielsen, hyperlinks are most effective when they differ in color from other text and are underlined to indicate clickability. Nielsen also suggests that unvisited links should be “vivid, bright, and saturated.” It is self-evident that the opposite of these principles is also true. It is best to avoid underlining text that is not a link and to not use text that matches the color of your links.
Differentiate Link States
earlier, we discussed the five different link states.
Providing distinct styles for each link state helps avoid confusion for users and speeds up the visual recognition of hyperlinks on a web page.
Maintain Outlines on Active and Focused Links
By default, most browsers style hyperlinks when they are clicked or focused on. For example, in Firefox 3.6, the default style for :active is coloring the link red and surrounding it with a red dashed outline. The default style for :focus, which can be observed by using the Tab key, is a blue dashed outline.
Both of these visual elements aid in accessibility.
Users who cannot use a mouse must tab to hyperlinks to activate them (using the Enter/Return key). Imagine the difficulty of navigating through 100 links on a web page without visual cues if there were no outlines.
The same principle applies to active links; a different style provides users with the visual feedback that they have successfully clicked on the link.
Maintain Consistency in Hyperlink Styles
Usability and psychological principles support the idea that elements with similar functions should look alike.
For example, Gestalt psychology, which relates to human perceptions of design, suggests the concept of similarity; that is, “we group things perceptually if they appear similar to one another.”
To prevent users from having to question whether a particular piece of text is a link, it is a good practice to maintain consistent styling for hyperlinks and regular text.
Reserve Standard Hyperlink Styles for Hyperlinks Only
The universally recognized convention for hyperlinks is blue and underlined text. To avoid confusion, it is best to avoid using this style for regular text.
Here are some excellent examples of hyperlink designs that can inspire you to reevaluate the significance and potential of your own hyperlink designs.
Web Designer Wall
Web Designer Wall is a popular design blog created by Nick La.
The site’s hover effects for links in the sidebar feature a pencil-style circle around the text, adding an extra layer of intricacy to the overall design. La even provides a tutorial on how to recreate a similar effect.
There are also some creative hover effects on links in the navigation and blog posts.
Carsonified
Carsonified connects web designers and developers through year-round conferences worldwide. Their website exemplifies the application of consistency and similarity principles to links, with unique hover effects similar to their site logo throughout the page.
The top navigation menu stands out, featuring icon sets for each link.
Far Coast
Far Coast has a fully Flash-designed website. After the initial page load, all links perform a fade-in effect when moused over, indicating their interactivity and in line with best practices for styling different link states.
WordPress.org
The official WordPress site demonstrates consistent hyperlink styling throughout, with the main menu links looking great and utilizing CSS3 for additional detail. The main menu links also include descriptive title attributes to provide more information when hovered over.
Retinart
Retinart is a freeform blog with creative thoughts on graphic design and digital art. The design features an interesting hyperlink hover effect that combines the background and text colors, a classic technique that works well with the blog’s limited color scheme and enhances the visual grouping of links.
Unmatchedstyle
This web design gallery showcases a simple yet impressive layout that allows for easy browsing through its collection. One notable feature is the navigation links at the top of the page, which display a creative underlined effect on mouseover.
made my day
made my day is the personal blog of web designer Marc Hinse. The page features a variety of interesting hyperlink effects that seamlessly integrate with the blog’s overall design theme.
Build Conference
The Build Conference, hosted in Ireland, caters to designers and developers. Their website features a unique effect on the main navigation links, which fade in on mouseover using CSS3 properties.
LogoPond
LogoPond is a hub for logo and branding inspiration, featuring some excellent link styles, notably in the footer area where links to popular pages on the site are displayed. On hover, a flipped background and text effect is applied, similar to the Retinart blog.
Suikerdraakje
Suikerdraakje is an e-commerce store for baby supplies and toys. The design is remarkable, with many illustrations filling the layout. The main navigation links display a rounded corner background shift on mouseover, a unique effect among websites.
Nintendo
Nintendo, known for innovation, showcases this on their corporate site, where the main navigation links fade into a light blue glow on mouseover, reminiscent of the blue LEDs on the Wii.
Stephen Caver
