Now we’re firmly into 2019, we thought it was a great time to look at some of the best User Experience elements around. These quick fixes can really boost user engagement, user interaction and – crucially – user conversion. The insights below focus on ten features of the familiar website journey, which follow a path of tried and tested elements.
Let’s take a look:
1. A Good Flow
A user flow is the series of steps that a user needs to take in order to reach their goal. Getting the flow right on a website depends largely upon understanding your core audience personas and their goals.
Considering the different users of your website and their goals while on-site is the first – and most important – step in mapping out user flows. From here, you can map out the different steps the user will take to achieve this goal in a simple and logical way.
This is what we would call the “happy path” whereby- the user travels along the user flow intended and achieves their goals with minimal effort. It is, however, equally as important to understand and map out alternative paths. Having a flow whereby, different users and their journeys is catered for, allows for different goals to be achieved.
Best practice for flows:
- Start with the most important information first. The user is most likely to read the first 3-4 words so ensure these include your key message.
- Split the journey for the different users. For example, a recruitment website could split the journey for both recruiters and for candidates. Different journeys allow each user to easily access the content relevant for them.
- Ensure that your flow offers your core products or services as a focal point.
Research shows that roughly 70% of users use navigation bars, whilst 30% go directly to the search field. No matter how your users browse, you need to cater for how they roll.
Users are looking for words that match their query. Gaining insight into what specific keywords your users search for is incredibly valuable here – you can map these key terms onto your navigation.
Navigation best practice:
- Ensure that the navigation is not too cluttered. Refine the navigation into around 7 easy-to-understand options.
- Each navigation option should be simple to understand and no longer than three words.
- Keep the navigation familiar – weird circle nav-bars and zig-zags aren’t intuitive. Don’t try and reinvent the wheel!
Search is crucial for websites. In e-commerce or websites with a huge range of projects or services, the search bar is even more necessary. According to UX Booth, search bar users are likely to be motivated and know exactly what they are looking for, so ensure that the search bar is central and prominent on all pages of your website.
Search is also a fail-safe option used when users can’t see what they are looking for. Give users an option to navigate your site this way too!
Best practice for search:
- The search bar should be prominent on all pages
- On desktop, the search bar should be a text box
- On mobile, it’s okay to hide the search bar behind a clickable icon (like a magnifying glass)
- Having an auto suggestions if your audience might have difficulty framing their search term or you have a large catalogue of products that might need refining. Plugins like WP AutoComplete Search can do this on a WordPress site.
The main benefit of the carousel is that it allows different sets of information to occupy the central and most viewed part of the website. Despite this, carousels have been proven to be largely ineffective at delivering information to the user. Only 1% of users click through on the carousel and therefore, whilst they may look visually appealing, from a usability perspective it has its drawbacks. Not to mention the slowdown to site speed…
Most carousels are distracting to the user, who will often forget the information on the previous slide. Additionally, getting the timing right on a carousel is difficult and often leaves the user not reading each slide fully.
Best Practice for the Carousel:
- Don’t use one! Consider replacing with a static hero image
- If you do use a carousel, consider the timing of each slide and have no more than 5 different slides
- Instead of an auto-rotating carousel, consider a carousel where the user has control of clicking through the number of slides
Applying storytelling throughout your website is great way to captivate your audience, engaging them throughout the journey. To captivate your audience it is crucial to understand why you do what you do and who you do it for.
Once this is established, make your customers the central character in the story and position yourself as the sidekick, helping and enabling the main character.
All good stories start with a conflict. In this metaphor, we mean this: what is the pain point for our character? How can we help overcome this problem?
Structure your story with a beginning, middle and end. You’re helping to resolve the quest of the main character.
Best practice for storytelling:
- Understand your audience and their pain points
- Make your audience the hero of the story, position yourself as the sidekick
- Understand when and where your user will be using your product or service and use this to form the setting
- Overcome conflict with a gripping and structured plot. Show how the user overcomes their own pain points with your product or service
Recommendation is very common amongst many websites and apps nowadays, and with good reason. Recommendations help the user to be guided to what they might be looking for, providing them with relevant goods or services in a way which encourages continued interaction.
Recommendation is a way of catering to users needs and wants without them having to ask for it, and allows the user to be guided through the website with ease.
Recommendation often comes in the form of:
“Users have also been looking at…”
“Other products related to…”
“Users like you also purchased…”
The use of recommendations ultimately helps to keep users engaged and helps the user to find what they are looking for, even if they don’t know what their solution is yet.
Best practice in recommendations:
- Prioritise recommendations over generic offerings
- Categorise your recommendations so that they appear logical
- Allow users to curate recommended content in a way in they can give feedback on recommendations or even say if they do not want to see to see a particular recommendation
Information that appears to be personalised to the user is a valuable feature. It helps the user to feel like they are having a tailored experience and allows the user to access what they might want or need much quicker.
The more the user uses a website, the more personalised the service can be and the more interactions a person has on a website the more that can be learnt about the user.
Big players such as Amazon and Netflix rely heavily on personalised content to drive interaction and is often prioritised over generic website content.
When done well, personalisation increases overall satisfaction from the user and is likely to increase brand loyalty.
Best practice in Personalisation:
- Keep updating the personalisation of content – keeping this regularly updated keeps the taxonomy fresh
- Display personalised content throughout the site and address your user in a personal way
- Some icons are more obvious than others.
The use of icons, when done correctly, has many benefits. Icons are visually appealing and help users who are quickly scanning through a website. Icons can help steer users in the right direction quickly and easily and are visually appealing.
The best ways to use icons:
- Use icons that are easily recognisable – familiar icons work best
- Don’t over user icons! Reserve them for clear meaning or direction
- Label your more obscure icons. It’s not always clear and there’s no shame in using words with it.
9. Calls To Action
A call to action is a clear signpost for the user to complete an action such as ‘enquire’ ‘contact’ and ‘purchase’. A key objective of most websites is to get a user to click a CTA button.
Call to Action buttons should be on every page and relevant CTA buttons should align with relevant content.
Best practice for CTA buttons:
- Reserve on colour for all you CTA buttons and use this colour only for CTA
- Ensure that CTA buttons are contrasting in colour to help them stand out
- Make buttons look clickable, rounded edges and 3d effects can help with this.
- Ensure there is plenty of white space around the CTA button – this helps focus the user to the button itself.
Many Calls To Action result in the user completing some kind of form. Forms could be the final goal for anything from enquiry to making a booking. Forms are often overlooked as the last hurdle of the journey, as this can be the point where businesses experience the most drop-off.
- Sample contact form. Source: UX Design.cc
With that in mind there are ways to optimise your form with excellent UX.
Best practices for forms:
- Apply the text left aligned above the answer box. This is the easiest way for a user to navigate through a form throughout the scrolling journey
- Have a singular column of questions rather than two columns works better for ease of scrolling
- Group related fields together, for example a section on personal information grouped together, followed by another grouping of questions.
These tried and tested best practice elements help you to get your website working well quickly. However, these are, of course, just trends. They differ by industry and audience – and while this is a catch-all, your audience will need something more specific.
There’s no substitute for an insight-first approach to understand your audience and their goals. We get to the bottom of what’s happening with our Full Digital Review website audits – and why it’s happening with our Customer and Market Research.
Each audience will respond to the different elements of your website in different ways and by listening to and understanding your audience you can perfect the web journey and overall user experience.