9 Golden Rules of Visual Design

A consistency in Visual Design signals to users that they are in the right place and that they are moving in the right direction. Visually consistent displays are easier for users to learn, result in fewer user errors, and increase user satisfaction. When you are building new web applications, ensure that your visual design is consistent with following visual aspects:

1. Text

Use the standard readable fonts like Verdana, Arial, Helvetica or Sans-Serif for body text. The size of the standard body text should be legible and easy for users to read in usability testing. The color of the body text should design to contrast with the background and aid readability.

Example CSS for body text:

body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:small; color: #666; color: #333; text-align:center; background-color: #fff;}

2. Line Length

Choose appropriate line lengths. Users tend to prefer shorter line lengths on web sites to facilitate searching and scanning content. As a general rule, make the length of a line of text no more than about 3½ alphabets or about 75 characters. In CSS, specify a maximum of 35ems. Sample of text 35ems wide:

Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide Sample text with 35ems wide.

However, if reading speed is most important and you are trying to encourage users to read a large amount of text, use a slightly longer line length (80-100 characters per line) to facilitate faster reading.

When displaying continuous text in columns, display ~50 characters per line. Do not use very short lines of 20 characters or less because this hinders readability.

3. Headings

Use headings to give users clear entry points to information, signal changes in topic, and to indicate how information is structured—to show the hierarchy of the information.

Three levels of heading styles are provided (h1, h2 and h3).
• Do not use more than three levels of headings in a web application.
• Use first level headings (h1) for main topics, use second level headings (h2) for secondary topics, and so on (h3).

Make the phrasing of headings parallel. This means, when users read a list of headings, the phrases are worded similarly. Widely varying the wording can be distracting to users. For example, let’s say there were headings
• Pricing
• What items are in stock
• To place orders

This should be revised to make the phrases parallel to increase comprehension:
• Prices
• Inventory
• Orders

After labeling the page with a title, consider whether or not you need any more headings. If the page title encompasses the content and no further clarifications or markers are needed, then you do not have to use more headings.

Heading Styles:

h1 {font-size: 120%; padding: 0; margin: 0; background-repeat: no-repeat;}
h2 {font-size: 100%; padding: 0; margin: 0.5em 0 0 0;}
h3 {font-size: 90%; font-weight: bolder; padding: 0; margin: 0;}

4. Colors

The web site associates each of the main topics with a color (red, green, blue respectively). Use the site color scheme to reinforce the difference between the divisions. Reinforcing the color scheme aids users in selecting the correct web application when there are similar-sounding applications in different parts of the web site.

Use color to connect related information. For example, the contact information page uses a red title to remind users they are looking at company's contact information.

5. Title Graphics

Remember following things while creating a graphics:

• The larger word is always lower case with initial cap.
• The smaller word is always all caps.
• The large word or emphasis word doesn’t have to be first or on the top.
• Use 2 points of space between lines. The lines should appear close, but not touch.
• The relative relationship between font sizes should be 2:1 for two liner graphics.
• The smaller word always aligns to the right of the larger word. The goal is to create a tight heading that isn’t too wide, is easy to read and is visually pleasing.

6. Images, Photos & Graphics

Ensure that any Images, Photos or Graphics used add value to users and increase the clarity of the information on the site or in the web application.

Use following guidelines:

• Except for maps and icons, all images on the website must be color photographs. Do not use clip art, animated art, line drawings, or black-and-white photos.
• Photos must be professional and must appear clear and crisp when posted on the site. You should have several options for acquiring high-quality photographs.
• Photos must match the overall look and feel of the website; only photos with a similar size, shape, and style should be used.
• Photos should include people whenever possible to make the site more welcoming to users. Images of people should be positive and upbeat, and should be chosen with diversity in mind.
• Make sure clickable images, such as maps and icons, appear clickable. Have the mouse cursor change from a pointer to a hand when users hover over an image.

7. Icons

Use symbols and icons consistently throughout the web application. Using consistent icons across web applications reduces a users’ learning curve when they try a new application.

Use symbols that users recognize. Before creating a new icon, reuse existing icons that have been used in the same context, and for the same user task. Also, consider carefully the cultural meanings of some symbols. Ensure the icon you design is cross-cultural and not too ulturally-specific.

8. Alternative Stripe Rows and Columns

The alternative stripe is a visual aid that alternates background colors so that every other row is light and dark. It is used mainly on the rows of tables and in search results lists. If users need to read data in rows, a alternative stripe aids them in spotting where each row starts.

Use only a gray and white alternative stripe for the web applications. Be careful not to overuse the alternative stripe in following situation:

• A small data set
• Less than 4 or 5 lines
• Less than 2 or 3 columns

Use alternative strip option when you want users to focus users’ attention on each row one by one.

9. White space

Provide plenty of white space so the page looks clean and organized. Use white space to make sure users can easily identify logically-related information.

Minimize the amount of white space when users need to search or compare information.

Follow these specific guidelines to make white space consistent:

• Use 25 pixels of space between unrelated items or fields – for example, between address fields and credit card fields, between the bottom of a table and navigation links.
• Use 10 pixels of space between two tables.
• Use 5 pixels of space between related fields – for example, between address fields such as address, city, state and zip code.

Do you have any suggestions? Add your comment.

Related Posts :