content design: what it is & why you need it

Content DesignWhat it is & why you need itErin AblerLead Content Designer, Office of Innovation & Technology City of Philadelphia

@erinabler

Erin Abler • @erinabler

Content designThe practice of shaping information to help people take action.


Medicaid: Apply if you are aged (65 years old or older), blind, or disabled and have low income and few resources. Apply if you are terminally ill and want to receive hospice services. Apply if you are aged, blind, or disabled; live in a nursing home; and have low income and limited resources. Apply if you are aged, blind, or disabled and need nursing home care, but can stay at home with special community care services. Apply if you are eligible for Medicare and have low income and limited resources.

http://www.plainlanguage.gov/testexamples/indexExample.cfm?record=86





Government content is confusing.



Government content is repetitive.



Government content is hard

to read.



Government content is bad

content.


Why should we care?


It affects the quality of our services.


It affects our bottom line.


It affects whether or not people trust us.


It affects our ability to do our job.


How do we fix it?


Content precedes design. Design without content isn’t design, it’s decoration.

“Jeffrey ZeldmanFounder, A List Apart (1998), Happy Cog (1999)

Ad hoc rewriting is a crutch, not a solution.


So, wait…how DO we fix it?


User needs are our north star

https://www.gov.uk/design-principles




Content design objectives• Understand user needs

• Organize information more intuitively • Create new content for unmet needs• Develop an underlying content

strategy• Manage content at every stage


Conduct user research• Analytics• User interviews• Task analysis• Surveys


Create user need storiesAs a: [type of user]

I need to: [task/action]

So that I can: [goal]



Who is this for?

I need to: [task/action]




Who is this for?

I need to: [task/action]What will help this person reach their goal?




Who is this for?

I need to: [task/action]What will help this person reach their goal?

So that I can: [goal]What larger thing does the user need to accomplish?


Create user need storiesAs a [type of user], I need to [task/action] so that I can [goal].



As a homeowner, I need to know how much real estate tax I owe so I can make a payment.



As a homeowner, I need to know how much real estate tax I owe so I can make a payment.As a small business owner, I need to know which taxes I’m required to pay so I don’t get in trouble for not paying them.



As a homeowner, I need to know how much real estate tax I owe so I can make a payment.As a small business owner, I need to know which taxes I’m required to pay so I don’t get in trouble for not paying them.As a low income resident, I need to find affordable tax counseling so that I can prepare my tax return correctly.


Gov.uk’s scoping rules1. Do people want this?2. Can people reasonably expect us to meet

this need?3. Can only government meet this need?4. Is it explaining someone’s rights or

obligations?5. Is it transactional or encouraging a shift to

digital by default government services?https://gds.blog.gov.uk/2011/09/19/introducing-the-needotron-working-out-the-shape-of-the-product/

https://gds.blog.gov.uk/2011/09/19/introducing-the-needotron-working-out-the-shape-of-the-product/

https://gds.blog.gov.uk/2011/09/19/introducing-the-needotron-working-out-the-shape-of-the-product/


User Needs Prioritization

People want this

We can meet this

need

Only gov’t

provides this

Explains rights or

obli-gations

Trans-actional, digital by default

As a homeowner, I need to know how much real estate tax I owe so I can make a payment.

As a small business owner, I need to know which taxes I’m required to pay so I don’t get in trouble.

As a low income resident, I need to find affordable tax counseling so that I can prepare my tax return correctly.

Well-designed content turns a need into an action.


To meet a need . . .• Be specific• Be informative, not descriptive• Keep to the point• Be clear about what comes next


Our user needAs

I need to

So that I

know what to doam prepared to deal with one if it happens.

someone potentially affected by a future emergency,


1

1 Mixed themes & multiple headers

Before . . .


2 1 Mixed themes & multiple headers

2 No explanation of unfamiliar term

Before . . .



2

3

No explanation of unfamiliar termDifferent descriptions cover the same subject

Before . . .3


2

3


2

3

4

No explanation of unfamiliar termDifferent descriptions cover the same subject

Indirectly related content dominates the page

Before . . .4


…and after

1

1 Clear organizational premise


…and after1 Clear organizational premise

2 Plain-language description

2


…and after

3

1 Clear organizational premise

2

3

Plain-language descriptionConsolidation of repetitive content


…and after1 Clear organizational premise

2

3

4

Plain-language descriptionConsolidation of repetitive contentRelated content moved to its own subsection

4


How do we clean up content?


Revision is creation.

incremental


The best ways to revise content are also the best ways to create it.


Support scanning• People only read 20-28% of text on a

page.• We look for clues that we’re on the right

track before we actually commit to reading.

Jakob Nielsen, http://www.nngroup.com/articles/how-little-do-users-read/

Why

How • Use brief, clear headings.• Break lists into bullet points.• Use sentence case, not all-caps.

http://www.nngroup.com/articles/how-little-do-users-read/




Erin Abler • @erinablerJakob Nielsen, http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/



