Omni Marketing Interactive - Designing for People who Search Home    
  Site map  
  Contact us  
   
Services Clients About Omni FAQs Design tips Links and resources Request a quote
   
       
   
Tips overview
Search engine optimization
Website usability
Information architecture
UX website design
Omni photo - top
Photo - tips
Omni photo - bottom

5 Universal Rules of Web Design and Layout

Search engine algorithms change all of the time. Website design software evolves. Devices are updated and invented...but these rules are universal.

5 Universal Rules of Website Design image

All websites should follow the 5 Universal Rules of Web Design. If your site's visitors cannot read a web page, then they will leave your site with a click of the "Back" button. Make sure your web development team follows these 5 important rules.

  1. Your website should be easy to read
  2. Your website should be easy to navigate
  3. Your website should be easy to find
  4. Your web page layout, design, and labeling should be consistent throughout the site
  5. Your website should be quick to download

1. Your website should be easy to read

One of the most important rules in website design is that your website content and navigation should be easy to read. What does this mean?

You should choose your text and background colors very carefully. You don't want to use backgrounds that obscure your text or use colors that are hard to read. Dark-colored text on a light-colored background is easier to read than light-colored text on a dark-colored background.

You also don't want to set your text size too small (hard to read) or too large (it will appear to shout at your visitors). All capitalized letters give the appearance of shouting at your visitors.

Keep the alignment of your main text to the left, not centered. Center-aligned text is best used in headlines. You want your visitors to be comfortable with what they are reading, and most text (in the West) is left aligned.

When it comes to search-engine friendly design, readability is a ranking factor. Here are some citations:

