With the world getting online and more than 576,000 websites made every single day, how functional and user friendly your brand’s website/web solution is makes or breaks it, having a huge impact on your sales. Discoverability has become a big important step for the success of any brand; and strong, usable and user appealing UI designs have started becoming the differentiating factor enabling brands to get discovered.
One of the hilarious examples that always come to my mind while thinking about poor UI is the image below, which was taken at a New Jersey station:
 |
It seems that the UI for this machine was drafted without even thinking about the actual physical machine where it will be used. The numbers on the screen and the buttons completely throw the user off, making the usability of the machine an absolute pain.
People at large, still use UI and UX interchangeably and that itself is a paragon of how misunderstood this whole branch of the project life cycle is, giving one too many chances for brands to screw up the UX mainly by using a poor UI. What differentiates a good UI from a bad one? We’re here to elucidate that in brevity:
Traits of a Good UI
- Intuitive – People from all walks of life should effectively be able to navigate through your web solution, without needing a guide. You know you’ve already lost on the UI front when you have to email all your subscribers a new ‘guide’ on how to use your web solution after a major UI overhaul.
- Gently Prodding – Your web solution exists for a purpose. Be it selling a physical product, getting people to subscribe to your services or willingly provide data, among a myriad of other business objectives that you have. Your UI needs to keep that as your North Star and be crafted in a way that gently guides your user into completing that sales journey.
- Exhaustive User Testing – UI and UX professionals often tend to assume a lot of things. This could be a very swift way to have your product ready and shipped in unimaginably fast times, but more often than not, they fail completely. This is because the actual users of your web based solutions are diverse, each having their own priorities and preconceptions on the working of it, which can result in them abandoning your application if it doesn’t meet that. Hence, strong user research and testing such as A/B testing is at the heart of good UI that gets adopted widely./li>
Traits of a Bad UI
- Difficult to Comprehend – Maybe you’re trying to fit in a lot of things in a single page. Maybe you want to get into the trend bandwagon and want to try that hot new font and design style for your web solution that clearly doesn’t go with it. A lot of such factors make your web solution incomprehensible, directly affecting the click rates and adoption of it and plummeting your sales.
- Absence of a Target Audience – They say a building without a strong foundation won’t stand. What if it doesn’t have a foundation? It surely doesn’t have a chance to stand on its own. Not doing proper research about the target audience and crafting your web solution around their needs is a straight up suicide for your web solution.
- Inconsistent Design and Performance Issues – Your website is a journey, and you want people to feel they’re walking on the same path when they visit each of your sub pages/screens. That’s where consistency plays a big role in your UI. Coupled with that, maybe, to stand out of the crowd, you tend to use a lot of elements in your website making it sluggish and unusable, driving your users away.
Now that we have a bird eye’s view of some of the traits that differentiate the good UI from the bad, here are some of the most common UI fails that are seen in the wild:
Too Much Text
You got an amazing business with a sprawling list of services across multiple domains, we get it. But does that mean you can overwhelm your visitors with huge blocks of text? According to a statistic shared by Nielsen, during an average visit, web visitors spend time on a website enough to read only 28% of all the words on it. However, not all that time is spent in reading. This cuts down the percentage of words read to approximately 20%.
What this statistic points to is the sad truth that only a very small percentage of outliers patiently read whatever you have to say on your web solution. This is the reason why websites are increasingly using images, videos, animations and microinteractions to keep the users engaged and increase the click through rates.
Text Heavy Auto Scrolling Carousels
Designers love carousels. And theoretically, why shouldn’t they? Carousels allow fitting in a lot of information in a tight space in the website, and have them cycle through as per a fixed time limit. However, this is the exact aspect that makes them less appealing, more daunting and hence creating less interactions.
According to a study done by Nielsen Norman Group, ‘Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility.’ The test that they ran was showing Siemens’ website and asking the question: “Does Siemens have any special deals on washing machines?” The said information was on the first most prominent slide itself, but the users completely ignored that, unconsciously. This, along with other factors made them conclude that carousels are a bad idea, especially when incorporated into the hero section of a website.
The factor that absolutely wrecks the usability of carousels is the fact that the user has no control over the timing of the carousels. Add some text to it and it’s a nightmare for your users, trying to keep up their reading speed with the carousel change timing. If it’s absolutely necessary to keep carousels in your website, the least you can do is keep it non auto scrollable and give the slide change control to the user.
Lack of Typographical Hierarchy
Text is no doubt one of the cornerstone types of content in your web solution. Considering that the websites from 90s were only text, we’ve come a long way from that and the expectations of users have morphed in these 30 odd years as well.
If there is anything worse in a website than having too much content, it is this: Not having a proper typographical hierarchy. Text in your website should capture the attention of your users effectively, modifying factors such as the typeface, the font, weight and placement of it to either grab the attention of your users the first thing or let it be the secondary thing they notice once they have their attention on your website.
Shown below is a website with poor typography, not giving it proper textual hierarchy:
Scroll Seizing
I’m sure you’ve come across websites wherein you’re not able to scroll the way you are with normal websites. These websites, generally with the help of JavaScript, completely seize control of your scrolling actions as a means to stand apart from the crowd or have a ‘smoother’ scroll action. The classic use case of this style is by having something akin to vertical carousels, with each scroll taking you to a completely new section of the screen instead of scrolling through a set number of pixels on the screen.
The problem with this implementation is that the user has no control over what they can see in the screen and the fundamental navigation ideologies that are deeply rooted in their minds through decades of technological evolution are gone for a toss. Considering a case wherein the user is unable to see a specific section of the screen either due to hardware issues or some accessory issues, the user will never be able to see the content in that part of the screen as a scroll would take them to a completely different screen, instead of the content moving up a few pixels.
This technique is ‘controversial’ because it’s one of the techniques that big tech companies use at times as their flagship product’s page, albeit with proper user research.
Big Sticky Navigation Headers
On more and more websites, there are headers that don’t move with the page and are fixed at their position at the top of the website. This, if implemented correctly, can be an anchor point for your website wherein the users can easily find key links to navigate across different key pages of your website, giving them a feel of training wheels for your website.
However, more often than not, brands and companies treat the sticky header as blocks that should represent their brand. This makes the designer make the classic design mistake of keeping form over function in a desperate attempt to make the header reflect the brand. This generally results in a huge sticky navigation bar that covers a lot of precious screen real estate and since it is fixed, it feels more like a pest you can’t get rid of, than a toolbox of quick and easily accessible tools.
Consider the ActiveCampaign website as shown in the image above. The sticky navigation bar takes up almost a fourth of the screen real estate, giving that much less space for the actual content present in the website.
Another big mistake in the same lines is using the same navigation bar for both mobile and desktop sites. However, the frequency of coming across such websites is becoming increasingly rare. The classic solution for this is to simply use a hamburger icon replacing the menus of your navigation bar.
menu for mobile devices
One of the better ways a sticky navigation bar can be incorporated into your website is to either have their opacity a bit low so that the background bleeds through it or have a frosted glass look on it, similar to glassmorphism, which would allow a blurred version of the background to bleed through the navigation bar, giving the feeling that the navigation bar isn’t as big as it is.
Super Long Dropdowns
Onto the more finer details of any website, dropdowns can be super convenient in neatly tucking away a couple of options of which only one will be selected. However, managing the content inside the drop down menu can be a challenging task, especially when a lot of options are present inside the single drop down menu. It can easily turn from a wonderful organized closet to a one wherein you push every item you own and never want to open.
A classic example of this is the Country drop down, as shown in the screen below:
Some ways to circumvent this is to either have the values in the drop down arranged in sections based on the continent. Users can identify things by images much quicker and easier than text. So having the country flag icons next to the country text can be a huge plus as well. Alternatively, you could ask the continent in one drop down and show only the relevant countries in the next drop down. Sure, it will increase your form length by one more field, but your users will have a better time finding and filling it out rather than trying to find their country in a mile long drop down list.
Camouflaged CTA Buttons
From a business perspective, CTA buttons are the most important part of a website. It is what converts user’s interest into hard sales, the main focus of your entire website. So it’s only fitting that these buttons have the highest click through rate and are strategically placed and designed to grab the attention of users and gently prod them to click it and get your sales going and business afloat.
The most common mistake that designers tend to make with CTA buttons is poor contrast. CTA buttons having poor contrast directly affects the visibility of it, making it less grand and gaining less click through rates.
One such example is that of Twenty20, a stock photo selling website/app. Having CTA buttons matching the text colour can be a good idea in certain situations, but more often than not, it gets camouflaged with the text, not letting the CTA button stand out as it should.
Another such example is the action buttons which were used by TeamWeek, recently rebranded to Toggl. Soft pastel and fluorescent colours are all the rage right now. The cool mint green colour looks great on the overall UI of TeamWeek, however, it makes the text on the ‘Save & Close’ button hard to read. This could also be put in the pile of form over function mistakes that designers tend to make.
Poor Confirmation Messages
What started as a trend to introduce subtle humour into websites; content writers and designers started to introduce ‘witty’ lines in their confirmation popup, where it would put the user who is about to click on the button which would take them to a positive sales flow on a higher pedestal than the user who will be clicking on the link/button that would take them to the negative sales flow. Consider the example mentioned below:
Intended to give a funny twist to your website’s copywriting, demeaning humour can easily be perceived as rude by your users, doing the exact opposite thing of what you desire: driving them off of your website. It’s almost impossible to nail such lines unless your brand identity relies heavily on that and your user base already resonates with that.
Bonus Section!
UI design should be an equal balance of aesthetics and business goals. That said, here’s an example which looks like it is a UI/UX failure but actually are driven by strong unconventional business decisions:
Netflix AutoPlay Feature
AutoPlay feature was always frowned upon in the tech industry. With Facebook and Instagram introducing it in their UI, they made sure that the videos were muted by default. Nobody likes sound blasting out their speakers when they’re not actively attempting to do so!
Netflix took a different approach when they autoplay the title when users hover on them. This seemingly bad UX aspect actually does have an uncanny reason behind it. Netflix’s target audience generally use their services after a long day and use it as a source of winding down. In these times, Netflix wanted not to bug people down with difficult to make choices, i.e. trying to decide which title to watch, by offering a short video preview of the title. Netflix aims to utilize the ‘lack of motivation’ at the end of the day of their users to serve them with auto playing content of carefully curated list of titles which eventually would increase the chances of users actually watching the title.
As is clear from the examples, UI design is a very delicate aspect of the project life cycle and that makes it more easy to screw it up. However, as seen with the Netflix example, not all seemingly bad UI/UX decisions are bad. At the end of the day, design rules are meant to be broken, but what stays as the guiding North Star is usability, reflection of your brand image and exhaustive user research. What works for the top brands may or may not work for you.
No comments:
Post a Comment