search

nhsuk / nhsuk-frontend

NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.
https://nhsuk.github.io/nhsuk-frontend/
MIT License
616 stars 107 forks source link

Image component: 2/3rds with on larger screens #492

Closed chrimesdev closed 5 years ago

chrimesdev commented 5 years ago

Discussion from https://github.com/nhsuk/nhsuk-frontend/issues/171

Original question: by @Demotive

Out of interest, why is the width set at 2/3 for larger screens? One could forsee uses where this wasn't the case?

Original response: by @bencullimore

Here are some notes as to why images are set to 2/3 on large screens:

Content team's needs Upon investigating our content teams needs for using images they suggested that the images should flow with the text content; not appear too prominent or separate (isolated). They also recommended that captions are as important as the images themselves, so must reflect this in their importance on the page.

How to present images We found gallery views (images side by side) confusing to users - this also jarred with the content teams needs for the images to appear as part of the content. With gallery views, users either missed the images in the right-hand column or they didn't know how to interpret the sequence. To simplify this we recommend stacking images (if part of the content).

We also found users clicking images in gallery views - expecting them to appear larger in a pop-up modal. By increasing the size of the images, and having them stacked in one column (not in two) we didn't see anyone clicking on them to expand in testing.

Hypothesis If the images are three quarters the reading space Then users will understand their place within the page (read as part of the text), and if multiple images are used, where the image sits in sequence Because the images flow with the content

Research findings Images tested well with all users, stating that they helped them understand how symptoms might appear and support written content (usability lab, Leeds, 20th June 2018)

chrimesdev commented 5 years ago

Does this need putting on the NHS digital service manual @bencullimore?

chrimesdev commented 5 years ago

This is probably more suited for the NHS digital service manual backlog: https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/110