Button placement

8 Nov 2006 - 12:52am
7 years ago
4 replies
1314 reads
Lisa Westbrook
2006

From: lisa at lisawestbrook.com
Subject: Button placement
Date: November 7, 2006 2:06:02 PM PST
To: discuss at ixda.com

Hello:

The tab button question brings up something I had been meaning to
ask Is there a standard for button placement in web applications?

In a wizard or guide, I usually go with the forward to the right and
the cancel or back to the left. But in an application I have several
form type pages: running reports, changing settings, etc. My plan
had been to follow the way I had previously done it with the submit
or get report or other positive action on the right and cancel or
clear form or whatever on the left.

When I watch users though, they seem to pause for a minute on the
left most button before moving to the right, like they wish it was
there. When I ask, they admit to thinking it would be good to have
it there, but immediately say it's fine with it on the right. One
even pointed out that it is farther to go on a web page to click the
right button and the mouse would be closer to the left button.

So my question is; is there a standard? I haven't seen enough of
this behavior to justify changing it around, but I want to make sure
it is inline with expectations for all the users I can't observe.

Thanks for the assistance:
Lisa

Comments

27 Dec 2006 - 12:27am
Ashish Tibrewal
2005

Hello,

I have a similar question. Though I know that what I will be asking for
should have been already known to me, but am sorry for asking such basic
question.

I need to know about the order of the Submit & Cancel button in a contact
form. According to the tab order, it should be Submit > Cancel, but as the
right side button is considered for going to the next step (in a wizard), I
would prefer the order as Cancel > Submit.

Kindly help me in knowing about your thoughts.

Thanks
Ashish

On 11/8/06, Lisa Westbrook <lisa at lisawestbrook.com> wrote:
>
> From: lisa at lisawestbrook.com
> Subject: Button placement
> Date: November 7, 2006 2:06:02 PM PST
> To: discuss at ixda.com
>
> Hello:
>
> The tab button question brings up something I had been meaning to
> ask Is there a standard for button placement in web applications?
>
> In a wizard or guide, I usually go with the forward to the right and
> the cancel or back to the left. But in an application I have several
> form type pages: running reports, changing settings, etc. My plan
> had been to follow the way I had previously done it with the submit
> or get report or other positive action on the right and cancel or
> clear form or whatever on the left.
>
> When I watch users though, they seem to pause for a minute on the
> left most button before moving to the right, like they wish it was
> there. When I ask, they admit to thinking it would be good to have
> it there, but immediately say it's fine with it on the right. One
> even pointed out that it is farther to go on a web page to click the
> right button and the mouse would be closer to the left button.
>
> So my question is; is there a standard? I haven't seen enough of
> this behavior to justify changing it around, but I want to make sure
> it is inline with expectations for all the users I can't observe.
>
> Thanks for the assistance:
> Lisa
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

27 Dec 2006 - 4:18am
Bruce Esrig
2006

Is "Submit" the best possible button label? The meaning seems to
acknowledge a relationship with the server/service (smiley here) rather
than focus on the sense of completion or partial completion.

A user in the middle of a partially-completed multi-page task might say
"Next" or "Continue" (or "Next >" or "Continue >"). "Next" reminds the user
that they are using a multi-page form, while in comparison, "Continue"
focuses on the task.

For completing a portion of a task, the word to use might depend on whether
the user is at a checkpoint. A checkpoint would permit the user to drop out
of the interface and yet be able to resume from that point later. "Save"
seems suitable when the user is at a checkpoint. Another word such as
"Submit" might be needed when the user completes a portion of a task, but
is not at a checkpoint. But in such cases, I'd usually prefer "Next" and
"Continue", unless the purpose is to reinforce the idea that the user is
obligated to complete certain activities through the interface.

Best wishes,

Bruce Esrig

Jim Drew wrote:
> Tab order should be subservient to button placement, not dictating
it. If you change where the buttons are, tab order should reflect that.

