Download - 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
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
RAHEL ANNE BAILIEChief Knowledge Officer
Scroll (UK)
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Clumsiest person ever
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Cursed by technology
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Point taken:
Without content,
the UX falls flat
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Content completes the UX
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
What do UX designers do?
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
User Experience Honeycomb – Peter Morville
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Similar for content designers
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
Content Strategy Honeycomb – Rahel Anne Bailie
Relevant
Timely
Accurate
Informative
Standards-
based
Engaging
Value
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved@ScrollUK
@rahelab
Add value through content7
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
What does content UX
look like?
Or sound like?
Or read like?
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved@ScrollUK
@rahelab
Content must be relevant1
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
Developer ECM – Web
Content
Digital Content
Assistant – Year FTC
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Relevance
Satisfaction
(Useful)
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved@ScrollUK
@rahelab
Content must be accurate2
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Content accuracy
Trust
(Credible)
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved@ScrollUK
@rahelab
Content must be informative3
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
Betfair World Series of Poker
Series of Poker Series and Ep
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Informative
Engagement
(Useful)
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved@ScrollUK
@rahelab
Content must be timely4
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Timeliness
Empowered
(Usable)
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved@ScrollUK
@rahelab
Content must be engaging5
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Engagement
Respect
(Desirable)
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved@ScrollUK
@rahelab
Content must use standards6
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Heads: Editorial standards
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Tails: Technical standards
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
moz.com/blog/101-google-answer-boxes-a-journey-into-the-knowledge-graph
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@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
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Standards
Efficiency
(Accessible)
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved@ScrollUK
@rahelab
Add value through content7
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Match content to reading habits
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.aacc.edu/tutoring/file/skimming.pdf
Reading habits
Skip, skim, and scan
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.cisco.com/en/US/docs/routers/access/800/850/software/configuration/guide/routconf.pdf
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style
Reading habits
Skip, skim, and scan
Use standard editorial conventions
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.youtube.com/watch?v=EtHNDAoQLSQ
Reading habits
Skip, skim, and scan
Use predictable editorial conventions
Let users read before “interrupting” with links
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
boxesandarrows.com/implementing-a-pattern-library-in-the-real-world-a-yahoo-case-study/
Reading habits
Skip, skim, and scan
Use predictable editorial conventions
Let users read before “interrupting” with links
Provide predictable content
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible.html
Reading habits
Skip, skim, and scan
Use predictable editorial conventions
Let users read before “interrupting” with links
Provide predictable content
Explain through feedback
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Content can drive value
in multiple ways
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
Content is at the heart of UX
www.scroll.co.uk
© 2015 Scroll LLP All rights reserved
@ScrollUK
@rahelab
London, UK
By email:
Twitter: @ScrollUK / @rahelab
By telephone:
UK +44 (0)7869 643 685
Speaking and workshops:
bailie.com
Scroll