the ux of content

www.scroll.co.uk

© 2015 Scroll LLP All rights reserved

@ScrollUK

@rahelab

www.scroll.co.uk

© 2015 Scroll LLP All rights reservedScroll @ScrollUK

@rahelab

The UX of ContentDelivering better user experiences

Photo credit: Rahel Anne Bailie

www.scroll.co.uk


@ScrollUK

@rahelab

RAHEL ANNE BAILIEChief Knowledge Officer

Scroll (UK)

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Clumsiest person ever

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Cursed by technology

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Point taken:

Without content,

the UX falls flat

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Content completes the UX

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


What do UX designers do?

www.scroll.co.uk


@ScrollUK

@rahelab

User Experience Honeycomb – Peter Morville

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Similar for content designers

www.scroll.co.uk


@ScrollUK

@rahelab

Content Strategy Honeycomb – Rahel Anne Bailie

Relevant

Timely

Accurate

Informative

Standards-

based

Engaging

Value

www.scroll.co.uk


@ScrollUK

@rahelab

gov.uk/service-manual/the-team/content-designer.html

Content designers must be able to:

•identify user needs – based on:

•legacy content•source material provided by policy colleagues•feedback from users and stakeholders•analytics data both from the site and from search engines

•understand and incorporate the results of user testing•gain an in-depth knowledge of a wide range of subjects – so they can make informed decisions about the best way to present information to users

•develop content plans and strategies – high-level plans showing how the identified user needs

will be met

•write great content – in plain English, optimised for the web and according to house style

•edit content – making sure the site remains accurate, relevant, current and optimised both for users and search engines•review the work of other editors – to make sure consistency and excellence is maintained across the site•communicate the principles of good content design to others in the organisation

•make tough decisions and work hard for the user – grappling with complicated legislation and turning it into

clear, clean, crisp web content (that still has enough depth to be useful)

•work with developers and designers to create better solutions – for example, writing logic and content for smart

answers•publish content – using various systems

•advocate for the user and act as a guardian for the site – pushing back on change requests that don’t contribute

to meeting user needs and incorporating change requests that do•build positive relationships with others inside the team and in the wider organisation•innovate and anticipate – excellent content designers are excited about the possibilities of web content and contributing to the digital sector’s future

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk

© 2015 Scroll LLP All rights reserved@ScrollUK

@rahelab

Add value through content7

www.scroll.co.uk


@ScrollUK

@rahelab

From: Elcom-Tech.com

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


What does content UX

look like?

Or sound like?

Or read like?

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@rahelab

Content must be relevant1

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@ScrollUK

@rahelab

19 replies, no answer

www.scroll.co.uk


@ScrollUK

@rahelab

Developer ECM – Web

Content

Digital Content

Assistant – Year FTC

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Relevance

Satisfaction

(Useful)

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@rahelab

Content must be accurate2

www.scroll.co.uk


@ScrollUK

@rahelab

From: Citymapper

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Content accuracy

Trust

(Credible)

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@rahelab

Content must be informative3

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@ScrollUK

@rahelab

Betfair World Series of Poker

Series of Poker Series and Ep

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Informative

Engagement

(Useful)

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@rahelab

Content must be timely4

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Timeliness

Empowered

(Usable)

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@rahelab

Content must be engaging5

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Engagement

Respect

(Desirable)

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@rahelab

Content must use standards6

www.scroll.co.uk


@ScrollUK

@rahelab

To display content in ways helpful to users, it must:

• Converge (show content from multiple sources)

• Integrate (embed data into content)

• Syndicate (send content out on demand)

To do that, content needs these technical qualities:

• Structured to a standard (for re-use and automated delivery)

• Well-formed (using recognised schema)

• Semantic (for filtering, processing, findability)

• Editorial rigour (consistent vocabulary, genre-appropriate)

The effect on user experience

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Heads: Editorial standards

www.scroll.co.uk


@ScrollUK

@rahelab

Writing for humans – schemas and patterns

Basic conventions – editorial patterns:

• Titles are for sections; subtitles are for subsections

• Contextual introductions

• Lists for like items; numbered lists for steps

• Tables to present data

• Headings on tables; captions on images

Use the conventions specific to content types – common ones:

• News releases

• Tasks

• Recipes

Helps with comprehension; makes content accessible to everyone

www.scroll.co.uk


@ScrollUK

@rahelab

Writing for humans – minimalism

Method of writing that supports “skip, skim, and scan” of content:

• Action-oriented: assume users are on a mission

• Anchored in the task domain: write discrete topics for known user activities

• Support errors: know where users fumble, and address the issues up front

• Support multiple uses: reduce “noise” and support users as they “read to do”

• Readers use content out of sequence

Gives users just-in-time information, reduces interference with the user’s sense-making process; doesn’t try to prevent all mistakes but does help users who make mistakes

www.scroll.co.uk


@ScrollUK

@rahelab

Writing for humans - plain language

Basic principles:

• Use active voice – makes meaning more clear

• Use first-person, informal address

• Compose short sentences with simple structures

• Limit sentences to a single concept

• Use common words, and fewer words when possible

• Keep your message brief and focused

• Adopt a conversational tone

Keeps it simple without dumbing it down; allows readers to scan for

the information they want

www.scroll.co.uk


@ScrollUK

