Imagine you're on a fast-moving underground or metro train looking out of the window as you emerge into a station. Initially, all you see is a fast-moving blur of light and shapes. As the train starts to slow, you get a sense of more things; how crowded the platform is, colours on billboards. As the train slows more, you start to pick out groups of people or an advert for a particular film you recognise. Slower still and individual people come into focus, exit signage. As the train stops and the doors open, suddenly you're in the detail; part of it.
This is similar to how people skim web pages; as they scroll down (a low interaction cost), they're only noticing big things - headlines, images, movement, calls to action. When something catches their attention, they'll slow and start to look more closely at what surrounds it. The detail comes into focus. With this in mind, here are a few useful content & design principles aimed at making the most of this 'skim-scrolling' behaviour.
Satisfy key user journeys
- Make sure you're prioritising your key user objectives, and making the path to them clear and obvious. Make the key 'conversion' objective highly visible.
- Watch page length - people will scroll speculatively, but not for long.
Treat headings as content, not as labels for content
- A strong typography hierarchy is critical to grabbing attention, and it gives people 'layers' of content to focus on - heading (big), then standfirst/summary (medium), then detail (small).
- Headings are also an opportunity to communicate your key messages; instead of a heading that reads something like "Our approach", explain your actual approach at a high level. Even if people don't stop and read more, at least you've given them some content value.
- Pay attention to readability and recognition - use plain language and key terms in headings that will resonate with your audiences.
- Content in headings is good for SEO too!
Direct attention to where you want it to go (and not where you don't!)
- Try and maintain a consistent left edge to your layout for headings and text content. It's much easier for people to skim content as they scroll if they don't have to move their eyes left and right to pick up headings; peripheral vision can pick up other types of visual engagement, but not so much for text.
- Effective and selective use of motion can draw attention to the important content. Take care not to overuse scroll-triggered motion, as it can be overwhelming (remember to respect 'prefers-reduced-motion' in the build!), and remember that just because some content lends itself to motion, it doesn't automatically make it a good candidate for it.
- Introduce visual variety - find high-value opportunities to use call-outs, highlights, quotes, imagery and other creative elements to provide controlled emphasis, visual interest, direction and change of pace.
Use design consistently to reinforce meaning
- Use visual treatments consistently so that users can begin to quickly recognise a type of content at a glance by its visual styling. For example, always using a particular colour for calls to action, or a particular design treatment for links to news articles or case studies.
Be intentional about interaction
- Hiding content behind interaction introduces a persuasion job to do. and impacts on discoverability. Make sure you're giving away key content pre-interaction.
- Prefer low interaction cost over high; minimise the number of choices being presented, and make the pay-off or reward clear (and worth it).
- Take care not to artificially promote or demote content because of interaction choices - in 'one of many' interactions like tabs or carousels, the first item will always get significantly more visibility than the others.
Be careful about trying to over-impress
- Clever technical or creative solutions might impress users viscerally, but that's no use if people can't achieve what they're trying to do.
- Don't intefere with established user expectations about navigation, interaction or scroll behaviour.
