Web Site Design:Best Practices

Fall 2012

General Goals

• Usable, readable web content• Designed to facilitate the ease of reading content

through the effective use of colors, typography, spacing, etc.

• Enable readers to quickly identify, read and internalize information.

• Three general guidelines:– Text and typography have to be easy and pleasant to

read (i.e. they must be legible).– Content should be easy to understand.– Content should be skimmable because web users

don’t read a lot. Studies show that in a best-case scenario, we only read 28% of the text on a web page.

Four Elements of User-Centric Design

1. Keep Content as Concise as Possible• Get to the point as quickly as possible.• Cut out unnecessary information.• Use easy-to-understand, shorter, common words and

phrases.• Avoid long paragraphs and sentences.• Use time-saving and attention-grabbing writing techniques,

such as using numbers instead of spelling them out. Use “1,000″ as opposed to “one thousand,” which facilitates scanning and skimming.

• Test your writing style using readability formulas that gauge how easy it is to get through your prose. The Readability Test Tool (http://www.read-able.com/) allows you to plug in a URL, then gives you scores based on popular readability formulas such as the Flesch Kincaid Reading Ease.

2. Consistency

• Visitors to your website should be able to move from page-to-page easily and always know where they are.

• You should try to use templates to create a common page layout across your site, create smooth transitions from one page to another by having consistent elements on each page.

2. Consistency (cont.)

• For example:– placing navigational elements in the same position on

each page– using the same fonts and colors throughout the site– having a clear, visual hierarchy to the elements on your

page– ensuring your business logo appears on each page and

when clicked, links back to the homepage of your site– including a search box on each page and always

ensuring this is in the same location on the web page

3. Use Headings to Break Up Long Articles

• Internet readers inspect web pages in blocks and sections, or what is called “block reading.”

• We swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.– Users first read in a horizontal movement, usually across

the upper part of the content area. This initial element forms the F's top bar.

– Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F's lower bar.

– Finally, users scan the content's left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F's stem.

3. Use Headings to Break Up Long Articles (cont.)

• Before writing a post, consider organizing your thoughts in logical chunks by first outlining what you’ll write.

• Use simple and concise headings.• Use keyword-rich headings to aid skimming, as

well as those that use their browser’s search feature (Ctrl + F on Windows, Command + F on Mac).

3. Use Headings to Break Up Long Articles (ex.)

4. Help Readers Scan Your Web Pages Quickly

• Designing and structuring your web pages with skimming in mind can improve usability– Make the first two words count, because users

tend to read the first few words of headings, titles and links when they’re scanning a webpage.

– Front-load keywords in webpage titles, headings and links by using the passive voice as an effective writing device.

– Use the inverted pyramid writing style to place important information at the top of your articles.

4. Help Readers Scan Your Web Pages Quickly (cont.)

5. Use Bulleted Lists and Text Formatting

• Users fixate longer on bulleted lists and text formatting (such as bolding and italics)– These text-styling tools can garner attention because

of their distinctive appearance as well as help speed up reading by way of breaking down information into discrete parts and highlighting important keywords and phrases.

• Consider breaking up a paragraph into bulleted points.

• Highlight important information in bold and italics.

5. Use Bulleted Lists and Text Formatting (cont.)

• Fonts and typography– Designing for a website restricts your font choices. If you

specify a font that a user does not have on their computer or mobile device, their browser will substitute a default font, changing the look of the page. The webpage will look clearer if you choose fewer fonts and type sizes.

– It is best practice to choose standard fonts for pages and specify a font family - this will help reduce the possibility of the page being displayed using system fonts.

– Remember to use commonly available fonts and test your web pages on multiple platforms to see what effect these have on the overall appearance. You can find a list of common fonts for all operating systems on the Ampsoft website (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html).

6. Give Text Blocks Sufficient Spacing

• The spacing between characters, words, lines and paragraphs is important. How type is set on your web pages can drastically affect the legibility (and thus, reading speeds) of readers– manipulating the amount of margins of a passage

affected reading comprehension and speed• Evaluate your webpages’ typography for spacing

issues and then modify your site’s CSS as needed.• Get to know CSS properties that affect spacing in

your text. The ones that will give you the most bang for your buck are margin, padding, line-height, word-spacing, letter-spacing and text-indent.

7. Make Hyperlinked Text User-Friendly

• One big advantage of web-based content is our ability to use hyperlinks. The proper use of hyperlinks can aid readability.

• Indicate which links have already been visited by the user by styling the :visited CSS selector differently from normal links, so that readers quickly learn which links they’ve already tried.

• Use the title attribute to give hyperlinks additional context and let users know what to expect once they click the link.

8. Use Visuals Strategically

• Photos, charts and graphs are worth a thousand words. Using visuals effectively can enhance readability when they replace or reinforce long blocks of textual content.– users pay “close attention to photos and other images

that contain relevant information.”– Users, however, also ignore certain images,

particularly stock photos merely included as decorative artwork.

• Make sure images you use aid or support textual content.

• Avoid stock photos and meaningless visuals.

9. Using sounds on your web pages • Sound files require time to download and will

slow down your website. Sounds, especially where visitors have no control over them, can also be very irritating.

• If sound is a necessary element of your website it is good practice to tell visitors how to turn it down, or off. It is even more courteous to invite visitors to turn the sound on rather than off.

10. Make Your Site Accessible to All

• The Equality Act 2010 makes it illegal for a website provider to discriminate against a disabled person. In practice this means you must design your website so that disabled people can access it using technology - eg screen readers.

• To find out more see Website Accessibility Guidelines (http://www.w3.org/TR/WCAG/) .

11. Site navigation• Develop a simple and consistent navigation

scheme. – Links should be presented clearly and the words or

images that the user clicks on must be clear, concise and relevant to the information they are leading to.

• Navigation buttons– Always ensure that the navigation buttons are placed

in the same place on all of the pages on the site. – The user of your site should be able to navigate

efficiently from page-to-page, and also know where on your site they are located.

– Don’t make users navigate through too many layers of the site to find the information they want.

11. Site navigation (cont.)

• Finding information– Make it easy for users to find information• Have a site map and search facility• Content organisation - or information architecture

should be planned and tested with users in mind.

• The 'three click rule‘– Users starting at your home page should be able

to get to the information they require in three mouse clicks.

12. Technical Web Site Design Considerations• Browser Issues• You will have to design webpages that can be

displayed by many different browsers. Common browsers include:– Microsoft Internet Explorer– Mozilla Firefox– Apple Safari– Google Chrome

• You should test your web pages in as many browsers and different operating systems as possible and they work on previous versions of the browser

12. Technical Web Site Design Considerations (cont.)

• Screen Resolution– The most common resolutions, expressed in pixels, is

1024 x 768– It is also worth considering how your site will appear

when it is accessed from mobile devices.• Download Speeds– Too many images or rich media - such as animations

or video - will slow down the speed at which the webpage loads.

– Generally, pages should load within eight seconds or less.

– Slow download speeds may also impact negatively on your search engine ranking.

12. Technical Web Site Design Considerations (cont.)

• Technology– Some web technology can prevent users from

viewing your site or affect indexing of your web site by search engines. These technologies include:• HTML frames• Javascript• Flash• AJAX

– If using any of these technologies you need to consider what the potential risks may be to the usability and accessibility of your website.