@rahelab

Writing for humans - controlled language

Disciplined use of word forms:

• Remove homonyms

• Remove synonyms

• Remove polysemous words

Controlled grammatical constructions:

• Use active voice to be clear about assignment

• Simple syntax (avoid extraneous phrases)

• Clear modifiers (placement and word usage)

• Parallelism (for clarity of meaning)

• Use schema consistently (eg: list features in the same order)

• Avoid idiom, pronouns

Creates clarity and precision; allows for content re-use

www.scroll.co.uk


@ScrollUK

@rahelab

Writing for humans – translation-readiness

Translation readiness eases translation and costs, but primary reason is

about reader clarity:

• Consistency and clarity reduce the cognitive load for everyone

• Users expect good brands to have good content in their language

• Many readers have to read in their second or third language

• Some readers will use machine translation or dictionaries

• Break up sentences more than usual

• Minimise text, and use present tense

• Avoid noun strings, hard-to-translate sentence constructs (passive

voice, gerunds), and abbreviations (such as e.g. or i.e.)

• Avoid jargon, idiom, and other culturally-specific terms

• Use terms and phrases consistently

Can reach more of your audience, even if content is never translated

www.scroll.co.uk


@ScrollUK

@rahelab

Writing for humans – accessibility

It’s the right thing to do; aside from that:

• Helps people using adaptive technology (screen readers, weighted

font for dyslexia, for example)

• Helps people with low literacy skills, dyslexia, and similar issues

• Helps machines read content (good for SEO)

Accessibility issues are handled in different ways:

• By the Web CMS and other output mechanisms (example: no

blinking, or alternatives to Flash elements, fonts for dyslexia)

• Technology and authoring: (example: alt text musts be provided,

and provisioned in the CMS

• Authoring (example: breaking up text with headings)

Accessibility guidelines is a legal issue; and mitigates risk of lawsuits

www.scroll.co.uk


@ScrollUK

@rahelab

Writing for humans – content re-use

Create content “building blocks”:

• Consistent tone and voice

• Consistent vocabulary

• Complimentary grammatical structures

• Understanding of the re-use contexts

• Tagged with “attributes” to allow automated re-use

• Semantically structured to facilitate machine understanding

Content components can be assembled in multiple ways and

used in multiple contexts

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Tails: Technical standards

www.scroll.co.uk


@ScrollUK

@rahelab

Writing for computers – content types

Most content types have associated standards:

• Copywriting – displayed text and its metadata

• Taxonomy – the terminology, navigation terms

• Images – captions, call-outs, and the metadata

• Infographics – titling, captions, call-outs, and the metadata

• Videos – titling, captioning, transcription, and the metadata

• Podcasts – titling, transcription, and the metadata

• Transactional copy – navigation text, interface text, labels,

error messages, help messages, administrative messages

www.scroll.co.uk


@ScrollUK

@rahelab

moz.com/blog/101-google-answer-boxes-a-journey-into-the-knowledge-graph

www.scroll.co.uk


@ScrollUK

@rahelab

Writing for computers - findability

Standards and structure:

• Title tags and URLs

• Concise opening sentence with keywords

• Closed tag pairs on paragraphs, lists, and so on

• Semantic tags on as many elements as possible

• Microformats

• Call-to-action links

• Compressed images

• Possibly video

moz.com/ugc/google-s-direct-answers-how-to-keep-visitors-coming-to-your-site

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Standards

Efficiency

(Accessible)

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


@rahelab

Add value through content7

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Match content to reading habits

www.scroll.co.uk


@ScrollUK

@rahelab

www.aacc.edu/tutoring/file/skimming.pdf

Reading habits

Skip, skim, and scan

www.scroll.co.uk


@ScrollUK

@rahelab

www.cisco.com/en/US/docs/routers/access/800/850/software/configuration/guide/routconf.pdf

www.scroll.co.uk


@ScrollUK

@rahelab

www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style

Reading habits


Use standard editorial conventions

www.scroll.co.uk


@ScrollUK

@rahelab

houseandgarden.co.uk

www.scroll.co.uk


@ScrollUK

@rahelab

www.youtube.com/watch?v=EtHNDAoQLSQ

Reading habits


Use predictable editorial conventions

Let users read before “interrupting” with links

www.scroll.co.uk


@ScrollUK

@rahelab

xe.com

www.scroll.co.uk


@ScrollUK

@rahelab

boxesandarrows.com/implementing-a-pattern-library-in-the-real-world-a-yahoo-case-study/

Reading habits




Provide predictable content

www.scroll.co.uk


@ScrollUK

@rahelab

foodnetwork.com

www.scroll.co.uk


@ScrollUK

@rahelab

www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible.html

Reading habits




Provide predictable content

Explain through feedback

www.scroll.co.uk


@ScrollUK

@rahelab

three.co.uk

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Content can drive value

in multiple ways

www.scroll.co.uk


@ScrollUK

@rahelab

www.scroll.co.uk


Content is at the heart of UX

www.scroll.co.uk


@ScrollUK

@rahelab

London, UK

By email:

[email protected]

[email protected]

Twitter: @ScrollUK / @rahelab

By telephone:

UK +44 (0)7869 643 685

Speaking and workshops:

bailie.com

Scroll

the ux of content

Design