Common Mistakes in UI Design – Usability Principles 101

June 22, 2023

What Is UI, Usability & Heuristic Design?

f your website hasn’t got X-factor, then you’re missing opportunities. More importantly, if it hasn’t been UX/UI designed by an absolute gun, then you’ll also be experiencing penalties that you’re probably not aware of. In this blog post, we’ll help you avoid common UI design mistakes so you don’t continue to create interfaces that aren’t user-friendly. There’s a logic to how people expect things to be designed, and all it takes is a little thought. The best UI designers get to work on software interfaces, and a rule of thumb is that if you don’t need training on how to use that software, the designer has nailed it. We call this heuristic design.

UI designers create interfaces that are easy to use, intuitive, user-friendly, and accessible to a wide range of users, such as vision impaired, or colour blind people. In this article, we’re going to focus on website design, not software, but often the same rules can apply.

Why Should We Care About UI Design?

A well-designed web interface can lead to increased conversions. In most cases, it’s all about the dollars, but a poorly designed UI can drive users away and harm your business revenues. Today we’ll be sharing practical tips and best practices to avoid common pitfalls, such as cluttered interfaces, inconsistent design elements, and unintuitive navigation. Plus, we’ll also provide real-world examples of companies that have made UI design mistakes, so you can know what not to do.
 

Introduction to User Interface Design

Examples of good UI design can be found in companies such as Apple, Google, and Airbnb, where interfaces are designed to be both aesthetically pleasing, clean, simple and functional. You just seem to know where to look to find things. Navigation is a breeze.

On the other hand, poor UI design can harm user experience and lead to decreased customer satisfaction and engagement. Decreased engagement means that Google will rank other websites before yours. Think about someone who doesn’t have the best eyesight for a minute, someone who’s 57 years old and struggles to look at a screen without squinting. Now assume your website was built with light grey text because it’s aesthetically pleasing. You can see where I’m heading with this. You’ll lose a few points with Google for low contrast, because not everyone will read your content.

So all-in-all, user interface design relates directly to your SEO search rankings.

Common mistakes designers & DIY’ers make:

– Cluttered interfaces

– Inconsistent design elements

– Unintuitive navigation

– Lack of trust elements

– Low contrast content & headings

– A lack of structural hierarchy

It seems quite simple doesn’t it? Yet so many get it wrong and it’s be detrimental to the success of your business.

As digital marketing expert Steve Krug said, “Don’t make me think.”

Common User Interface Design Mistakes

Thinkroom gets to first-hand witness the impact that poor user interface (UI) design can have on someone’s conversions. Miscrosoft recently brought out a “rage measurement”. It’s analysing the users on your site, and it measures “rage click”. So picture someone on their iPhone getting frustrated frothing at the mouth furiously tapping their screen as hard as they can because that damn button doesn’t work. Users bounce and yet another sales opportunity is missed.

Common mistakes such as cluttered interfaces, inconsistent design elements, poor readability and legibility, unintuitive navigation, lack of accessibility, and not testing the design with real users all drop your rankings, frustrate your users, and you won’t even know you’re missing out on leads.

Here’s Why

Cluttered interfaces overwhelm users and make it difficult to find the information they need. Ever heard the term “Less is more”? or “Keep is simple stupid”? Give your users one path to follow. Don’t distract them off-course.

Inconsistent design elements can lead to confusion and make the interface feel disjointed. This means, if there’s a visual mismatch of styles, graphics and elements, it overwhelms the brain. Humans are simple, so treat us accordingly.

Readability & UX – User Experience

Poor readability and legibility can strain the eyes and make it difficult to read text or interpret graphics. Especially when your Mac is in night mode. Choose a font that’s clean, simple and easy to read and make sure you’re designing your text with high contrast.

Unintuitive navigation can frustrate users and make it difficult to navigate the interface. Many people choose to call the menu items something different to what’s commonly accepted. For example, the world seems to have accepted the menu item as “contact” as a norm, and it’s usually placed on the very right. Yet people like to get creative, think they’re cool and label it something random like “our digits” and place it in the middle of the menu bar. The moral of the story here is – just to keep it simple. Do what people expect and make your user experience as pleasant as possible.

