If you like this presentation – show it...
ﬂic.kr/p/aHV47t Writing for the Web David Lee King | Rebecca Blakiston | Elaine Meyer
t n e t n o C $ $ $ images videos words
t n awe nte so m Co e ! $ $ $ images videos words
Resp ent t onsn o ibCli i ty $ images videos words $ $
so let’s improve our words
#1 we’re not writers
General Reference Center: A general interest database that integrates a variety of sources in one easy-to-use interface. Use General Reference Center to find articles from magazines, reference books, and newspapers, many with full-text and images.
28 seconds # to grab a reader’s attention
People Product Process
know your customers
know your customers
ﬂic.kr/p/eo52B3 Have a focus
know your staff, too
words are a product
ﬂic.kr/p/5qtj4r focus on the right things
ﬂic.kr/p/rrtaDX use images
know speling errores
e it s b e w re-use Facebook content r te it w T
where to start?
ﬂic.kr/p/qfMsoQ have fun!
Writing for the web Elaine Meyer www.mcls.org firstname.lastname@example.org www.uxlibrarian.com Internet Librarian October 27, 2015 Monterey, California
Why is writing for the web different? Reading from a computer screen is: • tiring to your eyes • 25% slower than print reading. People are less likely to read long pieces of text online then in print. Jakob Nielsen: http://www.nngroup.com/articles/why-web-users-scaninstead-reading/
How do people read online? They don’t! Instead, they: • skim, scan and select • browse before diving in • read a little at a time, mostly in short bursts • grab what they need and get onto their goal.
Less is more Less content • is easier to manage • is more user-friendly • costs less to create
Planning your web content Web content is useless unless it supports: 1. A key business objective such as: • Promotes events & training classes • Encourages citizens to become patrons 2. Users in completing a task • Search catalog for an item • Find a study room • Library hours/directions • How long can I keep my book?
Questions before writing Before you write anything, ask yourself: • Why am I creating this page? • Who am I talking to? • What is my main message? • Does the user need it? • What do I want the user to do after reading it? Every page must have a clear purpose!
Content accessibility Content is truly accessible only if it can be used by people with disabilities. Patrons with disabilities must be able to use everything: • Links • Buttons • Form controls • Images • Etc
Use descriptive link text Not descriptive: To complete the online Reserve Form, click here. Descriptive: Complete the online Reserve Form. Never use “Click here” to describe a link • “Click here” is not descriptive for screen readers • Links are given extra weight by search engine spiders, so avoid “Click here”.
Human readable URLs Not descriptive: http://www.michigan.gov/libraryofmichigan/ 0,2351,7-160-50206_18637_18649-2090--,00.html Descriptive: http://www.michigan.gov/libraryofmichigan/ accessibility_policy
Button labels • Keep button labels short and action oriented. • Avoid ‘Go’ or ‘OK’ as button labels. Instead, use the appropriate verb or phrase, such as ‘Submit’ or ‘Give feedback’.
Alert users of outside content Adobe PDF Microsoft Word Microsoft Excel PowerPoint Open in a new window
Contrast Color picker tool: ColorZilla for Firefox Color Contrast Checker: WebAIM http://webaim.org/resources/ contrastchecker/ Both size texts failed the contrast checker for the search button
Red/green color blindness Use labels instead: Don’t use color as the only indication of what to do!
AVOID USING ALL CAPS Caps are: • Difficult to read • Portray shouting • Relay urgency This includes navigation items like menus, footer, buttons, etc
Left-align text Instead of this: Try this:
Images – text equivalents Text information MUST be provided for web content that is not textual. Non-text items include: • Images • Image buttons • Charts/graphs • Audio files • Multimedia files that include both audio and video
Images – text equivalents <alt> attribute: every image must have valid ‘alt’ text Why use the “alt” attribute (commonly known as “alt text”)? • Provides text equivalent for blind users • Indexed by search engines • Can add additional information for the user alt="Find it for FREE” alt= “Gale LegalForms - Find it for FREE”
Images that don’t convey information What type of images don’t convey information? • Spacer images • Design images • Background images Use null alt text: alt=““ (alt=quote quote with no space in between)
User assistance (help!) Indianapolis Public Library Wayne State University Libraries Kent District Library Purdue University Libraries
Go back and check your work Check your work: • before you publish your stuff • after you see it online • again next week (the article will be different the next time you look). Keep asking yourself: • Is this clear? • Is there a simpler way to say this? • Is there a shorter way to say this? • Is this even necessary?