Usability of Buttons versus Links for Navigation

28 Jul 2009 - 5:25pm
5 years ago
24 replies
4116 reads
Gayatri N
2009

Hello Everyone,

I am wondering if using buttons or navigational elements that look
like buttons(for e.g BACK link) are intuitive?

Let me give you guys some context here:

I am working on designing a knowledge base interface where a user can
look for articles and click on a particular link to read that article.
In the article page on the top I had a "BACk" link that would take
the user to previous page/results page.

Based on some feedback I changed the "BACK" to look like a button.
I am not sure if buttons should only be used to submit data and not
for navigation?

I personally think with it doesn't matter as long as the link/button
does what a user expects it to do.

I would really appreciate your thoughts on this.

Thanks,
GN

Comments

29 Jul 2009 - 2:26am
Ariel Leroux
2009

>From my experience, a button is usually significant in a "moving
forward" "submitting" ... as in "dong something".

However, I have encountered imballances in my design work which
required a sort of hybrid. For a user to easily navigate and move
"forward" without having to think much on it, usually it'll be
larger and more obvious, for the Left-to-right, Top to bottom
cultural settings, either the top-right or bottom right would be the
best use for forward, but for backwards - perhaps try something that
is smaller with a backwards facing arrow. Iconic, but not quite as
"buttonish" as the forward.

Sometimes just a simple link with an icon to the left of it works as
well.

I'd play with it in a few variations to see what works best.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

29 Jul 2009 - 2:53am
Yohan Creemers
2008

Based on convention I would say that hyperlinks indicate navigation,
buttons indicate actions. To differentiate navigating from acting:
navigating doesn't change any data, is reversible; acting does
change data or is not reversible. I would put Back and Cancel under
navigating, and Submit, Save, Print, Email under acting.

The following example from Luke Wroblewski's book 'Web Form Design:
Filling In the Blanks' illustrates the idea:
http://tinyurl.com/nghzbw

- Yohan

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

29 Jul 2009 - 2:50am
Claudia Oster
2009

Hi,

I also know the problem particularly when I discuss with developers.
Often I have the situation that we have a form that can be submitted
(so we have a "save" or "ok" button) and we have a "cancel"
button.

The points we discuss is:
- do we need a cancel button on a website where you can click
somewhere else and you can start again - and
- should the cancel button look like a button or a link - because the
developers opinion is, that it works like a link so it should look
like a link.

My opinion is that in most of the cases the user don't know what
happens behind the UI so he don't have a problem that it look like a
button.

Moreover a button has the advantage that it is better visible and if
the user often uses this functionality and doesn't find it at the
first sight you can use the "button" design (or as Ariel mentioned
to support the link with an icon).

Br, Claudia

***
http://usabilitytalks.blogspot.com
http://twitter.com/usabilitytalks

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

29 Jul 2009 - 6:19am
Uidude
2009

Hi

If you see gmail interface, they have a 'Back to Inbox' text link
unlike its adjacent buttons. This is to make the back more prominent
for the user and also that it is in blue underlined (a convention for
links).

You can use the button if that is the only button in that row or
column, or you could use the blue underlined link as gmail has. The
point is to show the difference in appearance thereby making it stand
out from the other trigers (links).

The reason others suggested you to change the link to a button may be
because you already have several similar looking links within the
article. Hence to make the 'BACK' look different from them, button
is advisable.

>From a functionality point of view, link or button doesn't matter
much. From a usability point of view, a button will definitely stand
out from a number of links on the same page.

--
Shivan Kannan
%u2605 uidude.com
%u2605 uidude.wordpress.com
%u2605 twitter at uidude

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

29 Jul 2009 - 9:56am
Kevin Doyle
2007

GN,

My general rule of thumb for links vs. buttons is this: links take
you places, buttons perform an action. However, in form submission or
a wizard-like submission process (especially in applications), I've
found that users expect to see buttons to continue, cancel, edit or
go back in the process.

In the situation you describe, I think the expected convention would
be a link back to the page they started on. Instead of just saying
"Back", however, you might want to try a more descriptive link --
something like "Return to Previous Page" or "Return to [Page
Name]".

Hope that helps,
Kevin

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

29 Jul 2009 - 11:27am
jonkarpoff
2009

I'd say use buttons if it something you WANT the User to do vs. links for
things Users CAN do. Also there should be primary and secondary level
buttons with only one primary button per functional area - the acion you
REALLY want the User to chose... The "SUBMIT ORDER" comes to mind.

Jon Karpoff
Senior Partner
Director User Experience
Office: 1-212-237-5516
Cell: 1-914-419-4151
Email: jon.karpoff at ogilvy.com

We few, we happy few
636 11th Ave, New York, NY 10036.

