Whether you know what user interface (UI) design is or not, you’ve undoubtedly stumbled across both good and bad interfaces. A great UI has been developed with great care, allowing users to navigate a website to find information easily, absorb that content without being distracted and (ideally) a good UI will also gently ‘push’ users towards a beneficial action like signing up for a newsletter, purchasing a product or getting in touch.
A bad UI design (or lack of design) does the opposite – it overcomplicates what should be easy, increases steps a user has to take, doesn’t communicate effectively and the cardinal sin: doesn’t emphasize desired actions for conversions. This can come in the form of many small website issues, or it could be a small handful of glaring problems on your website.
Either way, users judge websites within one second of browsing them, and even if you only suffer from a few seemingly smaller issues, your website could be turning away more potential leads than you might assume.
With that said, if you’re not sure what to look for when it comes to your website’s UI, read the following to self-assess if you’re basking in website fame or if you suffer from a serious case of website shame.
Bad: Overly Complicated Dashboards
The most common trend we see in bad website UI are what we disaffectionately call “dashboards”. These are websites or content sections where A LOT of information is presented all at once, without a clear hierarchy of what should be read first. Often times text is the same size and color and imagery is not used correctly to pull the eye towards a primary piece of content.
When a user is presented with the latest news, a call to action, a Twitter feed, several text blurbs and a set of links all at the same time in a layout where all the content looks roughly the same, the user is likely to become paralyzed with information overload.
Rather than pick through and sort out the relevance of each individual piece of information, users are actually most likely to gloss over all the content in its entirely and do not absorb, rear or click anything. This renders the whole section of content useless.
It is a common misunderstanding and assumption by amateur designers that throwing everything and the kitchen sink at a website visitor is the best way to serve them. But that couldn’t be farther from the truth! So, what is the best way to delight a website user?
Good: Clear Design Hierarchy
Different information, content types and actions should be prioritized differently.
First, start with what you ideally want your users to do and make that your main focus point, with a bigger typeface, more room surrounding it and ideally some super engaging imagery. This ensures that users won’t miss what you want to tell them.
From here, secondary information that is less critical should be smaller and slightly less noticeable on the page or section – but still very clear and legible. Use visual elements to make sure that content is broken up in interesting ways and that too many scattered bits of information are never displayed at one time. This will ensure that content is attention grabbing, digestible and users will know where to look first.
And lastly, consider that some bits of content on your page should be moved to another page, or even removed altogether. Nobody cares about the weather forecast widget on your website about foot medication.
Bad: No Attention to Calls-to-Actions (CTAs)
A lot of websites with bad UI elements don’t put enough emphasis on their Calls-To-Actions or CTAs. For the uninitiated, a call to action is something like “Click Here”, “Find Out More” or “Sign Up”.
A big mistake in bad UI is not making these CTAs stand out enough: Using text links when a button might be better or hiding links in the bottom of a long paragraph or even not making links obvious at all! Users will not hunt for a link, and they certainly won’t click on something that isn’t at least underlined or made to stand out in some way.
Good: Clear, Clickable and Concise
In order to maximise your conversions, a good amount of thought has to go into ensuring the headlines and copy are readable, attention grabbing, and engaging. Usually this is done by giving your primary CTAs a higher spot in the design hierarchy: lots of room on the page, pairing it with attention grabbing imagery and a big clickable looking button instead of just a boring text link. Make sure all the links on your page stand out, and certainly don’t depend on hover effects to indicate when something can be clicked on. Elements must always look enticingly clickable.
Bad: Hidden Information
Often times you can tell when a website has been updated with fresh content, but the UI itself was not properly designed to handle all of it. Long paragraphs of text jammed into small boxes or tacked-on unceremoniously to the bottom of a page…your website can become a mess if you’re not careful, transforming itself into something we call a ‘Frankenstein’ website.
In these instances, a user may have to scroll to the bottom of a page to find some tiny text under a misleading headline in order to find the select information they are hunting for. Convoluted content should legitimately be considered useless.
When information is miscategorized, hard to find or even just hard to read, it might as well not even be on the website because the right users won’t be the ones reading it.
Good: Thoughtful Information Architecture
Whenever we tackle a new website project (even if it’s just website redesign) we make a site-map that plans out each individual page, roughly what kinds of content will be on it, and how the pages relate to each other. This way we have a clear idea of how much content will be on the site, what the site roughly consists of, and how we can facilitate a user’s movement throughout the site with CTAs and other elements like funnels, which we won’t go into here.
This exercise allows us to ensure that new content has a logical place to be input, old content does not get lost, and thus we can smartly design the website to reduce clicks and keep information topical. The take away and fundamental cornerstone of every project is ensuring you have a clear vision of what your users need paired with understanding what they want, then developing the website structure around those core needs/wants.
Bad: Inconsistent Design
As we mentioned, it takes less than a second for a user to judge a website based on its UI, and studies show that this initial impression can last a lifetime! Users don’t often come back to a website that they previously deemed unhelpful and frustrating in order to give it a second chance.
So, what do they judge a website on? Consistency, professionalism and trustworthiness.
Not to say each website and brand can’t have its own identity and communicate its own unique attitude, but you should note that it is very obvious when a website lacks professional polish or is inconsistent. If you have ever looked at your own site and thought, “It’s not great but it’s good enough…”, quite frankly it’s probably not.
Think about the last time you were on a website that you trusted: did the background color randomly change or were images out of alignment? Did the body copy suddenly change fonts on different pages? Were certain pages a little bit broken? Realistically, the answer is probably not.
Inconsistent UI not only makes information harder to find but it also hurts the trust your brand should be building with your audience. People are much less likely to invest in your overall brand message, service or product if your UI isn’t concise and polished.
Good: On Brand Communications
Ensuring that all aspects of your website are polished and consistent is imperative. Double check your fonts, letter sizing and images. Are you using the same color palate throughout your website? You should be.
Also, be sure that you use the same header and footer throughout your website – this is especially important if your website links out to a third-party website for something like payment processing and it looks different. If you can ensure that users don’t notice they’ve moved somewhere else, then you’re doing it right!
Bad: Slow UI Elements
Patience seems to be wearing thinner and thinner on the internet as connection speeds increase and devices become faster. Users are no longer willing to wait for what they seek, and if your website is slow, it will frustrate and deter your traffic. This can take a few forms – the most common is having large UI elements that take forever to load.
Fancy animations or really graphic heavy images must be used sparingly and concisely in order to not bore potential leads and have them lose interest. This is especially topical for mobile devices where the connection speeds aren’t quite as fast as desktops.
The second form of slow UI elements comes in the form of deliberately slow animations or animations that exist for no reason. If a user comes to a website and they have to watch a ten second animation before a button appears letting them proceed, you better bet they won’t be keen to sit through it and will instead opt for another website that will suit their needs.
Good: Quick and Snappy UI
Animations and large web elements aren’t the enemy though. Desktop-ready websites can be programmed to load different assets than mobile ones, allowing your users to experience the best of both worlds. Furthermore, keep your animations visual, and not tied to holding back information. If there’s a ten second animation playing, that’s cool! But make sure users can either skip it or build your UI so that the animation doesn’t stand between the user and the information they need.
Hopefully this article gives you a solid starting place to analyze and assess your own website or UI project. A great UI allows your users to find what they need, builds trust and starts with an essential understanding of your audience. A bad UI frustrates them and is both slow and convoluted, guaranteeing your traffic will end up going elsewhere.