Download - Writing For the Web: Summer 2011
![Page 1: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/1.jpg)
Usability and Usability and Writing For The Writing For The
WebWeb
Marie K. ShanahanQuinnipiac University
Summer 2011
![Page 2: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/2.jpg)
Information nowadays…
is abundant, digital, interactive and mostly free.
Journalists who wish to remain relevant need to be able to tell stories on digital platforms in an interactive way.
Traditional linear formats are not successful online.
![Page 3: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/3.jpg)
Traditionally, the news media was a system of “one to
many.”
![Page 4: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/4.jpg)
Image courtesy of photoxpress.com
Now it is a system of many to many.
![Page 5: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/5.jpg)
Traditional distribution methods
![Page 6: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/6.jpg)
New Distribution Methods
![Page 7: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/7.jpg)
Traditional tools of the trade
![Page 8: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/8.jpg)
New tools of the trade
![Page 9: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/9.jpg)
Why do people visit a Why do people visit a website? website?
![Page 10: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/10.jpg)
Problem Solving
Most people visit a website because they want or need one or more of the following:
Information To be entertained - diversion To connect with others Commerce - make purchase or donation
- Vincent Flanders, webpagesthatsuck.com
![Page 11: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/11.jpg)
““Too many organizations believe Too many organizations believe that a web site is about opening a that a web site is about opening a new marketing channel or getting new marketing channel or getting donations or to promote a brand. donations or to promote a brand. No. It’s about solving your No. It’s about solving your customers’ problems.”customers’ problems.”
- Vincent Flanders, webpagesthatsuck.com- Vincent Flanders, webpagesthatsuck.com
![Page 12: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/12.jpg)
![Page 13: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/13.jpg)
What makes for aWhat makes for a good website? good website?
![Page 14: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/14.jpg)
The most popular sites have…
Pages that load fast
Reliable search function
Layouts that are easy to navigate
Unobtrusive advertising
Information that caters to intended audience
![Page 15: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/15.jpg)
The best websites fulfill users expectations with least amount of stress.
![Page 16: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/16.jpg)
Content is king
The single most important thing most Web sites can offer to their users is content that those users will find valuable.
Information is what drives web sites. Any site must begin with engaging content.
![Page 17: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/17.jpg)
You have 90 seconds
Every human being has his/her own distinct thought processes to take him/her from POINT A to POINT B.
People make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing.
![Page 18: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/18.jpg)
Don’t Make Me Think
Be as obvious as possible
Consistency – uniform layouts
Keywords
![Page 19: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/19.jpg)
The web The web is a is a
visual visual medium.medium.
![Page 20: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/20.jpg)
Visual functionality
On a web page, successful communication is influenced by:
Text on the screen
Page layout
Images: graphics and photos
Color
![Page 21: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/21.jpg)
Psychology of Color“Vision is the primary source
for all our experiences.”
“We become bored in the absence of a variety of colors and shapes… Color addresses one of our basic neurological needs for stimulation.”
- Jill Morton, “Why Color Matters” (2005)
![Page 22: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/22.jpg)
Satisfaction or irritation?
If visitors feel like they have a “sense of mastery” over a web site, they will achieve their goals and find satisfaction with the experience.
But if visitors find a web page confusing and difficult to use, many will click away, feeling irritated and unfulfilled.
![Page 23: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/23.jpg)
Different expectations
In linear media (print or broadcast) people expect you to construct their experience for them. Readers/views are willing to follow the author's lead.
On the non-linear web, users want to construct their own experience by piecing together content from multiple sources, emphasizing their desires in the current moment.
![Page 24: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/24.jpg)
Individuality rules Individuality rules online.online.
Consumers are in Consumers are in control.control.
![Page 25: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/25.jpg)
Web habits
Scanning and searching Loyalty only to the page where they
started Rarely do web users start and end
sessions in the same place Users stick with one site as long
as it delivers what they are looking for.
![Page 26: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/26.jpg)
Reading on a Reading on a computer is tiresome. computer is tiresome.
![Page 27: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/27.jpg)
Image courtesy of photoxpress.com
![Page 28: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/28.jpg)
Users aren’t really “reading”
People scan pages, using their visual brains.
Provide visual hierarchy on a web page with text size, color, emphasis.
![Page 29: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/29.jpg)
Prominence“The more important something is, the more
prominent it is. For instance, the most important headings are either
larger, bolder, in a distinctive color,
set off by more white space,
nearer the top of the page, or some combination of the above.” – Steve Krug, ‘Don’t Make Me Think’
![Page 30: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/30.jpg)
EyetrackingEyetracking
Images from www.useit.com/alertbox/reading_pattern.html
![Page 31: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/31.jpg)
Eyetracking
Graphics from poynterextra.org
![Page 32: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/32.jpg)
“Inverted pyramid” style of writing works very well on the web.
![Page 33: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/33.jpg)
Inverted Pyramid
Graphic from: http://www.district196.org
![Page 34: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/34.jpg)
Get to the point
![Page 35: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/35.jpg)
Put your text on a diet
79% of web users scan any new page for individual words and sentences.
Only 16 percent read it word-for-word.
Use half the word count of conventional writing.
![Page 36: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/36.jpg)
Targets
Headlines – less than 8 words
Sentences – less than 20 words
Paragraphs – less than 70 words
Pages – less than 400 words
![Page 37: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/37.jpg)
Readability on the web
Highlighted keywords
Bulleted lists One idea per paragraph Make hyperlinks part of the copy
Subheads
Divide up information into logical segments or chunks
![Page 38: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/38.jpg)
Don’t disorient me
The computer screen provides a limited view of long documents.
Long web pages tend to disorient readers.
Long web pages require users to scroll and remember what is off-screen.
Chunking helps to orient users.
![Page 39: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/39.jpg)
Hyperlink.Hyperlink.Hyperlink.Hyperlink.Hyperlink.Hyperlink.
Transparency = credibility
![Page 40: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/40.jpg)
Hyperlinking Best Practices
Never construct a sentence around a link phrase, such as “click here for more information.“
Write as you normally would. Place the link on the words that best describe the additional content.
![Page 41: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/41.jpg)
Examples
Poor: Click here for more information on placing links within your text.
Better: Avoid problems with Web links by managing their placement within the context of your document.
![Page 42: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/42.jpg)
Search engines can lead people to your information.
![Page 43: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/43.jpg)
SEO / Headlines
SEO stands for Search Engine Optimization.
Headlines should be Search Engine Optimized.
Include obvious keywords that people would use to search.
![Page 44: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/44.jpg)
Headlines: Obvious = Better
Online, headlines alone must provide enough “information scent” to let users predict what they'll get if they click.
Usually, nothing else explains a story's content.
Headlines should be meaningful.
-Jakob Nielsen’s Alertbox
![Page 45: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/45.jpg)
Other stylistic considerations
Cultivate a voice. Web readers welcome a measure of individuality from their information sources.
With so many competing sources, a unique conversational voice may help distinguish your pages.
![Page 46: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/46.jpg)
The Manolo says…
“Do not be afraid to be different. In fact, being different it is the advantage in the marketplace where there are fifty thousand new blogs on the topic you have chosen.”
- http://shoeblogs.com/
![Page 47: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/47.jpg)
Active Voice
Food packages will be distributed by the organization’s volunteers. (passive)
Volunteers will distribute food packages. (active)
Volunteers will hand out food. (active, short, conversational)
![Page 48: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/48.jpg)
Users expect to be able to read, listen, watch, choose, click and/or
participate.
![Page 49: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/49.jpg)
Visualize your readers
Always keep your audience in mind before and during your
writing.
![Page 50: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/50.jpg)
Writing method
Write Read Cut Set aside Cut more Proofread Post
![Page 51: Writing For the Web: Summer 2011](https://reader037.vdocuments.net/reader037/viewer/2022103016/555109b9b4c90501448b5658/html5/thumbnails/51.jpg)
After you post
Twitter Facebook Share with sources Share with topic “influencers”