Shivan Kannan
<shivan.kannan at gm
ail.com> To
Sent by: discuss at ixda.org
discuss-bounces at l cc
ists.interactiond
esigners.com Subject
Re: [IxDA Discuss] Usability of
Buttons versus Links for Navigation
07/29/09 10:55 AM

Hi

If you see gmail interface, they have a 'Back to Inbox' text link
unlike its adjacent buttons. This is to make the back more prominent
for the user and also that it is in blue underlined (a convention for
links).

You can use the button if that is the only button in that row or
column, or you could use the blue underlined link as gmail has. The
point is to show the difference in appearance thereby making it stand
out from the other trigers (links).

The reason others suggested you to change the link to a button may be
because you already have several similar looking links within the
article. Hence to make the 'BACK' look different from them, button
is advisable.

>From a functionality point of view, link or button doesn't matter
much. From a usability point of view, a button will definitely stand
out from a number of links on the same page.

--
Shivan Kannan
%u2605 uidude.com
%u2605 uidude.wordpress.com
%u2605 twitter at uidude

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

Privileged/Confidential Information may be contained in this message. If you are not the addressee indicated in this message
(or responsible for delivery of the message to such person), you may not copy or deliver this message to anyone. In such case,
you should destroy this message and kindly notify the sender by reply email. Please advise immediately if you or your
employer does not consent to email or messages of this kind. Opinions, conclusions and other information in this message
that do not relate to the official business of the sender's company shall be understood as neither given nor endorsed by it.

For more information on WPP's business ethical standards and corporate
responsibility policies, please refer to WPP's website at
http://www.wpp.com/WPP/About/

29 Jul 2009 - 1:19pm
Ryango
2009

Buttons intrinsically imply that they will cause an action to occur, as opposed to links, which imply only navigation. Action and navigation are often indistinguishable in web interfaces, so these conventions have become muddled, perhaps increasingly as more functionality surfaces in web interfaces. My preference is to use buttons for actions labeled with verbs (Submit, Delete...) and links for actions labeled with nouns (Favorites, Next Page...). Its unfortunate that this useful and rational convention is typically muddied by attempts to manipulate users' choices though using buttons vs links to influence choice.

29 Jul 2009 - 2:13pm
Elizabeth Buie
2004

At 12:50 AM -0400 7/29/09, Claudia wrote:

>I also know the problem particularly when I discuss with developers.
>Often I have the situation that we have a form that can be submitted
>(so we have a "save" or "ok" button) and we have a "cancel"
>button.
>
>The points we discuss is:
>- do we need a cancel button on a website where you can click
>somewhere else and you can start again - and

I am of two minds on this. I have read some opinions that you don't need
a Cancel action at all (be it a button or a link), that you just need to
provide the user with clear alternatives to proceeding. I'm not convinced
of that, however; at least not in the general case. On the one hand, it
seems to me that people are accustomed to having a Cancel option in dialog
boxes and tend to expect the same elsewhere (e.g., Web apps). On the other
hand, I suspect that "Return to X" would *be* such a clearer alternative.
I do think it should be a button rather than a link, precisely because it
conveys the impression of performing an action rather than simply navigating.

>- should the cancel button look like a button or a link - because the
>developers opinion is, that it works like a link so it should look
>like a link.
>
>My opinion is that in most of the cases the user don't know what
>happens behind the UI so he don't have a problem that it look like a
>button.

I agree with you, Claudia. If it takes an action, make it a button,
regardless of whether it also has the side effect of taking the user
somewhere else. The user expects to see things change on clicking a
"Cancel" button. In this case, navigation is not specifically the user's
intent, and a link is not the appropriate mechanism for it.

Elizabeth
--
Elizabeth Buie
Luminanze Consulting, LLC
web: www.luminanze.com
twt: @ebuie

29 Jul 2009 - 2:53pm
Sam Murray-Sutton
2009

My initial response would be - surely the users can just use the back
button? Unless there's specific reasons you've identified why this
won't work for your project of course.

Assuming you do need an element on the page that takes the users
back, then I would agree with the others here that you need to stick
with the conventions of links as navigation and buttons as actions.

So make it a link and make it descriptive as already mentioned, so
that the user can remember where they came from.

Sam

@superdeluxesam

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

29 Jul 2009 - 9:36pm
Lisa Rex
2009

Have you considered calling the link 'Return to search results' if
they've arrived via site search results? Do you really need a back
link / button for other situations? What if they've arrived via
search engine?

I'd let the browser Back button take priority here, apart from if
they've come via the site's search results.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

29 Jul 2009 - 4:36pm
Matthew Turner
2009

I generally agree with the navigation versus action distinction, as
long as it is from the user perspective--that is, some navigations
seem to the user to be actions and vice-versa.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

29 Jul 2009 - 11:46am
Gayatri N
2009

