Building my own tech
Now Reading
Web design principles

Web design principles

by KieranFebruary 7, 2015

When you’re designing your website it’s important to keep the user in mind. That may sound really obvious, but it’s something that people often forget. You can get wrapped up in the new features your site will have and all the cool new functions the user will have at their disposal – but, if they don’t know how to use those tools, you may as well just not bother.

Website design around your goals

There are many reasons that people design a website – some want network of similar minded individuals to spark discussions with – so the end goal here is for the user to register and engage with the website. Another web designer might want to keep earn advertising revenue from a news or article style site – so the aim here is to get as many people to see the advert as possible. Whatever your goals are, the below principles can help you to tailor, customize and build your website around your goal to ensure maximum return on investment.

The number 1 rule: Intuitive website design

Let’s first start what intuitive design is, I feel like the phrase gets thrown around a lot and yet, I don’t believe that those individuals saying “I need an intuitive design” really even know what it means. Well, I would define intuitive design as “when a user understands what a button, link or screen does without any explanation, training or experimentation with the system or website“. Obviously this is extremely important, if the user can feel at ease with your website, they’ll use more of the functionality – providing them with a better experience, and in turn, you with better return on investment (which is what this is all about, right?).

The first block of the intuitive design puzzle in my mind is icon design – this is a little pet hate of mine as people don’t seem to design icons that mean anything. I mean, the below bank of icons would be hard pushed to be any more useless to a first-time user of a website. If you really look at them, you can decipher what they’re probably for, but, it should be immediate and I shouldn’t have to spend time figuring out how to complete a task on the website. As a website owner it is in your best interests to keep the users happy (which includes not confusing them).

274271718_863d82c528_z

Once you’ve got your website icons sorted out, the next super important part of the website design is feedback messages. You know when you fill out a form on a website and you’re not really sure if it actually sent because there was no success message? Well, this is what I mean by feedback – your users should get feedback to reinforce what they’ve just done (to confirm it processed correctly & to put their mind at rest). Here at Netshock you’ll notice that you’ll receive a feedback message (like the one below) when you fill out a form. Not only does this show that the form was successfully submitted, but, it also shows the exact information that the user entered so that they can have one final proof-read.

confirm

Reduce choices

If you have hundreds of choices on your website… that’s great! But, it is important to try and limit the number of choices you give a user at any given time. Take a look at the Netshock navigation, we have loads of topics, but, we have grouped them under several navigation items – giving the user a less overwhelming experience. It’s generally accepted that users can take in up to 7 options in a menu – if you can, try to restrict – at least the top level menu – to a max of 7.

Not only does this provide the user with a less overwhelming experience, but it also really helps with your bounce rate. We tested running all our navigation items at the top (without any drop down menu’s) and our bounce rate was significantly impacted – remember, first impressions are hugely important.

menu

Reduce steps in process

I think I speak for all web designers when we say that users are lazy – I know I am. However well crafted a process is, if it’s too long, it’ll annoy the pants of your users. If you can design a process that lets me complete what I want to do in one click – then do it. Let’s look at Amazon, their one click buy system has been a massive success – why? Because people are lazy and don’t want to enter their address, card details etc.. with every purchase. Amazon made a very simple change to their process – saving customer details – and that simple approach can be found all across the Amazon empire and has helped them develop the business that they have today.

If it must be confusing – explain

Sometimes, it just isn’t possible to make something any simpler. Sometimes it does need a little bit of explanation. In this case help messages are important and should be implemented on your website. Further to this, help messages can inspire confidence in your user base – you could (and should) reassure the users about your security provisions while they are about to enter their credit card details for example.

Test what works and what doesn’t

It may be a bit of an odd thing to hear, but, users may be more likely to click an orange button than a grey button. I couldn’t believe it either, but, when you run an A/B test across the site, it’s true! Okay, so the colours may differ depending on your target audience, but it is certainly worth trying different colours, fonts, text sizes and positioning to see what works best. As part of your A/B testing, make sure that your call to action is above the fold – that way, you can entice more users to click.

Be available everywhere

Responsive, responsive, responsive! Forget mobile apps, no one cares about them, they’re nice to have, but, if I like your articles I am likely to just navigate to your website regardless. I still can’t believe that big businesses have non-responsive websites in this day and age. There is nothing more irritating than a non-mobile optimized website that requires you to pinch and zoom to carry out any action. All I can say, is reach your customers where they need you – when they’re at home, out and about, at work – you should be there & easy to operate.

Image used under creative commons & Image used under creative commons

This article was brought to you by Netshock. Netshock aim to provide technology guides and insight to our readers

What's your reaction?
Love It
0%
Interested
0%
Meh...
0%
What?
0%
Hate It
0%
Sad
0%
About The Author
Kieran

My name is Kieran, I love to see how technology can drive business growth. I started the Netshock technology blog as a place to share my thoughts and experiences with a wider audience. I cover all sorts of topics, from marketing to development.