Web design: The good, the bad & the ugly

30.04.2019

Despite ongoing advancements in technology – such as AI and augmented reality – the fundamentals of good web design haven’t changed much over the last two decades.

Every year, new articles crop up detailing “the top web design trends you need to know about in X”. And they’re worth paying attention to. Like fashion, web design is subject to shifting trends. But the core components of web design, the elements that distinguish a great site from a mediocre one, are the same as they were over 20 years ago.

So, forget about artificial intelligence and chatbots for a second. We’re taking you back to basics by laying out the things that make up a clean, user-friendly site, as well as some handy dos and don’ts to keep you on track.

The good

A clear user journey

Before you even think about the design, you need to establish your site’s key purpose. Is it to sell a product? Entertain? Inform? Provide a service? For example, you might be designing a site with the objective of “selling designer shoes to a global audience.” As simple as this seems, people still skip this step. But without a clear objective, it’s all too easy to forget about your end user.

Once you’ve identified your site’s purpose, you can start planning the user journey. What destination do you want your customers to reach? What actions will they need to take to get there? Use clear calls to action to signpost the steps your user needs to take.

By identifying the steps in your user’s journey, you can build a clear navigation menu to help them get to their destination quickly. Think about how you can reduce the steps in their journey, such as including subcategories and styles in the drop-down menu and adding quick-buy options to product listings.

Easy-to-find information

A core part of the design process is deciding what your users expect to find when they land on your site and then delivering it in a clean, organised way. Regardless of your site’s objective, your users should have all the information they need at their fingertips, without having to hunt around for it.

If you’re an ecommerce site, your top navigation menu should include the overarching categories, as well as a drop down of the most popular subcategories, including ‘new’ and ‘sale’. Alongside your top menu – normally on the right-hand side – should be a clearly visible search bar.

Your navigational menu, search bar and key promotional calls to action (such as “Shop the sale now”) should all be included above the fold on your website. In the footer, there should be links to delivery and returns information, as well as your business’s contact details, address (if applicable), FAQs, social links, and terms and conditions.

Mobile first

While most of the components of good web design have remained the same since the 90s, there is one major difference: mobile browsing. The rise of smartphones means that most content is now accessed through mobile browsing, which means designers have had to flip their approach. Rather than being an afterthought, mobile should be the starting point of your site’s design.

Designing for mobile means adapting to screen size and bandwidth limitations, so working within these parameters means your approach needs to be focused on content. Create a hierarchy of your content based on what’s most likely to fulfil your site’s objective, and prioritise your homepage’s visuals to display these elements prominently.

Visually engaging

Creating a visually engaging site is about finding the balance between great design and great usability. It’s a fine line – you need to attract without overwhelming. It also needs to be geared towards your specific audience – for example, luxury-fashion consumers will expect a different layout to fast-fashion customers.

Regardless of your audience, your site should have a clean layout, easy-to-read fonts, and minimal amounts of text. The colour scheme should complement the content, not distract from it, and your design needs to be consistent and on-brand across the board.

Although the fundamentals of web design stay the same, you should still refresh your site’s design every couple of years. Things like screen size, new devices and shifting trends mean websites can quickly look outdated. If your site hasn’t had a fresh coat of paint in over a decade, your users will be able to tell.

Accessible

Accessibility is one of the pillars of good design. According to Tim Berners-Lee – inventor of the World Wide Web – “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

The best websites are designed for the users – not the designers or developers. Which means your website has to be accessible to all users, from all browsers and devices. To ensure complete accessibility, familiarise yourself with the World Wide Web Consortium (W3C)’s Web Content Accessibility Guidelines (WCAG).

Accessibility doesn’t just benefit people with disabilities – it also helps older people, anyone using a smaller screen, people in rural areas or developing countries, and countless others. And it impacts almost all areas of a site’s design – everything from font size and spacing to target size and colour scheme have to be optimised for accessibility.

There is also a strong business case for accessibility. According to WC3, “accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO).”

The bad

Convoluted journey

