Regardless of your website’s function (e-commerce, organizational, non-profit, etc.), the home page is like a storefront window. It is a peek inside of your website. And if it is not appealing or intriguing, then chances are it is the only thing your users will see because they will likely move on very quickly.

I have written this post more towards the design community, those who do what we do; however there are some very important points made here that will apply even if you are only a website owner. So I encourage you to read on and enjoy!

Diamond Springs Website Mobile View apple_store

The world may be new to the Internet, but it isn’t new to business. The Internet acts as a virtual street, with millions of companies and organizations all vying for your business. Like that window, a home page is a website’s only chance to show visitors what there is to offer. A website visitor, like a shopper looking in a window, makes a decision within a very short amount of time whether a website will be any benefit to them.

So if you wouldn’t fill your storefront window with huge advertisements, erroneous announcements, irrelevant news, and anything else not pertaining to your store’s purpose, then why would you do do that to your website?

Stand On One Foot, Touch Your Nose, and Rub Your Belly

That isn’t required to build a website, but it is similiar to the difficult balancing act you must accomplish on the home page of a website. You have everybody to please and no room to do it.

In general, there are a handful of tasks all home pages must accomplish and that designers must be mindful of:

  1. Establish an identity – logo and slogan
  2. Make a good first impression – this is the key to keeping visitors
  3. Provide visual and verbal clues to reveal the site’s underlying content and encourage deeper browsing – teases, recent articles, featured items, etc.
  4. Provide a clear navigation
  5. A place for site-wide search
  6. Fresh content to attract return visitors
  7. Supply both new and return visitors with desired content – each visitor is looking for different types of information
  8. Provide multiple entry points – aside from the navigation, give users different ways of accessing the site’s content

Always Welcome New Guests

Priority should always be given to new visitors. Quite simply put, without new visitors, you will never have any return visitors.

Give them an obvious starting point that will answer these questions:

  • What is this?
  • Who are you?
  • What do you do, sell or make?
  • Why are you better than the rest?

Give Return Users Everything They Need and Nothing They Don’t

Return users know who the company/organization is, what they do, and they are obviously pleased with the organization. This is where the balancing act becomes complicated. Return users do not want to be confronted with any pop-ups or large blocks of information they already know. And they want a quick and easy way to get to the tools or information they need most.

An effective way to accomplish this is, if the website requires any sort of login, to give account holders a different layout, with different options than new users.

mailchimp_loggedout

Logged Out

 

mailchimp_loggedin

Logged In

 

return_new_users_breakdown

It is unnecessary for certain types of websites to require a login; therefore that option will not work in all cases. If no login is required, try giving a majority of priority real estate (areas “above the fold” or above the 600px mark) to new users and then give the remainder to return visitors. This is based on the idea that return users will have a higher tolerance for scrolling and more familiarity with where items are. However, never place high frequency items “below the fold.” Below are two examples of an ideal balance for return and new visitors.

Answer These Questions Before It Goes On The Home Page

Only certain content should appear on the home page, so use these questions to help assess the importance and need of an element. The answers to these questions should help put a potential element in perspective:

  • Will this element be frequently used?
  • Who will this element help – new visitors, return visitors, or both?
  • Will this element confuse or frustrate new visitors? return visitors? or both?
  • Is this element consistent with the website’s purpose?
  • Could this element be placed on a secondary page will equal success?

Control Your Visitors

Internet users are certainly unpredictable; however with an effective visual hierarchy and calls-to-action, you can control the actions of most visitors.

Calls-to-Action

Subscribe to Our Newsletter today to stay up to date with us! That is an example of an effective call-to-action. You were given a task to complete, that if in the right context, would have enticed you to take an action and made you aware of a feature or service.

A good call-to-action compels people to act with an appealing offer. “Click here” or “Learn more” are the most common calls-to-actions. However they aren’t very effective in encouraging a user to actually click as they provide no insight into what benefit the user will receive. A major goal of any home page is to encourage users to explore what the site has to offer. There is no better way to accomplish this goal than to simply state the task you would like the user to perform, calling them to make an action.call_to_action

Graphics can also be used as calls-to-action when combined with the verbal message. Users respond more actively to graphic calls-to-action, even if it as simple as an arrow or other symbol pointing to the action.

Setting The Visual Hierarchy

Design 101 will tell you that giving everything equal weight on a web page will lead to clutter and confusion. Using contrast of size, color and shape will establish a visual hierarchy, or the order in which a user will encounter each element on a website. The goal is to allow the user’s eye to travel throughout the design without getting stuck on any one part.

On paper, determine the hierarchy of elements based on relevancy before you begin designing. Then place the elements within your design, giving the most emphasis to the most important element and so on. Below is an example showing the order in which the content is read by the user. Notice how there is a nice flow to elements 1-3 and that they are in order of importance.

squarespace_hierarchy

Above All, Make Your Purpose Absolutely Clear

If the intention of a website is not made clear within seconds of viewing, you have set up your visitors for failure. They may not leave right away because they may misinterpret the intention of the website, which will ultimately lead them to search for information that does not exist.

It is easy to lose sight of your website’s purpose without even realizing it. Refer to the principals laid out here, and you should be well on your way to attracting and keeping your user’s attention.

Mike Shelton
Web Designer at Key Web Concepts