4

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?

6
  • 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, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 22:40

2 Answers 2

2

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

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 and acknowledge you have read our privacy policy.

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