To summarize, making sure that your content is easy to read means that your text should be:

  • Legible
  • Readable
  • Scannable
  • Understandable (i.e., using the users' language)

2. Your website should be easy to navigate

Like content, site navigation should be scannable. Too much navigation, and it will seem unwieldy. And users will just ignore it (or even worse, abandon your site).

Too little navigation, and users will not feel in control. And they are likely to abandon your site. In fact, the #1 design complaint about websites is difficult navigation.

All of your hyperlinks should be clear to your visitors. Graphic images, such as buttons or tabs, should be clearly labeled and easy to read. Your web graphic designer should select the colors, backgrounds, textures, and special effects on your web graphics very carefully. It is more important that your navigational buttons and tabs be easy to read and understand than to have "flashy" effects.

In fact, navigation is best when it is used and not noticed. The WOW factor should be on your content, not your site's navigation system.

Clickability and tappability should be clear to users. Link colors in your text should be familiar to your visitor (blue text usually indicates an unvisited link and purple or maroon text usually indicates a visited link), if possible. If you elect not to use the default colors, your text links should be emphasized in some other way (boldfaced, a larger font size, set between small vertical lines, or a combination of these).

Text links should be unique -- they should not look the same as any other text in your Web pages. You do not want people clicking on your headings because they think the headings are links.

Information scent should be clear and consistent in site navigation. If not, they are very likely to click off your site as quickly as they clicked on.

The purpose of site navigation is to enhance website effectiveness to enable task completion for both humans and technology. Does your site navigation system support task completion?

To summarize, making sure that your your navigation is easy to use means that your navigation design is formatted to be:

  • Distinguishable
  • Scannable
  • Clickable/tappable
  • Predictable
  • Consistent and persistent

SEO

Search Engine Optimization
Services

Usability

Website Usability Services

Training

SEO & Usability Training


3. Your website (and content) should be easy to find

How are your visitors finding you online? The myth, "If I build a website, they will come," is still a commonly held belief among companies and organizations new to the Web. People will not come to your website unless you promote your site both online and offline.

Websites can be promoted online via search engine optimization, niche blogs and web directories, award sites, online advertising, electronic magazines (e-zines) and links from other websites. If you are not familiar with any of these online terms, then it is best that you have your site promoted by an online marketing professional.

Websites are promoted offline via the conventional advertising methods: print ads, radio, television, brochures, word-of-mouth, etc. Once you have created a website, all of your company's printed materials including business cards, letterhead, envelopes, invoices, etc. should have your website's domain name printed on them.

Not only should your website be easy to find, but your contact information should be easy to find. People like to know that there is a person at the other end of a website who can help them in the event that:

  1. They need answers to questions which are not readily available on your website;

  2. Some element on your site is not working and end users need to be able to tell you about it, and

  3. People need you to contact you regarding a link to your site content.

By giving all relevant contact information (physical address, telephone numbers, and email address), you are also creating a sense of security for your end users. They can contact you in the way that makes them feel the most comfortable.

4. Your web page layout, design, and labeling should be consistent throughout the site

Just as in any document formatted on a word processor or as in any brochure, newsletter, or newspaper formatted in a desktop publishing program, all graphic images and elements, typefaces, headings, and footers should remain consistent throughout your website. Consistency and coherence in any document, whether it be a report or a set of web pages:

  • Communicates trust, reliability, and dependability

  • Contributes to cohesive brand and user experience

  • Contributes to ease & predictability of navigation (information scent)

For example, if you use a drop shadow as a special effect in your bullet points, you should use drop shadows in all of your bullets. Link-colors should be consistent throughout your web pages. Typefaces and background colors, too, should remain the same throughout your site.

Color-coded web pages, in particular, need this consistency. Typefaces, alignment in the main text and the headings, background effects, and the special effects on graphics should remain the same. Only the colors should change.

5. Your website should be quick to download

Studies have indicated that visitors will quickly lose interest in your website if the majority of a page does not download quickly.

Download time is an often misunderstood concept. In fact, there are different types of download time: machine speed and human speed.

Machine speed refers to actual download time. In other words, if we timed the responsiveness of a web server in delivering all kinds of web documents (images, HTML pages, scripts, etc.), this is how the machines or software will determine actual download time.

Items on a web document that can affect machine speed include:

  • Browser caching
  • DNS lookups
  • Redirects
  • Bad requests
  • Combining images using CSS sprites
  • Document.write
  • CSS @import
  • Preferring asynchronous resources
  • Deferring parsing of JavaScript

Sounds technical, doesn't it? It is. You can test machine speed with Google's Page Speed Insights tool.

Unfortunately, people tend to focus on machine speed over human speed. Users' perception of speed is more important for conversions and brand than machine speed.

"…perceptions of download waiting are found to be more reliable than actual waits in predicting web site abandoning. Finally, delays near the start of the download are perceived as longer than later in the process, and time pressure worsens the effect of download waiting at the earlier stages of delay."

Human speed refers to perceived download time. Information scent has a powerful influence on perceived download time. If the page content validates users' information scent? Then the download time is perceived as fast.

If the page content doe not validates users' information scent? Then the download time is perceived as slow.

Below are that affect perceived download time:

  • Gender
  • Time online
  • Economic factors
  • Perceived length of wait
  • Attitude to delay (patient vs. impatient people)
  • User expectations
  • Type of task
  • Uncertainty and information about the wait

Animation on a web page affects both actual and perceived download time. Sure, animation looks "cool" and does initially catch users' eye, but animation graphics and coding tend to slow sites down.

And if animation interferes or distracts from information scent, then users perceive the download time as slow.

Test the download time of your pages first. If the download time of your page is relatively short and the addition of animation does not unreasonably increase the download time of your page, then and ONLY then should animation be a consideration.

Finally, before you consider the personal preferences of your web page design, you should consider all of the above rules FIRST and adapt your personal preferences accordingly. The attitude "I don't like how it looks" should always be secondary to your website's function. Which is more important: creative expression/corporate image or running a profitable business?

Download 5 Rules of Website Design infographic.

Related articles

If you liked this website design tip, here are more links to related design tips and articles from Omni Marketing Interactive:

If you have any questions about Omni Marketing Interactive's search engine optimization (SEO), website usability, information architecture (IA), or web design services, please call us at 847-426-4256.

top