Distinguish a destination from an action

Moving to a service page or a section of the current page calls for a link with a destination. Submitting a form, applying a selection or opening a dialog is an action. The W3C button pattern explains this distinction and button activation with Enter and Space. Calling everything a “button” in a design file does not mean everything should use the same underlying element.

One label can hide three different outcomes

On an illustrative consultancy website, “Get a quote” might lead to a separate brief page, making it a link. If the same label opens an enquiry dialog, it acts as a button and the dialog behaviour belongs in the project scope. At the end of the form, “Send enquiry” describes submission more clearly. These are example design decisions, not claims about features delivered for a particular client.

Preserve the choices visitors expect

For a project detail destination, copying its address and choosing another tab can be useful. For an action that saves a selection, opening a new tab is not the expected result. Review more than a normal mouse click: inspect the context menu, keyboard focus and clarity of the outcome. If something looks like a small text link but performs an action, make that purpose clear in its presentation and accessible name.

A five-minute review

  • List three important homepage controls and their intended outcomes.
  • Check that each navigation link has a real destination.
  • Reach the controls with Tab and look for visible focus.
  • Try buttons with Enter and Space without accidentally submitting real data twice.
  • If a dialog opens, check where the user returns when it closes.
  • Read Turkish and English labels against the behaviour: “Send” and “Explore” promise different outcomes.

Include behaviour in the design handover

Beside each important control, document its destination or action, loading state, error state and focus after completion. A short note reduces ambiguity between visual approval and implementation. Our external link guide covers the separate decision of opening a new tab. In a website design project, review appearance and operation together.

A practical handover table can contain “Project details: destination address”, “Apply filters: update the list” and “Send enquiry: submission result”. Record the expected feedback beside each. The designer and developer can fill it in while looking at the same screen. Visitors do not need technical terminology in the interface; they need a clear label and the outcome it promises.

Frequently asked questions

Can a link look like a prominent button?

Yes. Visual emphasis and underlying function are separate decisions. Preserve link behaviour when it leads to a destination.

Should every control use the same colour?

Not necessarily. Use a consistent design that communicates priority and purpose; colour alone should not explain behaviour.

Sources & further reading

W3C WAI — Button pattern ↗
Web design & developmentLet’s discuss this service ↗