Features such as filters, lookbooks, or even quizzes to find the product best suited to you are all great quirks, but they shouldn’t be the primary way you instruct your users to shop.

It’s fine to give your users an option to refine their search – in fact, if you have a large product catalogue, it’s recommended. But your user should be able to reach the checkout in as few clicks as possible, so make sure you’re not making their journey too complicated by having too many different filters or subcategories.

Lack of information

A lack of information is a huge barrier to purchase – especially for new customers. When it comes to designing your site, make sure you build the relevant information into the design by including helpful links in easy-to-find places. For example, if you forget to include footer links for the delivery or returns information, you’ll lose a lot of revenue from customers who don’t want to risk the purchase.

Style over substance

We’ve all heard the expression “style over substance”, but with web design, it’s more accurate to say “style over usability”. Even some of the biggest websites are guilty of sacrificing ease of use for beautiful flourishes. If your stylistic choices impact your customers’ browsing experience, it’s a bad design – regardless of how great it looks.

A good example of this is Zara. Instead of regular product listings with three or four small images per row, they use a combination of small and large imagery, along with videos and a varied layout. The whole thing, while nice to look at, makes it difficult to shop for products – which defeats the point of the site.  

Slow site speed

Slow site speed is a huge conversion killer. On average, customers will only wait two seconds for a web page to load. After that, bounce rates start to skyrocket. While a lot of speed issues are down to development, some things overlap with the site’s design.

One of the biggest culprits on slow websites is unoptimised images and videos. Capping your file sizes at 1MB and using JPEGs instead of PNGs are a couple of easy ways to make sure you don’t slow your site down unnecessarily.

The ugly

Scrolljacking

Although it’s good to get experimental with design, some sites end up on the wrong side of the experimental/usability divide. One of the most notable instances of this is scrolljacking.

Scrolljacking (also referred to as scroll hijacking) is when a designer or developer manipulates the scrollbar to behave differently on their site – whether that’s through animated effects or fixed scroll points.

Scrolljacking has been a point of controversy in web design, with some big brands and agencies implementing it in order to ‘reinvent’ the user experience. Though it’s true that scrolljacking can create an interesting, interactive experience, it can also impact usability.

Ultimately, if these fancy flourishes don’t serve your site’s end goal or improve usability, they shouldn’t be there.

Infinite scrolling

Infinite scrolling is a design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. Most commonly found on social media and content-sharing sites, infinite scrolling does have its place in web design – but it’s also frequently misused.

Similarly to scrolljacking, applying infinite scrolling to your site can severely impact your user’s experience. A prime example of this is your site’s footer: most infinite-scrolling sites have a footer containing important secondary information, but thanks to the never-ending stream of content, it’s almost impossible to access.

Infinite scrolling can also overload your users with information. While fine on sites like Instagram and Twitter – where scrolling is the primary activity, rather than a means to an end – most sites with infinite scrolling simply give users too much choice. Rather than create a homepage with an endless stream of content, it’s much more user friendly to break your content down into easily-navigatable categories.

Over-the-top animations

When used well, animation can be a wonderful tool to increase engagement, add variety and delight your users. But, like most elements of web design, you can have too much of a good thing.

Animations are most frequently used in things like micro-interactions and transitions, but they can also be found placed haphazardly and unnecessarily on poorly designed sites.

Not only does an excess of animations harm your site speed and, ultimately, your SEO, it can also distract your users. By breakng their concentration and adding additional time to their customer journey, unnecessary animations can actually harm your user engagement, rather than help it.      

Finding the balance

We’ve all experienced a poor user journey – trawling through page after page of information without finding answers to your questions, or finding too many barriers between you and your end goal.

With so much competition out, it’s essential to make sure you’re designing for your user – first, foremost, always. Our top tip? Keep a checklist of the basics in the back of your mind, and prioritise those before you even think about adding any fancy flourishes.

Did you know? We’re experts in web design, development and digital marketing. If you’ve got a project you’d like to discuss, you can get in touch here.