Optimizing Content Alignment for Better Readability
Enhance readability by aligning content properly for different language directions. Left alignment aids users in smoothly reading content, especially crucial for accessibility. Avoiding right alignment or justified text helps in maintaining legibility and usability, backed by evidence from various sources.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Left align content (for languages that run left to right) https://github.com/nhsuk/nhsuk-service-manual- community-backlog/issues/297 Presented by: Samantha Saw
What/Why 2
What/Why What Align content to the left (for languages that run left to right) Align content to the right (for languages that run right to left) Why Help users read content To back up encouraging teams to align content to the left 3
Evidence Section subhead 4
F-shaped pattern In left to right languages, users anchor their eyes to the left after reading each sentence. This is known as reading in a F-shaped pattern. Changing this pattern will cause the user to have to make an effort to find where a sentence starts. Users could be annoyed by the change in pattern, or worse, not understand the content. NNG Our recent round of eyetracking research also showed that in right-to-left languages such as Arabic, people read in a flipped F-shaped pattern (as we had predicted but had not seen prior to this research). 5
Accessibility Some users use screen magnification. Users with screen magnification at 200% may not see that text is aligned out of the screen and skip a heading Left align text, without justification - British Dyslexia Association Short-term access needs - In the context of health, users need to be able to quickly and easily read and understand content. Misunderstanding or missing content can have a considerable health impact 6
Accessibility Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create "rivers of white" running down the page, which can make the text difficult for some people to read. From W3C https://www.w3.org/WAI/WCAG21/Understanding/visual -presentation.html 7
GOV.UK Align text left for maximum legibility. Avoid right aligning or justifying text. From GOV.UK Guidance: Accessible communication formats Make sure your Continue button is aligned to the left so users do not miss it From Question pages: https://design- system.service.gov.uk/patterns/question-pages/ 8
NHS Our button guidance says Align the primary action button to the left edge of your form. From Buttons https://service-manual.nhs.uk/design- system/components/buttons Align text to the left margin and avoid justifying text From NHS England https://www.england.nhs.uk/wp- content/uploads/2017/08/implementation-guidance.pdf 9
Where we could add the guidance 10
Where we could add the guidance https://service-manual.nhs.uk/design-system/styles/typography https://service-manual.nhs.uk/design-system/styles/layout https://service-manual.nhs.uk/content/formatting-and-punctuation 11
Thank You @nhsdigital company/nhs-digital www.digital.nhs.uk 12
