web101: what designers need to know about writing for the web

34
WEB101 Web Design for Everyone

Upload: kim-higdon

Post on 17-May-2015

1.618 views

Category:

Design


3 download

DESCRIPTION

Presentation given to the AIGA Arizona's Web 101 class by Kim Higdon on October 28, 2010

TRANSCRIPT

Page 1: Web101: What designers need to know about writing for the web

WEB101Web Design for Everyone

Page 2: Web101: What designers need to know about writing for the web

Our Topic!

Writing for the Web

Page 3: Web101: What designers need to know about writing for the web

Before we can learn about writing for

the web...

Page 4: Web101: What designers need to know about writing for the web

We need to understanding

reading on the web.

Page 5: Web101: What designers need to know about writing for the web

How do people read on the Web?

They don’t!

Page 6: Web101: What designers need to know about writing for the web

How do people read on the Web?

They read 18% of what you write.

Page 7: Web101: What designers need to know about writing for the web

Which means...

• People are scanning

• So make your text scannable

• Bulleted lists, headings, highlighted keywords, short paragraphs

• 1/2 the word count

• Make it worth reading

Page 8: Web101: What designers need to know about writing for the web

How people look at your website

• No one reads anything thoroughly

• State the important stuff right away

• Start subheads with vital information

• Make it scannable!

Page 9: Web101: What designers need to know about writing for the web

How people look at your website

Page 10: Web101: What designers need to know about writing for the web

Who reads your website

• Write for a 6th grade reading level on certain pages

• Write for 8th grade reading level on others

• Prioritize information

• Improving usability for low-literacy users increases usability for everyone

Page 11: Web101: What designers need to know about writing for the web

Now, onto the writing!

Page 12: Web101: What designers need to know about writing for the web

Print vs. web: FIGHT!

• Headlines

• Keywords

• Storytelling vs. actionable

• Linear vs. non-linear

• Actionably needy

Page 13: Web101: What designers need to know about writing for the web

Taglines

• Support the logo in telling a user where they are

• Ask yourself two questions

• Exercise time!

Page 14: Web101: What designers need to know about writing for the web

Can you match the tagline to the company?

Companies:

A. Lucent

B. ZDNET

C. Sun Microsystems

D. Oracle

Taglines:

1. The network is the computer

2. Software powers the internet

3. Where technology means business

4. Creating value through true convergence

Page 15: Web101: What designers need to know about writing for the web

Taglines: good

Page 16: Web101: What designers need to know about writing for the web

Active Voice

• Kim loves writing.

• Writing is loved by Kim.

• Gets to the point faster

• Positive statements (do this vs. avoid doing this)

• Occasions for passive voice (SEO)

Page 17: Web101: What designers need to know about writing for the web

Repetition

• No more than 2 times

• Say it differently

• Not to be used for SEO

Page 18: Web101: What designers need to know about writing for the web

Repetition: good

Page 19: Web101: What designers need to know about writing for the web

Repetition: bad

Page 20: Web101: What designers need to know about writing for the web

Headlines

• Not an easy feat

• Keep ‘em short

• Keep ‘em rich in information

• Make sure they’re understood out of context

• Predictable: break trust and you lose.

Page 21: Web101: What designers need to know about writing for the web

Headlines: good

Page 22: Web101: What designers need to know about writing for the web

Headlines: bad

Page 23: Web101: What designers need to know about writing for the web

Keywords

• People all use the same words

• “Short words are the best and old words when short are the best of all” - Winston Churchill

• Tie new words with old words

• Use trigger words

Page 24: Web101: What designers need to know about writing for the web

Keywords

Corporate Real person

Price estimate Quote

Investment Price/Rate

Apply for an account Open account

Fees Costs

Page 25: Web101: What designers need to know about writing for the web

Numbers

• What you learned in high school doesn’t apply to the Web

• Always use digits, not letters, no matter what

• Oh, except when numbers don’t mean specific facts

Page 26: Web101: What designers need to know about writing for the web

Hypertext links

• Use plain language

• Use specific terminology

• Front load action and user items

• Be clear about what’s behind the link

• Make sure it’s different from other links

• Don’t mislead or promise too much

Page 27: Web101: What designers need to know about writing for the web

Hypertext links: good

Page 28: Web101: What designers need to know about writing for the web

Hypertext links: bad

We’re positioned in the ‘Leaders’ Quadrant for printers and MFPsLearn more about the Gartner Magic Quadrant distinction

Page 29: Web101: What designers need to know about writing for the web

Microcopy

• Buttons

• Form fields

• Instructions

• Branding

• URLs

• Email addresses

Page 30: Web101: What designers need to know about writing for the web

Microcopy: buttons

• Mix ‘em up

• Be descriptive

• Be informative

• Repeat information, differently

• Have fun!

Page 31: Web101: What designers need to know about writing for the web

Microcopy: buttons

Page 32: Web101: What designers need to know about writing for the web

Microcopy: buttons

Page 33: Web101: What designers need to know about writing for the web

Microcopy: instructions

Page 34: Web101: What designers need to know about writing for the web

Microcopy: branding