Everything around us, has a form and function – creating an experience when we interact with it. User interface (UI) is the form visible to us, User experience (UX) is the impact the interaction has on us. To keep it simple – let’s say, anything to do with “appearance” or the style quotient, is UI; anything to do with “simplicity” or the usefulness, is UX. Both are equally important, even if one is compromised, your design can lack effectiveness.
Anything to do with “appearance” or the style quotient, is UI; anything to do with “simplicity” or the usefulness, is UX
UI/UX designers are responsible for creating environments & experiences that inspire people to get information and take action. In the digital world, we’re mostly consuming information through our mobile, laptop, and television devices. Designing digital experiences can be an overload on the senses & our mind, if few things are not taken care of.
In this article – we will talk about the most common mistakes in UX/UI design that makes your website/app a poorly made horror movie.
Design is so subjective, how do you call something – poor design?
Consider this scenario: You’re in a hurry to retrieve the phone number of customer service from a website, to report a problem. How do you feel when you can’t find it quickly?
It could frustrate you to the point where you may consider never coming back to the website/app. Because of such an experience, caused by lack of empathy, businesses may lose millions. Most of what we call “poor design” are unintentional, designers may often overlook or miss to test the website/app thoroughly as a user.
Let’s now look at some common UI/UX mistakes that can be avoided.
10 common UI/UX mistakes
#1 Giving more importance to Imagination and not Usability
What?
Yes, you heard it right. It’s important to be imaginative, original, creative & unique when you’re designing – but not more important than keeping your design familiar & usable.
Usability refers to making an application more user-friendly. Where there is sheer creativity but not usability, the website may look unique/different/novel but it could be over-complicated that the user may have to spend a lot of mental energy to use it & make sense of what’s going on.
In the example below, the website has so much going on & appears extremely busy. If you were the user, would you appreciate the clarity & convenience of this website? I know my answer.
#2 Designing to win Vs Designing to make your User’s life easier
Yep.
Let’s admit it. As designers, we all want to make a difference in the world & in the lives of people whom we design for. In all righteousness, sometimes we may unintentionally descend into a rabbithole, with an obsession to do what feels “perfect” to us. This struggle is real – and hence it is critical for designers to detach themselves from their design, listen to their User’s voice and reflect that need through their design.
Whatsapp is a good example of how people of varied age-groups & abilities/disabilities are able to use it without friction. The main purpose of the app is achieved, without hassle. Also the UI is simple and straightforward, one doesn’t have to spend time learning. Although any design can require some getting used to.
#3 Jarring color combinations that are loud and not picked thoughtfully
When you’re designing, keeping in mind the target audience, and the emotion you want to evoke in your users interacting with the design, you need to consciously choose colors.
Source: WhyTile.com
Colors have an impact on emotions & can convey deeper meaning beyond what language can convey. Blue represents water, sky, tranquil state of mind and can be used for calming/reassuring experiences. Orange represents zestiness, tanginess and can be used for adventure/passion filled experiences.
There’s extensive research work on the internet, on color – emotion mapping. You can read more about it here.
https://99designs.com/blog/tips/how-color-impacts-emotions-and-behaviors/
https://uxplanet.org/emotional-design-psychology-color-2c65ce7f91b0
Decide and come up with a well-balanced colour scheme. Stick to two-three primary colors for a website which can work well together. Try creating a color palette here: https://www.canva.com/colors/color-palette-generator/
Few other tools for picking colors:
- https://color.adobe.com/create/color-wheel
- https://www.huesnap.com/
- https://colorhunt.co/
- https://khroma.co/
#4 Not designing considering browser/device compatibility & upgrades
Whether you are designing for the web or android/iOS, browsers and device/OS control a lot of the experience that can be delivered to your user. These are real constraints, you can’t overlook when designing.
Responsive design is not just your design automatically fitting into screens of varying sizes and resolutions. The design should be compatible with various browser versions, across older versions as well.
For example if your design includes an animated-visual embed & the browser doesn’t render that type of media file, it can lead to poor experience for your users.
Research well, on what rich media can be smoothly rendered on browsers & platforms, so your design works irrespective of the device/environment, the user is on.
#5 Giving more importance to randomness than consistency
A common issue I see on the internet is a hodgepodge of fonts, colors, and objects. Designers prefer to play around with fonts and color schemes in order to stand out, but this frequently leads to more confusion than clarity. People, in fact, seek consistency.
This website here is full of surprises. And our attention wanders pretty much, everywhere.
Source : https://www.art.yale.edu
Pay attention to the finer message, ensure structured text and consistent use of symbols/icons & color palettes. Mobile UI design, in particular, necessitates consistent, minimalistic solutions.
In the UI design world – we call it a “Design system” – something that establishes a design – language that will be maintained across the site/app/brand.
Here’re a couple of resources on design systems:
https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
https://www.invisionapp.com/inside-design/guide-to-design-systems/
#6 Taking Content for granted and keeping copy for the end
As designers, we can feel urged to insert “dummy” content or “Lorem ipsum” to create quick designs. But, that’s where it all starts. Assuming “copy” can come in later – leaves you endlessly trying out graphical illustrations & visual designs, without clear idea of what the central idea/message of the page would be.
We should always have a clear idea, what kind of content would the design carry. We should know all in and out about the website/app/brand, including who are we going to attract into the experience, through our content & design.
Designers need to be first convinced that the content can solve the user’s problem.
With the advancement of technology, content can be updated in real time. We need to design keeping in mind, sections & pages can change dynamically at the speed of thought.
#7 Making navigation long, complicated and having too many clicks
If you want to create a successful website/application, you must design one that many people find easy to navigate. Research says, people spend 1-2 mins on a website on an average, checking out about 2-3 pages maximum, before they choose to interact further or bounce.
You can take a user on a sequential journey of 3-5 steps to complete a user goal, disclosing information as you progress. Or You can present information upfront in a certain hierarchical manner, and make choices always available for users.
Here’s a deep dive into Information Architecture:
https://www.justinmind.com/blog/information-architecture-ux-guide/
#8 Using fancy fonts & dark backgrounds that are hard to read
Apple Human Interface Guidelines
The fonts should be chosen depending on what kind of content your site/app carries. A banking/trading app for example – has a lot of numbers. A blog has a lot of text. Here’s a helpful resource on how to choose a font:
https://uxplanet.org/7-things-to-remember-when-selecting-fonts-for-your-design-ec1e592266c5
Designers need to maintain consistent font treatment across the site/app. In the picture below, you can see that there is a lack of uniformity in fonts, as well as the fact that it is not readable, which could be a turnoff for the user.
Another thing to consider here – is dark theme / white theme for your website; which controls how fonts are read easily on various devices. For long hours of continuous reading, low contrast screens may work well.
“I love Instagram’s stylish, dark background looks” – Almost everyone on Insta
Web pages with extremely low contrasts or high contrasts – hurt the eyes. Dark backgrounds are fashionable as well, but they often have the same issues. The contrast must be tested.
Unfortunately, not everyone has great vision and can discern tiny tints and colors. People with reduced eyesight, in fact, have difficulty reading writing that does not contrast with its surroundings. Men, in particular, are prone to color blindness, especially when it comes to discriminating reds from greens.
“Black text on a white background is best, since the color properties and light are best suited for the human eye. That’s because white reflects every wavelength in the color spectrum.”
Here’s further read on is Dark mode better for your eyes:
https://rxoptical.com/eye-health/is-dark-mode-better-for-your-eyes/
Below is an example of a low contrast screen – that’s hard on the eyes.
Source: https://www.nngroup.com/articles/low-contrast/
#9 Designing long forms full of surprises, not setting expectations well
Forms are an important component of the user experience; they are used from login, sign up to purchase, check out, among many other business critical things. As a result, it’s critical to provide explicit instructions both before, during and after engaging with the form.
Couple of best practices:
- If the form is too long, tell the user how long it can take. And why you are asking so many questions. Split it into logical pieces and display a progress bar to show the user where they are in the process. And what to expect next. Don’t keep them guessing.
- If you want to indicate an error, don’t only use colour. Always provide actionable feedback to make the process of making a correct input go more smoothly. And add, how this information will matter.
Understand the eye movement of your users – how do they read a web page? Do they go from top to bottom (or) go zigzag?
Here’s a helpful resource on when to use a Zigzag pattern & when to use F pattern.
https://lineindesign.medium.com/be-a-designer-who-can-also-help-with-writing-copy-2f4ea02a5646
#10 Not looking at how users are actually using the design & noting feedback
The importance of user testing in achieving high conversion rates cannot be overstated. While an organization’s web designers, marketing, and sales personnel may have a solid notion of what visitors want or how the user experience will be, there is no alternative for having actual users evaluate your website and its performance, as well as incorporating their comments.
Test. Test. Test.
That’s why at Codewave, we recommend a design-thinking approach to solving problems, experimentally – and working in close feedback loops with users. Learn more about it here:
Summing it up!
Hip, hip, hurray, now you know 10 items from our UI/UX mistakes array. But it’s not a complete list. There can be so many other subtle contextual design mistakes that even senior designers tend to commit. To minimize these UI/UX bloopers, we highly recommend a proper design thinking led digital solution development process and team to take you from having an Idea to testing your MVP with real users, and then building a full-fledge app.
So, what next?
If you have an idea or if you already have a website/app and wants us to audit/revamp its design, feel free to contact our design & development consultants. We shall be happy to help.
Cheers to all the awesome designers!
