These mistakes happen in how a design is made, before anyone argues about colours. The visual mistakes that show up in a screenshot, such as misaligned elements, tiny tap targets and generic stock photos, are covered separately in 5 UI design mistakes to stop making.
1. Designing without knowing what users need
The design starts from a competitor's site, a Dribbble shot or the owner's personal taste, and nobody writes down who the visitors are or what they came to do. The result often looks good and answers the wrong questions.
The fix does not need a research budget. Before any layout work, list the five questions customers ask most often (your sales team, WhatsApp chats and support inbox already know them), the one action you want visitors to take, and the devices they use, which Google Analytics 4 shows under Tech details. That list becomes the brief, and every page is judged against it.
2. Organising the site around your company, not your visitors
Services listed by internal department. Pricing hidden behind a contact form. The phone number only in the footer. Menu labels that use company jargon ("Solutions", "Verticals") instead of the words customers search for. This is an information architecture problem, and no amount of visual polish fixes it.
Write the visitor's questions in the order they ask them, typically what you do, whether you have done it for someone like them, what it costs, how long it takes and how to start. Then lay out the page to answer them in that order, and name menu items with the words customers use.
3. Jumping to high-fidelity design before the structure is agreed
Opening Figma with fonts, colours and photos before anyone has agreed what goes on the page. Stakeholders then debate the shade of blue while the real problem, a missing section or the wrong order, goes unnoticed until development.
Work in stages: wireframe first, get the structure signed off, then apply visual design, then build a clickable prototype. AI tools that generate a whole page from a prompt make this mistake easier to fall into, because the output looks finished. Treat a generated layout as a first wireframe and review its structure before anyone polishes it. Our guide to the UX design process sets out the stages and the free tools for each.
4. Reinventing patterns users already know
A new kind of menu, a custom date picker, a horizontal scroll where people expect vertical, an icon with no label. Users have spent years learning how websites and apps work, and every invention asks them to learn again. Most of the time they will not bother.
Use the established pattern (logo top-left linking home, cart top-right, labelled form fields, a standard checkout) unless you can name the specific problem it fails to solve for your users. Save originality for the content, the photography and the brand.
5. Skipping usability testing
Shipping a layout because the team and the client liked it. The people who designed a site are the worst judges of whether it is easy to use, because they already know where everything is.
Testing can be small. Nielsen Norman Group's long-standing advice is that about five users find most of the usability problems in a design. Give each person one real task, such as "find the price of a logo and ask for a quote", watch without helping, and note where they hesitate. On client projects we do this on the Figma prototype before development starts, when changes are cheap.
6. Treating accessibility as a final check
Light grey text on white, links that differ from body text only by colour, form fields without labels, sliders that need a mouse, images without alt text. The World Health Organization estimates that around one in six people lives with a significant disability, and everyone has temporary limits too: a phone in bright sunlight, one hand on a bus, a slow connection.
Build accessibility in from the first wireframe rather than auditing at the end. Check colour contrast as you choose the palette (WCAG asks for 4.5:1 for body text), keep visible labels on every field, make sure the whole site works with a keyboard, and write alt text as the content is added. Retrofitting these later costs far more.
7. Designing for a desktop monitor instead of a phone
Designing on a large monitor for people who will visit on a phone, often on mobile data and in a hurry. Desktop-first designs squeezed onto a small screen give you cramped menus, tiny text and sections that only made sense side by side.
Since July 2024 Google crawls every site with its smartphone crawler, so the mobile version is the one that gets indexed and ranked. Design the phone view first, check it on a real mid-range Android device over mobile data, and treat the desktop layout as the expansion.
How to tell if your website has these problems
You do not need a full audit to find out. Three free checks will show most of them:
- 01Watch three people who have never seen the site try to complete one real task. Hesitation, scrolling back up and questions such as "where do I..." all point to a problem.
- 02In Google Analytics 4, look at engagement rate and exits for your key pages, and compare mobile with desktop. A page that performs much worse on mobile usually has a layout problem.
- 03Install Microsoft Clarity (free) and watch session recordings and heatmaps for a week. Rage clicks, dead clicks and people stopping halfway down a form show where the design is getting in the way.
How we avoid these mistakes on client projects
Our process at GoDesign, refined over 900+ projects since 2018, follows the order above: we collect the questions clients' customers actually ask, agree a sitemap and wireframes, design the mobile view first, test a clickable prototype, and check contrast and keyboard use before handover. You can see finished work in case studies such as S-Line and The Medi Alliance.
Sources
- Nielsen Norman Group: Why You Only Need to Test with 5 Users, Jakob Nielsen (nngroup.com)
- World Health Organization: Disability fact sheet, an estimated 1.3 billion people, about 1 in 6, experience significant disability (who.int)
- Google Search Central blog: Mobile-first indexing has landed, June 2024; all remaining sites crawled with the smartphone Googlebot after 5 July 2024 (developers.google.com)
Common questions
- How do I know if my website has UI problems?
- Watch three people who have never seen it try to complete a real task, such as requesting a quote. If they hesitate, scroll back or ask where something is, the design is getting in the way. Low engagement on key pages in Google Analytics 4, especially on mobile, points the same way.
- What is the difference between a UI mistake and a UX mistake?
- A UI mistake is visible on a single screen, such as poor alignment, low contrast or a button that is too small. A UX mistake is in the flow or structure, such as pricing hidden behind a form or a checkout with too many steps. Many problems are both.
- Is mobile-first design still necessary?
- Yes. Google indexes the mobile version of every site, and for most business websites more visitors arrive on phones than on desktops. Designing desktop first and shrinking it is what produces cramped, hard-to-use mobile pages.
- How many users do you need for usability testing?
- About five per round is enough to find most of the major problems, according to long-standing Nielsen Norman Group advice. It is better to run several small rounds as the design changes than one large test at the end.
- What is the cheapest fix for a poorly performing website?
- Usually reorganising the existing content: clearer headings, the main action visible without scrolling, contact details easy to find and fewer competing elements. That often does more than a full redesign, for far less.
- What UI design mistakes do beginners make most often?
- Starting in high fidelity before the structure is agreed, inventing custom patterns instead of using familiar ones, and checking accessibility only at the end. Visual slips such as inconsistent spacing and too many button styles are common too.
