A Step-by-Step Approach to Optimize Visitor Flow and Meet your Website Objectives
Article by Travis Mitchell, Web Developer | March 1, 2014
Having designed a large number of websites, I started to see a workflow pattern form that has turned into a method that can be used to achieve optimal visitor flow based on the goal of the website. When designing a website, the overall goal is to layout the website content in a manner that your visitors will find it natural to proceed in the order or direction that is intended. This hierarchy of website design applies not only to website content, but to design in general. We will determine the goal of the website, categorize the information by order of importance, develop a strategy, then apply this heiarchy to the design in order to aim for a successful visitor flow or conversion. I hope this information might be useful to those beginning website development.
The ideas presented here might be somewhat abstract, so we will use an example website project so that the concepts can be best understood. So for the sake of example, let’s say that we just landed a new website design project for a photo retouching company. We are ready to start designing, but “where do I begin?” Let’s start by determining the objectives or goals of the website.
Step 1: Determine the objectives or goal of the website
This might be the most important step, as your findings will inform all design decisions to follow. We need to figure out the goal of the website to ensure that we proceed with the web design in an optimal fashion. Let’s ask some questions, either in a meeting with your client, or to yourself if it is your website, or if the client is “hands-off” and prefer that you figure out the details. These questions can apply to the website overall, or to a specific web page on the site.
- What is the objective of the website? Is the client selling a product, showing a portfolio, do they offer a service and are trying to get customers, or is the website strictly informational?
- What is the objective of a particular web page? Do you want the visitor to buy a product, fill out a contact form, pick up the phone and call? Do you want high page rank, or want ad clicks or conversions, maybe you simply want Facebook “likes” or “shares”?
After asking these questions, you should have a fairly good idea on what the ultimate goal of the website should be. Now keep this fundamental objective in mind throughout the rest of the website design process.
Step 2: Organize the website content into a hierarchy of importance
So we’ve figured out the main objective of the website. Before we start designing the website visually, let’s organize the content into a hierarchy based on importance and flow. We can simply make an ordered list and prioritize all of the web page elements we need to consider. Remember to keep the overall website objective in mind.
Step 3. Develop a web design strategy based on the website goals
Now, let’s take a little time to think about what we want the visitor experience to be like. How do we want the visitor to flow through the website in order to potentially meet the website objective? By developing a strategy first, we will have a better idea of how to layout the website design and save time later.
Step 4: Optimal visual placement of website content
Now that we have established a website goal, organized a prioritized list of content and elements to add, and have a clear strategy, where are we going to put it all? Typically, website designs can be divided into several key areas. These areas are by no means essential, but act as a good starting point for a lot web designs (use your license to be creative!). The website page can be broken down into areas for a header, navigation menu, content area, sidebar, and footer. (See Figure 3.) Now, let’s consider where to put the logo, navigation, ads, contact info, etc.
THE WEBSITE HEADER AREA:
The website header area is the usually the first thing a visitor will see. This is a very good spot to place your website title or logo. You might also want to place a large graphic, or rotating slideshow of images depending on the goal of your website. For some websites, the header area is also a good option to place an ad.
THE WEBSITE NAVIGATION MENU:
Assuming that your website has multiple pages, you will want some type of navigation menu. What elements should we feature in the main navigation menu? Earlier when we prioritized the website pages, we listed some as high-priority. Adding them to the top level of the main navigation menu is a good idea, as it makes them quick and easy to find.
THE WEBSITE SIDEBAR AREA:
If you want to feature some mid-priority elements or web pages, adding a sidebar is a good option. Mid-priority pages can be listed as sub-menu items of your navigation menu, but consider that having them listed in the sidebar may make them more accessible. This might also be a good location to place ads, or larger graphical items.
THE WEBSITE CONTENT AREA:
This is where the bulk of your website information will be placed. Each web page will display something different. Depending on the type of content you might want to consider splitting the content area into two or three columns. As you will see later, not only will we use this area for paragraphs of text and images, but we will also place ads, graphics, and social media links specific to each page.
THE WEBSITE FOOTER AREA:
The website footer area is a good spot to place links or information that is required, but less important to the visitor. When we prioritized the website pages earlier, we listed some as low-priority. We will add links to those pages here. Also, you will often see the copyright info place in the footer area.
Step 5. Apply visual styles to the website elements to establish a hierarchy
This is where the fun begins… finally we can start making things look good! Now that we’ve decided upon the general location of our web page elements, let’s add some visual and technical hierarchy to help both visitors and search engines easily navigate through the website. Again, remember the overall objective of the website when making design style choices.
THE OVERALL TEMPLATE DESIGN:
This might be an opportune time to either learn or re-visit the Principles of Design, as everything that is visually appealing seems to adhere to the fundamental design rules. Let’s start building the foundation. Do you have any existing elements, such as a logo, or photos, that we can use form a basic color palette? Do you want the overall feel to be dark or light? Meaning a dark background, with lighter text, or a lighter background with darker text. If you go somewhere in the middle, the background might not provide sufficient contrast to make your content legible. (See Figure 6.) Let’s make these decisions now, as we will design of the rest of the elements based on this overall look. Start from scratch, or with a basic template, whichever you prefer.
USE VISUAL CUES TO OPTIMIZE USER FLOW:
With an overall look in place, let’s now begin to refine the design, and let’s do so in such a manner that visitors will find it easy, natural, and simply obvious how they should progress through the website. We chose to use a pretty basic layout for our design, it might not be groundbreaking, but can provide a very functional and familiar setting for our visitors. Starting with familiarity will only help expedite this process. We will apply what we know about the design principles to maximize the chance that they do so, making us more likely to gain a new customer, sell a product, or meet our intended objective. At first glance, our visitor is already consciously or subconsciously deciphering the hierarchy of our design, so let’s take advantage of visual cues to make that job easier for them.
- USE OF CONTRAST: The majority of the following visual cues are based on contrast. Learn to apply contrast effectively and you will achieve great results in establishing an apparent hierarchy to your website. High contrast items will be perceived as more important, just as low contrast items will be considered insignificant or secondary.
- ORDER CUES: Visitors will naturally interpret importance based on order. Simply put the most important item first or near the top to optimize ordering cues. Put the low-priority items near the end or bottom. When ordering, take into consideration your visitor flow strategy, as their might be special cases in which you need to break this rule.
- SIZE CUES: Our viewers will interpret larger items as most important. So let’s make our high-priority items the largest and less significant items smaller.
- WEIGHT CUES: As it applies to font weight, bold text is perceived as important and thin or light weight text, less so. We should style our font weights accordingly to optimize font weight cues.
- COLOR CUES: Items with the most contrast are easier to read and stand out with authority. We should apply color in this manner. Make the most important items have the most contrast to their background. Use bold or striking colors to maximize this effect. While doing so, keep in mind the overall design palette and choose colors that fit well.
- POSITION CUES: Position cues rely on the formation of repeating patterns. For example, if we are viewing a website with a “NEXT PAGE ” button and we click on it to go to the next. We read the second page which also has the “NEXT PAGE” button in the same place, and we click it. We will assume that the button will be in the same position on the third page. If the button were to be moved, we would be disoriented. Use position cues to keep your visitors focused on what matters.
USE VISUAL CUES FOR SPECIFIC WEB PAGE ELEMENTS:
Pay special attention to user interaction items such as buttons, links, and even ads. It might be a good idea to style all of these items in a similar fashion. For example, once your visitor knows that they can click on things that are colored blue, all blue items are immediately clickable to them, and thus more likely to be clicked on. It would be illogical that clickables were suddenly red. We can use this visual cue device to help our visitors flow as intended.
COMMON MISTAKES & WHAT TO AVOID:
These visual cues seem almost obvious, but this is exactly where I see a lot of website designs fail. Follow these simple guidelines and you will be on your way to establishing a successful visitor flow. You should also try to avoid excess clutter, remove anything that is trivial as it will only distract your visitors from what is important.
I hope that you have found this article useful and can use the information provided to develop your own successful website designs. Please feel free to contact me with any positive or negative feedback so I can better the article in the future.