UX design fails: we hate ‘em, we love ‘em - we can’t live without ‘em. At UXBooost, we have seen a lot of UX Design Fails in our time - some so grand that first, we feared them, then we admired them and provided improvement recommendations through UXBooost’s Heuristic Evaluation Checklist.
We will be cycling through our favorites according to the Heuristic they’ve violated. First up are our top 5 UX Design Fails in the Aesthetic and minimalist design category, complete with a description of the violation, the page the violation occurs on, and a recommended solution.
Location: Product page
Description: There is a mix of two main personas i.e. students and instructors, on one page. As each of the separate needs of each persona needs to be addressed, and as meeting each need requires different on-page functionalities, a lot of visual clutter is present.
Solution: Make it so users can select whether they are students or instructors before landing on the product page and filter the results to display only relevant content to each persona. The best-case scenario is if the system can determine the right content for the right persona without needing the user to declare whether they are a student or instructor. This can be done if the user has an account or has interacted with the website previously.
Location: Shopping cart
Description: High cognitive load - there are many areas on the shopping cart page that attract a user’s attention i.e. apply coupon, CTAs in the footer etc. which can be overwhelming and distracting.
Solution: Increase the visibility of the main CTA (checkout) by reducing the number of CTAs overall. Make sure there is always a clear visual hierarchy in order to have a better conversion rate.
Location: About page
Description: Wall of text - long text without a break/division between paragraphs e.g. use of bold or formatting to help break the text up visually. This impacts readability and the message ends up not being delivered.
Solution: Make sure to format the text for readability/web standards and integrate engaging media.
Location: Checkout page
Description: Redundant information at checkout - the same info is presented twice on the same page (see arrows).
Solution: The fewer distractions the better on the checkout page. Avoid redundant info. that can increase the cognitive load.
Location: Landing page
Description: Contrast ratio - low color contrast ratio of many elements on the website which dramatically impacts the usability of the website (difficult to make out what things are).
Solution: Make sure the contrast ratio respects the WCAG2 Accessibility standards.
It's easy to get carried away with too many buttons, CTAs, long text or redundant information. This makes an interface appear cluttered, requires a high cognitive load from users engaging with the page and end up costing conversions.In order to avoid this, make sure an interface has only the required information to perform the primary task. There are guidelines to help you maintain these standards e.g. Web Content Accessibility Guidelines (WCAG) 2.0 etc. You can look up "how to format web content" for plenty of guides.In the words of Nielsen, "Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility."
Read more:
.png)
Welcome to UXBoost, where UX & blockchain enthusiasts unite for extraordinary Web3 experiences. Join us in sharing insights, finding inspiration, fostering collaboration, receiving support, and collectively shaping the future of Web3 UX.
