Create an experience for your visitorsAt Get The Clicks, we take a different approach to web design. Think about the last time you walked into your local grocery store. Chances are that you were looking for a slew of staples like milk and bread. Unfortunately those items are usually located at the back of the store because the store operators want you to walk past an array of enticing products, making you aware of everything the store has to offer. Additionally the store will also have large signs for their individual departments like the bakery, pharmacy and deli. Finally signs at the entrance of each aisle, let shoppers know what is located down the individual isles. Even though a grocery store will have thousands of products on the shelves, everything is designed to help shoppers figure out easily where everything is located. What goes into professional web design is a very similar concept.Quality website design is much like quality grocery store design. A website needs to have a great layout to work properly. All too often when people want to create a new website, they focus too much effort on design and barely any effort on functionality. Design is often driven by the website owner looking for a website that enhances the overall look of the business, but little attention is paid to how a visitor will interact with a website to begin with.
Much like a grocery store, a great layout takes planning. A website should never be built according to how a business owner wants it built, but ultimately the way a potential visitor wants it built. A website needs to be pleasing on the eyes, guide a visitor along a path and solve a visitor’s problems all the while providing an experience for the end-user.
Know Your Target Market
The process of building a great website doesn’t start with “Hey let’s take our existing website and make it look new”. The process should be driven by the users of your website. As such, it should come as no surprise that you must first have a keen understanding of your future visitors. You need to have a clear understanding of your visitor’s needs. Once you know this, you can begin building a website UI (user interface) that matches what they are looking for. A website needs to get your visitors attention and draw them in to provide them the data they are looking for. If you haven’t done so, a great document we developed to kick-start your target audience evaluation is available in our Clicks Blog. Don’t skip this step. Many folks in the design process like to jump right into the new design without forethought. Those types of websites are then confusing to navigate, leaving website visitors poking around multiple irrelevant pages, often leaving a website in frustration.
Going back to the grocery store analysis, think about where stores are placed in your town and then consider the products the store will carry. In our town, Orlando, we have large Vietnamese and Hispanic communities. While there are grocery stores catering to each community, the products being offered are quite different. However, the general layouts of the stores all appear to be rather uniform. Every store has isles and specific departments. Every store has checkout counters enticing patrons waiting in line to purchase an impulse item off the shelf and the milk is always located at the very back of the store. You can bet that each store knows their target market and put ethnic staples in locations throughout the store in such a manner that people have to walk by plenty of other products before they get to what they want.
Create a Blueprint
Do you think when they developed a grocery store they just looked at a square space and said, “Ok, we can fit in here?” You bet they didn’t. There was a blueprint with a hierarchy of elements that drove the design of the store. Every grocery store has a blueprint, much of it deals with behind-the-scenes elements of the store. Everything on the front end of the store has to flow, but in order to accomplish this you need to have the backend designed properly as well. Loading docks, available parking spaces, storage coolers, employee quarters, bakery ovens, secured pharmaceuticals, everything has to be accounted for.
A website requires the same amount of forethought. This is why content management systems are so powerful these days. Systems like WordPress, Joomla and Drupal provide great platforms to organize your content and create a hierarchy for the website developer to implement. Understanding what your target audience is looking for should drive the overall blueprint development. A great way to start this is to simply figure out what is most important to your visitors and then designing the website in such a fashion that it is easily accessible to anyone.
Categorize your content into A, B and C Content. A Content is the content you know many of your visitors will want to read. This consists usually of about 20% of your overall website content and includes your home page, contact page as well as several product/service pages. B Content is your supporting content. This is the content designed to provide additional information to visitors after they have honed into a particular topic. This usually consists of close to 60% of your overall website content. This page that you’re reading now, which is supporting the website design page, is classic B Content. Blog content is also classic B Content. Finally C Content is the content that provides individuals with necessary information to substantiate the validity of the company. Now, just because we call it C Content does not make it any less important than A or B, it just means that much of that content should not take much forethought to create. Examples of this should be, Privacy Policies, Terms of Use Statements, Copyright Notices, etc. One important aspect of C Content that is often missed is that this type of content does a wonderful job creating trust with a visitor. Often the content is not even read, but the mere presence of the information assures the end-user that the business they are potentially working with is a reputable organization. C Content usually comprises of about 20% of the overall content of a website.
Thus A,B & C Content is really equally important, but from a blueprint standpoint, A content is always going to be the first content you see, while C Content is something you’ll have to look for.
Keep Things Simple
Now, creating a blueprint may sound like a daunting task, but it really doesn’t have to be. A content blueprint can simply be created with a content outline in word. An example is below:
- General Information
- Header
- Footer
- Contact Information
- Homepage (A Content)
- Call To Action
- Answer Target Market Questions. Define Target Market.
- Provide Links To A & B Content
- Repetitive Content
- Service Section (A & B Content)
- Service & Product Pages
- B Content Pages
- FAQs
- Company Information (B Content)
- About Us
- Blog
- Contact Pages
- C Content
- Terms of Use
- Privacy Policy
- Sitemap
By no means do you have to follow this layout, but it may give you a starting point for the content creation process.
Additionally, you are going to want to evaluate what content is designed for New Users and Repeat Users. Every website has a combination of new and repeat users. As the name would indicate, New Users are new to your site. They are evaluating you and most certainly digging into your content. Repeat Users are already using your services and thus require an abbreviated set of information, most importantly your contact information.
To use our grocery store analogy, think of our repeat users as those folks who run into the grocery store and know exactly where their desired item is. They grab it and they are out. They may also be the folks who run up to the Customer Service desk to speak to a manager or process a store return. Always make it extremely easy for your repeat customers to get what they need. We often recommend specific sections on a website for repeat customers, such as specific contact numbers, contact emails and office location information. Repeat customers may also want FAQs, knowledge bases, customer logins, etc. If you can create pages that make your customers feel special, you are going to create an environment wherein customers will want to come back again and again. Websites that entice customers to revisit drive higher retention rates and higher referral ratios.
Be a Guiding Light
Your website layout needs to be a guiding light for visitors. You must take your visitors by the hand and move them through the website in a sequential fashion, always building up content with the ultimate goal to accomplish a specific task. Limit the number of choices a website visitor has when navigating a website. Generally speaking, more than three to four choices per page will confuse visitors. This is excluding header and footer navigation. It is better to limit the number of links a visitor can click on a page to assure they end up where you want them to go. As far as contextual links (within the content of a page) we usually don’t like to place more than two or three. This assures that users go where we want them to go. You also want to assure the links themselves are enticing to click. Highly relevant content, with a splash of curiosity evoking emotion, often works the best.
At the end of the day, much of this is accomplished through a proper blueprint, designed to achieve the initial goals set forth in the brand documentation of the company vision. Keeping it simple is absolute key. We often recommend starting with a simple website that is scalable. Scale the growth of the site, based on actionable data from your traffic patterns and customer feedback.
Font & Colors
There is a great section in our brand documentation checklist addressing the issue of font and color, as it relates to brand. If you haven’t done so, we’d recommend you review that as well. Font and colors can have a huge impact on the performance of a website.
Font:
For starters, every font has a personality, and your font selection should be influenced by your audience type. Your font will say a lot about your business. It subtly conveys nuances of the type of company you are. For example, it can easily communicate whether you are a modern or traditional company. Your font size also will have a considerable effect on user actions. Larger font, in relation to smaller font, stands out more. Thus a quality call to action should always be articulated with appropriate font size. Font can also be accentuated with white space on a page, meaning sometimes the most effective pages are the ones with little content. Additionally, font color should be carefully evaluated, especially for B Content resource pages that may be printed. You don’t want a light font (or worse, a white font on black background) because often printers will simply not print backgrounds, leaving users with a blank page coming from the printer.
Colors:
Consider the use of colors carefully. You really want to use colors in contrast, to draw visitors to a particular part of the page asking them to take certain action. Of course colors also convey a feeling. For example, if you are looking to build trust, consider using Blues and Silvers. If you are looking to be more aggressive, then shades of red would be a good choice. Using our grocery store analogy again, think of the colors you see in the pharmacy, versus bakery, versus deli. Usually, the pharmacy will be white, which is a very sterile environment. At the bakery you will find warmer colors, such as browns. The deli is usually blue and white, advancing the cold theme of the department.
Hence there is a method to the madness. These colors evoke a specific emotion. Your website isn’t any different.
Related Content: Web Design Aesthetics
CTAs & Forms
Having clear CTAs (call to action) and simple forms is extremely important. Keeping things concise is absolute key in your approach. You want to tell your visitors what you want them to do. Never assume your visitors understand your intentions. Every Content A and Content B page on your website should have a clear CTA.
Calls to Action:
When developing CTAs, remember your target audience and what they are ultimately looking for. Solid calls to action always tie an emotion into the process. Examples of great calls to action are:
- Tired of being frustrated? We understand. Contact us to discuss your needs.
- Not knowing where to turn? We have been there. Sign up for our resources guide now.
- Not getting what you are looking for? We can sing you a song about that. Click here now.
These are obviously just some examples, but it showcases the approach you should take when developing CTAs. From a visual standpoint you’ll also want to set up your CTAs to standout from the crowd. The section of color contrast in this article will help you accomplish that.
Forms:
90% of all websites we take over are a “form disaster”. The adage of “we’ll collect all information up front” is applied, which almost always results in disastrous conversion ratios. Imagine walking into a grocery store and before you can buy anything you have to fill out a 10 question survey. I’m pretty sure you won’t be going there very often. The same concept applies to forms, especially contact forms. We have a golden rule in our company. Don’t ask anything on a contact form that you can’t ask later. Contact forms are designed to do one thing, provide contact information (hence the name – sarcasm provided free of charge). Take a look at our website. To really dig into a client’s situation, we need a ton of information, yet our contact forms are simple and straight forward. Often, name and email are enough to get started. Some of the most effective contact forms we have run with only ask for email because everything else can literally be ascertained when speaking to a customer.
We understand it is more convenient for the website owner to collect more information up front, but the cost of losing the potential lead does not outweighs the benefits. Don’t place the control of what happens to the lead in your customers hands. Place the control in your hands and determine what you want to do with it after you receive it. Sure, short forms that don’t provide you with any information about the potential lead will run higher risks of low-value leads, but at least you will be in control and be able to make the decision if the lead is worth your effort or not. There is a goodwill fringe benefit to short forms. Short forms will inevitably provide you with leads that you can’t do anything with. Having a resource to then send those leads to will build goodwill for your organization and help develop the organization you are sending the lead to.
CTAs and Forms are an integral part of your website success. Assure to plan them carefully into your overall website UI design to assure they will be as effective as possible.
Feedback
Website UI design is a funny animal. Website owners often think the process is done once the website launches. Quite to the contrary, the Website UI development process really just begins there. Every website should have a feedback area where visitors can let you know what they wish you improved upon. Additionally you should make it a habit and simply start asking your customers to give you feedback about your website. You’ll be amazed of the information you’ll get. If you don’t want to spend the effort to ask, we often recommend products like mouseflow.com. These types of behavior analytics systems provide website owners real-time information about how visitors are interacting with their website. The data provided by these systems can then be used to fine-tune the Website UI to improve the desired goals.
Related: Tampa SEO Services
Conclusion
Always have a goal. Assure when you are working on your website UI, you always have your goals as your frame of reference when developing the site. Take your time, re-focus if necessary, and use each component discussed in the article as a guideline in developing your Website UI.
Remember, your interfaces need to be easy to use & simple to navigate. Always make use of the right colors for your audience and employ the right fonts. Juggling that many factors won’t be easy, but once mastered will produce wonderfully effective designs.