UX design: visitors find what they are looking for, and act

Most disputes about design are really unresolved questions about the goal. Before a single sketch is made, you should be able to answer these five questions in writing. If one answer is hard to give, that is the real brief.

First: what should a visitor have done by the end of the visit? Name exactly one main action, such as “request an initial consultation”, “call” or “download a quote”. If you name three goals of equal importance, you have none. Secondary actions may exist, but they carry less weight.

Second: who comes, and with what need? Describe two or three typical visitors in one sentence each, for example: “A property manager urgently needs a firm for a burst pipe” and “A client building a house is calmly comparing three suppliers for the building services”. They need different ways in.

Third: on which device and in what situation? On the move with a phone, or at a computer in the office? Under time pressure or just browsing? That decides whether the phone button or the detailed description of services belongs at the top.

Fourth: what does the visitor have to believe before acting? That you can do what you offer, that you can be reached and that there are no hidden conditions. Each of these beliefs needs evidence on the page, for example a concrete project report, an address with a phone number or a clear description of the process.

Fifth: what stops visitors from acting? Uncertainty about costs, fear of sales pressure, a form that asks for too much. Write down the three biggest obstacles. Good design removes them one after another.

Not every page has the same goal. The following questions help you decide how an individual page is built. Go through them for each page and note the result.

1. Does the visitor arrive with a specific question (for example from a search)? Yes: begin with the answer in two to three sentences, then the details. No: go to question 2.
2. Is the page a junction (home page, overview of services)? Yes: a few clear paths with descriptive labels, no long text. No: go to question 3.
3. Is a decision meant to be made here (enquiry, purchase, appointment)? Yes: benefit, evidence, process and action, in that order; no distraction from links to other pages. No: go to question 4.
4. Does the page serve orientation (about us, process, facts)? Yes: a short summary at the top, the detail below, and at the end a link to the next action.
5. Would a visitor be surprised to land here? If so, a sentence is missing that explains where they are and how to move on.

The result is often sobering: many pages have no discernible goal. It is then worth asking whether the page should be removed, merged or given a new purpose.

On screens, people rarely read word for word. The eye jumps from heading to heading, catches on numbers, lists and bold text, and only dives deeper where it expects to find the answer. Design can support this or get in the way.

Line length: lines that are too long tire the reader, because the eye has to hunt for the start of the next line. As a rule of thumb, aim for about 60 to 80 characters per line. On large monitors that means the text does not get the full width, but a column of limited width.

Paragraphs: a paragraph carries one idea. Packing five ideas into one paragraph makes it hard to find a particular piece of information. Three to five lines on a phone is a good size.

Subheadings: they are signposts. Good ones contain a statement (“Maintenance does not cost this much”), weak ones are labels (“Further information”).

Lists and tables: bullet lists suit points of equal rank, numbered lists suit processes, and tables suit comparisons with several properties. A table with three columns often replaces three paragraphs of running text when visitors want to compare.

Emphasis: bold only works if it is rare. Mark key terms, not whole sentences. Underlining is reserved for links, so that nobody clicks on text that is not a link by mistake.

Contrast and size: light grey text on white looks elegant and is hard for many people to read. Body text should be legible on a phone without zooming. More on this under accessibility.

A small landscaping business (entirely invented) has a website with seven pages. The home page opens with “Welcome to Grünwerk”, followed by three photos in a carousel, then a text about the founding of the company. The menu contains Home, About us, Services, Gallery, News, Partners, Contact, Legal notice. The contact form has ten mandatory fields. Anyone who wants to call finds the number only in the legal notice.

Observation with five test participants

• All five look for the phone number and only find it after more than a minute.
• Three do not understand from the home page whether the business looks after private gardens or commercial grounds.
• Two open the gallery, find twelve pictures with no description and go back.
• All of them run into fields that are too small on the form when using a phone.

What is changed

1. The heading now reads “Garden design and maintenance for private households in the region”. Below it are two buttons: “Request a call back” and “Call us”.
2. The carousel gives way to one picture with a short description of a real project.
3. The menu has five items: Services, Projects, Process, About us, Contact. “News” and “Partners” move to the footer.
4. The gallery becomes “Projects”: three pictures per project (before, during, after) with two sentences: what was the task, what was done?
5. The form has three fields, with the note “We will get back to you within one working day” beneath it.

Whether the changes work is then checked again with test participants: do they now find the number in under ten seconds? Does everyone understand who the business works for? Only observation shows this. An improvement remains an assumption until someone outside the team has confirmed it.

Design cannot be judged on gut feeling alone. You do not need big tools for this, but a few fixed figures that you compare before and after a change.

Enquiries per period: count form enquiries, calls and emails over at least four weeks before and after a change. There are always fluctuations; look for patterns over several weeks, not for single days.

Paths to the contact page: with privacy-friendly analytics you can see how many visitors find their way to the contact page and how many of them submit. If the first figure falls, the guidance is the problem; if the second falls, it is the form.

Questions on the phone: over two weeks, note what callers ask about. Anything that should be on the page but is being asked about belongs nearer the top.

Observation with test participants: after larger changes, repeat the task test from the self-test. It takes half an hour and gives pointers that no statistics show.

Caution with conclusions: the time of year, advertising, the weather or industry events change visitor numbers. So where possible, change one thing at a time, so that it stays clear what had an effect. Anyone who changes ten things at once learns nothing about the individual ones.