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)
davidhunter08
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)