What UI design mistakes should you avoid?

As a product designer, I firmly believe that consistency is the bedrock of successful UI design. In a world where digital experiences have become integral to our daily lives, the importance of maintaining a cohesive and harmonious design style cannot be overstated. Inconsistent style, in my opinion, is a design sin that should be avoided at all costs.

By being consistent, your users will perceive the design as aesthetically pleasing, creating a positive response. Atoms that are in the same category must resemble similarities. If your icons are line art, then all of them need to be line art. Colors and fonts are similar in a way because inexperienced designers will make them "pop", leading to confusion and accessibility issues. To avoid this, define your tokens in grayscale and your font sizes, as soon as you start sketching your wireframe. Don`t reinvent the wheel. People like to be in a familiar place. Buttons, icons, colors and fonts should have functions in your design that lets your users process the information you are trying to get to them.

"One more thing I would like to add is the 'naming convention.' If you are dealing with industry standards, as someone who has evolved three MVPs to full-scale products, my suggestion would be to go with the industry-standard naming convention. For example, if you are in the Agile space, then the accepted hierarchy is Epic -> Capability -> Feature, and of course, you can add more layers to it, like Themes, as an example. However, your hierarchy should be consistent with the industry-standard. Capability should always be above Features. It feels self-explanatory; however, I have seen top-tier enterprises mashing up the standard hierarchies, confusing users while deviating from well accepted standard convention."

When hierarchy is unclear, the result is visual chaos. Elements jostle for attention, and the user experience takes on a feeling of disarray and disorder. Users are left feeling overwhelmed, lost, and disconnected from the product.

Hierarchy starts as soon as your research phase. Here, you will categorize your features in a parent or child relationship. This will lead to categorizing your components much more easily and it will become more clear where to use them and why. Hierarchy can be achieved in many ways, either contrast, scale, location or complexity. The fun part is when you start to combine them. "Breaking the grid". We could write a whole thesis about this as the variety resulted from it is limitless, but most important is knowing when to break it. In the end, hierarchy is important for users to perceive and process the information. It helps them navigate your product with ease, resulting in a good user experience in completing the tasks they need to.

Have you ever used an app that freezes after performing a task? You don`t know if the app is loading or has crashed and you lost all your progress. Or have you filled out a form, hit the button and the app just says error? That`s called poor feedback. Your users need feedback on all steps to perform a task. Fill out a form? Use feedback cards. Is your product loading and it takes a couple of seconds? Pop a loading animation so we know the app didn`t crash. Tap on a button? "Make it pop!" This is where you get creative with your animations. Give it a sleek or a quirky feel. Good feedback ads to the user experience, making it more pleasing for users to use your product. Feedback can influence people returning or talking about your product.

Clear labels are like signposts on a winding road; they provide a sense of direction and clarity. They ensure that users can readily understand the purpose and function of different UI elements and actions. A well-crafted label enhances usability, making it easy for users to navigate a product with confidence and efficiency.

Labels are not a component you want to get creative with. Labels need to be clear directions for the users. This is another area that you need to be consistent in. Notice how this article is not a linear progression, but a circle that leads with each paragraph to the first chapter. It`s the same as in design, graphic, branding, identity visual and ui. Being consistent is the most important thing you can do for your product and users. Labels inform users that they need to perform an action in order to complete a task. They need to be clear, concise and short.

Accessibility starts with your user persona and user journey. If you get a lock on those, your users will blaze through tasks, giving them a reason to come back to your product. Do your users find it easy to get the info, act on it, complete tasks? What if they need to do those tasks while holding the phone upside down? Can they distinguish where the menu, cta is? How about they need to do this outside when the sun is glaring their screen and they need to squint their eyes? These are fun tests to do and you will learn how people work and what makes or breaks their overall experience with a product. Make sure your product complies with accessibility standards. Create audits. Ask someone that isn`t involved in the project to perform them.

Ensure accessibility options are robust, accommodating diverse needs and preferences, and promoting inclusivity. Incorporate feedback mechanisms, encouraging active user engagement and iterative improvements, enhancing overall usability.

You, and your partners in product making, know too much. Simply by being knowledgeable enough to be involved in the act of design or engineering, you already have more context and think harder about the product or service than most other humans on the planet. What does that make you? Dangerously wrong about your design intuitions. Effectively invisible elements in design are so common, precisely because to you they are not invisible. You need the discipline to think about and design for the naive, the new, the humans who know *nothing* about the thing you are building, and those who have prior intuitions about how it should work that are often not matching (e.g. wrong) to what you are building.

Here are some common UI mistakes to avoid: 1. Poor navigation and information architecture: Make it easy for users to find what they need. 2.Cluttered and overwhelming design*: Keep it simple and focused. 3.Illegible typography: Choose clear and readable fonts. 4.Inconsistent design elements:Establish a consistent visual language. 5. Insufficient feedback and loading indicators: Keep users informed about what's happening. 6. Non-intuitive interactions: Make actions and consequences clear. 7. Ignoring mobile usability: Ensure a smooth experience across devices. 8. Too many features and options: Prioritize and simplify. 9. Disruptive and intrusive elements: Respect users' focus. 10. Lack of accessibility .

The story of what will the UI do must be very prevalent at each step and give a sense of simplicity, belongingness & value-rich-addition to the user apart from collecting feedback from first-time & most-frequently engaging users which will help in more relatable designs, process gaps & talk to the user with orally talking to the user.

Ignoring the bigger picture. 👀 A great aesthetic UI is indeed one of the sweetest spot of any product but it should stand along with the goal. At all points it should cater to User's needs and ease. It should also serve the purpose of building a story around the product that is simple and easy to grasp in first glance and also stays with user in longer run.

Algo que suele "darse por hecho" es no diseñar nuestros empty states y páginas de error, esto afecta mucho a las heurísticas de nuestro producto pues nuestros usuarios no tienen claro cual es el error y se puede generar mucha frustración y incluso que abandonen el proceso que están realizando. Por eso siempre debemos recordar diseñar estos NO TAN OBVIOS componentes.