In general, I use buttons for ajax calls that update the UI but am thinking whether a button is a good metaphor for links also. I am using Twitter Bootstrap. Not a designer by trade and would like any opinions on this.

The reason I would like to use buttons is that because it is a very busy admin site with a lot of links and I think having a consistent link metaphor is more important than having buttons for ajax and text for links.

Any opinions on whether my thinking is ok?

  • Are they "links" that function purely as navigation or are they links to perform action (even if not necessarily on-page AJAX action)? They they are navigation, are they part of a bar or something that could more accurately use a tab/button metaphor or are they just scattered on the page? Could you mock up an example?
    – Ben Brocka
    Oct 5 '12 at 19:47
  • 2
    Buttons are usually a way to signify an interaction that changes data. Links are usually a way to signify navigation between pages. And then there are tons of exceptions.
    – DA01
    Oct 5 '12 at 20:38
  • @ben - it's basically a list of items that are editable. It previously was a big webform but I've changed it to be individual items that have update functionality. We're kinda in the midst of mocking it up and that's why I'm asking.
    – timpone
    Oct 5 '12 at 20:57
  • Per your title, I wouldn't suggest trying to aim for a consistent style, but a consistent user interface. They may or may not be the same thing.
    – Matt
    Oct 5 '12 at 21:47
  • actually title was edited, not a big deal. I'd kinda agree with your comment but this is definitely a special case (hence asking question). Wanted some feedback before we spend an hour talking with a designer (which we would have)
    – timpone
    Oct 5 '12 at 22:40

I fully agree with the answer of Juan Lanus, especially about the label part ("go" vs. "do").

Also, keep in mind that a UI fragment should be as big and visible as it's important and meaningful to the user. As a button catches the eye more efficiently than a simple link, you should ask yourself if the link you provide is truly useful to the user.

By example, it's not uncommon to see a simple link just against a plain button, even if the two are action triggers, like at the end of a form.


download bmml source – Wireframes created with Balsamiq Mockups


Button vs. text is an option.
Other option was suggested by Ben: nav area menu vs. actions area.
Anything is OK as long as the user gets the message.

IMO of paramount importance is the labeling of these artifacts, like [change title] communicating an AJAX action, and go to the other page communicating a link.
Labels in AJAX buttons have to be labeled with actions, while labels in links have to name destinations.

Links in buttons can be furnished by an indication of their nature, like an arrow. For example [go to the other page →]. The arrow (or whatever) has to be after the end of the text.
This arrangement is usual in text pages to tag links taking the user to a different site with an arrow pointing up and right. A horizontal arrow might mean other page of this same site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.