Its true that many of the people making design decisions on the web are not designers. They are engineers, business people, students, factory workers, race-car drivers, etc. Since content is the main value proposition of the internet, how can we keep bad design decisions from obscuring their contributions? Perhaps the philosophy of “do no harm” should be applied to design. It inspired me to put together these ‘rules’ which, if followed, should provide a pleasing experience for all.
Color
- Avoid it, or use sparingly.
- Make body text off black and page background slightly off white.
- Links should be blue only if they are in a paragraph.
- Use colors or underlines in hover states, turn off default underlining.
- Headers and sidebar navigation, though clickable, need not be blue.
- Use gray whenever possible to change emphasis rather than color.
Type
- Under no circumstances use Arial and Helvetica, use “Lucida Sans Unicode “for Windows, and “Lucida Grande” for Mac as defaults instead. Here are some font selection tips.
- Readability is enhanced by columns of text.
- Use font stacks to try more uncommon fonts. Try Google fonts.
- Avoid using more than one font. Use variations instead (size, color).
- Avoid bolding text, especially headers at large font sizes.
- Give text more space (line-height) and padding.
Image
- Make them clickable, or make them really big.
- If an image is not clickable or big, rethink why it is part of the design taking attention away from something actionable.
Grouping
- Use alignment to indicate similarity. Avoid lines, bullets, backgrounds or colors to reiterate similarity.
- Repetition of elements from one page view to another is vital to reinforcing importance of elements and introducing new ones.
- HTML is great at enforcing semantic similarity, as well as visual. Avoid exceptions that break a rule or classes that change visual display on the same tag.
Transitions
- Yes, please.
- Transitions ease the introduction of elements an allows even calmer focus on the feedback from the user action.
- Avoid auto play. Reward clicking or other interaction.
- Don’t assume all interaction is purposeful. Make recovery as easy as possible.
Input
- Avoid correcting or pointing out error using red or other scolding color.
- Use online help or tooltips to check each entry one by one.
- Don’t assume in a dropdown list that aphabetical is the ideal sort.
- Assume that questions that are meaningful to the business problem may require an example.
- Don’t assume that non-required questions should be asked anyway
- Indicate what the information will be used for.
- Never use a cancel button.
- Align right all submit buttons.