How to Conduct a UX Audit

What is a UX Audit?

A UX audit is an analysis to discover how users are interacting with your website, product or app. This is usually done to optimise your site for better conversion or better user experiences. The audit will provide recommendations for tests and improvements that can be made to your site. These suggestions are based on the data and research found through the audit. An audit will help you uncover some of the struggle's users are having on your site so then you can enhance the experience.

 

What is the Benefit of Conducting an Audit?

Great user experience is something that customers are coming to expect from brands. Conducting an audit is the first step in improving those experiences. The value of UX can be seen in the numbers “Forester Research shows that, on average, every dollar invested in UX brings 100 dollars in return.” (Forbes.com 2017) Eclipse clients have experienced this themselves for example, on the first round of the conversion rate optimisation (CRO) programme, HM Post Office reported cost savings of over £250,000 within the first 6 months.

 

What to do Before Starting the Audit

Define business objectives – It’s important to understand the goals of your organisation so you have an aim for your audit’s solutions and outcomes that you can measure against the objectives. Without them, the report is subjective and not measurable. Usually, the goals are around conversion rates and user satisfaction.

Decide on your resource – The amount of time and money you can commit to an audit will have an impact on the output. If you choose to do an audit in two days this will not have as many actionable insights but maybe you need a quick turnaround. Make the decision that is right for your business before you get started.

 

The Audit Processes

Find out who the users are – Define who your users are, their demographic, how they’re getting to your site, and what device they’re using to access it. Platforms like Google and Adobe Analytics can be great for getting this information. Alternatively, your business may have a set of user personas, these will be helpful at this stage. If not, you should look at creating some and this post gives you everything you need to think about when creating them.

Analyse user behaviour – This can be done by using tools to track user's behaviour on your site. You may already have tracking and analytics on your site, or you can set it up at this stage. You should look at heatmaps, mouse flows and screen recordings to see current customer flows to identify any patterns or pain points on the site. This can highlight any pages where you see lots of users exiting the site or getting lost or stuck on a journey.

Collect user feedback on your site – Feedback collected from users can be cross-referenced with the behaviour analysis to back up comments and claims made by users. Many tools can be used to do this, for example, Usabilla and Hotjar.

Review performance of the site – Test the loading speed and check for errors. A slow website can be a disaster for your business with users leaving before getting past the first page. Errors and bugs will cause trust issues and identifying these problems so that they can be fixed is vital to improving your website.

Competitor analysis – Look at industry trends and competitor solutions. Seeing how competitors' websites or products compare to yours gives you an idea of what users expect from your site.

Go through the basics – Check the accessibility, for example, are the colours and font sizes appropriate. Making your website or app accessible will make sure it can be used by as many people as possible.

Analyse page hierarchy – Is it obvious what the user needs to do next. Common problems users have on a website are not being able to find the information they want or not knowing what tasks they need to complete. Spending some time looking at the page hierarchy will help you to spot if this is an issue on your website.

Page Analysis – Look at each page of the website and rate it based on best practice solutions. The main areas to focus on are:

  • Header
  • Footer
  • Search
  • Homepage
  • Product listing page (PLP)
  • Product display page (PDP)
  • Basket
  • Checkout
  • Account
  • Accessibility
  • Performance

Break down these areas further within each section for analysis. For an example of this type of analysis, take a look at our report ‘The state of UX’. It looks at some of the big players in the electronics market and how their sites are stacking up.

Opportunities – Look for other improvement opportunities and usability issues that come up on reviewing the site, make sure you capture these as you go.

Review functions – Look at how well functions such as search and filter work. Is there any room for improvement?

Complete report – Once you’ve collected all the data it’s time to put it into a digestible format. This will highlight the key findings and present hypothesis and solutions to test and implemented on your site.

 

What Next?

Hopefully, you found this useful and you now have a set of hypothesises to test but what’s next? Once you have all these ideas it’s time to create a backlog. You should fix any critical usability first. Then categorising all the issues by the effort required to put them in place and by the impact they will have on the business goals. This will determine their priority.

If you would like some help conducting a UX audit or implementing and coming up with solutions for problems that you have found, we would be happy to help. Get in touch and we can find a solution for your business.


5 Animations To Add To Your UI To Improve Your Users Experience

Wondering what all the fuss about UI animation is? Let’s take a look at some of the benefits of adding animation to your designs and 5 examples of the power of animation.

