Now it is time to start planning the main conversion and supporting pages of your website.

‘Wireframing’ is the process of developing a basic high-level plan or schematic for each key page in the website.  Using wireframing, we complete a simple sketch/diagram of each of the main conversion pages to outline exactly where and what key persuasive elements will be located on the page.   We also indicate the type of content that needs to be included in each major content block.

But … before we start wireframing let me introduce you to a couple of key concepts that you will need to understand in order to wireframe successfully.

Understanding Common User Behaviour

How do users behave when they use a web page?  What do they look at first?  How does the user process and digest the words, pictures, photographs, or diagrams on a web page?

A number of interesting studies have been carried out to try and determine how different users browse a web page.  Called “eye tracking” studies,
these are done by fitting the users with an elaborate headset that tracks the movements of their eyes as they use a website.  This allows us to see what users spend their time looking at on a webpage, and what they simply ignore.

One of the most well known and respected studies was completed by a collaboration of three organisations – the Poynter Institute, the Estlow Center and Eyetools.  The eyetracking study completed by these companies shows that internet users look in the top left of a webpage first before tracking diagonally down to the centre of the page.  The user then looks to the right and then back across centre to the left.

The Gutenberg Diagram also supports this study.

What does this mean to you?   Well it gives us some important information about how we should arrange a webpage so that people will see what we want them to see!

People look at your website in roughly this order:

1. They look at the top left
2. And scan down to the centre
3. Then they look at the right side
4. Then they look at the left side

This is the reason why so many websites follow a layout like this:

1. In the top left, your logo (the first thing people see)
2. In the top right, the contact details and the search box (the second thing people see)
3. Below or next to the logo, the navigation menu
4. The main content contains the bold “hero” image, and the unique value proposition (UVP)
5. An attention-grabbing call to action (CTA)
6. Since recent designs have done away with columns, place the “About Us” information, related pages, further CTA’s and other reassuring content right below the CTA or at the bottom of the page.

Macro-Conversion Objectives versus Micro-Actions

We have already discussed the overall objectives of a website.  This is what is called the ‘macro conversion objective’ of a website.

We have also mapped the basic ‘conversion pathway’ that each visitor will need to take in order for us to achieve our macro-conversion objective.  Each step in the conversion pathway represents a micro-action that we need our visitors to take.  Every conversion pathway (and every macro-conversion objective) is made up of a number of micro-actions.

When wireframing the main conversion pages of a website, it is important to understand the difference between the conversion pathway, the macro-conversion objective and the micro-actions that are required in order to achieve the macro-conversion objective.

• The macro-conversion objective is the main goal (eg to drive online orders)
• The conversion pathway is the pages we need to drive users to to complete this objective. (eg Homepage > Product page > Shopping cart)
• The micro-actions are links, buttons or other actions on each page that drive people to the next page in the conversion pathway (eg featured product links on your homepage)

Understanding the individual micro-actions that we want our visitors to take is absolutely vital.  By breaking each macro-conversion objective down into a conversion pathway, then breaking that down into a number of micro-actions it provides clear focus as to what we want to persuade our visitor to do at each and every step in the process.

The Six Questions You Need To Answer

There are six questions your visitors will ask in their minds, and answering these is the key to persuading your visitors to take action.  We have seen these already but they are important enough that we should look at the again:

1. Do I trust you?
2. Do I believe you?
3. Do you understand my needs?
4. What’s in it for me (WIIFM)?
5. What do you want from me?
6. Is it worth it?

As we complete the wireframe it is often very helpful to keep in the mind the six questions that need to be answered to successfully persuade a visitor to take action.

The first two questions are often mostly answered by what elements you place on the web page.  The other four questions need to be addressed by  your sales copy and other supporting information (see Step 10).

Establishing Your Trust & Credibility

Lets start off now by looking at the first two steps in the visitor persuasion process.  “Do I trust you?”  And … “Do I believe you?”.

In order to successfully persuade your visitors to take action you must first establish your trust and credibility with your visitors.  If your website visitors don’t trust you and believe what you are telling them, they will never buy from you – no matter how amazing your products or services are.