Thanks a lot guys! The feedback is really helpful.

I initially had an informative/descriptive link to the top left of
the page, above the article title and someone said users would
confuse the "Back to Results Page" link to be the title of the
article. I personally didn't think so because of the color
difference between the link(blue) and the title(black).

I do want to point out that this is the only link on the page and
everything else is addressed in Tabs.

When I thought or Ergonomics, Functionality and Responsiveness of the
Button/Link, the bottom line is whether it would perform what User
would expect it to(in this case, navigate to the previous page) and I
felt it would address the intent. Also, when a users would click on
Back button they are going to expect to be taken to the previous page
and my assumption is they would not stop and think "why is there a
button here instead of a link?".

Once again, thanks for taking the time to share your thoughts.

-Gayatri

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

30 Jul 2009 - 4:38am
Pietro Desiato
2008

I think that a good starting point should be the difference between
primaryu and secondary actions (when talking about forms). In telling
so, I refer to the work done by Luke Wroblewski on form design. In
some cases, having a link is a good way to visually differentiate the
secondary action from the primary one, that i s a button.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

30 Jul 2009 - 6:24am
Elizabeth Buie
2004

At 2:38 AM -0400 7/30/09, Pietro Desiato wrote:
>I think that a good starting point should be the difference between
>primaryu and secondary actions (when talking about forms). In telling
>so, I refer to the work done by Luke Wroblewski on form design. In
>some cases, having a link is a good way to visually differentiate the
>secondary action from the primary one, that i s a button.

Luke's book is good, but I do not accept using a link for an action. If we're
going to use a link to get away from the primary action, it should be clearly
for navigation and must not be labelled like an action.

Elizabeth
--
Elizabeth Buie
Luminanze Consulting, LLC
tel: +1.301.943.4168
web: www.luminanze.com
twt: @ebuie

30 Jul 2009 - 9:56am
ambroselittle
2008

I skimmed this thread with interest. I agree with the proposal that if you
want a specific action to help guide the users to know it is okay (i.e.,
sometimes clicking Back breaks things and may make some folks tentative),
then having a "Back to results" kind of link is good. It's a familiar
pattern that the big boys like Gmail use.
About links for actions, it's pretty well established that this is okay.
See:

Action Links Pattern<http://quince.infragistics.com/#/Main/ViewPattern$pattern=Action+Links>-
cites Nielson
Primary Action Pattern<http://quince.infragistics.com/#/Main/ViewPattern$pattern=Primary+Action>-
cites Tidwell, LukeW, and Welie

You should of course read the rationale, which for Action Links does address
the link=navigation caveat.

-a

30 Jul 2009 - 2:41pm
Cian
2007

Elizabeth Buie <ebuie at luminanze.com> writes:

> At 12:50 AM -0400 7/29/09, Claudia wrote:
>
> I am of two minds on this. I have read some opinions that you don't need
> a Cancel action at all (be it a button or a link), that you just need to
> provide the user with clear alternatives to proceeding. I'm not convinced
> of that, however; at least not in the general case. On the one hand, it
> seems to me that people are accustomed to having a Cancel option in dialog
> boxes and tend to expect the same elsewhere (e.g., Web apps). On the other
> hand, I suspect that "Return to X" would *be* such a clearer alternative.
> I do think it should be a button rather than a link, precisely because it
> conveys the impression of performing an action rather than simply navigating.

I think if you rethink the problem as one of communication then the
requirement becomes a lot clearer.

If the situation is one in which the user has simply lost interest in
the original task, then what they'll be looking for is a route back to
whatever they were doing previously. In which case "cancel" is confusing
and meaningless (what will "cancel" do? Will it clear the form? Take me
to the home page).

If the situation is one in which the user has started a transaction of
some kind, then what they really want to do is kill that transaction
to make sure it doesn't persist, OR they may wish to save the
transaction for later, or whatever. Here "Return to X" isn't going to answer their
question and is therefore unclear and confusing.

Cian O'Connor

30 Jul 2009 - 9:18pm
Elizabeth Buie
2004

At 8:41 PM +0100 7/30/09, Cian OConnor wrote:

>If the situation is one in which the user has simply lost interest in
>the original task...

>If the situation is one in which the user has started a transaction of
>some kind, then what they really want to do is kill that transaction
>to make sure it doesn't persist, OR they may wish to save the
>transaction for later, or whatever. Here "Return to X" isn't going to answer their
>question and is therefore unclear and confusing.

The second is what I was thinking the question was about.

Thanks for expressing it so clearly!

Elizabeth
--
Elizabeth Buie
Luminanze Consulting, LLC
tel: +1.301.943.4168
web: www.luminanze.com
twt: @ebuie

30 Jul 2009 - 9:22pm
Elizabeth Buie
2004