At 12:27 AM 12/27/2006, Ashish Tibrewal wrote:
>Hello,
>
>I have a similar question. Though I know that what I will be asking for
>should have been already known to me, but am sorry for asking such basic
>question.
>
>I need to know about the order of the Submit & Cancel button in a contact
>form. According to the tab order, it should be Submit > Cancel, but as the
>right side button is considered for going to the next step (in a wizard), I
>would prefer the order as Cancel > Submit.
>
>Kindly help me in knowing about your thoughts.
>
>Thanks
>Ashish
>
>
>On 11/8/06, Lisa Westbrook <lisa at lisawestbrook.com> wrote:
> >
> > From: lisa at lisawestbrook.com
> > Subject: Button placement
> > Date: November 7, 2006 2:06:02 PM PST
> > To: discuss at ixda.com
> >
> > Hello:
> >
> > The tab button question brings up something I had been meaning to
> > ask Is there a standard for button placement in web applications?
> >
> > In a wizard or guide, I usually go with the forward to the right and
> > the cancel or back to the left. But in an application I have several
> > form type pages: running reports, changing settings, etc. My plan
> > had been to follow the way I had previously done it with the submit
> > or get report or other positive action on the right and cancel or
> > clear form or whatever on the left.
> >
> > When I watch users though, they seem to pause for a minute on the
> > left most button before moving to the right, like they wish it was
> > there. When I ask, they admit to thinking it would be good to have
> > it there, but immediately say it's fine with it on the right. One
> > even pointed out that it is farther to go on a web page to click the
> > right button and the mouse would be closer to the left button.
> >
> > So my question is; is there a standard? I haven't seen enough of
> > this behavior to justify changing it around, but I want to make sure
> > it is inline with expectations for all the users I can't observe.
> >
> > Thanks for the assistance:
> > Lisa
> >
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > List Guidelines ............ http://listguide.ixda.org/
> > List Help .................. http://listhelp.ixda.org/
> > (Un)Subscription Options ... http://subscription-options.ixda.org/
> > Announcements List ......... http://subscribe-announce.ixda.org/
> > Questions .................. lists at ixda.org
> > Home ....................... http://ixda.org/
> > Resource Library ........... http://resources.ixda.org
> >
>________________________________________________________________
>Welcome to the Interaction Design Association (IxDA)!
>To post to this list ....... discuss at ixda.org
>List Guidelines ............ http://listguide.ixda.org/
>List Help .................. http://listhelp.ixda.org/
>(Un)Subscription Options ... http://subscription-options.ixda.org/
>Announcements List ......... http://subscribe-announce.ixda.org/
>Questions .................. lists at ixda.org
>Home ....................... http://ixda.org/
>Resource Library ........... http://resources.ixda.org

29 Dec 2006 - 5:50pm
admin
2009

> I need to know about the order of the Submit & Cancel button in a contact
> form. According to the tab order, it should be Submit > Cancel, but as the
> right side button is considered for going to the next step (in a wizard), I
> would prefer the order as Cancel > Submit.

I have found keeping Submit (Bruce has already commented on label, so
I would not repeat that) on left and have Cancel as a link (not
button) on the right side, to work very well. The sequence becomes
secondary as the visual contrast is communicative enough.

Cheers
Alok Jain
http://www.iPrincipia.com

29 Dec 2006 - 5:17pm
admin
2009

This is one place there really is no one standard. I work on Windows
software mostly, and the standard there is that the Cancel button is pretty
much always on the right regardless of the type of dialog and the Back and
Next buttons are just to the left of it in a wizard. Unix and MacOS,
though, have the Next button to the far right. Web pages are really all
over the map. Many erroneously forget the Cancel button entirely. The
thing I have used most successfully when building something on the web
(knowing I work with mostly Windows users) is keeping the Next button to the
left of the Cancel button, but using a more prominent color (a la Vista, OS
X, and many websites) for the Next button. Making Next a button and Cancel
a link as Alok points out will also get you the same effect (a more
prominent Next button), but I have had some users confused by the fact that
Cancel is not a button (even though *we* all know the link works just as
well). Different users, different results. You will need to see what works
with yours.

Hope this helps,
Erika

Syndicate content Get the feed