08 August 2022

Best practice UX design: A guide to creating an effective website design

0 min read
Best practice UX design: A guide to creating an effective website design
Gavin James-WeirWritten ByGavin James-Weir

Gavin is Propeller's Lead Designer. Since joining the team in 2011, Gav has lead the way for innovating web design and UX for Propeller and client work.

Your user’s time is precious and their attention span is short – studies show that you have around 3-5 seconds to ‘sell’ yourself to them. Within this time, the user will make decisions on if they’re on the right site, if you have what they want, and if you seem trustworthy. So ensuring you are using UX best practices is key.

The decisions you make for your UX can impact the performance of your website, including your conversion rate. UX governs everything your users interact with on your site, from scrolling to reading to interacting. 

Here are our best practice UX design tips.

Refine your navigation

FAMILIARITY

Ecommerce sites all tend to have a similar feel to them, right? There’s a reason for this. Users get thrown by something they’re not expecting so use recogniseable UX patterns. This will make them feel at ease immediately, thereby decreasing bounce rate, increasing engagement, and increasing conversion rate.

SIMPLICITY

Another key rule for navigation is not to overload your user with too many options at once. Miller’s Law states that the average person can only keep seven (+/- 2) items in their working memory.

So try to present as few options at once as possible by grouping items into related ‘chunks’ so the user only has to choose from a few at a time.

Adding in search functionality can help here too, especially for an ecommerce website.

Give your layout space

Too much information in one place is overwhelming for your user. Your site should be clean and clear with enough space for content to exist and be digested.

Our eyes are drawn to the blank space around objects – it anchors them and allows them to exist. So use white or negative space to guide your user to the content you want them to see.

Negative spacing can also act as visual ‘breathing room’ for your user’s eyes. A block of negative space between regions is akin to a paragraph break in a chapter of a large book.

Be succinct in your messaging

Less is more when it comes to content, but know when to provide more details.

Be short and to the point at first, then provide your user more information when they ask for it (for example, use a short, enticing headline for a product highlight on your homepage and then add the details on the product detail page once the user has clicked through).

Don’t make your user read an essay straight away. Bullet points are a great way to get information across quickly before your user commits to reading more.

Make your calls to action clear

A clear call to action (CTA) is the base to all your UX.  “When your customers can’t understand what you want them to do on your site, that spells disaster for your site conversions” (Marc Schenker, Wordsteam).

CTA CONTEXT

Let your user know what will happen or where they will be taken when they click. Placing your CTA in a clearly defined hierarchy (for example: Image – Title – Copy – CTA button). Putting the button last allows for context given by the copy above.

CTA PLACEMENT

The Law of Proximity states that objects that are near, or proximate to each other, tend to be grouped together. Proximity helps the user understand and organise information faster and more efficiently. So keep CTAs close to the title and description.

CTA COPY

A descriptive title for your button can work wonders in enticing the user. Sure, a ‘read more’ is informative and to the point, but ‘explore’ or ‘discover’ is much more inviting.

Make text accessible

Accessibility is a key factor in good UX and correct font sizing is a big part of it. If your user can’t read your site, then they can’t use your site.

Although there is no defined base size, it’s largely agreed that 16px is a good, readable size (typeface dependent, of course).

Optimise your site speed

The Doherty Threshold states that productivity soars when a computer and its users interact at a pace that ensures that neither has to wait on the other.

If there is a delay, there are UX design tricks to make wait times more tolerable. Use animation to visually engage people, or progress bars to keep people updated.

Learn more about why speed matters and how to improve it in our article here.

Remember consistency is key

Your button stylings, heading sizes and main content regions should remain the same throughout your site. This way, a user can ‘map’ your site in their mind and begin to understand where to look for CTAs or other controls. This helps them become more familiar with how the site works, cutting any frustration out in their journey to conversion.

UX best practices in summary

  • Making your UX design as smooth as you can will make it easier for your user and therefore more likely that they will convert and keep coming back.
  • Keep your site well structured and not overloaded with too much content upfront – your users will look for the info if they want it.
  • Place calls to action clearly and consistently. But make sure you’re not too loud to distract from any important information.

With almost 2 decades of web design experience, our team can help your brand come to life online. We start with your key goals and build them into a responsive, user-led website designed to keep you ahead of the competition.

Find out more about our UX and creative services here.

Read More

Product page design: Ten top tips

Product page design: Ten top tips

For eCommerce brands, where the real goal of the website is sales, the main focus must be on the product pages. In this article, we give our top tips on product page design for high conversion.

Read
Gavin James-WeirGavin James-Weir