Usability and Style Guidelines
Writing for the Web:
1. Help the reader skim by using headings, subheadings, and summaries. Use short paragraphs, scannable layout, and bulleted lists.
2. Use the benefits to entice visitors to learn more. When they go deeper into the site, start selling the features. (Writing Good Web Page Content)
- Feature: HTML Toolbox scans your page for HTML coding errors.
- Benefit: Eliminate coding errors that can break pages in some browsers!
3. Instead of creating a list that reads:
We meet all your ____ needs by:
- offering the lowest price.
- providing first-rate service.
- shipping your order in just 24 hours.
Create a list that reads like this:
At ABC Company, we offer you:
- the lowest price on ______.
- first-rate service. Ask us any questions you have about ____.
- shipping of your _____ in just 24 hours.
Link text
1. Don't use "click here" as link text. Instead of "To download W3C's editor/browser Amaya, click here", use "Get Amaya". Meaningful anchor text helps users understand what they will get when they click the link, and also helps the user scan and quickly differentiate between links.
2. Don't put verb phrases in link text. Instead of "Tell me more about Amaya", use "Tell me more about Amaya: W3C's free editor/browser that lets you create HTML, SVG, and MathML documents."
3. When writing copy, write about your subject; even if the text contains links. (Writing hypertext copy)
Elf Sternberg is known as the author of the Journal Entries, an epical work of serialized erotic fiction.Do not write about the reader's movements, neither in terms of changing servers or visiting resources:
Go to the home page of Elf Sternberg.nor in terms of interactions with their user interface:
Click here to visit Elf Sternberg's home page.
4. Avoid talking about mechanics. For example, "Our archive includes much public domain software and text whose copyright has expired." instead of "There is now WWW access to our large FTP archive which was previously only available by FTP, NFS and mail. This collection includes much public domain software and text whose copyright has expired."
As another example, use "The tutorial has more about this." instead of "You can read more about this in the tutorial which is linked to the home page "
5. Write links that don't have to be followed. Providing summary information at the link site can convey enough information to save the reader from following links they would otherwise have to follow just to find out a small amount of information. For example, "Our conclusion is that the stock is up because of an unusually high beta, not because of earnings growth."
6. When providing a list of links or other resources, do not include the words “homepage” or “website”. Of course it’s a website, and the user will assume that it is the homepage unless notified otherwise.
Other usability guidelines:
- Have a clear statement of purpose for the website. Emphasize what your site offers that's of value to users and how your services differ from those of key competitors. Include a tag line that explicitly summarizes what the site or company does. (The Ten Most Violated Homepage Design Guidelines)
- Include a tagline. A website's tagline must explain what the company does and what makes it unique among competitors. Two questions can help you assess your own tagline: Would it work just as well for competitors? Would any company ever claim the opposite? (Tagline Blues: What's the Site About?)
- Emphasize the site's top high-priority tasks (Top Ten Guidelines for Homepage Usability)
- Make sure articles & news stories have date. (Top Ten Web Design Mistakes of 2003)
- Always use site map, breadcrumb strips. Also footer with text links. (How To Impress Search Engines and Users - Focus: Web Site Navigation )
- If the site is sufficiently large, include site search. Try Google's free site search or Atomz.
- Use pop-up windows only for context-sensitive, supplementary information such as help text.
- Users are increasingly using pop-up blockers, which will stop pop-up windows from opening.
- Pop-up windows are confusing because they break the Back button and interrupt the user's normal flow back and forward through the site. If the user does not close the pop-up window right away, new links might load in the pop-up window rather than the main browser window.
- Pop-up windows make it difficult to provide persistent links to important content.
- Users will have trouble finding that content later unless they follow the exact same path.
- If search engines do manage to find the content, it will be presented out of context when a user clicks the link from the search engine results page.
- Opening up new browser windows is disrespectful to the user -- if they want a new window, they can open it themselves. (The Top Ten New Mistakes of Web Design)
- Provide explicit warning when linking to files in any format other than HTML. Even if the user has Adobe Acrobat Reader installed, the user will still have to wait for Acrobat to load. (Readers' Comments on the new Top-10 Design Mistakes)
- Except for acronyms, avoid all caps. All caps are difficult to read, and is considered shouting on the Internet. (Use All Caps with the Right Fonts) For emphasis, use bold or italics.
- Don't underline any text that's not a link, even if your links aren't underlined. Underlined text is almost universally assumed to be links. Similarly, don't use the color blue for anything but links. (Guidelines for Visualizing Links)
- Colors
- Change the Color of Visited Links. Knowing your past and present locations makes it easier to decide where to go next.
- If You Pick One Color, Pick Them All - Quality Web Tips. A visitor may have colors set in their browser preferences, resulting in incongruous or alarming combination of colors.
- Fonts -- respect the user's preferences and let them resize text as needed.
- Do not specify the font-size in pt, or other absolute length units. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser).
- Use relative length units such as percent or (better) em, or, even better, set a base font-size for the document and use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within the document. (Care With Font Size - Quality Web Tips and Let Users Control Font Size)
- ALT text is meant to provide alternative or substitute text, primarily for use when the image is not being displayed. Sometimes a description of the image is appropriate, but usually an explanation of job the image was doing on the page is more useful. (Use of ALT texts in IMGs)
- Use link titles.
10 Commandments for Great Copywriting
From Writing Compelling Promotional Copy
- Know Your Audience
- Determine Your Value Proposition
- Find a Unique Selling Proposition (USP)
- Establish an Objective
- Use a Compelling Subject Line
- Include a Great Headline
- Avoid Weasel Words
- Don't Use Passive Voice - Write in the Present!
- Include a Customer Quote
- Keep Copy Clean and Concise
Other Links
