Design Principals – Fundamental.
In this tutorial we will deal with the subject of design, this may seem a strange subject for us to cover in a tutorial but it is important to remember that the design of your site will in fact contribute towards your conversion rate, credibility and functionality.
Before embarking on this tutorial please ensure that you know the following:
- What you are going to be selling
- Who is your key demographic (who’s your customer going to be?)
- What the name of your site is going to be
If you’re a newbie or beginner you’re probably wondering why you need to design your site in the first place, after all you’ve probably already cobbled together a site or two or you already know (in your head) how your site is going to look, what it’s going to do and maybe even what your sales copy will look like.
Well simply put this is exactly why we design a site before we build it; by designing before we build we are trying to achieve the following:
- Consistency
- Professional image
- Fitness for purpose
- Completeness
In order to ensure that you understand exactly what you’re aiming for let’s briefly consider each of these objectives.
1. Consistency
Think back to your experience as a potential customer on the web, when you visited a series of online stores last were you most impressed by:
- The site that had a consistent look and feel?
- The site that looked like a class of 5 year olds had each been asked to do their own page?
This idea of consistency is best explained by example. Let’s have a look at a snap shot of our site:
Or more precisely let’s have a look at what it is that enforces the idea of consistency.
You may be wondering why we have taken a snapshot of just the top left of the web site, well it’s because this part of the page is common to every single page within our site (there are also other common elements such as the banner ads on the right and the PayPal logo at the bottom), this then gives the surfer the view of consistency across the entire site, essentially only the centre of the page changes and additional options appear along side the menu bar on the left.
This then gives us a consistent web site which has the additional benefit of being lower maintenance, after all if the common elements are to be used across the entire site then there’s no need to start re-coding or re-designing page elements outside of the current page’s content.
You may think that this is done by using frames or by code replication but in fact it is not, we have simply developed a template for the site and each page uses that template.
Incidentally – DON’T USE FRAMES! (If you know what they are don’t use them, if you don’t know what they don’t worry about it).
2. Professional image.
If like us you’re a fan of the TV series ‘The Simpson’s’ you’ll probably remember the episode where Homer decides that he needs a web site and quickly sits down and throws one together using all of the graphics that he can poach from around the web……..
What’s wrong with the above paragraph?
It’s written in a personal manner, it’s referencing a cartoon and it’s referencing something that a lot of you might not ever have seen (and using it as a main thread in an explanation).
Worse than this of course it is not a very professionally written paragraph and as such does not really inspire faith in the content.
When we consider the professionalism of a site we are referring to both the look and feel of the site, this being both the graphical and text elements of the site.
From the previous example the actual content was correct and to the point but the delivery was personal, this paragraph should have been written thus:
When considering the professional presentation of a web site we should consider primarily the look of the site, that is to say that a mismatch of graphical elements will server to illustrate that the developer had only a limited grasp of design skills and no skills relating to layout or content management.
Both of these paragraphs contain the same information but the second is created in such a way as to increase the credibility that the reader associates with it, this point goes back to the notion of understanding who your key demographic will be, i.e. will your key demographic relate to and respond better to a Simpson’s analogy or a professionally written piece?
Having pointed out that the language that we use to express our site is crucial you might be wondering why this site uses such a low level language (comparatively speaking), simple, we know who our target audience is.
Having now explained the language of a site it is important not to forget that the graphical elements also play a key part in portraying a professional image. You may have noticed that on this site there is not a single animated gif or flash file and that all of the site graphics are based on our ‘Bomb on a Spring’ graphic, text or a combination of the two (with the exception of advertiser’s graphics).
So with regard to graphics and presentation you should be aiming at good, clean layout of ‘sensible’ graphics (no flying toasters) that either relate directly to your content or are neutral in nature.
The goal of utilising both the language and graphical elements which relay a concept of professionalism is to entice more of your visitors to spend money with you (this is referred to as conversion rate), so the look and feel of your site should remain professional but your graphical elements should be chosen with care in order to purvey the ‘mentality’ of your key demographic.
3. Fitness for Purpose.
How many times have you visited a website with a view to making a purchase only to have the purchase process bomb out on you half way through? Or perhaps you’ve been looking through an online catalogue only to find that on certain pages buttons don’t work?
Whilst at a client site one of the problems that the client expressed was that customers were complaining that they could not finish a transaction through the credit card processing company, some of these clients were trying to spend reasonable sums of money and so this was obviously a real concern for the client. Upon closer inspection it was found that the development team had deployed the web site and left the credit card processing code pointing at the test server of the merchant processor. A simple mistake, but not as uncommon as you’d imagine.
When developing your site you should always ensure that what ever functionality you think you’ve coded actually works in the production environment with live data, after all there’s nothing worse than paying for traffic only to find that not a single penny has been spent at your store – and it’s your own fault.
4. Completeness
There are several “don’t do’s” in web site development, for example never display a page that says ‘Site under Construction’ either deploy something or don’t.
Always make sure your links work and always make sure that you have the functionality available to a client to make their experience with you more enjoyable.
The notion of making a clients visit to your site more enjoyable, more efficient if you like, is a double edged sword. This is because if you try and plan the functionality that makes your clients visit more enjoyable then you will also be making sure that you have less work to do.
If we consider this site as an example, if you forget your password what do you do?
Do you drop us an email or do you use the function provided that will return your password in seconds? You use the provided function, it gives you the benefit of almost instant reaction to your request and ensures that we have to do nothing; we make your visit more enjoyable and more manageable.
This concept of automating tasks will be dealt with in later articles/tutorials when we’ll discuss auto responders and other automatable functions but the basic idea is that you should provide your (potential) customers with all of the functions that they could need to have an enjoyable interaction with your site.
Moving Forward.
Having now explained what you are trying to achieve by designing before building lets consider how we can design our site.
Let’s start by deciding what we’re going to design. Are we going to design the process of purchasing, are we going to design the web site map (note SITE) or are we going to design the actual pages of the site?
At this point it should be understood that the design of you sales process should be planned first at a high level, that is to say do you envisage that your clients will be buying via a catalogue (if you have lots of products), a single signup page or through some other method (banners for example). This decision will influence your site design.
For the sake of example let’s say that your customers will complete a purchase by going via your product catalogue.
Now that we have decided how our customers will move through the sales process we should consider how this fits in with the overall design of the site.
We will now consider the site map design i.e. a block diagram of all the pages that you want in the site.
<IMAGE>
This then allows us to determine what pages will be required, how they all link together and also how the functionality of the site can be improved.
So from the above site map we see that all functionality is available from the main page of the site but that the catalogue and the contact us function require additional pages for performing processing.
This is obviously a very simple example but serves to illustrate that your site map design can be very simple.
Before going any further you should know that there is a major benefit of doing this kind of design work before touching the PC; it has been found that people who take the time to design a site normally stick to the design (within reason) and finish with a functional site, this is primarily because having the design work tends to focus the developer on specific goals rather than the developer jumping all over the place trying to do ‘a bit of this’ and ‘a bit of that’ and finishing with a site which may work but is harder to maintain.
Now that we have a simple site map it is possible to start thinking about additional functions that would make the clients experience better and where they would best fit – and also where there are potential automation tasks to save you the webmaster time or provide you with additional return on income from your traffic.
The first function that could be built for this site is a customer cookie function, this could keep track of the user details (if they exist) thus allowing you to personalise their next visit (this subject is also discussed in a future tutorial).
The second function that could be developed for this site is a statistics gathering function, perhaps you’re not interested in how many people are coming to your site but you are interested in how many people are coming to look at your product catalogue in comparison to how many are actually going through the payment process. This then could be added to the catalogue page and used in conjunction with your server statistics (if you have access to them) in order to ascertain where your clients are dropping out, this then allows you to work out if your page design/wording needs changing in order to get people into the catalogue or if there is something wrong with your catalogue stopping people buying from you.
And the list goes on (and we haven’t even mentioned the value of the contact function).
We will discuss statistical analysis, its implementation and its value in a subsequent tutorial as this is a key method of refining your site for a higher conversion rate.
Once we have decided how our site will be with regard to pages and functions we can start working on page layout. The page layout normally starts with the designer working out which (if any) elements or functions are common to several pages and then decides on the colour scheme of the site.
It should be noted that although a dark web site is by far the easiest to develop it will seldom/never look as good as a light and airy site.
Having chosen a colour scheme the designer should then start thinking about page elements such as graphics. Remember that your graphics should compliment your name, i.e. ChocolateShop.Co.UK should probably feature lots of pictures of chocolate related items and less car/Simpson’s related items.
The tutorial ends at this juncture because from here your site design becomes just that, your design and so everything else is completely subjective.
One piece of software that we find invaluable is Jasc software’s Paint Shop pro, there is a 30 day evaluation copy available of this software so if you haven’t already purchased some art type software we advise using this.
We should also like to re-iterate the following:
With the exception of hosting and domain registration it is perfectly possible to get a web site designed, developed, tested and uploaded (this includes credit card processing and search engine submission) for free, nothing, no cash - using only free services and evaluation edition software.
|