A little bit of animation can go a long way to improve the user experience on a product or site. These small interactions can help users understand where they are on a page and where the menus, modals and new pages are coming from.

Animations can be used to reward users for completing actions. For example, a ‘like’ button with a playful animation can release dopamine which will make users want to keep interacting with it. In the same way, we like to cross items off a to-do list, a visual representation of completing a task is a great way to let users know they have undertaken an action.

Animation can also add hierarchy to a design. An extreme example would be a shaking CTA button. This will grab peoples attention more than anything else on a page. This can have an appropriate use for example if a user keeps missing a field in a form a small nudge can steer them in the right direction. However, overuse can make a design lose all hierarchy, in the same way, making all text large and bold would. This type of animation should be used sparingly.

There can be drawbacks of animating your UI for example it can slow down the experience of an app of a site. It’s important to constantly question why you’re adding animation, is it improving the users’ ability to perform a task or is the animation getting in their way? There is a temptation to add animation for aesthetic purposes but functionality should always be the most important part of the design.

That being said here are 5 examples of animation you can add to your site to improve the UI:

 

1. Submit button

 


(https://dribbble.com/shots/1426764-Submit-Button)

 

Why it works

It gives users feedback that they have taken an action. This fun animation is satisfying and clear.

 

2. Expanding cards

 

Why it works

This is a great example of giving users context of where they are on an app/site because the animation expands it reinforces the idea that they are still on the original page but viewing more detail of the content. It also allows for more information to be displayed and only surfaced when a user is interested in it.

 

3. Loading screen

 

Why it works

A loading screen like this reassures users that content is loading and that the site is working as expected it’s just taking a little while to get the information. The animation can also be a distraction that keeps the user entertained while they wait.

 

4. Slide-out menu

 

Why it works

Similarly to the expanding cards slide-out menus show the user where the element comes from, where it’s going to and where it is housed.  It makes it clear to the user that there is a layering of content and indicates that they can get back to the previous page by closing the menu.

The animation does all of this in a matter of seconds.

 

5. Toggle Button

 

Why are works

This change of state in the toggle indicates that something has changed from one option to another. Having the animation of the button sliding much like a physical switch makes it clear that the relationship between the two states. Without this animation, it’s not as obvious that you have moved from one option to another.

 

Summary

Hopefully, this gave you some inspiration for ways to add meaningful animation into your next project. Remember your animations shouldn’t get in the way of or slow down the user from performing their task. If you’d like some help animating your next project get in touch and we’d be happy to assist.


How User Personas Can Get You To The Moon

In this article, we’ll look at how creating a user personas can be beneficial when designing the UI for a rocket. We’ll take a dive into what this persona would look like. Then how we can apply this persona to inform the design of the UI onboard the rocket.

 

The User Persona

User personas are profiles that capture the most important data from a user base. This data is then used to outline the archetypes of your common users. These are usually one-page documents. They are used as a reference point to remind you who your users are and give you a way to communicate this to others. They help you to understand who you're designing for. Giving you an insight into what the behaviour and thought process of that user is.

User personas are beneficial because they are a way of empathising with the people who use the software. They put the user at the centre of the design process. If you are always looking through the eyes of the user you’re more likely to create a solution that works for them. In a previous article we've covered how to create a persona in more detail, but we've covered some of the important points here to.

 

Creating a User Persona

We started by segmenting and creating hypotheses about our different types of users. There are users with two different roles onboard the spaceship. One user is the pilot who will need the essential information to fly the rocket. The other user is the co-pilot who would need secondary monitoring information. These two roles need separating as they have big differences. Within these roles, we can begin to create more nuanced profiles. 

Take a look at the persona below to find out more about our user.

Applying the User Persona to Design

Now we have the persona we can start applying this to our designs. We can take into account the pain points of our user Tim Peake. We can see he has restricted movement and wears gloves. This could influence the design of the UI. We would want to make sure that the screen size isn’t too large so that Tim can reach it all. There shouldn't be any complex gestures in the UI that would be hard to execute with limited movement. This should be worked into the design by using larger touchpoints. 

 


Crew Demo-2 Mission | Official SpaceX Photos | Flickr

 

Tim is a family man and although no stranger to risk he would inevitably be thinking of his family when undertaking a dangerous mission. Images of his family could be made available to him on the software to give him comfort when there are no tasks that require his attention.

There are times when Tim will experience an expected communication outage and long periods flying through space with nothing to do. The UI could include an entertainment system with access to exploration documentaries and motorsports.

Tim assigns a lot of values to tech and is intelligent. The UI should reflect this by being feature-rich as he will be able to cope with an added level of complexity if it enhances the abilities of the rocket. 

He is living his life long dream flying the rocket to the moon. When Tim is performing some of the more complex tasks like launching and landing the rocket he will be feeling an intense pressure to get it right. Simple and easy to use UI will release some of this pressure. As Tim has a background in flying helicopters and aeroplanes, having UI that is already familiar to him will put him at ease and shorten the learning curve. Using skeuomorphism design which emulates familiar objects/control to increase familiarity and will provide comfort to Tim. This can be incorporated into the designs, for example, using an interface for the speedometer that is similar to an analogue version that Tim would be used to seeing in other vehicles.

 


Crew Dragon Interior | Official SpaceX Photos | Flickr

 

Conclusion

User personas are a great tool to guide your design decisions. They can be used whenever there is a need for a user to interact with software, even when that is intergalactic. There’s also no such thing as ‘done’ when it comes to the personas. You should revisit, review and update them regularly as economic and social climate changes users' online behaviours.

Hopefully, you’ve found this useful and feel inspired to create your own, but drop us a line if you’d like a little help – we’d love to talk to you.


How To Create A User Persona

User personas are a great tool to improve designs and communicate design decisions. Let’s take a look at what user personas are, why they are useful, and how to create your own. 

 

The user persona

User personas are profiles that capture the most important data from a user base. This data is then used to outline the archetypes of your common users. These are usually one-page documents. They are used as a reference point to remind you who your users are and give you a way to communicate this to others. They help you to understand who you're designing for. Giving you an insight into what the behaviour and thought process of that user is. Explaining why users take certain actions in your product, and what they're hoping to do when they use it. 

People across the business in different roles should use user personas. Stakeholders, senior managers, and product owners can all use personas. They can use them when analyzing the software for new features or prioritizing bug fixes. Designers, copywriters, and developers can all use user personas too. They use them to find the best approach and solution that fits the needs of the user.

 

Why user personas are useful

User personas are beneficial because they are a way of empathising with the people who use the software. They put the user at the centre of the design process. If you are always looking through the eyes of the user you’re more likely to create a solution that works for them. 

They are specific and this gives you clarity about who to design for and who to prioritise. You are thus able to meet the needs of groups of users with similar characteristics. As opposed to creating generalised solutions that don’t fit exactly with any users’ needs.

Designers often fall into the trap of designing for themselves. Having a user persona holds you accountable for your design decisions. If they aren’t in the best interest of your user persona then they may not be the best solution. You can also use them to communicate and justify those decisions to stakeholders and clients.

Another benefit of creating personas is that they anthropomorphise data. Adding human characteristics and behaviour to data it makes it easier to understand and remember. It’s great having a ton of useful data but if no one ever references or uses it then it’s worthless. A concise digestible format that doesn’t include unnecessary information, will help you get the most out of your personas.

 

Creating a user persona

Begin by segmenting and creating hypotheses about the different types of users. You must separate your users by the different roles they have. Let's take the example of project management software. This would have users with two different roles. One user is the admin that would be creating tasks and reporting on the project. The other user is the employee who would be using the tool as a reference and to track time. These two roles need separating as they have big differences. Within these roles, you can begin to create more nuanced profiles. Through a combination of analytics and research, you can validate these hypotheses or disprove them. Both are equally illuminating.

Take a look at our example of an admin persona for a project management tool:

Do your research

User research is critical to understanding the experience of users. There are many different ways in which you can collect and present feedback. Likely, you're already getting a lot of feedback if you have a product that's up and running. 

Interviews and observation are the most common research methods. Both of these research methods are qualitative. They need analysis that looks for patterns and commonalities between users.

At this stage, it is critical to learn about the motivation of your users—what problems are they looking to solve when they come to your site? Different personas will have different reasons to use your site. You can start by developing hypotheses about what drives each user to engage. 

 

Your research should focus on the following aspects of the user experience: 

Bio: What does this person do? Are they always rushing around with lots of things on their mind? Are they worried? Planning an adventure? 

Motivation: What drives your user to interact with your product? What are they hoping to get out of it? Why are they using your product instead of a competitor’s - or nothing at all? 

Pain points: What are the challenges users are facing? Is your product helping them solve these or aggravating them? Are there any obstacles they have to face when using your product? 

Mental models: How does your user conceive the problem that your product addresses? What concepts and connections come naturally to them, and what do they need teaching? 

Personality traits: Is this user more of an introvert or extrovert? Are they an influencer or a follower? Are they loyal to brands or are they more fickle and drawn towards other features or lowest cost? 

Internet usage: Internet usage is an indication of online behaviour. Are they a regular online shopper? Do they mainly browse at home or during lunch breaks? Are they particularly active on social media? 

Brands: Are these users used to dealing with high-end premium brands or value brands? Or is it a mixture of both? Be specific to the actual brands this user buys from to understand their brand relationship. 

 

What to look out for

There are some risks associated with user personas. They are usually from not following the user research process correctly or thoroughly enough. One of the main areas where people tend to go wrong is by using too much second-hand information. This could be from stakeholders within the business or stereotyping. In these cases, research and data are not informing the personas.  This type of information runs the risk of missing out on actually user insights. You may be attributing characteristics to your users that aren’t accurate. Using these inaccurate personas when developing the product will mean you won’t meet the needs of your actual users. 

 

Conclusion

User personas are a great tool to guide your design decisions. They can be used to inform other models such as user journey maps, usability reviews and user stories. The entire business should make use of the personas. This will help to create the best possible experience for your users. The key to successful user personas is good quality research. There are risks to creating personas. You can mitigate these risks by following the correct research processes. 

There’s also no such thing as ‘done’ when it comes to the personas. You should revisit, review and update them regularly as economic and social climate changes users' online behaviours.

Hopefully, you’ve found this useful and feel inspired to create your own, but drop us a line if you’d like a little help – we’d love to talk to you.


The Good And Bad of Microcopy

Microcopy is text on a website or interface that helps to guide the user in their journey. This is the text you see on buttons, forms, tooltips and labels. Microcopy must be clear and easy to understand, no industry jargon. It should provide context and let the user know what actions they are taking. It’s not about persuading and selling so differs from traditional copywriting. 

In this article, we’ll look at some good and bad examples of microcopy used across some familiar brands websites.

Let’s take a look at some examples of great microcopy:

Hello Fresh

On their homepage, Hello Fresh has multiple CTA’s that all go to the same page. By changing the copy on these they capture users who are at different stages of the purchasing process. They can be broadly split into two categories, one where users are still in the research stage so less committal CTAs like ‘see our menus’ and ‘learn more’ will appeal to them. The other CTA ‘get started’  captures those users who are ready to purchase.

Expedia

The microcopy in the search field speaks directly to the user with simple language. It also offers suggestions for the type of thing that they can search for. This will help to guide the user and get them to the information they want to find quickly.

 

Evans Cycles

Evans cycles have added reassurance messaging to their checkout CTA. It is concise and is a great addition considering the high-value purchase a user is about to make. Informing the users of the security at this stage will help to relieve any anxiety they may have over their online purchase.

 

 

invision

This handy tooltip from invision lets the user know what exactly will happen when they choose to get a public share link. The link is copied to the clipboard, the word ‘clipboard’ could be considered technical language but considering the users of this product, there is an assumed level of technical understanding. Users are then reminded of this with positive messaging once they have selected this option.

 

 

Typeform

Typeform has created clarity between the two actions, log in and sign up so there is less chance of users selecting the wrong option. This will get users to where they want to be for the first time creating a smooth journey.

 


When signing up and choosing a password microcopy aids the user by defining the password requirements. Explaining what they need from a user upfront avoids users becoming frustrated by not knowing what action they need to take.

 

 

Now we’ve covered what you should be doing let’s see what mistakes we should avoid making:

Amazon

The text in this search field is ambiguous so it’s not clear what the user should input into the field. This may lead to users not finding the information they are looking for.

 

 

Blackboard

In this registration form, the supporting text in the fields is cumbersome. It doesn’t give the user any more information it just adds to the cognitive load by adding to what the user has to read.

The field ‘Registering as’ is ambiguous and has no supporting information. Supporting microcopy would be useful here to let the user know exactly what is meant by this unfamiliar field.

 

Montblanc 

On Montblanc’s website, they use overly complex language. This may be a deliberate choice to support the brands’ image. While this is valid for marketing when considering the user experience clarity is more important than persuasion at this stage.

 



 

As with most things in life microcopy can be used for good and bad. Let’s take a look at a dark UX pattern that utilises microcopy.

 

Treatwell

In the booking process on Treatwell users are asked about marketing preferences. One of these options check the box if you don’t want to receive marketing updates and the other is check this box if you do want to receive updates. This deliberately confusing language is likely to confuse users into opting into at least one of the updates. While this may serve the business goal it may not be serving the users goal. Whether this is good or bad UX writing I will leave for you to decide.

 

 

In Conclusion

Good UX writing vastly improves the user experience, it builds trust and in many cases increases conversion and engagement. So there’s no better time to review the copy on your website or product to delight your users.


How Covid-19 Got The UK To Put Down Their Smartphones

Smartphones were first introduced to the public back in 2007. Since the first shiny iPhone hit the UK shelves there has been a steady increase in people accessing the internet on these devices. On the flip side, people have been accessing the internet less and less through desktop devices.

The graph below shows this trend.

 

 

Mobile access the internet soared and made history in October 2019. For the first time, in the UK, more people were browsing online using their mobile than on their desktop. This reached an all-time high in the UK in April 2020 with 53.97% of people browsing the internet on mobile vs desktop. 

This, however, didn’t last for long. On the other side of the world, something was brewing that would change the behaviour of internet users all over the UK. Covid-19 caused the UK to go into lockdown at the end of March. Suddenly the majority of the UK was working from home so there was no more commuting. The roads were quiet, the trains and buses rattled along with no passengers and cities became ghost towns. People were no longer able to roam the streets so no longer needed roaming data. By July 2020 internet usage on smartphones had slumped to 48.25% and desktop had overtaken mobile once again.

 

 

There are many reasons why more people were now back on their desktops. People were no longer playing candy crush on their morning commute, no longer using google maps to find a new restaurant while out and about. There was no more checking in at airports to let their friends know they’re on their way to Alicante. 

Most of the people in the UK were now confined to their house. Office workers now worked from their kitchen tables, bedrooms became boardrooms and users were spending more time online on their desktops. Even though people were working on their desktops from home they would normally be doing this anyway except in the office. So what could be influencing this change in behaviour?

Well, if you’re anything like me, when I get home from work and I want to do some online shopping or watch a quick youtube video I can’t be bothered to get my laptop out of its case and wait for it to start up. However, if my laptop is already out and switched on I’d be much more likely to hop on that to browse online. This behaviour change could be driving the increase in desktop usage. Another factor could be that people who didn’t previously own a desktop now had a work computer that they were able to access any time from home.

In a survey MarketingWeek conducted with over 3,000 members of the Influencer community, 41% of respondents answered that they were “currently shopping online for things they would normally shop for in-store.” As this was an unfamiliar experience to these people they may have wanted to use a laptop for what to them was a more complex experience. 

But before you go throwing away your mobile-optimised websites current usage, as the UK opens up, data shows mobile and desktop usage is 50/50 with an upward trend for mobile. While desktop usage was higher than mobile in July mobile usage for July was still up on the year before from 46.48% in 2019 to 48.25% so was up by 1.77% on the year before.

With people switching from desktop to mobile and vice versa there’s an evergrowing need to seamlessly combine the two experiences. Apple had begun this continuity with ‘Handoff’ which allows users to start one task on their mobile and finish it on their desktop. Currently, this is supported in a range of applications such as Mail, Maps, Safari, Calendar, and a growing list of third-party apps. This is built into the operating system of Apple devices. Chrome offers tab syncing and Windows has ‘Continue on PC’ which is device agnostic but does require installation. 

There are other options out there. Take eclipse’s AR solution ARES for example. It’s great viewing a 3D model of a product on a desktop browser but the experience comes to life when it is seen through the lens of a mobile camera in your surroundings. This requires users to switch to a mobile device and how that transition is handled is becoming increasingly important. With ARES you can scan an on-screen QR code with your mobile and that will take you to the augmented reality view of the product. This is where you will be able to see the product in your home.

As the UK comes out of lockdown smartphones are being put to use in new ways. Such as, scanning QR codes to check-in at restaurants for track and trace and to view the menu at bars where paper ones have been scrapped. Now more than ever your business needs to be adaptive to these changes and your website ready for anything. Drop us a line if you’d like a little help – we’d love to talk to you.