usability and writing for the web
TRANSCRIPT
![Page 1: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/1.jpg)
Usability and Writing For The Web
Marie K. ShanahanUniversity of ConnecticutSpring 2013
![Page 2: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/2.jpg)
So what’s the recipe for a good online news story?
![Page 3: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/3.jpg)
The Winning Recipe
• Details* • Design • Interactivity – means giving the reader
some input and control in a story.
*Usefulness
Ribbon image by Billy Alexander, http://www.sxc.hu/photo/1294754
![Page 4: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/4.jpg)
“Too many organizations believe that a web site is about opening a new marketing channel or getting donations or to promote a brand.
No. It’s about solving your customers’ problems.”
- Vincent Flanders, webpagesthatsuck.com
![Page 5: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/5.jpg)
Problem Solving
Most people visit a website because they want or need one or more of the following:
• Information• Entertainment / Diversion• Connect with others• Commerce
![Page 6: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/6.jpg)
Users expect to be able to choose, read, listen, watch, click, share and/or participate.
![Page 7: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/7.jpg)
![Page 8: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/8.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 9: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/9.jpg)
The best websites fulfill users expectations with the least amount of stress.
![Page 10: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/10.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.
![Page 11: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/11.jpg)
You have less than 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 12: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/12.jpg)
Don’t Make Me Think
• Be as obvious as possible
• Consistency – uniform layouts
• Keywords
![Page 13: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/13.jpg)
The web is a visual medium.
![Page 14: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/14.jpg)
The 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 15: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/15.jpg)
Visual functionality
On a web page, successful communication is influenced by:
• Text on the screen
• Page layout
• Images: graphics and photos
• Color
![Page 16: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/16.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.
If visitors find a web page confusing and difficult to use, many will click away, feeling irritated.
![Page 17: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/17.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 seek.
![Page 18: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/18.jpg)
Image courtesy of photoxpress.com
![Page 19: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/19.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 20: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/20.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, “Dont Make Me Think”
![Page 21: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/21.jpg)
Eyetracking
Images from www.useit.com/alertbox/reading_pattern.html
![Page 22: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/22.jpg)
Eyetracking
Graphics from poynterextra.org
![Page 23: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/23.jpg)
“Inverted pyramid” style of writing works very well on the web.
![Page 24: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/24.jpg)
Inverted Pyramid
Graphic from: http://www.district196.org
![Page 25: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/25.jpg)
Get to the point, already.
![Page 26: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/26.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.
![Page 27: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/27.jpg)
Targets
• Headlines – less than 8 words
• Sentences – less than 20 words
• Paragraphs – less than 70 words (about 6 lines on screen, then break of white space)
• Pages – less than 400 words
* These were the recommended targets when I worked at Patch.com
![Page 28: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/28.jpg)
Readability on the web (guidelines)• Divide up information into logical
segments or chunks
• One idea per paragraph
• Highlighted keywords
• Bulleted lists
• Subheads
![Page 29: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/29.jpg)
Don’t disorient me
• The computer screen provides a limited view of long documents.
• Long web pages require users to scroll and remember what is off-screen.
• “Chunking” information helps orient users.
![Page 30: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/30.jpg)
Always include hyperlinks. Context. Transparency = credibility
![Page 31: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/31.jpg)
Hyperlinking: Best Practices• Avoid construct a sentence around a
link phrase, such as “click here for more information.“
• Write as you normally would.
• Place the link on the keywords that best describe the additional content.
![Page 32: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/32.jpg)
Deconstructing a hyperlink<a href=“http://www.uconn.edu”>University of Connecticut</a>
HTML code is “nested” = Content is sandwiched between code < >a=anchorhref=hypertext reference“” = you must put the URL in quotesURL = uniform resource locator/ = ends a code call
HTML is unforgiving. If you forget a piece, it won’t work.Always check to make sure your links work. Proofreading.
![Page 33: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/33.jpg)
Search engines lead people to your information.
![Page 34: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/34.jpg)
SEO = Search Engine Optimization
• Web headlines should include obvious keywords that people would use when searching for your story topic.
![Page 35: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/35.jpg)
Headlines: Obvious = Better
• Online headlines alone must provide enough “information scent” to let users predict what they'll get if they click.
• Nothing else may be there to explain a story's content.
-Jakob Nielsen’s Alertbox
![Page 36: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/36.jpg)
Cultivate a voice. Cultivate a voice. Readers welcome a measure of individuality from their information sources.
(image by photoxpress.com)
![Page 37: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/37.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 [sources] on the topic you have chosen.”
- http://shoeblogs.com
![Page 38: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/38.jpg)
Active Verbs, Active Voice• Marie was speaking to the audience.
(passive)
• Marie spoke to the audience. (active)
• Marie shouted / mumbled / whined / whispered / cried / questioned / growled / declared to the audience. (active, vivid, descriptive verbs)
![Page 39: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/39.jpg)
Visualize your readersVisualize your readersAlways keep your audience in mind before and during your writing/designing/formatting.
Image by photoxpress.com
![Page 40: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/40.jpg)
Constantly ask…• Why should readers care about this? • How can I make this information
better than my competition?• How can I make this information
useful to my readers?• How can I design this content to be
interactive and engaging?
![Page 41: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/41.jpg)
Writing method
• Write• Read• Cut• Set aside• Cut more• Proofread• Post
Image by photoxpress.com
![Page 42: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/42.jpg)
After you post
• Twitter• Facebook• Share with sources• Share with topic
“influencers”
![Page 43: Usability and Writing for the Web](https://reader035.vdocuments.us/reader035/viewer/2022062405/5551095ab4c9057b478b5429/html5/thumbnails/43.jpg)
Assignment• Take a “print” story you wrote in Newswriting I
or another journalism class and produce it on the web using the best practices.
• Give the story a “visual center” • Hyperlink to source material, additional
information• Format your text for ease of reading – short
paragraphs, white space, subheads, bold, bulleted lists.
• Put obvious keywords in your headline - SEO• Be a brutal word editor