UX design for healthcare

We’re often asked what our design process looks like for the health care sector, usually by the NHS or health tech organisations. For the most part we follow the general GDS guidelines in terms of phases of the project, deciding on the specific data collection methods depending on the time and resources available.

However when it comes to healthcare many more accessibility considerations come into play.

Use of headings the right way

Not only are headings important for skim reading but they are particularly important for some people with access needs. Headings reflect the page structure with a single H1 fo the main heading of the page and sub-sections of headings (H2, H3, H4) depending on the depth of the content.

Page structure

It’s a good idea to help individuals who utilize assistive technlogy comprehend the structure of the page and explore it using “landmarks”. Landmarks are names that are hidden but serve to label different sections of the page. Landmarks likewise help users browsing different pages avoid multiple of the same sections.

Skip Links

This is one is for the keyboard only users. Skip links help the user go to straight to the main content of the page, bypassing the navigational content.

You can additionally add a skip link to the beginning of a list of form fields or links (e.g. before 30 radio boxes in a survey). Then those who have keyboard-only access with a switch or head wand can skip to the main section and don’t have to keep pressing the same key.

Skip links are by default invisible, unless a keyboard press activates them.

Check colour contrast

Reading text that’s the same colour as its background is no fun for anybody, especially for those with accessibility issues. It’s far easier to read and interact with content containing colours that contrast well. We try to meet level AA for contrast with our target set on AAA.

Ideally we’re looking at a contrast ratio of at least:

  • 4.5:1 for small text (smaller than 24px, or 19px if bold)
  • 3:1 for large text (larger than 24px, or 19px if bold) and components (like a text input field) and graphic elements (like an icon)

For AAA a minimum of:

  • 7:1 for small text (smaller than 24px, or 19px if bold)
  • 4.5:1 for large text (larger than 24px, or 19px if bold) and components (like a text input field) and graphic elements (like an icon)

You can test it out different colour schemes here at Web Aim.

Define focus styles

When using keyboard-only or a similar device it helps to know which area of the page you’re on and that you can interact with it. The default method the browser uses is for the most part, less clear than it should be.

Be sure that the focus is clearly visible. You can do this by adding something, like an outline, or perhaps you can alter the colour of part of the component. Also check the colour contrast of the focus state when implementing into your design.

Discuss with your team about adding new components

If you have an idea for a new component to add your design guidelines, be sure to test existing ones to confirm there is a need for a new component. Discuss with your team whether you have enough suitable evidence a new component is required based on user needs. You’ll want ask these questions. Is the component accessible to your audience? Can you test the component from a usability and accessibility stand point? Is the component maintainable and upgrad-able? What have you learnt from your research?

Clear link and form control names

This is more of a copywriting tip, but ultimately any links or buttons should be understandable from a different perspective. Each link should clearly describe where it will take you. For example: “Read more about how to deal with stress.”, rather than more the ambiguous “read more” and “find out more”.

Label form fields clearly

Each form field should tell the user what information they need to enter. This made sound obvious, but put the label next to the form field so that the user understands which field it belongs to.

Not all labels need to be visible, for example a search icon maybe a suitable way from a visual standpoint to show that a form input allows users to search your site. However this won’t be enough for screen-readers, a better approach would be add an invisible label saying for example “Search the Sonic UX website” so users know the purpose of the input.

Grouped form items such as radio boxes should have a legend that describes the options available, this is typically a question such as “How do you prefer to be contacted?” You can check if your code is working by simply clicking on the label, which will apply a focus style to your form field.

Show errors in forms

Error messages should clearly describe what’s gone wrong and how to sort out the problem (e.g. Enter a postcode, like AA1 1AA)

They should be included wherever there’s a problem with the users input and should be visibly connected with that field.

If you’re placing an error summary above form, be sure that error links to that particular form field, this helps users who rely on keyboard navigation to find which form input to correct.

Use more than colour or position to convey meaning

For example, “click on the red button on the left”, maybe clear enough for people able to view where the button is, but for those with colour blindness or relying on screenreaders, this means not being able to distinguish the colour or the position on screen. To communicate with people who cannot see well or distinguish colours, you may need to:

  • word things more clearly
  • use additional cues, for example, text, colour and icons

Avoid using text inside images

Note that the same doesn’t apply to logos

Users, particular those using screen-readers, need maximum information in text format, this is so they can adjust its size, spacing or formatting.

Avoid including text within raster image formats such as PNG, JPEG or GIF. When users zoom in, the text doesn’t scale in the same way, if at all. Instead put text in HTML and style using CSS or as alternative use an SVG which is scalable.


Use alternative text to describe images

For anyone who can’t see an visual image, they’ll need another way to understand the content. Be sure to add “alt-text” to explain what the image contents. Just a few keywords should do.

The same goes for functional images (such as buttons and links)

Multimedia should be accessible too

Some people prefer to absorb information via visual or auditory means rather than text. For others with example dyslexia or asphasia, this can become a necessity.

If using any video and multimedia, ensure that:

  • For those using keyboard and screen reader users, the multimedia controls are accessible (e.g. play, pause and skip buttons buttons, location sliders)
  • If seeing or hearing is not possible, users can still understand what’s happening, e.g. through captions, transcripts.

If you have any queries about UX for healthcare, feel to get in touch via our contact page.

Leave a Reply

%d bloggers like this: