1 post tagged “usability”

From a usability POV a hypertext link can have four different states. Webcredible describes these as follows:

Top tip: Use styles for all link states

Depending on various user actions, a link can be in a number of different states. All too many website designers seem to forget this, only styling links for their default view. Ideally the default link colour should be in a high contrast colour that stands out from non-link text so users can easily spot links on the page. Declaring alternate colours and/or background colours for their other states is also very beneficial:

1. Visited state
   When links become visited their colour should ideally change to a more saturated colour. This way users know exactly where they have and haven't been. As such, they won't inadvertently go back to where they've already been and can easily return to pages of interest they previously visited.
2. Hover state
   Users often screen-mine with the mouse when browsing through a web page, that is, point the mouse at where they're looking on the screen. Changing the appearance of links when the mouse hovers over links provides users with immediate feedback as to what is and what isn't a link when they do this.
3. Active state
   An active state for links is also useful as it provides users with feedback that a link has indeed been clicked. This is particularly true when users have to wait a while for a new page to load (e.g. if they're on a dial-up connection or it's a very heavy page). Active states are particularly effective when the background colour is changed.
4. Focus state
   Most websites fail to provide a focus state for links yet doing so is so important for keyboard-only users. By changing the background colour on focused links users tabbing through web pages can easily see where they are on the page.