7 Web Design fails you need to fix
Your website is the face of your business. Many consumers will conduct their due diligence online - seeking out testimonials and gauging online presence - before committing to a purchase or using a service. Previously, we have discussed the importance of first impressions and how when it comes to websites, you only have 50ms to make an impression at all! However, credibility is not built on aesthetic appeal alone. The technical performance of your website can have a massive impact - for better or worse - on your website's bounce rate, engagement and overall success. In this blog, we bring you the 7 deadly sins of website design and how to fix them.
Slow Loading Speeds
In our modern world, we have become accustomed to an instant lifestyle. Be it on demand TV, instant messaging, fast food or same day delivery, our expectation for things has changed dramatically even over the last 10 years.
The proverbial phrase ‘patience is a virtue,’ doesn’t seem to pack the same profound punch it once did. In today’s fast-paced digital age, ‘the customer is always right’ and the onus is on the provider to deliver quicker and do better.
Websites are no exception. Slow loading speeds can be really off-putting to potential customers. Before you know it, visitors will have bounced off your website and looked elsewhere.
In order to improve your website’s loading times, you need to ensure that your website is optimised for speed. How do you do that?
Think of it as being a little bit like a professional swimmer. Swimmers and their coaches will analyse the miniature detail of their performance, from technique right down to the choice of kit. They will identify the areas that can be tweaked to make them become more streamlined and glide through the water effortlessly.
When it comes to a website’s performance, the equivalent would be reducing the size of your image and logo file sizes, and amount of assets (audio, video) on a page. All of these adjustments will speed up your customers' experience and set you up for a podium position against your competitors. Tools like Google’s PageSpeed Insights and SEOSpace can help.
Poor Navigation
Gone are the days of pulling over, digging out the massive OS maps and trying to figure out what your 4 figure grid reference is.
Today it is all about using the latest app - be it Google Maps or Waze - to outsmart the traffic and reach your final destination in the quickest time possible.
The same philosophy applies to website design. For minimal effort, people want to find the answer they are looking for… 3 seconds ago. Visitors should be able to navigate your website with ease and quickly find what they're looking for. If your website's navigation is too convoluted and confusing, visitors will quickly become frustrated and leave.
At Made By Dave, when we approach website design, we put a lot of focus on the user journey (UX). We have become quite adept at putting ourselves in our clients’ customers’ shoes and preempting what their thought processes would be. Once we have defined that, we distill it into the minimum number of clear, concise steps required. We want to make the user pathway as intuitive, simple to use and enjoyable as possible.
We can’t emphasise enough the importance of using clear labels. Like Ronseal, make sure any label ‘does exactly what it says on the tin’ and leads to relevant information.
If your brand is quirky and you want to use alternative titles, make sure people know exactly what they are getting. You can’t really afford for there to be room for misinterpretation. Plus, you could be missing out on a great opportunity to optimise on the all important SEO.
Keep your navigation clean with only 4-5 navigational tabs and make use of drop-down folders. Where possible, try to make all your navigation terms similar in length as it looks smarter and pleasing to the eye.
The footer is often forgotten about and regardless of the form they take, their presence is critical (and highly underrated).
Finally, don’t be afraid of buttons! Buttons are the signposts and landmarks of website navigation. They are calls to action, guiding your visitor around your website. Like our modern day navigation apps - spell it out!
Inconsistent Branding
The joys of dating! When someone gives you mixed messages, it can leave one feeling confused, not knowing where they stand and ready to give up. Now bare with us on this analogy.
A website is your primary means of courting potential customers. It needs to deliver a clear message of what you do, who you serve and why your business is the right fit for them. Consistent messaging and branding is crucial for establishing and building trust with your visitors.
The more they trust you, the more they will believe you can deliver and the sooner they will commit and say I do! Continuing with the romantic theme, a soon-to-be wedded couple is looking for a venue with a rustic setting - think soft pastels, lots of flowers, bunting, Bake Off vibes! That is exactly what you offer.
However, a section of your website is monochrome, with a sans serif font and with images that look like a staged corporate scene. It is a bit incongruous to the wild, candid, relaxed aesthetic associated with a countryside wedding. It plants a seed of doubt in the couple’s mind as to whether the vision of their big day would be fulfilled.
So what does consistent branding look like practically in website design?
Starting with the basics it means consistent use of fonts, colours and imagery. Take it a bit further, we are looking at the considered placement of repetitive patterns and visual languages throughout your scheme.
If you are looking to come across as friendly and approachable, it could be using a subtle border radius on all content blocks giving it a more subliminal welcome feel. It doesn’t have to be anything groundbreaking.
As a wedding planner would agree, it's all in the detail.
Poor Mobile Responsiveness
According to Statcounter, as of May 2023, 50.55% of the market share worldwide are opting to use mobile as opposed to desktop or tablet. With a majority of users preferring mobile devices as a means to surf the internet, mobile responsiveness within website design is more critical than ever. What does it mean to be mobile responsive?
On the whole, the layout and design of websites are generally created with desktops in mind. To be mobile responsive, the elements of your website - images, content, text - need to be adaptable. They are versatile in that they will adjust their sizing and layout to suit the dimensions of the device the website is being loaded on to.
If your website isn't optimised for mobile devices, it makes for a poor user experience which can negatively impact your bounce rate and engagement. Google agrees and made mobile friendliness one of its ranking criterias.
The more mobile friendly your website is, the more favour Google will bestow, allowing you to climb up those rankings. Squarespace has mobile optimisation built in - hooray! So no need to spend extra time or money building a separate mobile edition. With Squarespace’s latest iteration of the platform, Fluid Engine, this has become even easier.
Cluttered Design
‘Less is more,’ is a phrase made famous by the architect Ludwig Mies van der Rohe.
A universally accepted principle within design, it has been applied to disciplines ranging from architecture right through to fashion.
Coco Chanel is reported to have said, “Before you leave the house…look in the mirror and remove one accessory.”
Website design is no different. A cluttered design can make it difficult for visitors to focus. As a result, they can’t fully appreciate the quality and beauty in each individual piece of content, which is a shame if time has been spent carefully crafted. More worryingly, they may miss out on the key information they were looking for on your website. How do you declutter your website?
First and foremost, don’t be afraid of negative space!
Allow your content to breathe.
Reduce the amount of text, working on and refining a few key messages that you absolutely want to get across to your prospective customers. Your home page is an elevator pitch. It should be reserved for your key messages alone. Present them in a clear and visually compelling way, that requires little to no effort on your visitors’ part to comprehend.
At Made By Dave, we employ techniques in our designs to create a visual hierarchy within the content. Using font size, colour and line weights, we can lead the eye from the most important information through the extraneous detail.
If you are selling an item of clothing, the first thing a customer wants to see is the item. So photo, centre stage, the main star. If a customer likes the look of a product, the next thing they want to know is whether their purse or wallet agrees. So the cost normally features fairly prominently. If that is all good, then a clear call to action is required next, so they can easily add it to their shopping bag.
When it comes to the areas we are passionate about - like your own business - it can be so tempting to throw the whole kitchen sink at it and go to town explaining all the details. However, we encourage you to heed the advice of expressionist artist Hans Hofmann: “The ability to simplify means to eliminate the unnecessary so that the necessary may speak.’ Now this is not to say the details of your business are not necessary! It is just knowing how much and in what order to give out information so that it lands and sticks with the customer.
Remember, if people want more information, they will seek it out. This can be easily presented in the deeper chasms of your website in the form of a blog, downloadable files or links to a portfolio.
Not Secure
When browsing the internet, you may or may not have noticed a little padlock icon that sits at the front of the URL/address bar preceding the domain name.
On websites that don't sport a padlock, there would have been a pop up window warning you that the website you are about to visit is ‘Not Secure.’ The padlock icon indicates whether a website is SSL (Secure Sockets Layer) certified. By installing an SSL certificate, one establishes secure connections for visitors, verifies the ownership of their website, protects data (payment and personal) and prevents hackers from impersonating them. It also changes a web URL to begin with HTTPS as opposed to HTTP, which is another indication of a trustworthy website. You can understand then that it is of utmost importance for businesses to ensure their websites are secure. It not only provides peace of mind for the owner but is a fundamental deal breaker in gaining a customer's trust.
Squarespace has made the process of securing a website created on their platform fairly straightforward. In order to improve security, ‘all domains correctly added to your Squarespace site are automatically protected with free SSL certificates.’
Lack of Accessibility
According to the World Health Organisation, as of March 2023, an estimated 1.3 billion people - that is 16% of the world’s population, or more tangibly put, 1 in 6 of us - experience significant disability.
Back in 2008, the World Wide Web Consortium or W3C created the Web Content Accessibility Guidelines (WCAG). The purpose was to create an internet standard that provided recommendations to web developers and the like, to equip them to create websites that all visitors, regardless of disability, could access and enjoy a great user experience. It has since been updated in 2018 and is currently (2023) undergoing a third revision. Its content cannot be adequately covered within the remit of this blog. If you would like to read further, you can check out the guidelines here. However, we shall attempt a quick rudimentary summary for you.
There are 4 major accessibility principles to consider when designing a website.
1. Perceivable - is the content detectable to a user’s senses?
You can make content more accessible by employing text-to-speech, ARIA tags, braille, enlarged print, closed captions.
2. Operable - is the website navigable and easy to use?
Provide the option to browse the site using just a keyboard or just a mouse. Avoid any time based restrictions to your web content, so that all readers can complete in their own time. If this is unavoidable, provide alternatives to anything that is time based.
3. Understandable - is the content easy to comprehend and the user interface intuitive?
This can be combated by using simple language and smaller sentence structures. You can provide descriptions for unusual phrases, idioms or abbreviations. You can also ensure the navigation mechanism is predictable and found in the same place on each page
4. Robust - is the content compatible with current and future user tools?
According to various sources, 20% of people worldwide have been diagnosed with neurodiverse conditions such as ADHD, Autism, Dyspraxia and Dyslexia, to name a few.
Neurodiversity is the ‘idea that people experience and interact with the world around them in many different ways; there is no one "right" way of thinking, learning, and behaving and differences are not viewed as deficits.’
They are all unique conditions which share some common symptoms. These symptoms can make reading comprehension online a challenging task. Neurodivergent readers are more likely to have issues with visual tracking, visual attention, ‘walls of text’ and working memory. Again, this is a topic we can not sufficiently cover in this blog. The WCAG have highlighted 6 areas of web design that can have a significant impact on accessibility for neurodivergent readers. As an example, by offering options for font sizes, line heights, column width, text contrast, night mode and alignment, it can substantially improve the user experience for neurodiverse readers.