web101: what designers need to know about writing for the web
DESCRIPTION
Presentation given to the AIGA Arizona's Web 101 class by Kim Higdon on October 28, 2010TRANSCRIPT
![Page 1: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/1.jpg)
WEB101Web Design for Everyone
![Page 2: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/2.jpg)
Our Topic!
Writing for the Web
![Page 3: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/3.jpg)
Before we can learn about writing for
the web...
![Page 4: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/4.jpg)
We need to understanding
reading on the web.
![Page 5: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/5.jpg)
How do people read on the Web?
They don’t!
![Page 6: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/6.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/7.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/8.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/9.jpg)
How people look at your website
![Page 10: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/10.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/11.jpg)
Now, onto the writing!
![Page 12: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/12.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/13.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/14.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/15.jpg)
Taglines: good
![Page 16: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/16.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/17.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/18.jpg)
Repetition: good
![Page 19: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/19.jpg)
Repetition: bad
![Page 20: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/20.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/21.jpg)
Headlines: good
![Page 22: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/22.jpg)
Headlines: bad
![Page 23: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/23.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/24.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/25.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/26.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/27.jpg)
Hypertext links: good
![Page 28: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/28.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/29.jpg)
Microcopy
• Buttons
• Form fields
• Instructions
• Branding
• URLs
• Email addresses
![Page 30: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/30.jpg)
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](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/31.jpg)
Microcopy: buttons
![Page 32: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/32.jpg)
Microcopy: buttons
![Page 33: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/33.jpg)
Microcopy: instructions
![Page 34: Web101: What designers need to know about writing for the web](https://reader038.vdocuments.mx/reader038/viewer/2022103114/5558a4add8b42aa6708b512b/html5/thumbnails/34.jpg)
Microcopy: branding