'

The UX of Content

Понравилась презентация – покажи это...





Слайд 0

Photo credit: Rahel Anne Bailie The UX of Content Delivering better user experiences Scroll www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLPrights reserved © 2015 Scroll LLP All All rights reserved @ScrollUK @rahelab


Слайд 1

RAHEL ANNE BAILIE Chief Knowledge Officer Scroll (UK) www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 2

Clumsiest person ever www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 3

Cursed by technology www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 4

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 5

Point taken: Without content, the UX falls flat www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 6

Content completes the UX www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 7

What do UX designers do? www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 8

User Experience Honeycomb – Peter Morville www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 9

Similar for content designers www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 10

Relevant Standardsbased Accurate Value Engaging Informative Timely Content Strategy Honeycomb – Rahel Anne Bailie www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 11

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 gov.uk/service-manual/the-team/content-designer.html www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 12

7 Add value through content www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 13

From: Elcom-Tech.com www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 14

What does content UX look like? Or sound like? Or read like? www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 15

1 Content must be relevant www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 16

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 17

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 18

19 replies, no answer www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 19

Developer ECM – Web Content Digital Content Assistant – Year FTC www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 20

Relevance Satisfaction (Useful) www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 21

2 Content must be accurate www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 22

From: Citymapper www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 23

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 24

Content accuracy Trust (Credible) www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 25

3 Content must be informative www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 26

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 27

Betfair World Series of Poker Series of Poker Series and Ep www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 28

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 29

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 30

Informative Engagement (Useful) www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 31

4 Content must be timely www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 32

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 33

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 34

Timeliness Empowered (Usable) www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 35

5 Content must be engaging www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 36

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 37

www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 38

Engagement Respect (Desirable) www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 39

6 Content must use standards www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 40

The effect on user experience 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) www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 41

Heads: Editorial standards www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 42

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


Слайд 43

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


Слайд 44

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


Слайд 45

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


Слайд 46

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


Слайд 47

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


Слайд 48

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


Слайд 49

Tails: Technical standards www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 50

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


Слайд 51

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


Слайд 52

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


Слайд 53

Standards Efficiency (Accessible) www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 54

7 Add value through content www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 55

Match content to reading habits www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 56

Reading habits Skip, skim, and scan www.aacc.edu/tutoring/file/skimming.pdf www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 57

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


Слайд 58

Reading habits Skip, skim, and scan Use standard editorial conventions www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 59

houseandgarden.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 60

Reading habits Skip, skim, and scan Use predictable editorial conventions Let users read before “interrupting” with links www.youtube.com/watch?v=EtHNDAoQLSQ www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 61

xe.com www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 62

Reading habits Skip, skim, and scan Use predictable editorial conventions Let users read before “interrupting” with links Provide predictable content boxesandarrows.com/implementing-a-pattern-library-in-the-real-world-a-yahoo-case-study/ www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 63

foodnetwork.com www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 64

Reading habits Skip, skim, and scan Use predictable editorial conventions Let users read before “interrupting” with links Provide predictable content Explain through feedback www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible.html www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 65

three.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 66

Content can drive value in multiple ways www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 67

Content is at the heart of UX www.scroll.co.uk www.scroll.co.uk © 2015 Scroll LLP All rights reserved © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 68

Scroll London, UK By email: rahel.bailie@scroll.co.uk info@scroll.co.uk Twitter: @ScrollUK / @rahelab By telephone: UK +44 (0)7869 643 685 Speaking and workshops: bailie.com www.scroll.co.uk © 2015 Scroll LLP All rights reserved @ScrollUK @rahelab


Слайд 69


×

HTML:





Ссылка: