Below we’ve put together a list of the most common mistakes that web designers and developers make. Prevention is always better than cure - see what to avoid on your own website.
It is by no means uncommon that a website might suffer from a few mistakes. It’s only natural. A human being designed and developed it – and even the most professional of human beings make mistakes from time to time.
Newbies to the web design and development game are of course the most common culprits. But they shouldn’t be too hard on themselves – there’s a learning curve for everything. Oversights can be quite easily made, and, when trying to keep a client happy by including all the bells and whistles that they want, sometimes this means sacrificing on simplicity and forgetting about the most important thing of all – the experience of the end user.
So, below we’ve put together a list of the most common mistakes that web designers and developers make. Most of the points on the list are actually quite easy to correct should you find that your own website is suffering from them. Others might require a little more time and technical input to fix. But, prevention is always better than cure, so if you can avoid as many of these common errors at the outset, then not only will you be saving yourself a lot of headaches later on, but your site will be fully optimized for UX (user experience) as soon as it goes live, which will keep your visitors happy and returning again and again.
More and more, people are using their smartphones and tablets to access the internet. That’s just a simple fact, and designers and devs need to be on top of this when they’re building your site. Smart Insights made reference to a report from comScore at the start of this year that clearly indicates the moment in 2014 when mobile overtook desktop usage for accessing the web – and it’s still continuing to rise.
The mobile-first approach to responsive web design is now more important than ever. This means that your website first and foremost be developed with the small mobile screen in mind. This means that you will have to organise your content very carefully.
At a fundamental level, the basics of responsive design is ensuring that the horizontal grids on the wide desktop screen can collapse into vertical lists on the smaller smartphone or tablet screen. The most common error in question here is that the horizontal grid is just too large and contains too many elements, so that when it collapses down, the vertical list is massively long and requires the mobile user to scroll down excessively to find the content that they’re after.
This does not lead to a good mobile UX, and your visitors are more likely to abandon your site in frustration.
Importantly, there is also now an increasing use of other devices that are being used to access the internet, such as games consoles and smart TVs, it should be noted that web designers are going to have to change their way of thinking about responsive design once again in the not too distant future.
Infographic by Global Web Index
There can be a tendency to over complicate things when designing your web pages. In an effort to cram as much information onto the homepage as possible, what can often happen is that users are simply just left confused and are not quite sure what they’re being invited to look at first.
White space (or rather “negative space”, as your background design does not necessarily have to be white) is an extremely important element of good web design.
Sufficient negative space should be used between all of your different page elements, including columns, lines, paragraphs and images. This will help your visitors perceive the importance of each of your elements. But, above all else, it just looks neater, and is much easier to navigate. Put simply, it’s a case of less is more when it comes to the amount of content that you include on any given web page.
Below is a screen shot of myownbike.de’s homepage. Their use of negative space is excellent.
Navigation is one of the most important aspects of a web page. Your visitors want to be able to find their way to the pages that they want easily and intuitively. As such, your navigation buttons need to be clear and immediately apparent to users. And, what is more, not only should they be easily located, they should also be easy to use.
There has been a certain trend in recent times to hide the navigation tools. They were integrated into images, or sometimes the menu bar at the top of the screen would only pop down if you hovered your mouse cursor near it. While this is most certainly an interesting approach in an artistic sense, it might turn out hazardous to use - research by Exisweb and ConversionXL confirm that hamburger menu without any description brought lower conversion rates for mobile. With extending mobile website traffic, that’s definitely a fact you should keep in mind.
In fact, any kind of drop down menu at all runs the risk of having a negative effect on UX - you can find case studies where changing a dropdown menu into an alternative solution, e.g. the variation page, increased conversions significantly. So it’s always best to avoid these things wherever possible. Users want to be able to find their way around your site with the least amount of effort as possible – so always bear this at the forefront of your mind when designing your site.
Not to blow our own trumpet too loudly, but the netguru.co site keeps its navigation menu plain and simple at the top of every page, and that really is what you should be aiming for.
Obviously you will be wanting visitors to return to your site on a regular basis. And so, as part of your content marketing strategy, you will most likely be producing a blog for your website.
Blogs are of course a great way to add value to your business, and will help you engage and grow a following. And, as such, you want all of your visitors to be able to locate your blog very easily on your homepage.
And not just your blog either. Any latest offerings that you don’t want your users to miss should be made prominent on your front page as well, and should include simple, one-click links towards those important pages.
Something like Mashable.com nails it. To be fair, Mashable is a news site, but you can take some inspiration from it when designing your own as to where to place the links towards what’s new on your site.
The whole point of your website is so that users can acquire information. Though some sites seem to be designed with the reverse purpose in mind. Of course you want as many people as possible to sign up to your newsletter or register for your services, and you also want to get as much information out of these people as you can in your efforts to understand your audience better.
However, if it’s sign-ups that you’re after, then you need to make this process as painless as possible for your users. And this means only asking them for a very limited amount of information when they go to fill in your form.
Ideally, this should just be their name and email address. That’s all you really need. Then, later, once you’ve got them interested and engaged, you can endeavour to find out more about the finer details of the demographic that they inhabit. But, first and foremost, you just want them to sign up – and if you present them with a form that has 10 or more fields where you’re asking for everything from their place of birth to their inside leg measurement, then you’re going to put people off.
So, keep things simple – and that goes for your contact page, and your account creation forms as well. Proof? After cutting their contact forms from 11 fields to 4, Imagescape observed a 120% conversion rate increase.
Infographic by Quicksprout
Newsletter signup form
A conversion-optimised (and targeted!) email sign-up form by Jabong
A clean and simple contact form by Servint
As soon as a visitor lands on your site, they need to know immediately what it’s all about. Too many sites’ main messages are unclear on the homepage.
If you’re in the business of selling paint, for instance, then that needs to splatter in no uncertain terms right across your homepage. If it’s websites that you’re building, then make that clear.
Whatever it is needs to be communicated immediately with the use of either a headline, tagline, image, or a combination of all 3 as soon as a visitor locks eyes on your page.
Another way to do this is to list your services in your navigation bar. But, however you choose to go about it, it’s absolutely vital that your site’s purpose is made apparent within the first few seconds that a visitor arrives to any single one of your pages.
This from ewedding.com is a great example.
As is good old Dropbox.com.
What are the most common website design and development mistakes that you notice when browsing the web? Let us know in the comments below.
There's much more to website design than the solutions described above, especially when it comes to global pages. Find out what makes a good multilingual website!