Picture this.  As you are walking along the street a guy walks up to you.  The guy is covered in dirt and grime and is wearing tattered and heavily worn clothing.  He smells of alcohol and has the appearance of a homeless person who is living on the street. The guy introduces himself as Kyle and points to a brand new Bentley Continental parked on the side of the road.  He holds up the car keys and says, “Sir, this magnificent motor vehicle can be yours right here right now for only $1000!  But only if you pay me $1000 cash right here right now.”

Would you pull out your wallet (or go to the bank) and pay this guy $1000 cash?

Why not?

The  Bentley is worth far more than $1000.  This has got to be the deal of a lifetime!

You won’t buy simply because you don’t trust the guy!  You don’t believe that he is telling the truth; in fact he might not even be the owner of the car.

If you don’t establish trust and credibility with your website visitors, you will never persuade them to take action – no matter how good a deal you are offering.

There are many different ways of establishing trust and credibility with your website visitors.  Some are influenced by the way that your website is designed and built and some involve the content that you put on your website.

Let’s take a look at some of these factors now:

• Professional Design

Your website must not look cheap!  First impressions are a vital part of establishing initial trust and credibility with your visitors.  Think about the story of Kyle and the brand new Bentley.  Kyle’s appearance would have greatly affected your perception of him and contributed to your lack of trust in him.

One of the first impressions a visitor has of your website is the design – the look and the feel.  If your website screams ‘budget’ then it will seriously harm your potential results.
Make sure your website has a sharp, professional look.  It should “look” like it has been designed and created by a person with professional website design skills.

• Website Usability

Visitors need to be able to navigate quickly to where they want to go.  If you confuse your visitors and they get stuck and cannot figure out how to get to your ‘Order’ page, ‘Enquiry’ page or your ‘Checkout’ page then you will lose them.The online world is a lot different from the physical world.  It is significantly more competitive and does not have any geographical barriers.  If a customer is not happy with your service in the physical world your competitors are probably 20 minutes drive (or more) away.  In the online world your competitors are only two clicks of the mouse away! This is a critical point – visitors must be able to navigate quickly to where ever they want to go.  Your website needs to be very user-friendly and easy to use.

Many research studies have been completed investigating the best way to layout a website for ease of use. The theory of website layout is heavily influenced by the eye-tracking studies we looked at earlier. As a result of these research studies, standards have been developed that outline exactly where on a website you should place certain information and where you should locate navigational menus and buttons and so on (see www.uie.com and www.nngroup.com).

Think about this – when you go to a website, you know that the company’s logo will most likely be located in the top-left corner and that you will be able to navigate the website using either the menu below or next to the logo.

So why not make it easy for your website visitors by following the same standards that are already being used by millions of other websites.  If you don’t – you will confuse your visitors and your visitors will question whether you are even a credible business given that your website is so poor.

I like to use this analogy: think about what it would be like if every time you jumped in a different car the controls were in a different place.  How frustrating!  A Bentley can still be better than a Honda without putting the steering wheel in the back seat and the gear stick in the glove-box.  Don’t make your website a nightmare for your visitors – follow the standards.

• Website Loading Time

Studies have consistently shown and it is now widely accepted that if your website takes longer than 8-10 seconds to load on a 56k modem then you run a serious risk of losing your visitor to a competitor’s website and your trust and credibility is damaged. A good professional website designer should be able to create your website so that it loads quickly.  Do not compromise on this point! If they can not do this for you, then find another designer. If you website takes a long time to load it affects the trust and credibility your visitor has with you.  It is simple as that.  You can check the loading times of your website by going to http://www.zeald.com/Resources/Free+Tools/Website+Speed+Checker.html

Graphics and photos will have the biggest impact on the loading time of your website.  Multimedia elements such as animations, audio and video can have a serious negative affect on your loading times.  Text usually makes little or no difference at all to loading times.

Optimise your images so that they load as quickly as possible.  Most graphic’s programs allow you to do this.  If your graphics program doesn’t have the required features you can use the free tool available through the Zeald website – http://www.zeald.com/Resources/Free+Tools/Image+Optimiser.html

