What's a UI Design Audit and why you should do one

In this video I'm going to talk about a UI Design audit in the context to a website, but exactly the same process can be applied to an app – or any piece of software that you might be working on.

So the clues in the name really, a UI audit is the process of looking at all your UI elements of your website. All the buttons, tabs, carousels, everything that's been designed or built in one place so that you can critically analyse it.

The easiest way to do this is paste screenshots of every page of your website all into one big design file, you can then add notes using the text tool. If you're lucky enough to be working in a team, MIRO is also a great tool for this job, it's basically a virtual whiteboard. You can invite all your team mates and get them to stick virtual post it notes all over the place.

If you're watching this in the future, and everyone is back in the office, you can also print these screens off and stick them up on a wall then arm everyone with sharpies!

However you do it, the point is that all your screens are next to each other making it much easier to compare, and you can take a sort of helicopter view over them all.

Now what you're looking for are the visual inconsistencies and the things that don't make sense. This can be surprisingly extreme, for example 10 different button sizes or the colour palette changing depending on the page.

Steve Krug (https://sensible.com/) said in his incredibly popular book 'Don't make me think' (go and read it if you haven't already);

"Faced with the fact that your users are whizzing by, there are some important things you can do to make sure they see and understand as much of what they need to know – and of what you want them to know – as possible"

Steve is likening the way that most users browse the web to driving down a highway, they're going very fast and scanning the environment. One of the ways he advises making a users journey as smooth as possible is by following conventions, such as common design patterns.

To use an analogy from his book, Stop signs look the same regardless of the country you're in. So if you're driving somewhere foreign, you're pretty likely to know what to do - even if you don't speak the language. What a UI audit will do is show you where your stop signs are different in the UI of your website.

Let's look at an example;

You can see here I've got two different product pages, both share the same layout but with some slightly different content. Can you spot what the glaring issue is? No? The 'add to cart' button is in two different places, and is two different sizes. It also uses an icon in one, and has no icon in the other.

This may seem not seem like a very big deal, but if a user has to learn every time where the 'add to cart' button is, and what it looks like, they'll quickly get very frustrated. Amazon is a great example of a website that strictly follows its design patterns, it doesn't matter what product page you go to the delivery costs and stock information is always on the right.

So it's important to understand that even though users might not notice these inconsistencies. It can massively impact the way they feel about using your website, which can cause them to leave during checkout or just bonce off the homepage.

There we go, that's what a UI Design audit is and why it's worth doing. If you found this video useful, please let me know in the comments and hit subscribe button for more!

See you next time.

MIRO virtual whiteboard tool: https://miro.com/

Images courtesy of Unsplash
https://unsplash.com/@florida_guidebook
https://unsplash.com/@mrthetrain

#UX&D #UIdesign #UXDesign

--

❤️ Subscribe to the channel: https://bit.ly/2AQm1xh

🐦 Follow UX&D on twitter: https://twitter.com/UX_and_D

💵 Buy design resource files: https://gumroad.com/uxandd

--

Top Adobe XD tutorials

⭐️ Wireframing in Adobe XD: https://www.youtube.com/watch?v=urzT_2sVZzo&t=25s

⭐️Why and how to use UI kits in Adobe XD: https://www.youtube.com/watch?v=82OcSEKNecA&t=21s

⭐️ How to use the grid tool in Adobe XD: https://www.youtube.com/watch?v=QuRgO0AZwjQ&t=15s

⭐️ How to create inner shadows in Adobe XD: https://www.youtube.com/watch?v=p-cf19gUxy4&t=42s

⭐️ How to mask in Adobe XD: https://www.youtube.com/watch?v=1u9bsMkTVac&t=5s

--

Видео What's a UI Design Audit and why you should do one канала UX&D