Content and Cognition
Ian Pouncey

Content and Cognition
• How we should use content
• Using content in multiple forms
• What to avoid

Consistency
• Navigation
• Fonts and font sizes
• Interactive elements: links and buttons

Structure
• Headings
• Lists
• White space
• Clear differentiation between content types

Focus
• Avoid
• contrasting blocks of colour
• unexpected sound
• moving content
• pop ups

Readability
• Adequate text size and line height
• Limited line length
• Colour contrast
• Short paragraphs

Transformability
• Supports text re-sizing
• Supports user styles
• Works without images or styles
• Provide an API or feed

Content
• Spelling and grammar
• Definitions of terms
• One subject
• Summarise

Let’s make something

Generated content
• Content inserted with CSS.
• Not read out by screen reader software.
• Use only in cases where the content
doesn’t make sense on an unstyled page.

Generated content
<p class="instructions-search">You can search this site
using the search form provided</p>
.instructions-search:after {
content: ", which is below and to the right of the logo.";
}

Generated content

Images

Audio and video
• To limit the amount of work required you can combine the audio with
the visual. Start with an audible version, and then repeat with a visual
demonstration.
• Keep it simple - A plain backdrop, not too much movement, speak
simply and clearly.
• Play only on demand. Automatically playing audio visual content is
distraction to many users, annoying to most others
• Include HTML controls to start and stop your movie - flash is still not
universally accessible.

Distractions
• Avoid busy backgrounds

Distractions

Distractions

Tasks
• Don’t assume that ‘simple’ tasks are easy
• The same applies to ‘What colour is the
sky’ type questions

Me
• http://ianpouncey.com/
• @IanPouncey