Buttons and links are important elements to consider while designing a website as they represent a call to action and guide the user on what to do next. Icons, on the other hand, are a symbolic depiction of objects and can be a powerful tool of communication as they eliminate the language barrier and are promptly noticeable if well used. The following
guidelines should be considered to properly make use of them:
- The style of the buttons and icons should reflect the visual identity of the government entity and the overall color theme.
- They should be large enough to quickly convey information and hold the users’ attention.
- Icons should be fairly simple and their meaning should be intuitive and straightforward.
- It must be ensured that a proper aspect ratio is applied whenever enlarging an icon or button.
- Images should not be used for buttons, since it is not possible to increase the text on them.
- Background images, that contain no text, may be used on buttons and navigation elements to enhance the visual look.
- Buttons and icons that are images must have the same content in “alt” text, as text-only browsers would not access them. See section Text Alternatives for Non-Text Content
- Icons should not be a substitute to present major content (without “alt” text given to it).
- Buttons and links must have two different states in order to convey their functionality and to indicate whether they are active or not.
- A rollover state: when the user hovers over the Button or Link.
- A down state: when the user selects the Button or Link.
- Text links should have an additional one called a visited state: when the user has previously clicked on the link.
- Text links should be underlined, with certain exceptions, as this approach became a strong convention on the Internet.
- Users should be informed if a button or link will open in a new window.
Example:
Text link: “Journals on the Internet – guidance for authorities (PDF 2.9 MB, new window).”
Or the ‘new window’ may be replaced with a graphical arrow.