WAIT! Did you miss the first two posts in this series?
If so, it’s worth taking a quick look at them before reading the below. The first post was a general overview of the various things that go into driving traffic to a website while the second post was all about the importance of great imagery. Once you’ve made your way through those posts, it’s time to tackle design. Carry on!
Why design is a really important part of driving traffic to a website
When you’re a website designer you encounter a few frustrating things on a daily basis but a major bugbear for me is when business owners forget all about the user when it comes to their website design. It’s easy to browse around on the internet and ask your designer for every single thing you’ve seen that is ‘cool’ but in the end, no matter how cool something is, if it annoys the person using your website, it shouldn’t be there. For the most part, things like music, animations and funky navigation cost a lot and they only wow a user once – the first time they visit your site. After that they either just don’t see them any more or worse, they are annoyed by them.
Don’t annoy the person visiting your website, give them what they need. And that is:
- They need it to look neat and professional. They have come to your website either through a google search or on the recommendation of a friend. If your website looks dodgy or amateurish, they will think your business is also dodgy and amateurish and that will be it – they will click away.
- If your website DOES look nice and professional then the second thing the user wants is information. If the information they want isn’t easy to access, once again, they will get frustrated and click away.
From a usability point of view you need to focus on a few key things:
The navigation structure of your website needs to be logical
When building your navigation menu ask yourself where would I expect to find this information? We’re always coming across people who have decide they only want x number of top level menu items and end up hiding important links in a drop down menu so they can achieve this goal. For instance a lot of websites like to put their Contact Us page as a drop down item under About Us. The thing is, everyone expects to access the Contact Us page of a website from the main navigation menu. Don’t make people look hard to find something – make it easy!
Don’t hide your contact details
While we’re on the subject of contact details, this is again something people like to bury deep in their site. Why are you making it hard for people to contact you? When you do this it makes people suspicious. Your phone number should be visible on every page – either in the sidebar or the header.
Give them information, but not too much information
There is nothing more offputting than giant blocks of text on a web page. Give the user enough information for them to feel confident in your services and to know that they are in the right place, but not so much that their eyes glaze over. If there is need to give a boatload of information about something consider giving them a pdf to download rather than putting all that information on a website page.
Make things easy for them
Whatever you want the user of your site to do – whether it is to fill in a contact form, or leave a blog comment, or make a phone call, make it easy for them. Don’t make them decipher barely readable CAPTCHA codes for instance. If you’ve got an e-commerce site try to make the checkout process a one page deal if possible.
Now that we’ve taken care of the user you need to switch around and think about your own needs. When someone visits your website, you don’t want them to just browse around, go ‘hey, nice website’ and then head off into the ether. You want them to take some kind of action. You need to figure out what that action is and then set up the website to facilitate this.
Case Study – The Smile Collective
The Smile Collective website is actually two completely separate websites. The main website is a WordPress site with a blog and the shop website is on the Shopify platform. In the perfect world they would be fully integrated but unfortunately WordPress doesn’t (to date) have any kick ass e-commerce plugins/solutions and I am yet to come across an off the shelf e-commerce platform that offers brilliant blogging functionality. That’s what I am happy to let the main site (WordPress) do a heap of heavy lifting from an SEO and content marketing point of view while enjoying the fact that Shopify has a lovely, easy backend setup for the e-commerce side of things. Having my site split over two separate platforms does pose a problem from a purely aesthetic point of view though as it means the two different sites need to be skinned so that they look pretty much the same. If the two sites look completely different from each other this can be very jarring and can also make the user feel uneasy. Let’s not make the user feel uneasy! Here’s what my two sites look like side by side (click on the image to enlarge):
As you can see, it’s not too bad. The Smile Shop (on the right) has its navigation menu above the header while the main site has its navigation menu below the header, but other than this, they are pretty close and I can live with the small differences. Now let’s have a look at what I want people to do when they visit each site as this informs the design/layout of the site(s) in a big way.
The Main Smile Collective site
The main site has a few purposes:
- To brand The Smile Collective as a shiny, happy place to visit
- To make it clear that there is Smile Shop and make it easy for people to click through to the shop
- To allow me to build a following via the blog
- To allow me to build an email list (via the free Smile Postcards)
The header and colour scheme of the website takes care of number 1 above while items 2-4 are the first three things that appear in the right hand sidebar. As far as the main home page content goes, the blog is a really important part of the site as the content changes on it weekly and is the main reason people will come back to the site again and again. That’s why the blog posts are on the home page. I had the ‘About Us’ content there for a while but really, about us text isn’t going to catch anyone’s eye. Bright, shiny and new manifesto images on the other hand will. As for the sidebar, it is important to ensure that every item in the sidebar is doing a job for you, otherwise it shouldn’t be there. Uber-cluttered sidebars drive people to distraction. As you can see, after highlighting the Smile shop, asking people to subscribe to the Smile blog and telling them about the freebies on the site I then offer social media links, the ability to search the site and then two ways to access previous blog posts – Recent Posts and Archives. The order in which you place your sidebar elements, and knowing when to STOP putting stuff in your sidebar is a crucial part of the web design process.
The Smile Collective Shop site
As the shop site is built on the Shopify platform, I am a bit at the mercy of the various templates Shopify offers from a design and layout point of view. I am quite happy with the template I have gone with as it allows me to achieve a design that is close to the main site design and also displays the products really nicely. I like the fact that I can have up to 12 products on the home page and I like the way they look. I am still trying to find the magic formula to turn site visitors into buyers as my conversion rate right now is pretty low and I will be trying a few things down the track to improve this. From a purely design point of view though, I am happy that the products are laid out neatly and that the process of getting more product information, adding the product to the cart and going through the checkout process is pretty simple for the user. That’s all anyone wants from an e-commerce site! So there you go. Now that we have tackled the design side of things, and we have our sites looking totally schmick, we can now turn our attention to driving traffic to our websites. Next week I am going to tackle some basic search engine optimisation. See you then! If you want the next post delivered straight to your inbox, why not subscribe to the Swish Design blog posts! Any questions on the post above? Leave them in the comments below and I will do my very best to answer!
Read the next post in the series