Three design mistakes that make a website hard to understand
Updated on
A beautiful photograph of a villa, carefully chosen typography and a few animations make a page appealing to look at. Yet a question remains after the first few moments: can you rent this house, buy it or invest in the project? The visual atmosphere does not provide the answer on its own.
That was what struck me when I examined a project presented by SLDevWeb in a review video. The visual work had a direction, but it did not fully explain the offer. I identified three things to revisit: the opening message, the buttons and the spacing between elements.
These design mistakes appear on many websites. They do not, by themselves, prove that sales are being lost: I did not have the project’s analytics or user feedback. They do provide practical starting points for improving a page before deciding that a complete redesign is necessary.
Contents
An offer visitors have to guess
The first screen cannot explain everything. It should at least give readers a foothold: what you offer, who it is for and what they can do next. A strong image may establish a mood, but the surrounding content needs to make the proposition understandable.
In the property example, the images suggested luxury. They did not distinguish rentals, sales and investment. Those offers create different expectations. Visitors need different information and may want to speak with different people. Clarifying the offer changes the content as well as the route through the page.
A precise sentence could have removed the ambiguity. “Holiday villas for rent” and “Coastal properties for sale” are possible directions, depending on the actual offer. The decision begins with content. Heading size, placement and contrast then help make that meaning visible at the right moment.
In the video, I mentioned understanding the offer within five seconds. Treat that as a clarity exercise, not a universal law of human behaviour. Show the opening screen to someone unfamiliar with the company and ask what they expect to find. Their answer may be more useful than an internal debate between two colour choices.
Buttons whose purpose is not clear enough
On the page I reviewed, some coloured headings attracted more attention than the buttons. Clickable elements also used different shapes and behaviours. A visitor needed to learn several visual conventions while moving through a single site, without a clear reason for the differences.
The objective is not to make every button identical. A primary and secondary action can have different treatments. The important point is that the distinction keeps the same meaning from section to section. A visual hierarchy becomes useful when people can rely on it rather than reinterpret it each time.
For example, a solid colour might identify an availability request while a quieter link opens property details. Repeating that relationship gives visitors a dependable cue. Labels matter too: “Check availability” describes the next step more clearly than an isolated “Discover” whose destination must be guessed.
Colour should not carry the entire message. Shape, wording and keyboard focus also contribute to understanding. Consistent UX/UI design emerges from these repeated small decisions as much as from the overall art direction. A component should remain recognisable when it appears elsewhere in the journey.
Spacing that separates related information
A heading, its explanation and its button often form one unit of meaning. When they are too far apart, the reader has to reconstruct that relationship. Conversely, unrelated sections placed too closely can seem to discuss the same subject. Empty space helps communicate structure, even though it contains no text.
In the video, I suggested starting with three spacing values: small, medium and large. That is a simple way to establish reference points. It does not mean forcing every screen into three fixed numbers regardless of its content or constraints. The relationship between groups matters more than rigid arithmetic.
The smallest gap can connect a heading with its paragraph. An intermediate gap can separate items within a group, while a larger distance introduces another section. Review those relationships on a phone, where columns often become a sequence of blocks and the reading order becomes more apparent.
Look for overflow too. Longer text, a translation, a different crop or a button wrapping onto two lines may expose a fragile composition. A useful mockup must support real content, not just the exact wording and image proportions chosen for the presentation.
Comparison: an ambiguous page and a page that guides
Consider a fictional villa-rental offer inspired by the question raised in the video. The alternatives below compare design decisions. They are not conversion-test results or measured outcomes attributed to the reviewed project. Each proposed change still needs examination in the real page and user journey.
The message: atmosphere alone or an identifiable offer
Ambiguous version: a heading such as “Experience the exceptional” accompanies a photograph without further visible explanation. Version to try: “Holiday villas for rent”, followed by the actual service area and a verifiable distinguishing detail. What to check: can the visitor explain the offer in their own words? Evocative language can remain, but it needs a context people can understand without already knowing the business.
The action: vague invitations or a clear next step
Ambiguous version: three “Discover” buttons use different colours and lead to different actions. Version to try: distinguish “View the villas” from “Ask about availability”, with a consistent hierarchy. What to check: can someone correctly predict what will happen after clicking? The label should describe the actual action. It should not promise an immediate price if the next step is a request for a manually prepared estimate.
The grouping: isolated blocks or connected information
Ambiguous version: an unrelated large image separates a villa description from its button. Version to try: group the name, essential details and next action together. What to check: does the reader associate the correct button with the correct offer? Space can make that relationship visible while preserving breathing room. The aim is a legible composition, not simply squeezing every element closer together.
Both versions can retain creative freedom. Design choices become easier to justify when their intended role is explicit and you can observe whether understanding actually improves. The discussion then concerns how the page works, rather than whether someone prefers one visual style in isolation.
Run a short review of your own page
Choose a task without giving away the route, such as finding how to request a villa’s availability for a trip. Let someone unfamiliar with the site explore, then ask what they understood. Note hesitation and backtracking. An initial trial reveals possible problems; it does not represent every visitor or establish a universal response.
Try the journey on a phone and with a keyboard. Check whether the order remains logical, buttons stay recognisable and keyboard focus is visible. When something fails, record the context instead of a general judgement such as “the site is not intuitive”. Specific observations make it easier to decide what needs changing.
Separate content corrections, visual hierarchy, component behaviour and page structure. That helps identify who should act and limits the scope of the work. After changes, repeat the same task. You can then examine whether the observed difficulty has diminished instead of judging the design only because it looks new.
Improve a page or rebuild the website?
Start with one important page and action. Clarify the message, organise the buttons and bring related elements together. Check the result on mobile, with a keyboard and with someone discovering the offer. Those observations provide a basis for deciding what the next stage should involve.
If the problems recur throughout the site and the templates prevent coherent corrections, a website redesign may be appropriate. If a few focused changes are enough, identify them before expanding the project. The scope should follow the demonstrated limitations rather than the appeal of starting over.
A website does not have to lose its personality to become understandable. Strong imagery, animation and distinctive compositions work better when visitors already know where they are and what is being offered. Clarity gives the creative direction a role in a journey people can actually follow.
FAQ: identifying website design mistakes
Can an original website still be easy to understand?
Yes. Originality can come from imagery, composition, typography or movement while clear reference points remain. Visitors need to understand the offer and recognise actions. Test the places where the design changes familiar navigation habits. Those are often the moments that reveal whether additional explanation or adjustment is needed for the intended audience.
Should every animation be removed?
Examine each animation’s purpose. It may explain a transition or give the page character. It becomes a problem when it hides information, delays action or disrupts reading. Check the journey with reduced-motion settings where the site supports them, and correct effects that interfere with use. The decision should follow their behaviour, not a blanket preference for or against animation.
How can we prioritise with a limited budget?
Start with ambiguities that prevent people from identifying the offer or completing the main action. A precise heading or accurately named button can be a focused first task. Then examine repeated component problems. Keep before-and-after observations to guide further work, without assigning an unmeasured commercial gain to every visual change you make.
When is a redesign more suitable than small changes?
Consider it when problems span many pages and existing templates obstruct a coherent correction. Examine content, features and mobile use too. A website redesign project should start from those concrete limits and specify what will be retained, improved or replaced. That makes the decision easier to assess than a general claim that the site needs modernising.