Vision Impaired

Lack of accessibility is a term used in the UI design world to accommodate people with disabilities. Without taking this into account, people that are colour blind can’t read your website accurately. People that are vision impaired in any way, need a certain sized font, the simplicity of a font and contrast. Font size depends on which font you choose, but as a rule of thumb, a 15pt size is the smallest you’ll want to go.

Help Users By Testing & Heuristic Evaluation

Testing the design with real users identifies issues and ensures that it’s intuitive, user-friendly, and accessible. If people can’t figure out how to self navigate, your design needs work. Don’t take it personally, just tweak until they do, but test with new people each time. Most designers don’t want feedback. There’s gratification in completing a job and egos get hurt when issues are found, but the real juicy goodness is found when taking your time. Test with as many people as you can afford, and don’t retest the same people. You need a fresh batch each time. This is called a heuristic evaluation. You want users to self teach themselves how to use or navigate your creation.

Lastly, tools such as Moz and Ahrefs can provide valuable insights into UI design best practices, follow the Mozblog, it’s gold.

Examples of User Interface Design Mistakes

Unfortunately, many Australian companies still overlook UI design, leading to poor online revenues. Then again, most Aussie businesses load their site and think of it as set & forget. It’s just a paper-weight floating around in cyberspace, never to be found. Let’s explore some local examples and the lessons we can learn from them.

First up, let’s pick on the official Australian government website, australia.gov.au. In 2016, the site received criticism for its cluttered and confusing interface, making it challenging for users to find the information they need. The site’s lack of mobile responsiveness also presented a challenge for mobile users. At a point in time when the government was trying to encourage online submissions leading to considerable cost cutting, this was a major fail.

You can see these mistakes in action on the Wayback Machine. 🤮

We all know the Australian online retailer, Kogan.com.au Their site initially suffered from poor UI design, with cluttered menus and inconsistent design elements. However, after a redesign, the site improved its UI, resulting in increased user engagement and revenues now to be one of the largest online retailers in Australia. Customers want convenience. We want things to be easy, don’t make it hard for us, and definitely don’t make us think!

Here’s the Kogan homepage, way back in 2007 🤮🤮🤮

Here’s a great Hubspot article with more detail on their success in overhauling their site design.

How to Improve Your User Interface Design

When it comes to user interface design, there are several key best practices that can help ensure a successful outcome. These practices can be broken down into a few key areas: research, planning, design, and testing.

First and foremost, do your research. Thorough user research to understand the needs, desires and behaviours of your target audience goes a long way. It’s this extra step that will make you brilliant. This can involve surveys, focus groups, and other forms of user feedback. Once you have a clear understanding of your users, it’s important to set clear design goals and objectives to guide your design process.

Best Practices

1. Using a style guide can also help ensure consistency across your design elements, both online and offline, but it’s also a good opportunity to modify your brand when designing in Figma, that can apply to all other marketing assets you have.
   
   
2. White space and visual hierarchy is often forgotten. Just look at Apple’s website and the amount of white space used. It feels good, doesn’t it? White space can improve readability and overall user experience. As for a visual hierarchy, prioritising your call to actions, or where you want to draw the eye is important for conversions. When a user is on your site, think about the journey they’re on. Your visual hierarchy should hinge around this.
   
   
3. Finally, don’t underestimate the importance of user testing and gathering feedback throughout the design process to identify any issues or confusion. By following these best practices, you can create a user interface design that is both effective and enjoyable to use.
   
   

Conclusion

In conclusion, user interface design is what set you apart from your competitors, but here’s the thing. Most business owners never look at their websites. They’re too busy, they don’t really take the time to think, and most marketers don’t aim for great. They aim for good enough. Get this right, take the time, and you’ll beat 95% of your competitors online, assuming you have an SEO and PPC strategy in place from a talented agency like Thinkroom. Good user interface design not only improves the user experience but also can lead to increased engagement, higher conversion rates, and ultimately more revenue.

It’s that simple – Over & Out,
Ash.