Buttons and links for website navigation

Question

I've just been reading Zusch's comments on his blog about buttons and links and their functions, where he advocates that buttons should execute commands and links should link to content (Links and Other Wrong Controls, scroll to "Link misuse")

I can see the logic in this, and would be happy to apply this principle within a web page. But surely this logic implies doing away with primary (not to mention secondary, etc.) website navigation buttons altogether - seems a bit radical.

Also, doesn't this go against the overwhelming majority of websites which use buttons as their primary and secondary, and often tertiary navigation interaction elements?

Do the proponents of this view seriously advocate that we do away with pretty button menus for navigation in websites?

As an example, we could take the UX homepage. We see three (ignoring the search box) different navigation elements at the top right of the page:

1. log in, chat, etc.
2. Questions, Tags, etc.
3. Ask Question

Now,

1. is a quasi-link, not underlined unless you rollover it.
2. is a quasi-link, not underlined at all, but it changes colour on rollover.
3. is a button, but doesn't look much like one (little 3D effect)!

Would the advocates of Zusch's view claim that these links (1. and 2.) are better than buttons for the reasons stated above? Would they ignore the lack of coherence between the two types of links (1. and 2.)? or would they keep the links but improve the coherence?

Finally, would they be happy to sacrifice the aesthetic appeal of buttons for the rather boring look of links?

I'm not beating any ideological drum here. I genuinely see the logic of Zusch's position, but I would like to hear other people's opinions on its consequences.

Answer 1

Also, doesn't this go against the overwhelming majority of websites which use buttons as their primary and secondary, and often tertiary navigation interaction elements?

Can you provide an example?

Do the proponents of this view seriously advocate that we do away with pretty button menus for navigation in websites?

Links for navigation are a better design locally, but the aesthetic advantages for button navigation on a particular site could outweigh that advantage globally. And because users perceive attractive interfaces as more usable, that could be more important.

As an example, we could take the UX homepage. We see three (ignoring the search box) different navigation elements at the top right of the page:

log in, chat, etc. Questions, Tags, etc. Ask Question Now,

1. is a quasi-link, not underlined unless you rollover it.
2. is a quasi-link, not underlined at all, but it changes colour on rollover.
3. is a button, but doesn't look much like one (little 3D effect)!

What makes something look a 'button' or a 'link' isn't whether the text is underlined, but whether that content stands in a box. That's what users consistently identify as a 'button'. So, 1 and 2 easily identify as links, and 3 as a button. The 3D effect is a nice-to-have, but even without it, users won't see "Ask Question" as a link.

Answer 2

Doesn't this go against the overwhelming majority of websites which use buttons as their primary and secondary, and often tertiary navigation interaction elements?

Even if it isn’t the majority of websites that use buttons for navigation, I would agree that if enough do, then we’ve destroyed the user expectation that links navigate and buttons command, and the war is lost. It’ll be like arguing that visited links should appear purple. It’s too late for that now. From my casual observation, I think users still have different expectations for buttons and links. What do others think?

Do the proponents of this view seriously advocate that we do away with pretty button menus for navigation in websites?

Would they be happy to sacrifice the aesthetic appeal of buttons for the rather boring look of links?

From what I can tell, users expect a “link” to be colored text on a light background, with a bluish color and static underlining optional. They expect a “button” to be a shaded bordered elongate shape (e.g., rectangle, oval), with a static 3-D look optional. Personally I believe that leaves plenty of latitude for aesthetic expression.

I would certainly object to selecting between a button or a link based on aesthetics. To me, that’s just as bad as choosing between a radio button and checkbox based on how they look. If your links look boring, spruce them up as links. Try a more interesting font or color or add an icon or use bold typeface. Likewise, if your buttons are too bold and distracting, tone them down as buttons. Give them more subtle shading, fainter borders, smaller size, or less 3-D.

Would the advocates of Zusch's view claim that these links (1. and 2.) are better than buttons for the reasons stated above? Would they ignore the lack of coherence between the two types of links (1. and 2.)?

If I were a purist, I guess I would argue that navigation menus need to be consistent with link appearances on a site (e.g., be dark-on-light color text if used for navigation). However, I think users already regard light-on-dark lists on the side or top to be sets of navigation links, so it’s not much of a problem. Menus should continue look like what users expect web page menus to look like.

Non-menu controls are a different matter. When I first started visiting this very site, I both clicked (or at least hovered) on things that weren’t links and failed to notice links that were there because of the inconsistent way links are rendered in the body of the page. I don’t think it’s asking too much to give all non-menu navigation links the same color in a site. If that makes the site too aesthetically monochromatic, then find some other way to add color. I trust artists to show some imagination.

Answer 3

The way I read this:

Buttons actions commands and links link to content.

is that

POST is for create/update, GET is idempotent.

More than just usability issue, a search engine expects a GET request to be idempotent and so will follow them. This means if you have a link that deletes the current page content, then a search engine crawling the site might accidentally delete all pages in your site. Not only search engine, some users might use tools that displays website previews or prefetch links or something else that will download links and so hovering over non-idempotent link could cause unexpected behaviors.

Aside from that, there is an issue that user expects that anything that looks like links to be safe to click and anything that looks like buttons may do modifications. @Jimmy Breck-McKye made a good point that the box is what separates links and buttons. Strictly speaking, "Ask Question" button should better not have a boxed look (although it does actually uses an <a>/link, so it is semantically correct), instead it should look just like the other links, however there is a valid point that "Ask Question" is the button that most new users would be searching for and a little bit of highlighting would help.