Content guidelines

Unique to the web are certain types of content that support user interaction.

On this page we've compiled a list of many of the top do-s and don't-s.

Read more and click here

It's common to see phrases like "read more" and "click here" at the end of a section or container. These typically provide sub-optimal user experiences and lower conversion rates. It's better to add links within the content itself.

GOV.UK advises:

When writing a link, make it descriptive and front-load it with relevant terms instead of using something generic like ‘click here’ or ‘more’. Generic links do not make sense out of context or tell users where a link will take them. They also do not work for people using screen readers, who often scan through lists of links to navigate a page. It’s important the links are descriptive so they make sense in isolation.

Nielsen Norman Group has further guidance on how linking to content.

The issue of "read more" links has come up several times within VF discussions and we've found that reducing redundant links is both better for user experience and saves on page size.

Decorative icons vs illustrations

Icons are very popular within the Visual Framework v1 as they provided a convenient and easy way to decorate content. However they come at a cost in performance and, more importantly, clarity.

When an icon is not paired with text it must be able to convey meaning, and "universal" icons are rare. So icons are not a replacement for text links and often result in the use of more space.

Icons should be viewed as illustrations and not shorthand for text and labels, so we typically recommend going without icons when possible.

Nielsen Norman Group has further guidance on the usability and best practices when using icons.

The Visual Framework is planning a more robust approach for decorative iconography later in 2021.

Opening content in new tabs

The web allows for links to target a new tab or window when opening. The recommended default (and what most users want) is to not open in a new browser tab.

Before setting links to open in new tabs, you should consider (and, if possible, observe) if a user's task benefits by opening in a new window.

Example: you might open a link in a new windows if a user is filling in a long form and clicks on a "help" link. The user probably does not want to be taken away from their partly completed form.

If you do open links in new tabs, you should try to label it as such: I'm an example (opens in a new tab)

White space

The Visual Framework is not just about providing "generic" good defaults, we consider what would be good defaults for users navigating the usually complex topics on life science websites. A major priority is to make site as easy-to-use as possible and that often means reducing their cognitive load.

White space is critical to helping users navigate complex information. The extra spacing provides room for orientation and eases the ability to read.

## In this section
We focus support on major browsers in use by 95%+ of our audiences, and we ensure the site is navigable and usable by the remaining 5%. Think of components as lego blocks you can use to build the look and content of your sites. Think of patterns as assembled packages of behaviour. This codebase includes a folder and file creation tool. The Visual Framework delivers much of its value through Sass. Regardless of where, we welcome contribution, ideas and constructive criticism. It's best to not let CSS do the image cropping. We use "just enough" JavaScript in the Visual Framework. For the language and spelling of documentation and code. This project is designed to be used by organisations with experienced developers delivery life science websites. Each Visual Framework component carries its own semantic versioning. Unique to the web are certain types of content that support user interaction.

Find an issue on this page? Propose a change or discuss it.