If the current page is a later page of a multi-page form -- i.e., if the
user clicked "Submit" or whatever to get there (I will save my rant against
the "Submit" label for another time) -- then using the Back button will
often produce a dialog box asking whether or not to submit the data again.
I am completely opposed to relying on the use of the Back button as a way to
get around completing a form. We may not be able to prevent it, but we *must*
use a means that does not require people to use it.

Elizabeth
--
Elizabeth Buie
Luminanze Consulting, LLC
web: www.luminanze.com
twt: @ebuie

31 Jul 2009 - 2:00pm
Gino Rodrigues
2008

Users are rarely aware about beeing acting or navigating.

I decide by using links for everything, and buttons for the most important
items. The concept of *importance* vary: action, goals, priority or even
impact (like deletion).

Example: the Tasks window of Google Calendar, that shows:

- a button for "Close" (which many consider "navigation")
- a link for "Delete" (which many consider "action")

[image: Untitled-1.jpg]

I *always* think twice when closing that window, and there is no
conventional upper-right "X", as for Events.

Gino Rodrigues
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 41477 bytes
Desc: not available
URL: <http://lists.interactiondesigners.com/pipermail/discuss-interactiondesigners.com/attachments/20090731/fac738b0/attachment.jpeg>

31 Jul 2009 - 11:35pm
Elizabeth Buie
2004

At 4:00 PM -0300 7/31/09, Gino Rodrigues wrote:

>Users are rarely aware about beeing acting or navigating.

I think that's at least partly because too many designs mix up the affordances,
using one for the other.

Elizabeth
--
Elizabeth Buie
Luminanze Consulting, LLC
web: www.luminanze.com
twt: @ebuie

1 Aug 2009 - 3:54am
Sascha Brossmann
2008

On Thu, Jul 30, 2009 at 21:41, Cian OConnor<cian.oconnor at gmail.com> wrote:
> If the situation is one in which the user has simply lost interest in
> the original task, then what they'll be looking for is a route back to
> whatever they were doing previously. In which case "cancel" is confusing
> and meaningless (what will "cancel" do? Will it clear the form? Take me
> to the home page).

Why should 'cancel' clear/reset the form (in HTML there's even a
special 'reset' button for this – one that is IMHO 99.9% useless)? Why
should 'cancel' take one to the home page? Designs that do so should
ASAP cease to exist. Personally, I'd expect 1) to be taken back to
were I initiated the action calling up the form and 2) that any data
entered would not persist. And I've yet to encounter anybody having
trouble with the implementation of this. :-)

> If the situation is one in which the user has started a transaction of
> some kind, then what they really want to do is kill that transaction
> to make sure it doesn't persist, OR they may wish to save the
> transaction for later, or whatever. Here "Return to X" isn't going to answer their
> question and is therefore unclear and confusing.

I second that.

On a side note, as this came up in one of the other posts: I would
never rely on the browser's back button for navigation. Believe it or
not, but I've seen far too many people practically never use them.

Sascha Brossmann
--
&:create

1 Aug 2009 - 4:37pm
Elizabeth Buie
2004

At 1:28 PM -0400 7/31/09, gayatri n wrote:

>This page is simply to read an article and when done reading be able
>to go back to the results page.

Aha. Then it is clearly not a candidate for "cancel" because there is nothing to cancel. What you want is navigational, not transactional. I'd use a link.

Elizabeth
--
Elizabeth Buie
Luminanze Consulting, LLC
tel: +1.301.943.4168
web: www.luminanze.com
twt: @ebuie

4 Aug 2009 - 3:50am
Cian
2007

gayatri n <narlagayatri at yahoo.com> writes:

If they're reading an article, might it not be better for the "search
results" to appear on the page with the article? There are various ways
in which you could do this, ranging from something akin to an email
client (outlook/thunderbird/etc), to google reader. Or if they're only
looking for a single article, then I'd offer other ways out as they may
well not want to go back to the search results.

> Thanks guys, for all the input.
>
> Seems like there are questions regarding transaction that is going to
> take place on the page.
>
> This page is simply to read an article and when done reading be able
> to go back to the results page. When I look at browser back "links"
> they are actually icons that visually communicate what will happen
> when a users clicks on it. My intent is the same as well with a very
> slight change in the context.
>
> GN
>
>
>
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=44185
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

4 Aug 2009 - 3:04pm
dirtandrust
2008

I say whatever you do, do it consistently and the user will get it.
Even interfaces and navigational elements that break the mold do so
with a purpose; no matter how much grunge or "web 2.0" is applied
to the situation.

Regarding the point about the Cancel button, I say leave it in. There
are many users (more than you might think) who still double click
links in a browser as if they are on their desktop, so don't take
any action for granted. :)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44185

Syndicate content Get the feed