A visitor spends just a few seconds on a page before deciding whether to stay. During those seconds, they don’t read—they scan. They’re trying to figure out where they’ve landed, whether it’s for them, and what to do next. A successful interface answers these three questions without the user having to ask them.
Visual Hierarchy: One Thing at a Time
On every screen, a single piece of information should take center stage. If three elements are all shouting at once, none of them gets heard.
Hierarchy is built using just a few tools: size, contrast, space, and position. The most underrated of these is space. An element surrounded by empty space draws the eye more than an element enlarged and placed among others. Squeezing the margins to “fit more in” destroys precisely what made the message readable.
A simple rule for testing a page: squint until the text becomes blurry. What remains visible is what the visitor will see first. If that’s not what you wanted to highlight, the hierarchy needs to be revised.
Bring Together What Belongs Together
Two elements that are close together are perceived as related; two elements that are far apart are perceived as distinct. This is automatic and unavoidable.
The most common mistake is to space elements uniformly. A label must be significantly closer to its field than to the previous field; otherwise, the reader has to guess what it refers to. A heading must be closer to the paragraph it introduces than to the one preceding it. These details go unnoticed when done correctly—they become tiresome when done incorrectly.
Readability: Measured, Not Assumed
A few guidelines to avoid most problems:
- Line length: between 50 and 75 characters. Any longer, and the eye gets lost when moving to the next line.
- Body text size: at least 16 pixels on mobile devices. Any smaller, and the reader will zoom in—or leave.
- Line spacing: about 1.5 times the text size for paragraphs.
- Contrast: at least 4.5 to 1 between the text and its background. Light gray on white looks elegant in a mockup but is unreadable in direct sunlight on a phone.
These values aren’t just opinions: they meet accessibility standards, and they benefit everyone—including the customer in a hurry who’s reading your content outdoors.
Forms: Every Field Comes at a Cost
Every additional field causes some visitors to abandon the form. The question to ask for each one: Do I really need this information right now? The phone number, job title, and company name can often be requested later in the conversation.
A few principles that reduce the abandonment rate:
- Labels visible at all times, not just inside the field: they disappear as soon as you start typing, and the reader no longer knows what they’re filling out.
- Errors displayed next to the relevant field, in plain language: “The @ symbol is missing from the email address,” not “Invalid input.”
- Validation at the right time: flag the error when the user leaves the field, not after the third letter is typed.
- Explicit confirmation after submission. A form that clears without saying anything suggests the submission failed.
Signs of Trust
On a service website, the interface also conveys credibility. Some elements carry more weight than their implementation cost:
- Portfolio items with their context, date, and, if possible, their online address
- A visible contact method that doesn’t require searching
- Pricing or at least order-of-magnitude estimates, when possible
- An email address on your own domain rather than a generic address
Conversely, recognizable stock photos and anonymous testimonials have the opposite effect of what’s intended.
The Reality: What Happens When Things Go Wrong
An interface is judged by its edge cases, not by its promotional screenshot. Four situations to address explicitly:
- Loading: Show that something is happening, without breaking the layout when the content arrives.
- Empty: A list with no results should explain why and suggest next steps, not remain blank.
- Error: Explain what went wrong and what the user can do.
- Success: Confirm the action unambiguously.
Mobile-First, for Real
Designing for the small screen first forces you to prioritize: there isn’t room to highlight everything. The opposite approach—designing for the desktop first and then “adapting”—results in mobile interfaces where the essentials are buried under three levels of navigation.
Check the touch areas: a touch target should be at least 44 pixels on each side, and the main actions should fall within thumb reach, not at the top of the screen.
Key Takeaways
A good interface goes unnoticed. It doesn’t make people say, “What a beautiful site”; it makes them take action—call, write, buy. You can apply the principles above one by one to your own pages, without any tools or special expertise.
And when the site also needs to be found before it can be judged, the fundamentals described in Technical SEO come before everything else.