Web Usability Roundup!

General Standards
Content and Text
Layout and Visual Design
User-Submitted Materials
Navigation
Membership
Color
Search

General Standards

• Users shouldn't have to be smart. Don't make users think unnecessarily, they prefer easy-to use design
• Consistency within the overall device experience is more important than consistency across platforms.
  • Corollary: Websites look different in every browser. Check them.
• Test early, test often, and be sure to test with representative users well before a product ships.
• Don't design a website for yourself. You will spend little time visiting the website compared to your audience (who matter).
• Choose metaphors that will enable users to instantly grasp the finest details of the conceptual model. Borrow behaviors from systems familiar to your users.
• Users will assume that design quality is an indicator of credibility
• People hate inconsistency. Keep elements consistent throughout the site.
• Web users are impatient and should be able to expect instant gratification. They should not be required to wait for more than a few seconds for a page to load
• Use analytics software to get user data to make improvements.
• Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Content and Text

• When titling pages, give the most descriptive and simple title possible. Use titles and descriptions that make sense to the target audience, not a generic audience.
• Content should not contain information which is irrelevant or rarely needed: keep it as concise as possible.
• Online copy should be 50% less wordy than the paper equivalent.
• Keep your information concise and useful
• Users don't read, they scan. Long text blocks without images and keywords marked in bold or italics will be skipped
• On computer screens sans-serif is hard to read than serif
• Avoid too many different fonts on a single page
• Use font sizes that are large enough to be readable on standard monitors.
• Important text should have high contrast against the background
• Avoid making people sit through ads
• Use images to attract attention to important text
• Include taglines for images (this is open to debate)
• If you have a tagline, it should be very obvious.
• "Comic Sans has an appropriate space and time for utilization. Sometimes it's just the right touch!" Anything is possible -Zoe
  

Layout and visual design

• Conventions are our friends: Conventional design of site elements doesn't result in a boring web site, they reduce the learning curve for users
• Reduce the noise level of the Page. People hate a cluttered screen: keep the design aesthetic and minimalist, and don't be afraid of whitespace
• Never obscure the purpose of the site. It should be immediately obvious on seeing the site for the first time.
• Keep most important website content above to fold (this one is open to debate)
• The less graphics the better
• Remove, or tone down, background images
• Keep the user interface consistent from page to page
• Keep scrolling to one-directional and preferably vertical.
• Don't rely on fixed-width designs. Every screen has different ratios, so allow the design to take advantage of all of them
  • Corollary: Remember: your web design does not need to be pixel perfect on every screen.
• Reduce the amount of movement on the page, such as animated banners and buttons
• Use color, shape and orientation to highlight important or recently updated features
• Increase the visual prominence of important Items, decrease the prominence of less important ones
• Users focus on pictures of people's faces and we glance at the direction that the image is also looking in
• Ensure that your error page has a link to the site map and the home page, a search box, and a minimalist look.
• Remember that most users are blind to advertising
• Consider these visual design aspects: contrast, repetition, alignment & proximity
• Consider these spacial layouts: use a grid structure, standardize the screen layout, and group related elements.
  

User-Submited Materials

• Choose the right interface controls for the situation
• When designing any sort of form, make sure that the method of submitting them is obvious and easy to understand.
• Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
• For multi-step processes, break down the steps. Make the user feel like they are completing each step)
• When designing a form, use clear labels that are as non-threatening as possible.
• Selecting items from a list is naturally easier than filling in a blank
• Form Labels work best above the field, not below
• Require users to type in their password once only
• When filling out an address, auto-fill city and state fields based on zipcode
• Allow users to auto fill payment address from ship address
• Don't ever check 'send me newsletter/other extra emails' option by default
• Use status mechanisms to keep users aware and informed.
• Avoid CAPTCHA!
• Don't design misleading UI controls, like graphic elements that looks like a button, but isn't
• Remove steps and barriers that users have to go through to accomplish their tasks.
• Make actions reversible. Support undo and redo.
• Make objects consistent with their behavior. Make objects that act differently look different. IE: Make sure there's a big difference in looks between your cancel and submit buttons
• On feedback pages (transaction complete, form submitted...) make sure content is printable.

Navigation

• People must be able to find what they need as quickly as possible
• Avoid making people click unnecessarily
• Always link the Site logo to the homepage
• On complex sites, consider using bread-crumbs to let people know where they have been.
• Keep everything close. No matter how complex your directory structure may be, there's no reason any page should be more than three clicks away from the home page.
  
• Provide an appropriate hierarchy in the navigation, don't bury things that people are likely to need under levels of navigation.
• Build redundancy into the navigation. Make it easy for the user to find their way around.
  • Corollary: If you want visitor traffic to flow to specific pages on your website, links to those pages should be in prominent on your website.
• Offer users stable perceptual cues for a sense of "home"
  

Membership

• People hate having to become a member in order to accomplish their goals
  • Or.....People love becoming a member. Depending who you ask
• People love being rewarded
• Users like to customer appearance and content
• Never ask users to reenter their user name after they've just signed up
• Visibility of system status - make sure the user always knows their situation (if they're logged in and out, etc)
• Consider allowing users to login with email address or openID
• Keep users logged in so they don't have to log in twice
• If there is an 'Upgrade' option make sure it's listed from the account page
  

Color

• Color codes should respect existing cultural and professional usage. For example...
• If text is blue or underlined, it must be a link.
• Use color to manage attention: to group related items, or for emphasis
• Stay away from too many colors on a page
• Be careful of low contrast color schemes - they can be hard to read
• Use red carefully. Red is an eye magnet for a lot of people.
• Recognize and use color-blind safe colors for important information
• Consider how people associate color with feelings: red for hot, blue for cold, white with purity and clarity, black with darkness and death, yellow with happiness and sunshine, etc.
• Use few colors, and the ones you do use should mostly be dim.
• Darken background under modal windows (shadowbox-style implementations)

Search

• Search boxes should be at least 27 characters wide to easily display text.
• If a search box is available it should be placed at the top of web page.
• Consider using a faceted search (and if so, place it on the left side of a layout)
• When searching, consider a dropdown search option to narrow down the specific search. This will cause less effort to search & be more specific
• Consider these issues:
  • Are users comfortable with specialized query languages (e.g., Boolean operators), or do they prefer natural language?
  • Do they need a simple or a high-powered interface?
  • Do they want to work hard to make their search a success, or are they happy with "good enough" results?
  • How many iterations are they willing to try?