1. Not performing user research on your target audience<\/strong><\/h2>\nUser research forms the foundation for building effective products.<\/p>\n
Going ahead to develop products or features based on assumption doesn’t always end well\u2014you’re likely to build something that doesn’t solve real user problems.<\/p>\n
How to avoid this mistake<\/strong><\/h3>\n\n- Invest in user research<\/a><\/strong>: There are many ways to do user research, from simple surveys to in-depth interviews, usability testing, and in-app user behavior tracking<\/a>. Choose the methods that best fit your budget and timeline.<\/li>\n
- Build user personas<\/strong>: Once you have your research data, use it to create personas that represent your target audience. These personas will help you keep your users front and center throughout the design process.<\/li>\n
- Use empathy maps<\/a><\/strong>: Pair the user personas you’ve created with empathy maps to better understand user motivations, preferences, and needs.<\/li>\n<\/ul>\n
2. Optimizing for search engines and not humans<\/strong><\/h2>\nWhile SEO is important, it shouldn’t come at the expense of good UX. When you prioritize search engines over human users, you end up with keyword-stuffed content that turns users off.<\/p>\n
You also risk having web pages with confusing navigation, leading to a bad experience for visitors.<\/p>\n
How to avoid this mistake<\/strong><\/h3>\nStrike a good balance: put users first and search engines second.<\/p>\n
Make landing page designs that are easy to read, visually appealing, and intuitive enough to navigate. This user-friendly approach ensures visitors enjoy their experience on your website, increasing the chances of web conversions.<\/p>\n![\"Semrush](\"https:\/\/images.storychief.com\/account_6827\/semrush-landing-page-example_148ac75ae4ad4cb41b02aeadf2705cbf_800.png\")
<\/picture>Semrush is a good example: they follow SEO guidelines but still make their pages user-friendly.<\/figcaption><\/figure>\n3. Not testing your MVPs<\/strong><\/h2>\nAn MVP (minimum viable product) is a basic version of your product that you can use to test your assumptions and get user feedback. Not testing<\/a> your MVPs can lead to:<\/p>\n\n- Building the wrong product.<\/li>\n
- Missing out on valuable feedback.<\/li>\n
- Wasting time and money.<\/li>\n<\/ul>\n
How to fix this UI mistake<\/strong><\/h3>\nMake MVPs a significant part of your product development process.<\/p>\n
Once you’ve built something that can be tested in the real world, it’s time to recruit beta users. Have them use the MVP in a structured or unstructured research setting (your choice).<\/p>\n
Then, make changes based on user feedback.<\/p>\n![\"beta-testing-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/beta-testing-ux-mistakes_cf27941679daa1f54973434ff04722e7_800.png\")
<\/picture>Recruit a small group of beta users from your current user base or social media platforms and ask them to report as many UX mistakes as they see.<\/figcaption><\/figure>\n4. Complicated sign-up forms<\/strong><\/h2>\nNo one likes filling out long, complicated forms. They’re frustrating and time-consuming.<\/p>\n
Some visitors might even abandon the sign-up process altogether, resulting in fewer new users and low conversion rates.<\/a><\/p>\nHow many people do you know who will gladly fill out a form as complicated as this?<\/p>\n![\"badforms-example\"](\"https:\/\/images.storychief.com\/account_6827\/badforms-example_b33c01137c54e8d378ec6f393fd2056e_800.jpeg\")
<\/picture>Example of a complicated form.<\/figcaption><\/figure>\nHow to avoid this mistake<\/strong><\/h3>\nDon’t make users fill in fields that aren’t necessary\u2014especially if it’s a sign-up form. Remember, you can always ask for more information later; your imperative with a sign-up form is to ensure users get behind the door.<\/p>\n
Also, keep field labels simple and intuitive so users know exactly what’s demanded of them.<\/p>\n
Consider the example below. Notice how the demo signup form is concise with good labels.<\/p>\n![\"Userpilot-demo-page-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/userpilot-demo-page-ux-mistakes_74ed1c881b227a527c402c992758a755_800.png\")
<\/picture>Userpilot’s demo form<\/a>.<\/figcaption><\/figure>\n5. Poor onboarding experience<\/strong><\/h2>\nMany UX designers assume their products are easy to use, so they ignore the importance of good onboarding<\/a>. This is a trap you have to avoid consciously.<\/p>\nWhen you roll out onboarding flows, ensure they’re super detailed, and the UI is not too crowded. For example, Clickup’s onboarding strategy has too many things going on at once. This will confuse users and result in a poor UX experience.<\/p>\n![\"clickup-user-onboarding-\"](\"https:\/\/images.storychief.com\/account_6827\/clickup-user-onboarding_40a19eb3a06e1a418584c73217719cb2_800.png\")
<\/picture>Clickup’s cluttered UI.<\/figcaption><\/figure>\nHow to avoid this mistake<\/strong><\/h3>\nInvest in better user onboarding. Begin by mapping the customer journey to understand how they use your product. Then, implement product analytics to see what features users struggle with and if they adopt your core features relevant to their use case.<\/p>\n
Armed with this information, trigger onboarding flows that guide users through the different customer journey stages and help them master key features.<\/p>\n![\"onboarding-flow-userpilot-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/onboarding-flow-userpilot-ux-mistakes_6b5a52ac32ba1fbb80fc34a26c4468e5_800.png\")
<\/picture>Design onboarding flows easily on Userpilot<\/a>.<\/figcaption><\/figure>\nTo make your onboarding engaging and educational, combine various UI elements at different points in the onboarding process. Some of the common elements to use include:<\/p>\n
\n- Welcome screens<\/a><\/strong>: Greet users with a warm welcome and set the tone for their experience. You can also use this to collect quick user data and customize their onboarding experience.<\/li>\n
- Interactive walkthroughs<\/strong>: Use these to guide users through your product, explaining the benefits of each feature and how to use it.<\/li>\n
- Tooltips<\/a><\/strong>: Implement them to provide concise explanations for specific elements or actions.<\/li>\n
- Checklists<\/a><\/strong>: Use this UI element to outline a clear set of tasks for users to complete during onboarding. Checklists provide a sense of accomplishment as users check off each item, improving onboarding completion.<\/li>\n<\/ul>\n
![\"onboarding-checklist-\"](\"https:\/\/images.storychief.com\/account_6827\/onboarding-checklist_426d15862624e7e06a0231d5a4b77ed0_800.png\")
<\/picture>Create checklists and other onboarding elements<\/a>.<\/figcaption><\/figure>\n6. Poor empty states in the user’s web experience<\/strong><\/h2>\nEmpty states<\/a> are screens displayed when users encounter no content or data, like during their first login, before adding any items, or when a search yields no results.<\/p>\nWhile empty states are valid, they can create confusion and prevent users from knowing what to do next.<\/p>\n
For example, consider the empty state below. The typical user will freeze upon seeing it, not knowing what to do next.<\/p>\n![\"Empty](\"https:\/\/images.storychief.com\/account_6827\/linkedin-empty-state-ux-mistakes_52ffc8dabbc904041e7e8a15af1b5b44_800.png\")
<\/picture>Empty state example.<\/figcaption><\/figure>\nHow to avoid this mistake<\/strong><\/h3>\nCreate unique messages for different scenarios, like when the user first signs up and the dashboard is empty when they search for something in your app and no result is found, and so on.<\/p>\n
For each empty state, utilize the space to guide users. First, ensure you include visual aesthetics to keep the screens engaging and informative. But don’t stop there; offer helpful tips and suggestions on what to do next.<\/p>\n
Here’s an example from Mixpanel. Notice how they filled the page with information and links to guide new users.<\/p>\n![\"Mixpanel](\"https:\/\/images.storychief.com\/account_6827\/mixpanel-empty-state-content-ux-mistakes_4e066cbb6d17b9196a2a2da32503ec33_800.png\")
<\/picture>Mixpanel avoids UX mistakes with proper in-app communication<\/a>.<\/figcaption><\/figure>\n7. Complicated or overwhelming user interface<\/strong><\/h2>\nCluttered designs with too much information and excessive features can overwhelm users and hinder their ability to navigate effectively.<\/p>\n
This can lead to user frustration and even product abandonment<\/a>.<\/p>\nFor example, consider this UI design. There’s too much information on the screen and not enough contrast.<\/p>\n![\"Image](\"https:\/\/images.storychief.com\/account_6827\/kindle-mac-app-ux-mistakes_0e84d9c62d9d4ba3dfd59bc915ff6b71_800.png\")
<\/picture>Image showing overloaded search results on Kindle.<\/figcaption><\/figure>\nHow to avoid this mistake<\/strong><\/h3>\nFocus on essential features and keep the interface clean and organized. Use white space effectively to avoid visual overload.<\/p>\n
Also, you must practice progressive disclosure<\/a>\u2014don’t expose all features at once. Introduce them gradually based on user context and needs.<\/p>\nExample: Notice how Userpilot blurs out some information from the page to prevent overload and keep users focused on what suits their context:<\/p>\n![\"Example](\"https:\/\/images.storychief.com\/account_6827\/userpilot-blurring-ui-progressive-disclosure-ux-mistakes_c3b81cd60769f6814b9832c68e96dd1a_800.png\")
<\/picture>Example of a clean UI.<\/figcaption><\/figure>\n8. Not prioritizing UX writing and visual hierarchy<\/strong><\/h2>\nUX writing is the art of crafting clear, concise, and engaging copy within a digital interface\u2014in this case, your SaaS app. It encompasses labels, buttons, error messages, and any text users encounter within your product.<\/p>\n
Poorly written content can create confusion, hinder usability, and ultimately harm the user experience.<\/p>\n
Keep in mind that your choice of words can either motivate users or disempower users. Consider the image below. The UX writing by the left will discourage the user, while the other version will make them want to try again.<\/p>\n![\"UX-Writing-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/ux-writing-ux-mistakes_cbc6276548c812e1951d66c7d38e3755_800.jpeg\")
<\/picture>Image source: Plerdy.<\/figcaption><\/figure>\nHow to avoid this mistake<\/strong><\/h3>\nUse everyday language that users understand. But more importantly, focus on using words that teach, empower, and encourage users.<\/p>\n
Good UX writing<\/a> is:<\/p>\n\n- Clear and concise.<\/li>\n
- Easy to understand.<\/li>\n
- Has personality\u2014doesn’t sound robotic.<\/li>\n<\/ul>\n
![\"onboarding-tooltips-progress-bar-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/onboarding-tooltips-progress-bar-ux-mistakes_75e806a2b273b19ef914d8b3711a5a38_800.png\")
<\/picture>Use clear and concise tooltips like this to guide users <\/a>and avoid any UX design mistake resulting from miscommunication.<\/figcaption><\/figure>\n9. Making help hard to access<\/strong><\/h2>\nImagine getting stuck while using a product and having no clue where to get help.<\/p>\n
That’s the reality of many SaaS users, and UX design mistakes like this frustrate users. It can even lead to churn<\/a>, especially among new or trial users.<\/p>\nHow to avoid this mistake<\/strong><\/h3>\nCreate an in-app resource center<\/a> that contains information users need to maximize your tool.<\/p>\nEnsure the resource center is rich and updated regularly. Also, group the content into topics and user journey stages to make it easy for users to find information. Some content to have in your resource center include FAQs, short video tutorials, help docs, and a link to your community forum if you have one.<\/p>\n
It’s also important that the resource center shows users how to contact you if they need to speak with an agent. This can be anything from a link to your live chat to a dedicated email address or phone number.<\/p>\n
The more detailed your resource center, the more you can help users solve problems independently, leading to improved user experience.<\/p>\n![\"in-app-resource-center-\"](\"https:\/\/images.storychief.com\/account_6827\/in-app-resource-center_15f91859add438b580b0310e1c5e524d_800.png\")
<\/picture>Userpilot’s self-serve support<\/a>.<\/figcaption><\/figure>\n10. Ignoring user feedback<\/strong><\/h2>\nUser feedback is a goldmine. It tells you whether your product is meeting users’ needs and expectations, and it highlights areas where you can improve.<\/p>\n
Unfortunately, many UX designers disregard this valuable resource in the design process, leaving users feeling undervalued.<\/p>\n
Do you know what happens when users feel you don’t listen to them? Engagement begins to drop. Retention rates<\/a> plummet, and the product generally becomes stagnant.<\/p>\nHow to avoid this mistake<\/strong><\/h3>\nRegularly conduct feedback surveys<\/a> to collect user sentiment regarding the existing product and new features.<\/p>\nTo make the process easier, use feedback tools that come with survey templates so you don’t have to keep building from scratch.<\/p>\n
Here’s the important part that UX designers miss: Don’t just collect feedback and let it sit. Analyze it and use it to inform your design decisions.<\/p>\n
Once you’re done making changes based on user feedback, close the feedback loop by getting back to users to let them know the changes you made. Don’t just assume they’ll find it on their own. Most people won’t notice\u2014and remember, the goal is to make them feel heard.<\/p>\n
You can communicate your changes through emails or in-app messages. It’s even best to do both\u2014an email detailing the new changes and an in-app tooltip or slide-out announcing the change.<\/p>\n
What happens if you can’t act on user feedback? Let’s say the user wants you to build a new feature that’s not part of your product roadmap. Still, get back to them and explain why you currently can’t do it. Then, recommend some features of your tool or integrations that meet their needs.<\/p>\n![\"Design](\"https:\/\/images.storychief.com\/account_6827\/userpilot-feedback-survey-ux-mistakes_69211ad2d31ea1ef76b6389d5c78dd8d_800.png\")
<\/picture>Design surveys to collect qualitative and quantitative user data<\/a>.<\/figcaption><\/figure>\n<\/div>\n11. Not optimizing UX design for mobile devices<\/strong><\/h2>\nIn today’s mobile-first world, ignoring tablet and mobile design is a recipe for disaster.<\/p>\n
Nearly half of all web traffic<\/a> comes from mobile users, and a poorly optimized experience can drive potential customers away.<\/p>\nYou might argue that your product is mainly accessed through bigger screens. That’s valid, but also realize the majority of your potential customers in the awareness and consideration stage will visit your website on their mobile devices.<\/p>\n
What happens if the text is hard to view and they have to struggle to make sense of any web page? Many will bounce back and try to explore other platforms.<\/p>\n![\"Image](\"https:\/\/images.storychief.com\/account_6827\/mobile-responsiveness-example-ux-mistakes_09a90b2e7410d709a21c7dd8562e3870_800.png\")
<\/picture>Image source: Medium.<\/figcaption><\/figure>\nHow to avoid this mistake<\/strong><\/h3>\nThe way around optimizing for different devices is to build with responsive design elements\u2014the building blocks of websites and apps that adapt to different screen sizes and devices. Responsive design elements ensure a seamless and enjoyable user experience, regardless of whether someone is on a desktop, tablet, laptop, or mobile device.<\/p>\n
You can go further to conduct usability testing on various devices to identify and address any issues associated with multiple screen sizes.<\/p>\n
The Dropbox example below is what happens when web designers and website owners collaborate to create a responsive web design. The result is a platform that prioritize functionality and avoids UX design mistakes.<\/p>\n![\"dropbox-responsive-design-\"](\"https:\/\/images.storychief.com\/account_6827\/dropbox-responsive-design_36de68c0b365b5f955faa2d88d987572_800.png\")
<\/picture>Responsive design example from Dropbox.<\/figcaption><\/figure>\n12. Using too many pop-ups<\/strong><\/h2>\nPop-ups are useful for occasional announcements or promotions.<\/p>\n
However, UX designers and product marketers sometimes forget this UI element can be a disruptive attention-grabber, interrupting user flow<\/a> and resulting in a bad user experience.<\/p>\nHow to avoid this mistake<\/strong><\/h3>\nShould you stop using pop-ups? Not.<\/p>\n
Here’s how to ensure your pop-ups don’t disrupt the user experience:<\/p>\n
\n- Prioritize alerts and promotions<\/strong>: Don’t bombard users with multiple pop-ups in a single session. Limit them to one relevant promotion or alert per user session, avoiding information overload and ensuring users read the message.<\/li>\n
- Show relevant pop-ups<\/strong>: Avoid displaying generic messages that have no context or value for the specific user. Tailor the pop-up content to their current activity to make it more engaging and less intrusive.<\/li>\n
- Add delays<\/strong>: Implement smart timing for your pop-ups. Avoid displaying them immediately after the user enters a page.<\/li>\n
- Consider less disruptive modals<\/strong>: Explore alternative ways to display your message without interrupting the user flow. Slideouts and top banners can be less intrusive and more visually appealing than traditional pop-ups.<\/li>\n<\/ul>\n
![\"slideout-feature-release\"](\"https:\/\/images.storychief.com\/account_6827\/slideout-feature-release_217cd7a2d648056e79d6cd164fd8aff7_800.png\")
<\/picture>Slide-out designed with Userpilot<\/a>.<\/figcaption><\/figure>\n13. Ignoring accessibility needs<\/strong><\/h2>\nAccessibility is often overlooked in UX design, leading to products that exclude users with different needs or limitations.<\/p>\n
This mistake not only discriminates against some individuals but also limits your product’s potential reach and value.<\/p>\n
How to avoid this mistake<\/strong><\/h3>\n\n- Prioritize accessibility from the start<\/strong>: Incorporate accessibility considerations into every stage of the design process, rather than treating it as an afterthought.<\/li>\n
- Follow WCAG guidelines<\/strong>: The Web Content Accessibility Guidelines (WCAG) provide comprehensive standards to ensure digital content is accessible to people with health conditions. Adhering to these guidelines ensures you’re meeting ethical standards and providing an inclusive experience.<\/li>\n
- Color contrast<\/strong>: Ensure sufficient contrast between text and backgrounds for readability, especially for users with low vision or color blindness.<\/li>\n
- Alt tags for images<\/strong>: Provide descriptive alt text for images, enabling screen readers to convey their meaning to users with visual impairments<\/li>\n
- Captions for videos<\/strong>: Include captions to accommodate those with hearing impairments.<\/li>\n<\/ul>\n
Twitter is one of those platforms that avoids this and some of the other UX mistakes in this article.<\/p>\n
For example, users can visit the settings to customize the accessibility controls and enjoy the app as they wish:<\/p>\n![\"Twitter's](\"https:\/\/images.storychief.com\/account_6827\/twitter-accessibility-controls-ux-mistakes_ead4f4746ace41b89aa22f75193a5d6e_800.png\")
<\/picture>Twitter’s accessibility settings.<\/figcaption><\/figure>\n14. Inconsistent design elements<\/strong><\/h2>\nInconsistencies in UI elements will confuse users and result in a steeper learning curve. Overall, it contributes to a disjointed brand experience, so this is something you should avoid.<\/p>\n
- \n
- Invest in user research<\/a><\/strong>: There are many ways to do user research, from simple surveys to in-depth interviews, usability testing, and in-app user behavior tracking<\/a>. Choose the methods that best fit your budget and timeline.<\/li>\n
- Build user personas<\/strong>: Once you have your research data, use it to create personas that represent your target audience. These personas will help you keep your users front and center throughout the design process.<\/li>\n
- Use empathy maps<\/a><\/strong>: Pair the user personas you’ve created with empathy maps to better understand user motivations, preferences, and needs.<\/li>\n<\/ul>\n
2. Optimizing for search engines and not humans<\/strong><\/h2>\n
While SEO is important, it shouldn’t come at the expense of good UX. When you prioritize search engines over human users, you end up with keyword-stuffed content that turns users off.<\/p>\n
You also risk having web pages with confusing navigation, leading to a bad experience for visitors.<\/p>\n
How to avoid this mistake<\/strong><\/h3>\n
Strike a good balance: put users first and search engines second.<\/p>\n
Make landing page designs that are easy to read, visually appealing, and intuitive enough to navigate. This user-friendly approach ensures visitors enjoy their experience on your website, increasing the chances of web conversions.<\/p>\n
<\/picture>Semrush is a good example: they follow SEO guidelines but still make their pages user-friendly.<\/figcaption><\/figure>\n 3. Not testing your MVPs<\/strong><\/h2>\n
An MVP (minimum viable product) is a basic version of your product that you can use to test your assumptions and get user feedback. Not testing<\/a> your MVPs can lead to:<\/p>\n
- \n
- Building the wrong product.<\/li>\n
- Missing out on valuable feedback.<\/li>\n
- Wasting time and money.<\/li>\n<\/ul>\n
How to fix this UI mistake<\/strong><\/h3>\n
Make MVPs a significant part of your product development process.<\/p>\n
Once you’ve built something that can be tested in the real world, it’s time to recruit beta users. Have them use the MVP in a structured or unstructured research setting (your choice).<\/p>\n
Then, make changes based on user feedback.<\/p>\n
<\/picture>Recruit a small group of beta users from your current user base or social media platforms and ask them to report as many UX mistakes as they see.<\/figcaption><\/figure>\n 4. Complicated sign-up forms<\/strong><\/h2>\n
No one likes filling out long, complicated forms. They’re frustrating and time-consuming.<\/p>\n
Some visitors might even abandon the sign-up process altogether, resulting in fewer new users and low conversion rates.<\/a><\/p>\n
How many people do you know who will gladly fill out a form as complicated as this?<\/p>\n
<\/picture>Example of a complicated form.<\/figcaption><\/figure>\n How to avoid this mistake<\/strong><\/h3>\n
Don’t make users fill in fields that aren’t necessary\u2014especially if it’s a sign-up form. Remember, you can always ask for more information later; your imperative with a sign-up form is to ensure users get behind the door.<\/p>\n
Also, keep field labels simple and intuitive so users know exactly what’s demanded of them.<\/p>\n
Consider the example below. Notice how the demo signup form is concise with good labels.<\/p>\n
<\/picture>Userpilot’s demo form<\/a>.<\/figcaption><\/figure>\n 5. Poor onboarding experience<\/strong><\/h2>\n
Many UX designers assume their products are easy to use, so they ignore the importance of good onboarding<\/a>. This is a trap you have to avoid consciously.<\/p>\n
When you roll out onboarding flows, ensure they’re super detailed, and the UI is not too crowded. For example, Clickup’s onboarding strategy has too many things going on at once. This will confuse users and result in a poor UX experience.<\/p>\n
<\/picture>Clickup’s cluttered UI.<\/figcaption><\/figure>\n How to avoid this mistake<\/strong><\/h3>\n
Invest in better user onboarding. Begin by mapping the customer journey to understand how they use your product. Then, implement product analytics to see what features users struggle with and if they adopt your core features relevant to their use case.<\/p>\n
Armed with this information, trigger onboarding flows that guide users through the different customer journey stages and help them master key features.<\/p>\n
<\/picture>Design onboarding flows easily on Userpilot<\/a>.<\/figcaption><\/figure>\n To make your onboarding engaging and educational, combine various UI elements at different points in the onboarding process. Some of the common elements to use include:<\/p>\n
- \n
- Welcome screens<\/a><\/strong>: Greet users with a warm welcome and set the tone for their experience. You can also use this to collect quick user data and customize their onboarding experience.<\/li>\n
- Interactive walkthroughs<\/strong>: Use these to guide users through your product, explaining the benefits of each feature and how to use it.<\/li>\n
- Tooltips<\/a><\/strong>: Implement them to provide concise explanations for specific elements or actions.<\/li>\n
- Checklists<\/a><\/strong>: Use this UI element to outline a clear set of tasks for users to complete during onboarding. Checklists provide a sense of accomplishment as users check off each item, improving onboarding completion.<\/li>\n<\/ul>\n
<\/picture>Create checklists and other onboarding elements<\/a>.<\/figcaption><\/figure>\n 6. Poor empty states in the user’s web experience<\/strong><\/h2>\n
Empty states<\/a> are screens displayed when users encounter no content or data, like during their first login, before adding any items, or when a search yields no results.<\/p>\n
While empty states are valid, they can create confusion and prevent users from knowing what to do next.<\/p>\n
For example, consider the empty state below. The typical user will freeze upon seeing it, not knowing what to do next.<\/p>\n
<\/picture>Empty state example.<\/figcaption><\/figure>\n How to avoid this mistake<\/strong><\/h3>\n
Create unique messages for different scenarios, like when the user first signs up and the dashboard is empty when they search for something in your app and no result is found, and so on.<\/p>\n
For each empty state, utilize the space to guide users. First, ensure you include visual aesthetics to keep the screens engaging and informative. But don’t stop there; offer helpful tips and suggestions on what to do next.<\/p>\n
Here’s an example from Mixpanel. Notice how they filled the page with information and links to guide new users.<\/p>\n
<\/picture>Mixpanel avoids UX mistakes with proper in-app communication<\/a>.<\/figcaption><\/figure>\n 7. Complicated or overwhelming user interface<\/strong><\/h2>\n
Cluttered designs with too much information and excessive features can overwhelm users and hinder their ability to navigate effectively.<\/p>\n
This can lead to user frustration and even product abandonment<\/a>.<\/p>\n
For example, consider this UI design. There’s too much information on the screen and not enough contrast.<\/p>\n
<\/picture>Image showing overloaded search results on Kindle.<\/figcaption><\/figure>\n How to avoid this mistake<\/strong><\/h3>\n
Focus on essential features and keep the interface clean and organized. Use white space effectively to avoid visual overload.<\/p>\n
Also, you must practice progressive disclosure<\/a>\u2014don’t expose all features at once. Introduce them gradually based on user context and needs.<\/p>\n
Example: Notice how Userpilot blurs out some information from the page to prevent overload and keep users focused on what suits their context:<\/p>\n
<\/picture>Example of a clean UI.<\/figcaption><\/figure>\n 8. Not prioritizing UX writing and visual hierarchy<\/strong><\/h2>\n
UX writing is the art of crafting clear, concise, and engaging copy within a digital interface\u2014in this case, your SaaS app. It encompasses labels, buttons, error messages, and any text users encounter within your product.<\/p>\n
Poorly written content can create confusion, hinder usability, and ultimately harm the user experience.<\/p>\n
Keep in mind that your choice of words can either motivate users or disempower users. Consider the image below. The UX writing by the left will discourage the user, while the other version will make them want to try again.<\/p>\n
<\/picture>Image source: Plerdy.<\/figcaption><\/figure>\n How to avoid this mistake<\/strong><\/h3>\n
Use everyday language that users understand. But more importantly, focus on using words that teach, empower, and encourage users.<\/p>\n
Good UX writing<\/a> is:<\/p>\n
- \n
- Clear and concise.<\/li>\n
- Easy to understand.<\/li>\n
- Has personality\u2014doesn’t sound robotic.<\/li>\n<\/ul>\n<\/picture>
Use clear and concise tooltips like this to guide users <\/a>and avoid any UX design mistake resulting from miscommunication.<\/figcaption><\/figure>\n 9. Making help hard to access<\/strong><\/h2>\n
Imagine getting stuck while using a product and having no clue where to get help.<\/p>\n
That’s the reality of many SaaS users, and UX design mistakes like this frustrate users. It can even lead to churn<\/a>, especially among new or trial users.<\/p>\n
How to avoid this mistake<\/strong><\/h3>\n
Create an in-app resource center<\/a> that contains information users need to maximize your tool.<\/p>\n
Ensure the resource center is rich and updated regularly. Also, group the content into topics and user journey stages to make it easy for users to find information. Some content to have in your resource center include FAQs, short video tutorials, help docs, and a link to your community forum if you have one.<\/p>\n
It’s also important that the resource center shows users how to contact you if they need to speak with an agent. This can be anything from a link to your live chat to a dedicated email address or phone number.<\/p>\n
The more detailed your resource center, the more you can help users solve problems independently, leading to improved user experience.<\/p>\n
<\/picture>Userpilot’s self-serve support<\/a>.<\/figcaption><\/figure>\n 10. Ignoring user feedback<\/strong><\/h2>\n
User feedback is a goldmine. It tells you whether your product is meeting users’ needs and expectations, and it highlights areas where you can improve.<\/p>\n
Unfortunately, many UX designers disregard this valuable resource in the design process, leaving users feeling undervalued.<\/p>\n
Do you know what happens when users feel you don’t listen to them? Engagement begins to drop. Retention rates<\/a> plummet, and the product generally becomes stagnant.<\/p>\n
How to avoid this mistake<\/strong><\/h3>\n
Regularly conduct feedback surveys<\/a> to collect user sentiment regarding the existing product and new features.<\/p>\n
To make the process easier, use feedback tools that come with survey templates so you don’t have to keep building from scratch.<\/p>\n
Here’s the important part that UX designers miss: Don’t just collect feedback and let it sit. Analyze it and use it to inform your design decisions.<\/p>\n
Once you’re done making changes based on user feedback, close the feedback loop by getting back to users to let them know the changes you made. Don’t just assume they’ll find it on their own. Most people won’t notice\u2014and remember, the goal is to make them feel heard.<\/p>\n
You can communicate your changes through emails or in-app messages. It’s even best to do both\u2014an email detailing the new changes and an in-app tooltip or slide-out announcing the change.<\/p>\n
What happens if you can’t act on user feedback? Let’s say the user wants you to build a new feature that’s not part of your product roadmap. Still, get back to them and explain why you currently can’t do it. Then, recommend some features of your tool or integrations that meet their needs.<\/p>\n
<\/picture>Design surveys to collect qualitative and quantitative user data<\/a>.<\/figcaption><\/figure>\n <\/div>\n11. Not optimizing UX design for mobile devices<\/strong><\/h2>\n
In today’s mobile-first world, ignoring tablet and mobile design is a recipe for disaster.<\/p>\n
Nearly half of all web traffic<\/a> comes from mobile users, and a poorly optimized experience can drive potential customers away.<\/p>\n
You might argue that your product is mainly accessed through bigger screens. That’s valid, but also realize the majority of your potential customers in the awareness and consideration stage will visit your website on their mobile devices.<\/p>\n
What happens if the text is hard to view and they have to struggle to make sense of any web page? Many will bounce back and try to explore other platforms.<\/p>\n
<\/picture>Image source: Medium.<\/figcaption><\/figure>\n How to avoid this mistake<\/strong><\/h3>\n
The way around optimizing for different devices is to build with responsive design elements\u2014the building blocks of websites and apps that adapt to different screen sizes and devices. Responsive design elements ensure a seamless and enjoyable user experience, regardless of whether someone is on a desktop, tablet, laptop, or mobile device.<\/p>\n
You can go further to conduct usability testing on various devices to identify and address any issues associated with multiple screen sizes.<\/p>\n
The Dropbox example below is what happens when web designers and website owners collaborate to create a responsive web design. The result is a platform that prioritize functionality and avoids UX design mistakes.<\/p>\n
<\/picture>Responsive design example from Dropbox.<\/figcaption><\/figure>\n 12. Using too many pop-ups<\/strong><\/h2>\n
Pop-ups are useful for occasional announcements or promotions.<\/p>\n
However, UX designers and product marketers sometimes forget this UI element can be a disruptive attention-grabber, interrupting user flow<\/a> and resulting in a bad user experience.<\/p>\n
How to avoid this mistake<\/strong><\/h3>\n
Should you stop using pop-ups? Not.<\/p>\n
Here’s how to ensure your pop-ups don’t disrupt the user experience:<\/p>\n
- \n
- Prioritize alerts and promotions<\/strong>: Don’t bombard users with multiple pop-ups in a single session. Limit them to one relevant promotion or alert per user session, avoiding information overload and ensuring users read the message.<\/li>\n
- Show relevant pop-ups<\/strong>: Avoid displaying generic messages that have no context or value for the specific user. Tailor the pop-up content to their current activity to make it more engaging and less intrusive.<\/li>\n
- Add delays<\/strong>: Implement smart timing for your pop-ups. Avoid displaying them immediately after the user enters a page.<\/li>\n
- Consider less disruptive modals<\/strong>: Explore alternative ways to display your message without interrupting the user flow. Slideouts and top banners can be less intrusive and more visually appealing than traditional pop-ups.<\/li>\n<\/ul>\n
<\/picture>Slide-out designed with Userpilot<\/a>.<\/figcaption><\/figure>\n 13. Ignoring accessibility needs<\/strong><\/h2>\n
Accessibility is often overlooked in UX design, leading to products that exclude users with different needs or limitations.<\/p>\n
This mistake not only discriminates against some individuals but also limits your product’s potential reach and value.<\/p>\n
How to avoid this mistake<\/strong><\/h3>\n
- \n
- Prioritize accessibility from the start<\/strong>: Incorporate accessibility considerations into every stage of the design process, rather than treating it as an afterthought.<\/li>\n
- Follow WCAG guidelines<\/strong>: The Web Content Accessibility Guidelines (WCAG) provide comprehensive standards to ensure digital content is accessible to people with health conditions. Adhering to these guidelines ensures you’re meeting ethical standards and providing an inclusive experience.<\/li>\n
- Color contrast<\/strong>: Ensure sufficient contrast between text and backgrounds for readability, especially for users with low vision or color blindness.<\/li>\n
- Alt tags for images<\/strong>: Provide descriptive alt text for images, enabling screen readers to convey their meaning to users with visual impairments<\/li>\n
- Captions for videos<\/strong>: Include captions to accommodate those with hearing impairments.<\/li>\n<\/ul>\n
Twitter is one of those platforms that avoids this and some of the other UX mistakes in this article.<\/p>\n
For example, users can visit the settings to customize the accessibility controls and enjoy the app as they wish:<\/p>\n
<\/picture>Twitter’s accessibility settings.<\/figcaption><\/figure>\n 14. Inconsistent design elements<\/strong><\/h2>\n
Inconsistencies in UI elements will confuse users and result in a steeper learning curve. Overall, it contributes to a disjointed brand experience, so this is something you should avoid.<\/p>\n
- Follow WCAG guidelines<\/strong>: The Web Content Accessibility Guidelines (WCAG) provide comprehensive standards to ensure digital content is accessible to people with health conditions. Adhering to these guidelines ensures you’re meeting ethical standards and providing an inclusive experience.<\/li>\n
- Show relevant pop-ups<\/strong>: Avoid displaying generic messages that have no context or value for the specific user. Tailor the pop-up content to their current activity to make it more engaging and less intrusive.<\/li>\n
- Prioritize alerts and promotions<\/strong>: Don’t bombard users with multiple pop-ups in a single session. Limit them to one relevant promotion or alert per user session, avoiding information overload and ensuring users read the message.<\/li>\n
- Interactive walkthroughs<\/strong>: Use these to guide users through your product, explaining the benefits of each feature and how to use it.<\/li>\n
- Welcome screens<\/a><\/strong>: Greet users with a warm welcome and set the tone for their experience. You can also use this to collect quick user data and customize their onboarding experience.<\/li>\n
- Build user personas<\/strong>: Once you have your research data, use it to create personas that represent your target audience. These personas will help you keep your users front and center throughout the design process.<\/li>\n
![\"Semrush](\"https:\/\/images.storychief.com\/account_6827\/semrush-landing-page-example_148ac75ae4ad4cb41b02aeadf2705cbf_800.png)
<\/picture>![\"beta-testing-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/beta-testing-ux-mistakes_cf27941679daa1f54973434ff04722e7_800.png)
<\/picture>![\"badforms-example\"](\"https:\/\/images.storychief.com\/account_6827\/badforms-example_b33c01137c54e8d378ec6f393fd2056e_800.jpeg)
<\/picture>![\"Userpilot-demo-page-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/userpilot-demo-page-ux-mistakes_74ed1c881b227a527c402c992758a755_800.png)
<\/picture>![\"clickup-user-onboarding-\"](\"https:\/\/images.storychief.com\/account_6827\/clickup-user-onboarding_40a19eb3a06e1a418584c73217719cb2_800.png)
<\/picture>![\"onboarding-flow-userpilot-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/onboarding-flow-userpilot-ux-mistakes_6b5a52ac32ba1fbb80fc34a26c4468e5_800.png)
<\/picture>![\"onboarding-checklist-\"](\"https:\/\/images.storychief.com\/account_6827\/onboarding-checklist_426d15862624e7e06a0231d5a4b77ed0_800.png)
<\/picture>![\"Empty](\"https:\/\/images.storychief.com\/account_6827\/linkedin-empty-state-ux-mistakes_52ffc8dabbc904041e7e8a15af1b5b44_800.png)
<\/picture>![\"Mixpanel](\"https:\/\/images.storychief.com\/account_6827\/mixpanel-empty-state-content-ux-mistakes_4e066cbb6d17b9196a2a2da32503ec33_800.png)
<\/picture>![\"Image](\"https:\/\/images.storychief.com\/account_6827\/kindle-mac-app-ux-mistakes_0e84d9c62d9d4ba3dfd59bc915ff6b71_800.png)
<\/picture>![\"Example](\"https:\/\/images.storychief.com\/account_6827\/userpilot-blurring-ui-progressive-disclosure-ux-mistakes_c3b81cd60769f6814b9832c68e96dd1a_800.png)
<\/picture>![\"UX-Writing-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/ux-writing-ux-mistakes_cbc6276548c812e1951d66c7d38e3755_800.jpeg)
<\/picture>![\"onboarding-tooltips-progress-bar-ux-mistakes\"](\"https:\/\/images.storychief.com\/account_6827\/onboarding-tooltips-progress-bar-ux-mistakes_75e806a2b273b19ef914d8b3711a5a38_800.png)
<\/picture>![\"in-app-resource-center-\"](\"https:\/\/images.storychief.com\/account_6827\/in-app-resource-center_15f91859add438b580b0310e1c5e524d_800.png)
<\/picture>![\"Design](\"https:\/\/images.storychief.com\/account_6827\/userpilot-feedback-survey-ux-mistakes_69211ad2d31ea1ef76b6389d5c78dd8d_800.png)
<\/picture>![\"Image](\"https:\/\/images.storychief.com\/account_6827\/mobile-responsiveness-example-ux-mistakes_09a90b2e7410d709a21c7dd8562e3870_800.png)
<\/picture>![\"dropbox-responsive-design-\"](\"https:\/\/images.storychief.com\/account_6827\/dropbox-responsive-design_36de68c0b365b5f955faa2d88d987572_800.png)
<\/picture>![\"slideout-feature-release\"](\"https:\/\/images.storychief.com\/account_6827\/slideout-feature-release_217cd7a2d648056e79d6cd164fd8aff7_800.png)
<\/picture>![\"Twitter's](\"https:\/\/images.storychief.com\/account_6827\/twitter-accessibility-controls-ux-mistakes_ead4f4746ace41b89aa22f75193a5d6e_800.png)
<\/picture>![\"inconsistent-design-example\"](\"https:\/\/images.storychief.com\/account_6827\/inconsistent-design-example_6026e6b66490414f3a64b1a991486acd_800.jpeg)
<\/picture>![\"ui-design-kit-dribbble\"](\"https:\/\/images.storychief.com\/account_6827\/ui-design-kit-dribbble_457653f2d7c63238ac3ccda34875322e_800.png)
<\/picture>