Web Usability Roundup!
Content and Text
Layout and Visual Design
- 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.
- 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.
- 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"
- 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 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 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?