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.
DETERMINE THE GOALS OF OUR EXAMPLE WEBSITE DESIGN:
Our website has several goals. Here they are organized into a hierarchy of importance:
- Gain clients to provide the photo retouching services to.
- Create additional revenue through Google Adwords clicks.
- Gain Facebook “likes” and “shares”.
- Provide general photo retouching information, ideas, examples (a portfolio), and tutorials, all while adding a little fun and humor… who doesn’t enjoy that!
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.
ORGANIZE THE CONTENT OF OUR EXAMPLE WEBSITE DESIGN:
We list all of our website pages in order of importance, then determine what are high-priority pages. (See Figure 1.) Later, we will include them in the main navigation menu for the website. We also separate out the low-priority web pages, so we can later place them in a footer or secondary position. All of the mid-priority pages will work well in a submenu or sidebar menu position. We will cover the topic of web page layout in step 4, but first let’s develop a strategy.
Figure 1. A prioritized list of website pages and items.
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.
DEVELOP A STRATEGY FOR OUR EXAMPLE WEBSITE DESIGN:
We hope to draw the visitor into a blog article > which will show an example of the services > then entice the visitor to play the game, which is both enjoyable and informative (essentially a portfolio), it is quick to play and features real examples of the services > hopefully the visitor will share the game on Facebook, which can help draw in more visitors > finally, contact us for our services, or if not perhaps they enjoyed their visit and will share it… all while being exposed to numerous, but not obtrusive, ads which might lead to additional revenue. (See Figure 2.) Finally, let’s start to layout the website design!
Figure 2. A visitor flow strategy developed for our example website.
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.
Figure 3. General website page key areas. This example shows areas for a design that features a right-hand sidebar. Other options might include a left-hand sidebar, both sidebars, or even none.
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.
VISUAL CONTENT PLACEMENT FOR OUR EXAMPLE WEBSITE DESIGN:
As you can see in Figure 4., we chose to place the main navigation menu at the very top of the page, then a header area containing the logo and an ad. We went with a right-hand sidebar area to hold another ad, a Facebook “Like” box, a list of the latest blog articles, the mid-priority page links, a game link, a contact link, and the tutorial links. The footer area will contain our copyright info and the lowest-priority page links. For our design we created three separate layouts for the content area for specific page types, one for the home page which will display the latest blog articles, a second layout for the blog article pages, and a third layout for the main content pages. (See Figure 5.)
Figure 4. The general layout of our example website.
Figure 5. The content area layout for the home page, general content page, and blog article page.
TECHNICAL APPLICATION OF THE WEB PAGE LAYOUT
Since we are just starting to layout our website, I feel this is an appropriate time to start getting into the technical application of these concepts. It is worth mentioning the use of template-based web design, cascading style sheets, and content management systems in order to make the initial design and upkeep of your website easier.
TEMPLATE-BASED WEBSITE DESIGN
Template-based web design means that you design one template that is then applied to every page of your website. I like this practical approach because of the ease of updating your website in the future. You can edit the template once, and then that change will be automatically applied to every page that uses the template rather than updating every page individually. This can save you a lot of time! If you are using a template-based design, the header area, navigation menu, sidebar area, and footer is usually present on every web page, while only the items in the content area change depending on what page you are viewing.
CASCADING STYLE SHEETS (CSS)
Similar to templates, cascading style sheets make use of an apply once and effect many approach. When we begin to apply styles to the layout, menus, text, etc., it is much easier to create a style that is applied overall, rather than to style each element individually. By using this approach we can create and link a separate file, typically named “styles.css” that will store all of our style specifications.
CONTENT MANAGEMENT SYSTEMS (CMS)
Content management systems allow for easy content creation and updating while automating some of the more trivial tasks. There are several popular options, but the one I find easiest to use is WordPress. Using WordPress, you can quickly log in to your website and make updates using it’s user-friendly backend. And guess what? WordPress supports template-based design and cascading style sheets, so using the three together can make for a efficient way to design and manage your website.
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.
Figure 6. Carefully choose a fundamental color scheme and overall design feel.
CHOOSE A BASIC THEME FOR OUR EXAMPLE WEBSITE DESIGN:
As you can see here, we’ve decided to go with a dark background with light colored text for the overall website design. We used a dark gray color to provide a neutral backdrop for all of the featured photos. We have inserted the actual headlines, text, and placeholders for photos and graphic elements into the key areas that we established earlier. Now we can proceed with adding more color and design, but first let’s go over the method of how to make these design decisions.
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.
TECHNICAL APPLICATION OF WEB PAGE HIERARCHY ELEMENTS
Though the behind-the-scenes HTML code is not visible the your visitors, it is important that you declare element types so that search engines may decipher the hierarchy of your web page content. The most important being header tags.
HTML HEADER TAGS
The main title of your page should be wrapped in “h1” tags to signify that it is the most important heading on the page. For following content sub-headings, wrap them in “h2” tags. For sidebar headings, you might use “h3” tags.
APPLY VISUAL STYLES FOR OUR EXAMPLE WEBSITE DESIGN:
We have now taken into account our visitor flow strategy and applied style to our website design, by implementing optimal visual cues. (See Figure 7.) As you can see, it now barely resembles the previous state. This was somewhat of a long design process. We started by choosing a color scheme that would mesh well with our logo. Then we continued to style the elements until we thought that the visitor flow had been optimized. You can view the live example website here.
Figure 7. The finished design of our example website.
Conclusion
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.