Put the important stuff first• People scan content in an F-shaped

pattern.• Readers will decide for themselves if

they want more detailed information.

Why

How • Put critical information in the first two paragraphs.

• Start subheadings, bullet points, and paragraphs with informative, noticeable words.Jakob Nielsen, http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/



Use white space• Cramped page layouts make it hard to

tell which content is the most important.• Dense, lengthy text is less likely to be

read.

Why

How • Keep most paragraphs 2-3 sentences long.

• Work with a designer to create an intuitive visual flow.

Jakob Nielsen, http://www.nngroup.com/articles/how-little-do-users-read/






Use active voice• People want to be spoken to, not at –

and certainly not about.• It’s human nature to be impatient.

Dan Carlin, http://www.crocstar.com/2015/02/online-writer-skills/

Why

How • Use “you” and “your” when talking to the reader.

• Name the doer before the thing being done.

http://www.crocstar.com/2015/02/online-writer-skills/


Talk like a human• Bureaucratic language is often obscure.• Everyone needs context when learning

something new.

Why

How • Use common words and contractions.• Provide context and explain the

unfamiliar.• Aim for an 8th grade reading level – 5th or

6th grade when possible.


Fight complexity• Long, complicated phrases take longer

to read and more concentration to understand.

• Unnecessary details only delay action.

Why

How • Shorten sentences to 15 words or fewer whenever possible.

• Aim to instruct or explain, not to describe.


Choose format purposely• Text isn’t always the best way to help

someone take actionWhy

How • Make processes and transactions interactive

• Use digital forms to collect information• Use meaningful visuals, not random stock

photos


How can we tell whether it works?

AConsistently clear, concise, and direct. Based on identifiable user needs. Provides a logical path to a decision or action. Uses appropriate tone. Uses a format purposely selected to optimize clarity, intuitiveness, and interactivity.

BGenerally effective. Clear, well structured, supports a central concept, and uses language understandable to a wide audience. Supports users’ needs with actionable information. May benefit from additional consolidation, editing, or a different format.

C Meets basic requirements but has noticeable shortcomings. May be disorganized, difficult to follow, redundant, or attempt to cover more than one subject.

DBelow acceptable standards. Poor organization, ineffective sentence construction, unnecessary details, and imprecise or misleading wording. Incomplete, repetitive, or uses excessive jargon. May include typos, broken links, or other proofreading errors.

F Inaccurate, unnecessary, or so poorly written that it’s likely to confuse or mislead users. May include dense prose or irrelevant material, or be located in a place that doesn’t match users’ expectations.






• Consistently clear, concise, and direct• Based on an identifiable user need• Provides a logical path to a decision or

action• Uses appropriate tone• Uses a format purposely selected to

optimize clarity, intuitiveness, and interactivity






• Generally clear and effective• Structured to support a central concept• Uses language understandable to a

wide audience• Supports users’ needs with actionable

information• May benefit from further consolidation,

editing, or a different format






• Meets basic requirements but has noticeable shortcomings

• Suffers from disorganization• Uses logic or language that is difficult

to follow• Repeats key points instead of stating

them clearly• Often attempts to cover more than one

subject






• Falls below acceptable standards• Significantly hampered by poor

organization• Includes repetitive or unnecessary

details• Has imprecise, awkward wording• May include jargon or needless

complexity• May include typos, broken links, or

other proofreading errors






• Inaccurate, unnecessary, or so poorly written that it’s likely to confuse or mislead users

• May include dense prose or irrelevant material

• May be located in a place that doesn’t match users’ expectations


F

A

Failure of recollection is common. Innocent misrecollection is not uncommon.

People often forget things or make mistakes in what they remember.

http://www.plainlanguage.gov/examples/before_after/jury.cfm




D

C

A preponderance of the evidence.

More likely than not.





A brief guide to writing well1. Write something.Anythin

g.


A brief guide to writing well1. Write something.

2. Walk away from it.Seriously. At least 5,000 steps.



2. Walk away from it.3. Reread it. Wonder what you were

thinking.



2. Walk away from it.3. Reread it. 4. Revise it.



2. Walk away from it.3. Reread it. 4. Revise it.5. Have someone else read it.Befriend that coworker who

finds fault with everything.



2. Walk away from it.3. Reread it. 4. Revise it.5. Have someone else read it.6. Revise it.



2. Walk away from it.3. Reread it. 4. Revise it.5. Have someone else read it.6. Revise it.7. Have a lot of people read it.Get feedback. Get data. Get

humble.



2. Walk away from it.3. Reread it. 4. Revise it.5. Have someone else read it.6. Revise it.7. Have a lot of people read it.8. Revise it.Repeat as needed.


Key points• Ad hoc rewriting is a crutch, not a solution.• Well-designed content turns a need into

an action.• The best ways to revise content are also

the best ways to create content.• To improve, seek feedback.• And finally…

Don’t just make content better.

Make better content.