• Trust Building Elements
  So far we have looked at ways that your website can be setup to help you establish trust and credibility.  What we have seen so far are ways of establishing your trust and credibility passively: through the professionalism of your website design and the general way that it is setup.It is important that you proactively establish your trust and credibility– right from the minute your visitors hit your “landing page” (the page where your visitor arrives.  It is worthwhile noting that your first landing page is not necessarily always your homepage. If you have links from other sites or emails, your visitors first entry to your site may be a ‘special information’ page. Specific things will help you establish trust and credibility, including:
  • Guarantees
  • Testimonials
  • References
  • Partners & Affiliates (borrowed credibility)
  • Certifications
  • Awards
  • Case Studies
  • Your Company Profile/History
  • Contact Details
  • A Privacy Policy
  • Terms of Trade
  • Your Client List

Obviously not every company will be able to put all of these on their website, but from this list, ensure you take the time to strategically place some the elements outlined above on your landing pages and throughout the other pages within your website.

Pre-Selling Your Way to Success!

An excellent way to establish trust and credibility is through pre-selling.  This is where you give away relevant, quality information to your visitors.  To successfully pre-sell – the information you give you visitors must be valuable to them.  It must help them achieve what they are looking to achieve.

Sometimes a website will contain pages and pages of pre-sales information.  This is a good idea – especially if you are dealing with a lot of visitors to your website that do not know your company.

In fact – the amount of pre-sales content that you will need on a website depends on how much your visitors already know you and trust you.  A ‘cold’ visitor will need a lot more pre-sales while a ‘warm’ visitor will need a lot less.   Some websites will have huge sections of the website dedicated to pre-sales information while others may simply have a paragraph or two on a single page.   As a general rule of thumb – the more pre-selling you do the more you will establish your trust and credibility. It’s almost impossible to overdo pre-sales.

You must be extremely generous with what you give away at this stage.  The information you present needs to be of perceived value and should presented with your own unique style and flair.

For example:  If you have articles about your industry that help to explain and clarify the easiest way to maximise the results of purchasing your type of product or service, this can be highly valuable to people looking to better understand what they may be about to invest in.  Let’s say that an accountant who specialises in working with investment property owners wants to ensure that all visitors to her website understand immediately that the depth of his or her knowledge is vast and of huge value to clients.  A well written article detailing some of the unique ways that smart accountants who know the new tax rules can be of extra benefit to this particular market segment, is a great giveaway from their website simply because it states clearly that they know their business, and here’s how we the accountants can start to prove it.  This same article can also be turned into a downloadable checklist that is useful immediately to the client, because it makes him or her think about the real issues they need to address, and conveys additional confidence in this particular accountant’s ability to understand them.

While it may appear that this is a ‘freebie’ and why would any professional service advisor give away their knowledge for nothing?  Consider this: the tiny piece of information offered up this way is only a very insignificant part of the whole value such a service provider can provide.  It’s a bit like offering up a taste test of ice-cream at the local ice-cream parlour.   You know that the tasting is really there to help you decide which flavour to buy.

This is another vital point – the purpose which sends most people looking for your site is to gain information.  A good example of your vast knowledge about what you do and how you can best service the needs of your visitors gives you a much better chance of them taking action towards becoming a customer.

The Wireframe Process

Now that you understand some of the concepts behind wireframing your website, we are ready to get started!

Sit down with a pencil & paper and sketch out schematically a high-level outline of what you want your pages to contain.

BUT – Don’t get bogged down in the detail!

Let’s take a look at what you need to do to successfully wireframe each of the major web pages within your website:

1. Clearly state the overall responsibility of the webpage and state the macro-conversion objective that the web page is tied to.
2. Identify how the majority of visitors will arrive at this web page.  Will they arrive at this page from another page on your website? Or is this page a landing page?
3. Think of the different content blocks that you think should appear on the web-page.   Roughly sketch in their positions. Some of your content blocks will be simple, like a couple of testimonials, or a client list.  In this case write in a simple example of the type of content that might appear there.
4. For each major content block, clearly state the following:

• Target Customer:  state the name of the customer profile that the content block is targeting.  (Remember the customer profiles that you built in step 2)
• Description:  create a basic description of what type of content the block needs and what it needs to say and do.
• Call to Action:  outline what you want the customer to do next (think about your micro-action here).
• Problems/Questions:  Think about exactly the sorts of problems or questions the target customer will have in their mind at this particular point in the process.  Imagine yourself as the customer and think about what you have just been asked to do.  What sort of problems or questions arise for you?  Think about what concerns you would want answered before you would be willing to proceed.