Content Design
Overview Reading Online Writing for the Web Guidelines Presenting Text Content Graphical Text Text Links PDF Documents Printer-Friendly Format
Reading Online 1. Reading from computer screens is about 25% slower than from paper 2. Reading text online is more unpleasant than reading text on paper 3. In one study, 79% of users scanned any new page; 16% read word-for-word 4. Users may also not scroll down the page Source: Nielsen, Designing Web Usability (1999)
Writing for the Web Guidelines 1. Concise Writing 2. Scannability! 3. Chunking 4. Wording 5. Summaries
Guideline 1: Concise Writing Be succinct Write no more than 50% of the text you would have used in print Why 50% less? Slower reading speed Greater user discomfort at reading online Cuts down on the visual noise from the text Goal of minimizing scrolling
Applying Guideline 1 Certain content demands concise writing: Instructions (poor odds of users reading them, odds decrease with every extra word) Happy talk (welcome text, introductory text) Other content does not demand the same degree of pruning (some pruning is still recommended): Articles
Guideline 2: Scannability! Write in inverted pyramid style Avoid long, continuous blocks of text Use short paragraphs, headings, subheadings, and bullets Italicized text is slower to scan and read Use white space to enhance scannability
Scannability: Before and After
Guideline 3: Chunking Break long documents into smaller chunks, with one chunk per page How big should the chunks be? Amount of scrolling is one metric No more than 3 screens is recommended Hypertext link the chunks together, either sequentially (e.g., for articles) or conceptually (e.g., a Help system)
Chunking Example
Guideline 4: Wording Use simple sentence structures 7 th grade reading level is often the target Be careful of puns and humor - these can be misinterpreted Include keywords in your body text and headings (for search engine spiders) Convoluted writing and complex words are even harder to understand online Use the active voice
Guideline 5: Summaries Provide a summary (abstract) of the article, page contents, etc. Summary can go at the top of the page (with the rest of the text below) Summary can also be provided on one page, with a Read the article or Read more... link going to the full document on another page
Summary Paragraph (No Link) www.useit.com
Summary With Link www.cnn.com
Contrast and Text Best contrast: Black text on white background The inverse (white text on a black background) is slightly less readable Watch for poor contrast between foreground/background color Also watch for vibration (warmer colors on cooler colors and vice versa) Avoid text on a patterned background
Good and Bad Contrast
Line Lengths Long lines: eye has to travel to get back to the start of the next line Short lines: line switching occurs often Aim for 40-80 characters per line (with spaces and punctuation); 60-70 is ideal Shorter lines are permissible if there is not a lot of text
The Issue of Fonts Online The big question: What fonts are installed? If users don t have the requested font, a default will be used The best approach is to specify multiple fonts (in either the <font> tag or using CSS), so hopefully one of the fonts is on the user s machine Also specify a general font family last
Sans-Serif vs. Serif Fonts When we read, we look for patterns in the word shapes and differences in letterforms Sans-serif fonts (e.g., Verdana, Tahoma, Arial) lack the serifs in Times New Roman and Georgia. Research from the print world suggests using serif fonts for body text and sansserif fonts for headings and small text
Use Sans-Serif Fonts on the Web On the Web the limited screen resolution blurs serifs, distorting their letterforms As a result, sans-serif fonts are recommended for all text on websites This is why italicized text is harder/slower to read online (letterforms are blurred) ALL CAPS is also slower to read, due to letterforms having less distinctiveness
Sans-Serif: Recommended Fonts Verdana (for PC and Mac, if IE installed) Geneva (sometimes on PCs, usually on Macs) Lucida (for Unix; a PC variant is shown) Arial (for PC) Serif: Georgia (for PC and Mac, if IE installed) Times New Roman (for PC and Mac)
Font Sizing Can become quite a headache HTML sizes (1-7) are generic Usually size 2 is the smallest to use, unless the font is Verdana (then size 1 can be legible) CSS provides multiple options for font sizing, but all present their issues: Pixels, points, em s, percentages, keywords (xx-small, x-small, small, medium, large, x- large, xx-large)
Take Advantage of Pop-Out Boldface draws the eye (called pop-out); but use sparingly or the effect is diluted Hypertext links also pop-out, but if there are too many links then it is hard to focus on one Colored text can also be used for pop-out, but should be used sparingly
Pop-Out in Search Results www.google.com
Graphical Text Graphical text is an image that contains text (or is entirely made up of text) Benefits: Desired font face and size shown to all users Good for navigation bars and titles, where the extra precision and control can make a site look more professional Can be made accessible if alt text is included
Limitations of Graphical Text Text size cannot be adjusted by the user Images take up more file size than text Each image involves a server request If the image is small (such as for a button), the alt text is cropped for users who have simply turned off image display Images take more effort to create/update Graphic text cannot be copied or selected
Anti-Aliasing Graphical Text Anti-aliasing refers to inserting colored pixels at the edges of letterforms to simulate curves The drawback is that the text starts to look fuzzy and at small text sizes the letterforms are blurred significantly
Flash and Online Content Benefits: Based on vectors, not pixels, so file size is reduced Text can be selected and copied Content can be pulled from an outside source, so dynamic generation of content is easier Font is maintained
Limitations of Flash If the Flash file is embedded within the HTML code in a page (e.g., for the navigation bar), printing the page results in the Flash parts showing as a broken/missing object Text in Flash is either anti-aliased or aliased; choosing anti-aliased is good for text at large font sizes but terrible for text at small sizes
Navigation Bar Links Avoid links that break across lines Get a Mortgage Loan Application Also avoid punctuation in links because that can confuse the user
Multi-Line Links
Creating Descriptive Link Labels Avoid click here ; instead rephrase and link meaningful words such as Send a message Think about users with screen readers; click here doesn t convey much information Users that are visually scanning links don t need to read further to understand where the link goes or what it does
The Perils of Click Here
Phrasing Mailto: Links Rather than email us, give the address, e.g. email us: jwithrow@med.umich.edu Confirms the nature of the link Supports copy-and-paste if the user does not use the default browser mail program Also verifies the address in case the underlying mailto: in the code is incorrect
Periods and Links If it can be prevented, don t put a period at the end of the mailto: link Interferes with copy and paste of address Don t have: Email us: me@med.umich.edu. This should also be avoided if you are spelling out a URL Don t have: med.umich.edu.
Indicating Link Semantics Often links have different purposes and should be labeled as such: Definition links (these may spawn a small popup window) See Also links (the user expects to go elsewhere in the same website) More Detail links (the expectation is that the rest of the article/document will be shown) Within-Page links
Phrasing Links: Example Worst case: Click here for information about our products. Click here to read about our warranty. Click here for customer testimonials. Getting better: Click here for information about our products. Click here to read about our warranty. Click here for customer testimonials.
Phrasing Links: Example Improving even more: Our products are effective and affordable. Our warranty ensures your 100% satisfaction. Still have doubts? Read our customer testimonials. Until we reach the best version: Our home appliances cost less than name brands. Our warranty promises 100% satisfaction for two years or your money back! Our customers will tell you that they prefer Home Appliance Central.
Link Phrasing to an Extreme www.pet-shop.net
Links Colors and Underlining Which unvisited link color gets the highest rate of click-through? Blue! Use two sets of link colors if linked text is on a background color that doesn t work for just one link color Try not to go beyond two sets of link colors Don t underline anything but links! Be sure to not make static (unlinked) text blue; users will click on it!
Indicating File Size If you are linking to another type of document (e.g., a Word file or a PDF), indicate the file type and size: technical spec (Word format, 175k) user questionnaire (PDF format, 100k) This is especially important for large (more than 100k) documents; dial-up users may not want to wait
PDF Documents PDF = Portable Document Format PDFs provide exact control over appearance, but they won t replace HTML
PDF Options It is possible to link to a specific page in a PDF file PDF Writer allows the creation of interactive forms that can be filled out and submitted online PDFs can also contain links to other documents
Improving PDF Usability Be sure to launch PDFs in a new window: Use target= _blank in the anchor tag Or use Javascript to open a new window Also include a link nearby to download the free Acrobat Reader Other items to keep in mind: Users may not know what Acrobats have to do with PDFs Remind them that the Reader is free
Print-Friendly Format Sometimes it is useful to provide a printfriendly version of your pages This is especially true if your regular pages have cropped text when printed Provide easy access to the printable version from each page A printer icon is a fairly standard indicator of print-friendly functionality Make sure to link the icon
Print-Friendly Guidelines Keep the content width narrow (550 pixels) or use variable widths Put dark text on light backgrounds; avoid light text on dark backgrounds Older browsers may print the text as black and also print the background color Don t rely on color to convey information (most prints will be black and white) Change fonts to serifs and sizing to points
Print-Friendly Guidelines Leave out extraneous items (e.g., navbar) Make multi-page articles one document Put the text into a single column with minimal (X)HTML structuring Provide some indication of where the document came from (e.g., the site name and subsection); even include the URL
Print-Friendly Guidelines Approaches to links Remove underlines in the flow of text so no linking is apparent List URLs in parentheses after the linked text List all URLs in the document at the bottom of the page