6 website design mistakes to avoid
Your website is one of the most powerful marketing tools for your business. More than just simply existing on the internet, it needs to provide a seamless user experience to attract and retain customers.
Often, people make website design mistakes that end up costing them new business and sales. Here, we will walk you through 6 website design mistakes to avoid, and give you our top tips on how to prevent them to pave the way for web design success.
1. Having an unclear call to action
If a prospect lands on your website and doesn’t know what they are supposed to do, you can’t expect them to convert into a paying customer. Having a clear call to action enables potential customers to understand what they have to do next.
For example, if you’re offering yoga classes, there should be a clear ‘book now’ call to action on your website. Including the key call to action in your navigation bar/menu is a great way to implement this.
Top tips for avoiding this website design mistake:
- Make it obvious what you want your website visitors to do
- Include a clear call to action on your website and in your navigation bar
- Make your call to action stand out and easy to find
- Ensure a potential customer can reach their goal in 3 clicks or less
2. Problems with navigation
In keeping with the theme of making things easy for your potential customers, it should be straightforward to navigate your website.
When someone lands on your website, they don’t expect any friction or to experience frustration. They simply want to reach their goal as quickly and seamlessly as possible.
As mentioned earlier, a website user should be able to reach their goal in 3 clicks or less. If they can’t, this is a clear indication that your website navigation needs to be improved.
Another mistake which ties in with this is having too many items in your menu bar. There should be a maximum of 7.
The first one should always be ‘home’ to make it easy to navigate back to the homepage and the final one on the far right should always be ’contact’ or a call to action such as ‘book now’. This is because people are used to seeing navigation bars in this order. Changing the order around can make your site navigation more confusing.
Top tips for avoiding this website design mistake:
- Ensure a customer can reach their goal in 3 clicks or less
- Avoid putting any more than 7 items in your menu bar
- Include a call to action in your menu
- Include a ‘home’ link in your menu first and always include a ‘contact’ or call to action link last
3. Unclear brand messaging and cluttered design
In addition to slick navigation and a clear call to action, visitors should be able to easily consume your brand message.
When you first land on a website, it should be immediately obvious what the business does.
With a cluttered website or long sections of text, your key messaging becomes diluted and you lose visitors. Incorporating enough white space is key to good web design.
White space helps to simplify the design, minimise clutter and make it easier to digest information. Essentially, it improves the productivity and flow of your website.
Top tips for avoiding this website design mistake:
- Don’t jam-pack your website with lengthy text or too many images
- Include enough white space to make it easier for visitors to pick out key messages
- Make sure your menu is straightforward and your call to action is easy to see
4. Hard-to-read text
If the text on your website is hard to read, it may as well not be there at all. Lengthy texts, small fonts, and text over key parts of images all fall under this bracket.
Website users are unlikely to become a customer if they have difficulty understanding what your message is. Again, your website should be as easy to use as possible and provide users with a comfortable browsing experience.
As well as being penalised by customers for hard-to-read text, Google also pushes for websites to be user-friendly and accessible.
To check if a particular font colour will be easy to read against a certain background colour, you can use an contrast checker or simply test it and and see how easy it is to read. This is a great way to make sure your colour scheme won’t harm your rankings in Search Engine Results Pages (SERPS).
Top tips for avoiding this website design mistake:
- Avoid long chunks of text, use correct spelling, grammar and keep an eye on sentence length
- Make sure the font style and size are easy to read. Sans Serif fonts work well
- Check if your font colour and background colour work well together by using the contrast-checking tool above
5. Not optimising for search engines
Search Engine Optimisation (SEO) is essential to the success of your website. Customers should be able to find your website by searching Google for key terms relating to your business. Neglecting SEO will make it more difficult for potential customers to find you using search engines.
It's important to include keywords and popular search terms that relate to your business in the content for your website.
Keep in mind that you must also review your content regularly to keep it up-to-date and relevant to what your business does.
Another thing to consider is creating separate pages for each service. This will strengthen the chances of your business ranking for more keywords and increase the likelihood of someone visiting your website.
Top tips for avoiding this website design mistake:
- Keep image and file sizes small to boost website loading speeds
- Include relevant keywords for your business throughout your content
- Give each service its own page, using keywords based on what people search for
- Don’t use an unnatural amount of keywords as you will be penalised by search engines for ‘keyword stuffing’
6. Forgetting about mobile layouts
Non-responsive website design is a top reason why potential customers leave a website. This ties in with user experience.
Not only is non-responsive website design jarring for website visitors, but it can also cause your website rankings to drop on Search Engine Results Pages. More than ever, people are using mobile devices to browse the internet and this trend is only going to continue.
Top tips for avoiding this website design mistake:
- Consider designing the mobile version of your website first
- Use a ‘hamburger’ style menu
- Make sure that text and images are easy to see
- Check your buttons and 'call-to-actions' are still clickable and that any contact forms fit the screen
Conclusion
This list of 6 website design mistakes is a good starting point for checking over your own website. Although these are only some of the mistakes people make when designing websites, it’s important to keep them in mind when you start working with a web designer or developer.
Building an aesthetically pleasing website is great, but your website’s function is also to drive traffic and boost sales for your business.
Using Pagio is the easiest way to get the website you want. To book a free demo, complete the form below:
Array
(
[error] => Trying to get property 'formfields' of non-object
[file] => /var/www/swift/storage/framework/views/29085088b18210e66b23dddb7ba8e66217f6e025.php
[line] => 4
[function] =>
[trace] => #0 /var/www/swift/storage/framework/views/29085088b18210e66b23dddb7ba8e66217f6e025.php(4): Illuminate\Foundation\Bootstrap\HandleExceptions->handleError(8, 'Trying to get p...', '/var/www/swift/...', 4, Array)
#1 /var/www/swift/vendor/laravel/framework/src/Illuminate/View/Engines/PhpEngine.php(43): include('/var/www/swift/...')
#2 /var/www/swift/vendor/laravel/framework/src/Illuminate/View/Engines/CompilerEngine.php(59): Illuminate\View\Engines\PhpEngine->evaluatePath('/var/www/swift/...', Array)
#3 /var/www/swift/vendor/laravel/framework/src/Illuminate/View/View.php(137): Illuminate\View\Engines\CompilerEngine->get('/var/www/swift/...', Array)
#4 /var/www/swift/vendor/laravel/framework/src/Illuminate/View/View.php(120): Illuminate\View\View->getContents()
#5 /var/www/swift/vendor/laravel/framework/src/Illuminate/View/View.php(85): Illuminate\View\View->renderContents()
#6 /var/www/swift/vendor/laravel/framework/src/Illuminate/View/View.php(412): Illuminate\View\View->render()
#7 /var/www/swift/app/Services/PageRenderer.php(215): Illuminate\View\View->__toString()
#8 /var/www/swift/app/Services/PageRenderer.php(170): App\Services\PageRenderer->renderElement(Array, 2, 0, 7)
#9 /var/www/swift/app/Services/PageRenderer.php(148): App\Services\PageRenderer->renderColumn(Array, 0, 7)
#10 /var/www/swift/app/Services/News.php(109): App\Services\PageRenderer->renderSection(Array, 7)
#11 /var/www/swift/app/Http/Controllers/LandingController.php(398): App\Services\News->fullPageResponse(Object(App\News), 'landing.layouts...', 'blogpage.css', 'landing.blogpos...', true)
#12 [internal function]: App\Http\Controllers\LandingController->blogpost(Object(Illuminate\Http\Request), '6-website-desig...')
#13 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Controller.php(54): call_user_func_array(Array, Array)
#14 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php(45): Illuminate\Routing\Controller->callAction('blogpost', Array)
#15 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Route.php(212): Illuminate\Routing\ControllerDispatcher->dispatch(Object(Illuminate\Routing\Route), Object(App\Http\Controllers\LandingController), 'blogpost')
#16 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Route.php(169): Illuminate\Routing\Route->runController()
#17 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Router.php(658): Illuminate\Routing\Route->run()
#18 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Routing\Router->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#19 /var/www/swift/app/Http/Middleware/Security.php(18): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#20 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): App\Http\Middleware\Security->handle(Object(Illuminate\Http\Request), Object(Closure))
#21 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#22 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Middleware/SubstituteBindings.php(41): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#23 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\Routing\Middleware\SubstituteBindings->handle(Object(Illuminate\Http\Request), Object(Closure))
#24 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#25 /var/www/swift/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php(68): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#26 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\Foundation\Http\Middleware\VerifyCsrfToken->handle(Object(Illuminate\Http\Request), Object(Closure))
#27 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#28 /var/www/swift/vendor/laravel/framework/src/Illuminate/View/Middleware/ShareErrorsFromSession.php(49): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#29 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\View\Middleware\ShareErrorsFromSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#30 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#31 /var/www/swift/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php(63): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#32 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\Session\Middleware\StartSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#33 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#34 /var/www/swift/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/AddQueuedCookiesToResponse.php(37): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#35 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse->handle(Object(Illuminate\Http\Request), Object(Closure))
#36 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#37 /var/www/swift/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/EncryptCookies.php(66): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#38 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\Cookie\Middleware\EncryptCookies->handle(Object(Illuminate\Http\Request), Object(Closure))
#39 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#40 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(102): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#41 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Router.php(660): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#42 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Router.php(635): Illuminate\Routing\Router->runRouteWithinStack(Object(Illuminate\Routing\Route), Object(Illuminate\Http\Request))
#43 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Router.php(601): Illuminate\Routing\Router->runRoute(Object(Illuminate\Http\Request), Object(Illuminate\Routing\Route))
#44 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Router.php(590): Illuminate\Routing\Router->dispatchToRoute(Object(Illuminate\Http\Request))
#45 /var/www/swift/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(176): Illuminate\Routing\Router->dispatch(Object(Illuminate\Http\Request))
#46 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}(Object(Illuminate\Http\Request))
#47 /var/www/swift/vendor/fideloper/proxy/src/TrustProxies.php(56): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#48 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Fideloper\Proxy\TrustProxies->handle(Object(Illuminate\Http\Request), Object(Closure))
#49 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#50 /var/www/swift/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(30): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#51 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#52 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#53 /var/www/swift/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php(27): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#54 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle(Object(Illuminate\Http\Request), Object(Closure))
#55 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#56 /var/www/swift/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php(46): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#57 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure))
#58 /var/www/swift/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#59 /var/www/swift/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(102): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#60 /var/www/swift/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(151): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#61 /var/www/swift/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(116): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request))
#62 /var/www/swift/public/index.php(55): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request))
#63 {main}
)