Page layout and content guidance for editors working with SharePoint Online sites
SharePoint Online offers content editors many options for changing page layouts. It's so flexible that content editors may unintentionally create pages that are difficult to use. Some choices risk making the content inaccessible.
Content editors working on University websites and intranets should all be familiar with writing for the web techniques. These apply regardless of your site's content management system (CMS).
The layout of a page and how the content is written both contribute to good, or bad, user experience (UX).
Research-based principles for making content and page layout choices
Laws of UX describe the principles behind many website designs. They can help us make choices that help our users.
Research into how people read on screens shows that people scan to find what they want. Eye-tracking studies show that we typically scan in an F-shaped pattern. This means we pay more attention to headings, subheadings and text on the left of our screen.
Less is more helpful
Several principles tell us that people find it unhelpful if too much information is presented at the same time.
Break up lengthy content into smaller chunks. For example, break up:
- large lists into smaller organised logical subsets
- complex tasks into smaller steps
- long prose into smaller paragraphs with sub-headings
If you have lots of information, use the inverted triangle principle to put the most important information first. Background or less important information should come lower down the page. You could consider splitting content across more than one page. It's important to use subheadings to guide the reader through your content.
Lists
As described in the University style guide, use bullet points where the sequence of items in a list is not important. Use numbered lists where the sequence is important.
Remember that people are more likely to remember the first and last items. This is known as serial position effect.
Calls to action
Make it easy to see what to do. Resist the urge to add every possible link to the page. Too many options increase the cognitive burden. You need to select what will be helpful to your users.
If the purpose of a page is to get your users to another page, use the 'button' webpart to make the link obvious. Buttons are a familiar concept and easy to see when scanning.
Highlighting page sections
Consider how you use the background colours on different 'sections' of the page. Users may perceive background colours, dividing lines or boxes as grouping elements together and assume they are related.
People tend to focus on the odd one out. We can use this where appropriate to make a recommended choice visually different from others. Similarly, where we have a list of equally weighted items, we must be careful not to make any stand out.
Columns and alignment
Aligning important elements to the left makes it easier to spot them when scanning.
Use the one-third right section format to make text easier to read than full-width. Avoid putting too much into the righthand side.
The three-column option in SharePoint Online is difficult to use effectively because of these principles. Only use it for short, simple, similarly sized elements.
Remember, SharePoint rearranges your page's content on a mobile device one 'section' at a time. All of the content in one section will be stacked, taking columns from left to right as you see them on a desktop. Then it will move on to the next section. This is important for understanding the order in which users will see information. It may be different to other content management systems you have used.
Always check how your content appears on a mobile device.
Consistent web pages are best
People spend more time on other websites than they do on yours and they'll expect your website to follow the same conventions. Use simple layouts that are easy to scan. Don't be tempted to make your page designs unusual where there is no need. A well-written page title, summary, explanation and link in a button is a great option.
Use the 2i checklist to review your pages. Following the list will help you to write consistently.
Style common webparts consistently across your site. People assume visually similar elements are related or work the same way. Agree on conventions for your site if there are multiple content editors.
Underlined text on websites conventionally means that it is a hyperlink. Avoid underlining on other text.
Make your content accessible
Some of these points, and others, are covered in the Content Community's introduction to accessible content.
Colour and contrast
Some colour combinations and lack of contrast between colours cause accessibility issues. Follow these rules:
- Avoid webparts that present text over an image without a solid background.
- Avoid editing fonts and colours that are otherwise set by your site's theme.
- Never convey meaning through colour alone.
Remember that you cannot control the way SharePoint will shift text and images to display on different screen sizes and devices. The part of the image behind the text on your screen may not be the same on others.
Text and format
Ensure your content is formatted correctly for screen readers by using SharePoint's editing toolbar for:
- bullet-pointed lists, also known as unordered lists
- numbered lists, also known as ordered lists
- headings
Avoid italicising text because it is difficult to read for people with dyslexia and some conditions affecting people's sight.
Use plain English wherever possible. Avoid metaphors or unusual idioms. These may not be understood by neurodiverse users and people who speak English as a foreign language.
Images
- Remember to add descriptive alt text to images that convey meaning.
- Avoid text in images - especially when it may be too small to read comfortably on mobile devices.
- Crop images to the correct dimensions before you upload them and set the focus point to reduce unfortunate cropping and resizing issues.
You can find out more about image sizing and scaling in SharePoint Online on Microsoft support site.
If the content does not need an image, you do not have to include one. You don't have to use the image-heavy hero webpart on your homepage. Provide links using a different option if the content doesn't have relevant images.
Get support
Sign up to join the Content Community, the network for content creators across the University. The Content Community run regular training events to help you improve your content. You can also complete the Content Community essentials training which includes information about writing for the web and creating accessible content.