Top 3 Design Tips To Improve UX

Creative Design Article

So you have a website which isn’t performing as expected? Don’t worry, you don’t need to redesign the whole site to achieve the targets that you’ve set. Redesigns are costly and in some cases avoidable. Hierarchical changes, consistent design and an awareness of how shapes and colours impact users is a great way to spot where you are going wrong.

Consistency

One of the things as a designer that I always say, especially with anything brand related is ‘consistency is key’. This can mean things like ensuring the colours on your site marry up to those of your branding and social presence, fonts are consistent with those in your brand pack and the tone of voice is the same as the one you’ve been crafting elsewhere. It’s all well and good building a brand on other platforms, but if your goal is to drive traffic to your site and the user doesn’t recognise the brand that they are familiar with, your bounce rate is going to be higher than expected.

Consistent design throughout your site is also vital to increasing conversion rates. If the layout were to change on odd pages, or the size of assets, colour scheme or fonts - any differences will impact your user experience. When it comes to crafting a successful site, simple navigation is key. In a world with so many options, the last thing you want is a site where the user has to spend time understanding it.

The design should be intuitive - with a layout which brings attention to specific areas you want to highlight. The user shouldn’t have to look for what you’re trying to say; it should be obvious from the moment they enter your site. An example of this could be a paragraph being reduced to a headline or line or two of copy, as with text especially, less is always more.

Shapes

One of the easiest ways to elevate your site design is by altering the shape of your buttons. Rounded edges instantly draw the user’s eye as they stand out, especially since most sites follow a grid layout. The rounded contrast between angular elements also makes for instant identifiability and a smoother user experience. Whilst angular shapes may sit nicely beside each other, you need buttons to stand out. The friendlier feel of rounded corners creates a more seamless but also trusting environment, as neuro-aesthetics researchers have found that users are more likely to trust a brand which utilises this shape over the harsher, rectangular buttons.

Studies show that our brains are programmed to avoid harsh edges, with Professor Jürg Nänni, author of Visual Perception stating that, “rectangles with sharp edges take indeed a little more cognitive visible effort than for example an ellipse of the same size. Our fovea-eye is even faster at recording a circle. Edges involve additional neuronal image tools, the process is therefore slowed down.” Utilising this shape also demonstrates that your brand is modern, with an awareness of current users' needs, further adding to the trusting relationship that you’re trying to build.

Despite this, I would advise that you don’t overuse this shape, as it will lose its ability to stand out and especially on mobile; when used incorrectly, can cause usability issues. This can especially be the case with drop-down menus, as it slightly reduces the touch area. Additionally, in some cases, the more youthful, playful and positive connotations of the rounded shape may not fit the audience of your brand, especially if you cater to a more mature and serious subject.

Colours

The goal when selecting a colour scheme for a website is to find colours that complement yet contrast in order to draw the user’s focus to specific areas of the page. Colour is used to implement a hierarchy, therefore when done wrong will negatively impact your site, as it will confuse the user’s eye, slowing down their ability to swiftly navigate. An easy way to figure out the correct balance of colour on your site is to use the 6:3:1 rule. ‘6’ is your main brand colour, making up around 60% of the colour on the site. ‘3’ is your secondary colour and should be used 30% of the time, and ‘1’ is the highlight colour, only used around 10% of the time. Typically colour ‘1’ would be used for key points of navigation like buttons.

As the comparison above demonstrates, utilising your colour scheme in different ways can have a big impact on the design and usability of your site. Simple changes like the colour of the navigation bar and the box over the image instantly modernised and improved the functionality of the site.

Specifically, when choosing colours for buttons, it is worth considering the size of them, as smaller buttons require brighter colours to help them stand out whereas a larger button would take over the page if a slightly less prominent colour wasn’t used. To keep to a minimal colour palette it can be worth considering outlining larger buttons with said brighter colour rather than filling the shape.

Summary

When considering a website design, you don’t need a creative eye to know if it works or not. Approach it from the perspective of the user - does it work? Do you get bored? Are you drawn to areas which take away from the intended focal point? Years ago I heard someone say something along the lines of ‘good design is invisible - bad design stands out’ and this is especially fitting when it comes to web design. Yes, you want your website to stand out and be memorable, but not for the wrong reasons, as is so often the case.

In the words of Dieter Rams, “good design is as little design as possible” and a good place to start with that is considering the colours, shapes and hierarchy of your site. But please, don’t forget to be consistent - as a user and a designer, it’s incredibly important.