Links vs Buttons

From perpendicular angel knowledgebase
Revision as of 16:24, 15 June 2020 by Kirabug (talk | contribs) (Created page with "“Should this be a link or a button?” is one of those devious architectural and semantic questions that looks like it should have a simple answer but does not. It did onc...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

“Should this be a link or a button?” is one of those devious architectural and semantic questions that looks like it should have a simple answer but does not.

It did once, when people were using the web strictly for hypertext and the occasional form. Then Web 2.0 came along and made everything app-like and the whole decision-making process fell off a cliff.

Links go places. Buttons do things.

This is essentially the first rule of deciding between the two, and stems on whether the interaction you want to create will take the user out of their current context or keep them in the current context but somehow transform the information.

If you’re moving the user to a new context, use a link.

If you’re transforming the information in the current context (adding, removing, reordering, editing, submitting, clearing), then use a button.

Links look like links. Buttons look like buttons.

Once again harkening back to ye olden days, at the beginning of the web it was impossible to mistake a link for a button because all links were blue text and all buttons were grey boxes with rounded corners and a gradient or bevel. Users knew what to expect of links, and they knew what to expect of buttons. Designers couldn’t restyle one to look like the other because CSS didn’t exist yet.

Fast-forward to 2020 and the current state, where we can make a link look and behave like a button, and a button look and behave like a link, and a stack of divs with a pile of Javascript look like either a button or a link and behave any way we want, and we have a semantic mess on our hands.

Jakob’s Law tells us that our users want our site to behave like all the other sites they use, and that means if it looks like a link they want it to behave like a link, and if it looks like a button they want it to behave like a button.

Where does the difference between a button and a link start and end? I’m not sure anyone can say for sure, but there’s definitely a problem when our buttons are so unstyled (or our links so decorated) that users can’t predict what they’re going to do. Usability testing is key here.