Next & previous button order

15 Sep 2008 - 9:40am
5 years ago
76 replies
10028 reads
tamlyn
2008

As discussed by LukeW in Web Form Design, it's best to have the primary
action of a form be the first button that the user sees. For left-to-right
languages this means having the primary action on the left and any secondary
actions on the right (see A in this illustration
http://www.flickr.com/photos/rosenfeldmedia/2366430953/ ). In a multi-page
'wizard' style form, the primary action is usually 'next' or 'continue' and
the secondary action is 'back' or 'previous' but at the same time the
conceptual model for such forms is that the screens are arranged
progressively from left to right (the ipod/iphone interfaces even animate
the transition).

In such situations is it better to have the secondary action, 'back', to the
left or the right of the primary action, 'next'? Or is there a better
solution?

Cheers,

Tamlyn.

Comments

15 Sep 2008 - 10:21pm
Robert Hoekman, Jr.
2005

>
> In such situations is it better to have the secondary action, 'back', to
> the
> left or the right of the primary action, 'next'? Or is there a better
> solution?
>

Haven't seen any studies on this, but I provide an edge to those who Tab
their way through forms by putting the primary action button on the left (in
Western world designs anyway) so that it's first in the tab order. The
options are the same regardless, and there's an advantage to giving savvier
computer users a slightly easier time.

-r-

15 Sep 2008 - 10:47pm
Jack L. Moffett
2005

Tamlyn,

My own opinion is that it goes completely against our intuition/
expectations/training to have the "next" button on the left and the
"previous" button on the right. That's just backwards.

Best,
Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

You could design a process to catch
everything, but then you're overprocessing.
You kill creativity. You kill productivity.
By definition, a culture like ours that
drives innovation is managed chaos.

-Alex Lee
President, OXO International

16 Sep 2008 - 12:28am
Jeff Howard
2004

Tamlyn,

Button order is only one way to make the "continue" button be more
prominent. Attributes such as color, size and grid alignment can also
help create this visual hierarchy, even if the continue button isn't
actually first.

You can also manipulate the order of buttons with CSS to address
Robert's tab-order point. The visual order of your buttons on screen
doesn't necessarily need to correspond to the programmatic order of
buttons in your code.

Finally, you might stop for a moment and consider whether you
actually need an explicit back button. Maybe you do, but in my
experience users go for the actual browser back button much more
readily if they need to go back. Make sure this doesn't break your
form.

// jeff

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

16 Sep 2008 - 3:25am
Anonymous

Classic answer: 'it depends'

Are you moving the user forward progressivly in a linear fashion
towards a goal such as a guide or a cart&register flow? Is there no
particular good reason to go back other than e.g. to correct mistakes?
I think you could argue having the 'go back'/'previous' anywhere near
the primary button as long as you make sure the 'move on' button
stands out as the primary one. LukeW certainly have some good
arguments here though.

Is the nature of the content ordered in a chronologic order and there
is no primary action (the user decides which way to go)? Well then the
answer is clear. At least to me.
It drives me *nuts* when blogs have "older posts" to the right and
"newer posts" to the left. I don't care which blogging platform it is
or how popular it is. It's wrong wrong wrong.

Forward in time = Right
Backward in time = Left

Any horizontal timeline will tell you this.
<http://images.google.com/images?q=timeline>

Best
Johan

Sep 15, 2008 kl. 4:40 PM skrev Tamlyn Rhodes:

> As discussed by LukeW in Web Form Design, it's best to have the
> primary
> action of a form be the first button that the user sees. For left-to-
> right
> languages this means having the primary action on the left and any
> secondary
> actions on the right (see A in this illustration
> http://www.flickr.com/photos/rosenfeldmedia/2366430953/ ). In a
> multi-page
> 'wizard' style form, the primary action is usually 'next' or
> 'continue' and
> the secondary action is 'back' or 'previous' but at the same time the
> conceptual model for such forms is that the screens are arranged
> progressively from left to right (the ipod/iphone interfaces even
> animate
> the transition).
>
> In such situations is it better to have the secondary action,
> 'back', to the
> left or the right of the primary action, 'next'? Or is there a better
> solution?
>
> Cheers,
>
> Tamlyn.
> ________________________________________________________________
> 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
>

16 Sep 2008 - 7:41am
Paul Eisen
2007

Interesting question, Tamlyn. As strong a proponent as I am for left-justification of page-level push buttons with the primary action being leftmost in a dialog box acting as a secondary window, I agree with the majority of responses you've gotten here for wizards: for left-to-right languages - where the population stereotype of going forward is to the right - Back should be left of Next. Also different from the standard dialog, I would also consider further reinforcing the wizard model of a sequence or chain of panels by placing the Back button on the left side and the Next button on the right side of the panel, as opposed to adjacent to one another.

Paul Eisen
Principal User Experience Architect
tandemseven

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Tamlyn Rhodes
Sent: Monday, September 15, 2008 10:40 AM
To: IxDA
Subject: [IxDA Discuss] Next & previous button order

As discussed by LukeW in Web Form Design, it's best to have the primary
action of a form be the first button that the user sees. For left-to-right
languages this means having the primary action on the left and any secondary
actions on the right (see A in this illustration
http://www.flickr.com/photos/rosenfeldmedia/2366430953/ ). In a multi-page
'wizard' style form, the primary action is usually 'next' or 'continue' and
the secondary action is 'back' or 'previous' but at the same time the
conceptual model for such forms is that the screens are arranged
progressively from left to right (the ipod/iphone interfaces even animate
the transition).

In such situations is it better to have the secondary action, 'back', to the
left or the right of the primary action, 'next'? Or is there a better
solution?

Cheers,

Tamlyn.
________________________________________________________________

16 Sep 2008 - 5:50am
Andreas Ringdal
2008

Johan Sjöstrand and Jeff Howard have some good points. "Do we really
need the back button?"
A multi page form should have a (clickable) index indicating the
various steps in the form, and a next button to go to the next page.

--

The next and previous buttons do not behave as "action buttons",
but as navigation buttons, and it therefor is more natural to go to
the next page by clicking on the right-hand side. In left to right
cultures that is.

Andreas

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

16 Sep 2008 - 3:42am
Kordian Piotr Klecha
2008

Tamlyn,

I think it's a great example of this kind of situation, where using
too-simple
rules leads to oversophisticated solutions.

In fact: western world is left-to-right: we start looking at the left side
of the page, we tend to see left element as "first" and right as "second"
and so on. But it depends, as usual.

One of the simply examples are wizards, which you asked about. Natural
structure of wizars is in fact LEFT-TO-RIGHT - and this natural structure
of wizard is a metastructure for wizard's elements. Navigation in single
page must respect this metastructure - and you really don't have to wonder
if the NEXT (="go RIGHT!") link should be actually on the right side.
Yes, it should :].

Greetings,
KPK

"WIRTUALNA POLSKA" Spolka Akcyjna z siedziba w Gdansku przy ul.
Traugutta 115 C, wpisana do Krajowego Rejestru Sadowego - Rejestru
Przedsiebiorcow prowadzonego przez Sad Rejonowy Gdansk - Polnoc w
Gdansku pod numerem KRS 0000068548, o kapitale zakladowym
67.980.024,00 zlotych oplaconym w calosci oraz Numerze Identyfikacji
Podatkowej 957-07-51-216.

16 Sep 2008 - 5:54am
Kordian Piotr Klecha
2008

Tamlyn,

I think it's a great example of this kind of situation, where using
too-simple rules leads to oversophisticated solutions.

In fact: western world is left-to-right: we start looking at the left
side of the page, we tend to see left element as "first" and right
as "second" and so on. But it depends, as usual.

One of the simply examples are wizards, which you asked about.
Natural structure of wizars is in fact LEFT-TO-RIGHT - and this
natural structure of wizard is a metastructure for wizard's
elements. Navigation in single page must respect this metastructure -
and you really don't have to wonder
if the NEXT (="go RIGHT!") link should be actually on the right
side. Yes, it should :].

Greetings,
KPK

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

16 Sep 2008 - 5:11am
tamlyn
2008

> Are you moving the user forward progressivly in a linear fashion towards a
> goal such as a guide or a cart&register flow? Is there no particular good
> reason to go back other than e.g. to correct mistakes?

Yes, this is a multi-page form similar to a checkout process (can't
put it all on one page as some choices affect the screens that will be
displayed later).

> It drives me *nuts* when blogs have "older posts" to the right and "newer
> posts" to the left. I don't care which blogging platform it is or how
> popular it is. It's wrong wrong wrong.

It depends whose time you're referring to. Reading down the page
usually corresponds to 'forwards' in the user's time but 'backwards'
in the blogs' chronology. Similarly the next page after the front page
is forwards in the user's chronology (it comes *after* the front page)
but backwards in the blog's chronology.

To be honest I prefer having 'Older posts' (i.e. next page) to the
right and 'Newer posts' (i.e. previous page) is to the left.

Interestingly The Wordpress blog does it this way but Matt Mullenweg's
blog (creator of Wordpress) does it the other way.

http://wordpress.org/development/ vs. http://ma.tt/

> Finally, you might stop for a moment and consider whether you
> actually need an explicit back button. Maybe you do, but in my
> experience users go for the actual browser back button much more
> readily if they need to go back. Make sure this doesn't break your
> form.

I think some (many?) people have learned that clicking 'Back' during a
checkout process or similar can often cause problems so having an
explicit "previous" button can be helpful (though, of course, the back
button should also work).

Cheers,

Tamlyn.

16 Sep 2008 - 9:31am
Matt Nish-Lapidus
2007

However, if the options are "Next/Submit" and "Previous" it does make
more sense conceptually to have the back button on the left and the
next button on the right.

The tab order, a very important piece of form design, can always be
manipulated to put the buttons in the right order.

On Mon, Sep 15, 2008 at 11:21 PM, Robert Hoekman Jr <robert at rhjr.net> wrote:
>>
>> In such situations is it better to have the secondary action, 'back', to
>> the
>> left or the right of the primary action, 'next'? Or is there a better
>> solution?
>>
>
> Haven't seen any studies on this, but I provide an edge to those who Tab
> their way through forms by putting the primary action button on the left (in
> Western world designs anyway) so that it's first in the tab order. The
> options are the same regardless, and there's an advantage to giving savvier
> computer users a slightly easier time.
>
> -r-
> ________________________________________________________________
> 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
>

--
Matt Nish-Lapidus
work: matt at bibliocommons.com / www.bibliocommons.com
--
personal: mattnl at gmail.com
twitter: emenel

16 Sep 2008 - 10:26am
Matt Nish-Lapidus
2007

Maybe the problem is assuming the "Previous" button has to be anywhere
near the "Next" or "Submit" button. Maybe put the "Previous" button
at the top? or at the very bottom? Maybe it's not a button at all,
but a text link or a graphical link of some sort...

That way the submit button is in the proper place, on the left
directly below the form, but it doesn't break the conceptual right
hand paging.

On Tue, Sep 16, 2008 at 11:21 AM, Brett Lutchman
<brettlutchman at gmail.com> wrote:
> Having conducted multiple studies and tests on this very process, the 'Next'
> button must be on the left side while the 'Previous' button needs to be on
> the right.
> There are several reasons as to why this is but I will focus on the 2 main
> ones.
>
> 1. One thing I hate when entering serial numbers for a new software is when
> I have to manually press the 'Tab' button rather then the cursor
> automatically 'tabbing' to the right. Many developers who are sharp enough
> to pick up on this have automated the process. This being said, some
> developers have automated the process to 'tab' to the next button or field.
> If the last field that precedes the 'Next' button is completed, the 'Next'
> button is the most logical action and feature in regards to keeping a
> consistent flow for the user to complete the task at hand. There is nothing
> more aggravating then having a process flow being interrupted.
>
> 2. Users who are Net savvy tend to be quick with their left pinky finger
> (for 'Tab') their right pinky finger (for 'Enter') followed by their right
> then left thumb with both pointer fingers locked on the 'F' and 'J' buttons
> for bearing.
> These users who use the keyboard extensively rather then relying solely on
> the mouse know how to rip through form fields using the 'Tab' and Space Bar.
> If the cursor does not automatically tab to another field upon completing a
> previous field, the user rapidly 'Tabs' with the left pinky finger and has
> adapted to a learned behaviour. Upon reaching the first button in order
> after completing all required fields, the user is still in 'Tab' and Space
> Bar mode and will automatically Tab to the button and hammer the Space Bar
> to proceed with the task.
>
> Placing 'Previous' before the 'Next' or 'Submit' buttons breaks user flow
> and I strongly recommend against it.
>
>
>
> On Tue, Sep 16, 2008 at 10:31 AM, Matthew Nish-Lapidus <mattnl at gmail.com>
> wrote:
>>
>> However, if the options are "Next/Submit" and "Previous" it does make
>> more sense conceptually to have the back button on the left and the
>> next button on the right.
>>
>> The tab order, a very important piece of form design, can always be
>> manipulated to put the buttons in the right order.
>>
>> On Mon, Sep 15, 2008 at 11:21 PM, Robert Hoekman Jr <robert at rhjr.net>
>> wrote:
>> >>
>> >> In such situations is it better to have the secondary action, 'back',
>> >> to
>> >> the
>> >> left or the right of the primary action, 'next'? Or is there a better
>> >> solution?
>> >>
>> >
>> > Haven't seen any studies on this, but I provide an edge to those who Tab
>> > their way through forms by putting the primary action button on the left
>> > (in
>> > Western world designs anyway) so that it's first in the tab order. The
>> > options are the same regardless, and there's an advantage to giving
>> > savvier
>> > computer users a slightly easier time.
>> >
>> > -r-
>> > ________________________________________________________________
>> > 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
>> >
>>
>>
>>
>> --
>> Matt Nish-Lapidus
>> work: matt at bibliocommons.com / www.bibliocommons.com
>> --
>> personal: mattnl at gmail.com
>> twitter: emenel
>> ________________________________________________________________
>> 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
>
>
>
> --
> Brett Lutchman
> Web Slinger.
>

--
Matt Nish-Lapidus
work: matt at bibliocommons.com / www.bibliocommons.com
--
personal: mattnl at gmail.com
twitter: emenel

16 Sep 2008 - 11:17am
Matt Nish-Lapidus
2007

The top/bottom thing would really depend on the platform.. if it's a
website, then yes, you might need it at the top and bottom. if it's a
desktop app the issue of scrolling off the screen might not be a
problem..

On Tue, Sep 16, 2008 at 11:37 AM, Brett Lutchman
<brettlutchman at gmail.com> wrote:
> I wouldn't put the previous button at the top unless it was at the bottom
> also. If it's not at the bottom, users will have to scroll up again which is
> counter-productive. Also, the 'Previous' button may be out of the user's
> sight.
>
> You may be right about not having it beside it though. Maybe below the
> 'Next' button so it doesn't look so much like a set of choices with the same
> value but rather a list of actions in order of importance and flow.
>
> On Tue, Sep 16, 2008 at 11:26 AM, Matthew Nish-Lapidus <mattnl at gmail.com>
> wrote:
>>
>> Maybe the problem is assuming the "Previous" button has to be anywhere
>> near the "Next" or "Submit" button. Maybe put the "Previous" button
>> at the top? or at the very bottom? Maybe it's not a button at all,
>> but a text link or a graphical link of some sort...
>>
>> That way the submit button is in the proper place, on the left
>> directly below the form, but it doesn't break the conceptual right
>> hand paging.
>>
>> On Tue, Sep 16, 2008 at 11:21 AM, Brett Lutchman
>> <brettlutchman at gmail.com> wrote:
>> > Having conducted multiple studies and tests on this very process, the
>> > 'Next'
>> > button must be on the left side while the 'Previous' button needs to be
>> > on
>> > the right.
>> > There are several reasons as to why this is but I will focus on the 2
>> > main
>> > ones.
>> >
>> > 1. One thing I hate when entering serial numbers for a new software is
>> > when
>> > I have to manually press the 'Tab' button rather then the cursor
>> > automatically 'tabbing' to the right. Many developers who are sharp
>> > enough
>> > to pick up on this have automated the process. This being said, some
>> > developers have automated the process to 'tab' to the next button or
>> > field.
>> > If the last field that precedes the 'Next' button is completed, the
>> > 'Next'
>> > button is the most logical action and feature in regards to keeping a
>> > consistent flow for the user to complete the task at hand. There is
>> > nothing
>> > more aggravating then having a process flow being interrupted.
>> >
>> > 2. Users who are Net savvy tend to be quick with their left pinky finger
>> > (for 'Tab') their right pinky finger (for 'Enter') followed by their
>> > right
>> > then left thumb with both pointer fingers locked on the 'F' and 'J'
>> > buttons
>> > for bearing.
>> > These users who use the keyboard extensively rather then relying solely
>> > on
>> > the mouse know how to rip through form fields using the 'Tab' and Space
>> > Bar.
>> > If the cursor does not automatically tab to another field upon
>> > completing a
>> > previous field, the user rapidly 'Tabs' with the left pinky finger and
>> > has
>> > adapted to a learned behaviour. Upon reaching the first button in order
>> > after completing all required fields, the user is still in 'Tab' and
>> > Space
>> > Bar mode and will automatically Tab to the button and hammer the Space
>> > Bar
>> > to proceed with the task.
>> >
>> > Placing 'Previous' before the 'Next' or 'Submit' buttons breaks user
>> > flow
>> > and I strongly recommend against it.
>> >
>> >
>> >
>> > On Tue, Sep 16, 2008 at 10:31 AM, Matthew Nish-Lapidus
>> > <mattnl at gmail.com>
>> > wrote:
>> >>
>> >> However, if the options are "Next/Submit" and "Previous" it does make
>> >> more sense conceptually to have the back button on the left and the
>> >> next button on the right.
>> >>
>> >> The tab order, a very important piece of form design, can always be
>> >> manipulated to put the buttons in the right order.
>> >>
>> >> On Mon, Sep 15, 2008 at 11:21 PM, Robert Hoekman Jr <robert at rhjr.net>
>> >> wrote:
>> >> >>
>> >> >> In such situations is it better to have the secondary action,
>> >> >> 'back',
>> >> >> to
>> >> >> the
>> >> >> left or the right of the primary action, 'next'? Or is there a
>> >> >> better
>> >> >> solution?
>> >> >>
>> >> >
>> >> > Haven't seen any studies on this, but I provide an edge to those who
>> >> > Tab
>> >> > their way through forms by putting the primary action button on the
>> >> > left
>> >> > (in
>> >> > Western world designs anyway) so that it's first in the tab order.
>> >> > The
>> >> > options are the same regardless, and there's an advantage to giving
>> >> > savvier
>> >> > computer users a slightly easier time.
>> >> >
>> >> > -r-
>> >> > ________________________________________________________________
>> >> > 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
>> >> >
>> >>
>> >>
>> >>
>> >> --
>> >> Matt Nish-Lapidus
>> >> work: matt at bibliocommons.com / www.bibliocommons.com
>> >> --
>> >> personal: mattnl at gmail.com
>> >> twitter: emenel
>> >> ________________________________________________________________
>> >> 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
>> >
>> >
>> >
>> > --
>> > Brett Lutchman
>> > Web Slinger.
>> >
>>
>>
>>
>> --
>> Matt Nish-Lapidus
>> work: matt at bibliocommons.com / www.bibliocommons.com
>> --
>> personal: mattnl at gmail.com
>> twitter: emenel
>
>
>
> --
> Brett Lutchman
> Web Slinger.
>

--
Matt Nish-Lapidus
work: matt at bibliocommons.com / www.bibliocommons.com
--
personal: mattnl at gmail.com
twitter: emenel

16 Sep 2008 - 3:11pm
netwiz
2010

On Mon, 15 Sep 2008 15:40:17 +0100, Tamlyn wrote:

On our pages the continue/submit button is always to the right, and go
back is always to the left. We've tested many many people with this
design, and I can't recall a single occasion where it caused
confusion.

It has caused confusion where buttons have been too similar and too
close together.

It seems to be more important for the buttons to be easily
distinguished and consistent within a site.

>As discussed by LukeW in Web Form Design, it's best to have the primary
>action of a form be the first button that the user sees. For left-to-right
>languages this means having the primary action on the left and any secondary
>actions on the right (see A in this illustration
>http://www.flickr.com/photos/rosenfeldmedia/2366430953/ ). In a multi-page
>'wizard' style form, the primary action is usually 'next' or 'continue' and
>the secondary action is 'back' or 'previous' but at the same time the
>conceptual model for such forms is that the screens are arranged
>progressively from left to right (the ipod/iphone interfaces even animate
>the transition).
>
>In such situations is it better to have the secondary action, 'back', to the
>left or the right of the primary action, 'next'? Or is there a better
>solution?
* Nick Gassman - Usability and Standards Manager - http://ba.com *
* I vote for reply-to to go to the list*

16 Sep 2008 - 5:11pm
netwiz
2010

On Tue, 16 Sep 2008 17:17:12 -0400, Brett wrote:

>My tests as well as other expert testers in the industry (2 experts 1. Andrew Chak- Usability author of 'Submit Now' and 2. Dave W Small Dir of Tech., Rogers) indicate the same as I've stated.
>But regardless of tests, for the reasons that I listed, the chances for disrupted usability and flow is much greater when the 'Previous' button is on the left.

Brett, I can't see a previous post from you in this thread (I've
checked on the website too). Did you send it maybe by mistake to an
individual? Easily done, given the way the list works. Could you
re-post your original message?
* Nick Gassman - Usability and Standards Manager - http://ba.com *
* I vote for reply-to to go to the list*

16 Sep 2008 - 10:21am
Anonymous

Having conducted multiple studies and tests on this very process, the 'Next'
button must be on the left side while the 'Previous' button needs to be on
the right.
There are several reasons as to why this is but I will focus on the 2 main
ones.

1. One thing I hate when entering serial numbers for a new software is when
I have to manually press the 'Tab' button rather then the cursor
automatically 'tabbing' to the right. Many developers who are sharp enough
to pick up on this have automated the process. This being said, some
developers have automated the process to 'tab' to the next button or field.
If the last field that precedes the 'Next' button is completed, the 'Next'
button is the most logical action and feature in regards to keeping a
consistent flow for the user to complete the task at hand. There is nothing
more aggravating then having a process flow being interrupted.

2. Users who are Net savvy tend to be quick with their left pinky finger
(for 'Tab') their right pinky finger (for 'Enter') followed by their right
then left thumb with both pointer fingers locked on the 'F' and 'J' buttons
for bearing.
These users who use the keyboard extensively rather then relying solely on
the mouse know how to rip through form fields using the 'Tab' and Space Bar.
If the cursor does not automatically tab to another field upon completing a
previous field, the user rapidly 'Tabs' with the left pinky finger and has
adapted to a learned behaviour. Upon reaching the first button in order
after completing all required fields, the user is still in 'Tab' and Space
Bar mode and will automatically Tab to the button and hammer the Space Bar
to proceed with the task.

Placing 'Previous' before the 'Next' or 'Submit' buttons breaks user flow
and I strongly recommend against it.

On Tue, Sep 16, 2008 at 10:31 AM, Matthew Nish-Lapidus <mattnl at gmail.com>wrote:

> However, if the options are "Next/Submit" and "Previous" it does make
> more sense conceptually to have the back button on the left and the
> next button on the right.
>
> The tab order, a very important piece of form design, can always be
> manipulated to put the buttons in the right order.
>
> On Mon, Sep 15, 2008 at 11:21 PM, Robert Hoekman Jr <robert at rhjr.net>
> wrote:
> >>
> >> In such situations is it better to have the secondary action, 'back', to
> >> the
> >> left or the right of the primary action, 'next'? Or is there a better
> >> solution?
> >>
> >
> > Haven't seen any studies on this, but I provide an edge to those who Tab
> > their way through forms by putting the primary action button on the left
> (in
> > Western world designs anyway) so that it's first in the tab order. The
> > options are the same regardless, and there's an advantage to giving
> savvier
> > computer users a slightly easier time.
> >
> > -r-
> > ________________________________________________________________
> > 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
> >
>
>
>
> --
> Matt Nish-Lapidus
> work: matt at bibliocommons.com / www.bibliocommons.com
> --
> personal: mattnl at gmail.com
> twitter: emenel
> ________________________________________________________________
> 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
>

--
Brett Lutchman
Web Slinger.

16 Sep 2008 - 10:37am
Anonymous

I wouldn't put the previous button at the top unless it was at the bottom
also. If it's not at the bottom, users will have to scroll up again which is
counter-productive. Also, the 'Previous' button may be out of the user's
sight.

You may be right about not having it beside it though. Maybe below the
'Next' button so it doesn't look so much like a set of choices with the same
value but rather a list of actions in order of importance and flow.

On Tue, Sep 16, 2008 at 11:26 AM, Matthew Nish-Lapidus <mattnl at gmail.com>wrote:

> Maybe the problem is assuming the "Previous" button has to be anywhere
> near the "Next" or "Submit" button. Maybe put the "Previous" button
> at the top? or at the very bottom? Maybe it's not a button at all,
> but a text link or a graphical link of some sort...
>
> That way the submit button is in the proper place, on the left
> directly below the form, but it doesn't break the conceptual right
> hand paging.
>
> On Tue, Sep 16, 2008 at 11:21 AM, Brett Lutchman
> <brettlutchman at gmail.com> wrote:
> > Having conducted multiple studies and tests on this very process, the
> 'Next'
> > button must be on the left side while the 'Previous' button needs to be
> on
> > the right.
> > There are several reasons as to why this is but I will focus on the 2
> main
> > ones.
> >
> > 1. One thing I hate when entering serial numbers for a new software is
> when
> > I have to manually press the 'Tab' button rather then the cursor
> > automatically 'tabbing' to the right. Many developers who are sharp
> enough
> > to pick up on this have automated the process. This being said, some
> > developers have automated the process to 'tab' to the next button or
> field.
> > If the last field that precedes the 'Next' button is completed, the
> 'Next'
> > button is the most logical action and feature in regards to keeping a
> > consistent flow for the user to complete the task at hand. There is
> nothing
> > more aggravating then having a process flow being interrupted.
> >
> > 2. Users who are Net savvy tend to be quick with their left pinky finger
> > (for 'Tab') their right pinky finger (for 'Enter') followed by their
> right
> > then left thumb with both pointer fingers locked on the 'F' and 'J'
> buttons
> > for bearing.
> > These users who use the keyboard extensively rather then relying solely
> on
> > the mouse know how to rip through form fields using the 'Tab' and Space
> Bar.
> > If the cursor does not automatically tab to another field upon completing
> a
> > previous field, the user rapidly 'Tabs' with the left pinky finger and
> has
> > adapted to a learned behaviour. Upon reaching the first button in order
> > after completing all required fields, the user is still in 'Tab' and
> Space
> > Bar mode and will automatically Tab to the button and hammer the Space
> Bar
> > to proceed with the task.
> >
> > Placing 'Previous' before the 'Next' or 'Submit' buttons breaks user flow
> > and I strongly recommend against it.
> >
> >
> >
> > On Tue, Sep 16, 2008 at 10:31 AM, Matthew Nish-Lapidus <mattnl at gmail.com
> >
> > wrote:
> >>
> >> However, if the options are "Next/Submit" and "Previous" it does make
> >> more sense conceptually to have the back button on the left and the
> >> next button on the right.
> >>
> >> The tab order, a very important piece of form design, can always be
> >> manipulated to put the buttons in the right order.
> >>
> >> On Mon, Sep 15, 2008 at 11:21 PM, Robert Hoekman Jr <robert at rhjr.net>
> >> wrote:
> >> >>
> >> >> In such situations is it better to have the secondary action, 'back',
> >> >> to
> >> >> the
> >> >> left or the right of the primary action, 'next'? Or is there a better
> >> >> solution?
> >> >>
> >> >
> >> > Haven't seen any studies on this, but I provide an edge to those who
> Tab
> >> > their way through forms by putting the primary action button on the
> left
> >> > (in
> >> > Western world designs anyway) so that it's first in the tab order. The
> >> > options are the same regardless, and there's an advantage to giving
> >> > savvier
> >> > computer users a slightly easier time.
> >> >
> >> > -r-
> >> > ________________________________________________________________
> >> > 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
> >> >
> >>
> >>
> >>
> >> --
> >> Matt Nish-Lapidus
> >> work: matt at bibliocommons.com / www.bibliocommons.com
> >> --
> >> personal: mattnl at gmail.com
> >> twitter: emenel
> >> ________________________________________________________________
> >> 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
> >
> >
> >
> > --
> > Brett Lutchman
> > Web Slinger.
> >
>
>
>
> --
> Matt Nish-Lapidus
> work: matt at bibliocommons.com / www.bibliocommons.com
> --
> personal: mattnl at gmail.com
> twitter: emenel
>

--
Brett Lutchman
Web Slinger.

16 Sep 2008 - 4:17pm
Anonymous

My tests as well as other expert testers in the industry (2 experts 1.
Andrew Chak- Usability author of 'Submit Now' and 2. Dave W Small Dir of
Tech., Rogers) indicate the same as I've stated.
But regardless of tests, for the reasons that I listed, the chances for
disrupted usability and flow is much greater when the 'Previous' button is
on the left.

On Tue, Sep 16, 2008 at 4:11 PM, Nick Gassman <nick at netwiz.demon.co.uk>wrote:

> On Mon, 15 Sep 2008 15:40:17 +0100, Tamlyn wrote:
>
> On our pages the continue/submit button is always to the right, and go
> back is always to the left. We've tested many many people with this
> design, and I can't recall a single occasion where it caused
> confusion.
>
> It has caused confusion where buttons have been too similar and too
> close together.
>
> It seems to be more important for the buttons to be easily
> distinguished and consistent within a site.
>
> >As discussed by LukeW in Web Form Design, it's best to have the primary
> >action of a form be the first button that the user sees. For left-to-right
> >languages this means having the primary action on the left and any
> secondary
> >actions on the right (see A in this illustration
> >http://www.flickr.com/photos/rosenfeldmedia/2366430953/ ). In a
> multi-page
> >'wizard' style form, the primary action is usually 'next' or 'continue'
> and
> >the secondary action is 'back' or 'previous' but at the same time the
> >conceptual model for such forms is that the screens are arranged
> >progressively from left to right (the ipod/iphone interfaces even animate
> >the transition).
> >
> >In such situations is it better to have the secondary action, 'back', to
> the
> >left or the right of the primary action, 'next'? Or is there a better
> >solution?
> * Nick Gassman - Usability and Standards Manager - http://ba.com *
> * I vote for reply-to to go to the list*
> ________________________________________________________________
> 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
>

--
Brett Lutchman
Web Slinger.

16 Sep 2008 - 6:36pm
Anonymous

Here it is. I don't know why it's not showing for you. I hope others are not
getting the same issue.
--

Having conducted multiple studies and tests on this very process, the 'Next'
button must be on the left side while the 'Previous' button needs to be on
the right.
There are several reasons as to why this is but I will focus on the 2 main
ones.

1. One thing I hate when entering serial numbers for a new software is when
I have to manually press the 'Tab' button rather then the cursor
automatically 'tabbing' to the right. Many developers who are sharp enough
to pick up on this have automated the process. This being said, some
developers have automated the process to 'tab' to the next button or field.
If the last field that precedes the 'Next' button is completed, the 'Next'
button is the most logical action and feature in regards to keeping a
consistent flow for the user to complete the task at hand. There is nothing
more aggravating then having a process flow being interrupted.

2. Users who are Net savvy tend to be quick with their left pinky finger
(for 'Tab') their right pinky finger (for 'Enter') followed by their right
then left thumb with both pointer fingers locked on the 'F' and 'J' buttons
for bearing.
These users who use the keyboard extensively rather then relying solely on
the mouse know how to rip through form fields using the 'Tab' and Space Bar.
If the cursor does not automatically tab to another field upon completing a
previous field, the user rapidly 'Tabs' with the left pinky finger and has
adapted to a learned behaviour. Upon reaching the first button in order
after completing all required fields, the user is still in 'Tab' and Space
Bar mode and will automatically Tab to the button and hammer the Space Bar
to proceed with the task.

Placing 'Previous' before the 'Next' or 'Submit' buttons breaks user flow
and I strongly recommend against it.

On Tue, Sep 16, 2008 at 6:11 PM, Nick Gassman <nick at netwiz.demon.co.uk>wrote:

> On Tue, 16 Sep 2008 17:17:12 -0400, Brett wrote:
>
> >My tests as well as other expert testers in the industry (2 experts 1.
> Andrew Chak- Usability author of 'Submit Now' and 2. Dave W Small Dir of
> Tech., Rogers) indicate the same as I've stated.
> >But regardless of tests, for the reasons that I listed, the chances for
> disrupted usability and flow is much greater when the 'Previous' button is
> on the left.
>
> Brett, I can't see a previous post from you in this thread (I've
> checked on the website too). Did you send it maybe by mistake to an
> individual? Easily done, given the way the list works. Could you
> re-post your original message?
> * Nick Gassman - Usability and Standards Manager - http://ba.com *
> * I vote for reply-to to go to the list*
> ________________________________________________________________
> 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
>

--
Brett Lutchman
Web Slinger.

17 Sep 2008 - 7:34am
Todd Warfel
2003

On Sep 16, 2008, at 11:21 AM, Brett Lutchman wrote:

> Having conducted multiple studies and tests on this very process,
> the 'Next' button must be on the left side while the 'Previous'
> button needs to be on the right.

Don't you have this reversed? Next on the right, Previous on the left?

(We work primarily on transaction/application based systems. We also
run regular usability tests. The suggestions below are based on our
experience. As always, there are cases where this doesn't apply).

Mouse-based users tend to scan to the bottom right corner with their
mouse. It's easy and predictable to target since it's a corner and
since the scrollbar is at the right, they're used to moving to this
side of the screen.

Keyboard savvy users tend to tab through forms and use the enter key
to submit a form.

Making the most desired action first in the list only works for
keyboard savvy users, which is the minority. Having it in the most
predictable place, at the right, works for the majority.

To make it work for both, you put it at the bottom right and use
standard HTML to make the desired action, which is at the right, a
"submit" button, while making the less desired action something else
(e.g. link, button). If it's a "submit" button, a real HTML submit
button, the form will be executed w/the Enter key, satisfying both
minority and majority audiences.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

17 Sep 2008 - 7:39am
bminihan
2007

I've had to design a few such forms, but normally prefer to break
down large wizard-ish processes into separate distinct actions rather
than lead people down a complicated multi-step form...

Anyway, I've had some success meeting both the logical and
efficiency objectives Brett describes by making the Next button the
tab immediately following the last form field, in the lower right
corner, while placing the Previous button (less prominently
displayed) far to the left, in the lower left corner. The placement
on either side of the form indicates more clearly that clicking
Previous takes you backward, while the most likely action lets you
tab to the Next button and complete all of the forms pretty quickly.
Hitting tab after the Next button jumps to the left to the Previous
button, then to the top of the form again. Also, hitting Enter from
within the form (as long as the req'd fields are completed) is as
good as hitting the Next button, as well, for even more efficiency.

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

17 Sep 2008 - 7:55am
Caroline Jarrett
2007

Brett Lutchman
>
> Having conducted multiple studies and tests on this very process, the
> 'Next' button must be on the left side while the 'Previous' button needs
to be
> on the right.

Aren't you conflating two problems here?

- responsiveness to users who use keyboard/tab
- conceptual location of the previous/next buttons.

Putting the 'previous' button on the right so that it occurs at the
appropriate place in the tab order is a possible, but very odd, solution to
the problem of incorrect tab order, which should be arranged thus (in
general, your mileage may vary):

- last field on form
- submit (or next)
- anything else (e.g. previous).

'Previous' going to the left of 'Next' is such a strongly accepted
convention in Western culture that you'll definitely throw a proportion of
your users if you don't obey it.

Best
Caroline Jarrett

Effortmark Ltd
Usability - Forms - Content

Phone: 01525 370 379
Mobile: 0799 057 0647
International: +44 152 537 0379

16 Heath Road
Leighton Buzzard
Bedfordshire
LU7 3AB
UK

17 Sep 2008 - 8:09am
Gustavo Gawry
2006

At least the Tab problem you can solve easily with the HTML property
tabindex... then you can choose which fields come first...

I was going to say that you should put the Next button in the right side and
the Previous in the left, because that always made more sense to me... But
now as Caroline said that in her studies she had better results with the
opposite, I'm not really sure of what you should do.

--
Gustavo Gawry
User Experience Analyst

mob: +55 21 9498 7923

www.gawry.com (portuguese)

17 Sep 2008 - 8:44am
Anonymous

Todd I am partly agreeing with you on this. If you look at my statement I am
speaking about keyboard savvy users. Mouse users move comfortably (in order)
bottom right, top left, top right, bottom left.
Regardless of whether or not they are mouse users, and regardless whether or
not they look bottom right first. A mouse user will take more time to
consider their actions then a keyboard savvy user would, and will find the
Next button on the left if they don't see it on the right.
Again, my saying that the 'Next' button being on the left is not so much the
only rule, but rather the reduction of the probability of disruption.
A mouse user will eventually find the button on the left if it's not on the
right.
A keyboard savvy would have their flow broken and would have to press the
forward button again, and maybe refill their information if the fields do
not remember their information on the present screen and then refill the
info again on the previous screen from which they came from (the original
screen) and hope the system remembers their information again, and would
then have their interactive flow retarded in order to not make the same
mistake again.

On Wed, Sep 17, 2008 at 8:34 AM, Todd Zaki Warfel <lists at toddwarfel.com>wrote:

>
> On Sep 16, 2008, at 11:21 AM, Brett Lutchman wrote:
>
> Having conducted multiple studies and tests on this very process, the
> 'Next' button must be on the left side while the 'Previous' button needs to
> be on the right.
>
>
> Don't you have this reversed? Next on the right, Previous on the left?
> (We work primarily on transaction/application based systems. We also run
> regular usability tests. The suggestions below are based on our experience.
> As always, there are cases where this doesn't apply).
>
> Mouse-based users tend to scan to the bottom right corner with their mouse.
> It's easy and predictable to target since it's a corner and since the
> scrollbar is at the right, they're used to moving to this side of the
> screen.
>
> Keyboard savvy users tend to tab through forms and use the enter key to
> submit a form.
>
> Making the most desired action first in the list only works for keyboard
> savvy users, which is the minority. Having it in the most predictable place,
> at the right, works for the majority.
>
> To make it work for both, you put it at the bottom right and use standard
> HTML to make the desired action, which is at the right, a "submit" button,
> while making the less desired action something else (e.g. link, button). If
> it's a "submit" button, a real HTML submit button, the form will be executed
> w/the Enter key, satisfying both minority and majority audiences.
>
>
> Cheers!
>
> Todd Zaki Warfel
> President, Design Researcher
> Messagefirst | Designing Information. Beautifully.
> ----------------------------------
> *Contact Info*
> Voice: (215) 825-7423Email: todd at messagefirst.com
> AIM: twarfel at mac.com
> Blog: http://toddwarfel.com <http://toddwarfel/>
> Twitter: zakiwarfel
> ----------------------------------
> In theory, theory and practice are the same.
> In practice, they are not.
>
>

--
Brett Lutchman
Web Slinger.

17 Sep 2008 - 9:31am
Caroline Jarrett
2007

> From: Gustavo Gawry [mailto:gustavogawry at gmail.com]

At least the Tab problem you can solve easily with the HTML property
tabindex... then you can choose which fields come first...

I was going to say that you should put the Next button in the right side
and the Previous in the left, because that always made more sense to me...
But now as Caroline said that in her studies she had better results with the
opposite, I'm not really sure of what you should do.

No, it wasn't me doing those studies.

My recommendation is:
- Previous on the left
- Next on the right
- Set the tabbing order correctly.

Best,

Caroline Jarrett

Effortmark Ltd
Usability - Forms - Content

Phone: 01525 370 379
Mobile: 0799 057 0647
International: +44 152 537 0379

16 Heath Road
Leighton Buzzard
Bedfordshire
LU7 3AB
UK

17 Sep 2008 - 9:35am
Lee McIvor
2006

Where users are completing forms or similar, from left to right and top to bottom, then natural flow suggests the "next" button be bottom right. Whether they are a keyboard or mouse user isn't the point in my opinion.

By having only one submit button on the page (for "next") and a hyperlink for "back" (or similar), keyboard users (who often don't bother checking the location of the button visually from testing i've done) have no problem anyway, because hitting the Return button still does what they expect. On the other hand, users who look for the button see it exactly where they expect to.

In that way you give users what they visually expect, without in any way disrupting keyboard users.

Lee

http://leemcivor.co.uk/

----- Original Message ----
From: Brett Lutchman <brettlutchman at gmail.com>
To: Todd Zaki Warfel <lists at toddwarfel.com>
Cc: Tamlyn Rhodes <tamlyn at tamlyn.org>; IxDA <discuss at ixda.org>
Sent: Wednesday, 17 September, 2008 14:44:08
Subject: Re: [IxDA Discuss] Next & previous button order

Todd I am partly agreeing with you on this. If you look at my statement I am
speaking about keyboard savvy users. Mouse users move comfortably (in order)
bottom right, top left, top right, bottom left.
Regardless of whether or not they are mouse users, and regardless whether or
not they look bottom right first. A mouse user will take more time to
consider their actions then a keyboard savvy user would, and will find the
Next button on the left if they don't see it on the right.
Again, my saying that the 'Next' button being on the left is not so much the
only rule, but rather the reduction of the probability of disruption.
A mouse user will eventually find the button on the left if it's not on the
right.
A keyboard savvy would have their flow broken and would have to press the
forward button again, and maybe refill their information if the fields do
not remember their information on the present screen and then refill the
info again on the previous screen from which they came from (the original
screen) and hope the system remembers their information again, and would
then have their interactive flow retarded in order to not make the same
mistake again.

On Wed, Sep 17, 2008 at 8:34 AM, Todd Zaki Warfel <lists at toddwarfel.com>wrote:

>
> On Sep 16, 2008, at 11:21 AM, Brett Lutchman wrote:
>
> Having conducted multiple studies and tests on this very process, the
> 'Next' button must be on the left side while the 'Previous' button needs to
> be on the right.
>
>
> Don't you have this reversed? Next on the right, Previous on the left?
> (We work primarily on transaction/application based systems. We also run
> regular usability tests. The suggestions below are based on our experience.
> As always, there are cases where this doesn't apply).
>
> Mouse-based users tend to scan to the bottom right corner with their mouse.
> It's easy and predictable to target since it's a corner and since the
> scrollbar is at the right, they're used to moving to this side of the
> screen.
>
> Keyboard savvy users tend to tab through forms and use the enter key to
> submit a form.
>
> Making the most desired action first in the list only works for keyboard
> savvy users, which is the minority. Having it in the most predictable place,
> at the right, works for the majority.
>
> To make it work for both, you put it at the bottom right and use standard
> HTML to make the desired action, which is at the right, a "submit" button,
> while making the less desired action something else (e.g. link, button). If
> it's a "submit" button, a real HTML submit button, the form will be executed
> w/the Enter key, satisfying both minority and majority audiences.
>
>
> Cheers!
>
> Todd Zaki Warfel
> President, Design Researcher
> Messagefirst | Designing Information. Beautifully.
> ----------------------------------
> *Contact Info*
> Voice: (215) 825-7423Email: todd at messagefirst.com
> AIM: twarfel at mac.com
> Blog: http://toddwarfel.com <http://toddwarfel/>
> Twitter: zakiwarfel
> ----------------------------------
> In theory, theory and practice are the same.
> In practice, they are not.
>
>

--
Brett Lutchman
Web Slinger.
________________________________________________________________
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

17 Sep 2008 - 9:46am
sdboyd
2007

I'm really enjoying this discussion. Thanks to all.

If we're talking specifically about a wizard style form, I tend to
position the controls so that "Next" is on the right and
"Previous" is on the left. This helps reinforce the notion of
progression to my users. As others have suggested, I typically make
Next a submit button and Previous a hyperlink so the Enter key
performs the appropriate action. This also promotes "Next" as the
primary action on the screen. Previous is typically a secondary
option.

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

17 Sep 2008 - 10:09am
Todd Warfel
2003

On Sep 17, 2008, at 9:44 AM, Brett Lutchman wrote:

> A mouse user will eventually find the button on the left if it's not
> on the right.
> A keyboard savvy would have their flow broken and would have to
> press the forward button again

Eventually doesn't seem to be a winning model to me.

Now, unless you have a majority of keyboard savvy users, then I'd
still opt for a model that works well for both, not "eventually" for
the majority.

Design for the 80%. So, unless 80% of your users are keyboard-based
users, then you're best bet is "Previous" left and "Next" right. Even
if you have a high degree of keyboard-based users, then using tab
order, as others have pointed out, combined with making the default
action (e.g. Next) the form submit action, you're in the best of both
worlds.

As far as having them next to each other, or one on the far right and
one on the far left, we'll we've studied both and haven't seen a
significant difference or advantage. We've seen theoretical
differences and advantages, but in actual use, we haven't found a
significant difference.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

17 Sep 2008 - 11:51am
Katie Albers
2005

I think the answer needs to revolve around a few issues, some of
which I haven't seen mentioned explicitly.

1) Which order tests best (generally, I've seen Next on the right;
Previous on the left test best. I believe it takes advantage of the
mental model of pages of a book, though I've never tested that
explicitly.)

2) Which (if either) behavior do you want to
encourage/prioritize/valorize. Do you want people to go through a
section from this page to the next without ever returning? Do you
expect them to narrow something (say search results) by going back
and forth and homing in on the correct location?

3) What are the chances of a user making an error and needing to go
back to correct the error?

4) What are the consequences to the user if they click the wrong button?

In each of these cases, you need to test and build to accommodate
those possibilities. Does it really matter if everyone but one guy
gets something right if that one guy then accidentally activated an
unrecoverable action? Is it better in such cases if you get more
errors of a low-level type that users *can* recover from? Maybe it's
better to add cognitive load in such cases, so that more thought has
to go into which button to press.

All of which I think takes the original question out of the context
in which it was posed, but I think we need to consider the idea that
the Good is not always the same in every context.

Katie
--
Katie Albers, Senior Director
Web-Based Services
Mary-Margaret Network
Find. Grow. Work. Play.
+1 310 356 7550 (voice)
+1 877 662 3777 x 709
katie at mary-margaret.com
http://www.mary-margaret.com

17 Sep 2008 - 10:04am
Barry Briggs
2008

On 17 Sep 2008, at 15:35, Lee McIvor wrote:

> Where users are completing forms or similar, from left to right and
> top to bottom, then natural flow suggests the "next" button be
> bottom right. Whether they are a keyboard or mouse user isn't the
> point in my opinion.
>
> By having only one submit button on the page (for "next") and a
> hyperlink for "back" (or similar), keyboard users (who often don't
> bother checking the location of the button visually from testing
> i've done) have no problem anyway, because hitting the Return button
> still does what they expect. On the other hand, users who look for
> the button see it exactly where they expect to.
>
> In that way you give users what they visually expect, without in any
> way disrupting keyboard users.
>

I'd agree with this. From what I've seen, this setup seems the most
intuitive and the least intrusive to users.

However, I think this only really works for web apps.

For desktop apps, using an O/S native style is most appropriate. Users
of these kinds of apps are used to working in an environment where 99%
of the apps they regularly use have an established look & feel, so I
think its best to go with established conventions for this kind of
thing (as has been discussed earlier in this thread).

ta
b

17 Sep 2008 - 10:09am
Anonymous

This has definitely sparked some interesting responses. I think the best
thing to do is to always go with what your users are saying. I am so amazed
by everyone's response and I am totally better off because of it (I'm sure
we all are).
For me, I deal with highly educated and complex users who absolutely hate
clicking and know how to rip through applications because they simply want
to set something up.There is a lot of data entry and setting of devices.
(Oh by the way guys, at this time in my life I'm working on internal/
external web apps and not websites. I should have said this from the
beginning. This is important to know)
It appears that everyone brings a substantial amount of experience and
evidence as to what goes where. For me, I'm very interested in reducing
interruptions and getting the user to use the system rather then focusing on
setting it up.
For most, it appears that they are focusing on North American public facing
users who are logically interpreting flow from left to right and top to
bottom.
Both make sense.
As always, test your own system against your intended users and calculate
the results.
I have learned something from everyone's input over the last few days...I
love this stuff.

On Wed, Sep 17, 2008 at 10:46 AM, Steve Boyd <steve.boyd at americredit.com>wrote:

> I'm really enjoying this discussion. Thanks to all.
>
> If we're talking specifically about a wizard style form, I tend to
> position the controls so that "Next" is on the right and
> "Previous" is on the left. This helps reinforce the notion of
> progression to my users. As others have suggested, I typically make
> Next a submit button and Previous a hyperlink so the Enter key
> performs the appropriate action. This also promotes "Next" as the
> primary action on the screen. Previous is typically a secondary
> option.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=32945
>
>
> ________________________________________________________________
> 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
>

--
Brett Lutchman
Web Slinger.

17 Sep 2008 - 10:13am
Anonymous

Hi Todd,
Eventually is not necessarily negative. Every single one of us will
'Eventually' find something or arrive somewhere whether it's online or not.
'Eventually' does not necessarily mean a lot of time either (it could be
less then a second).
Also, I should have stated that the majority of my users are keyboard users
for data entry and mining. (Check the last email I mention this)
Thanks for your input Todd, I've acquired more depth as to public-facing
site design.

On Wed, Sep 17, 2008 at 11:09 AM, Todd Zaki Warfel <lists at toddwarfel.com>wrote:

>
> On Sep 17, 2008, at 9:44 AM, Brett Lutchman wrote:
>
> A mouse user will eventually find the button on the left if it's not on the
> right.
> A keyboard savvy would have their flow broken and would have to press the
> forward button again
>
>
> Eventually doesn't seem to be a winning model to me.
>
> Now, unless you have a majority of keyboard savvy users, then I'd still opt
> for a model that works well for both, not "eventually" for the majority.
>
> Design for the 80%. So, unless 80% of your users are keyboard-based users,
> then you're best bet is "Previous" left and "Next" right. Even if you have a
> high degree of keyboard-based users, then using tab order, as others have
> pointed out, combined with making the default action (e.g. Next) the form
> submit action, you're in the best of both worlds.
>
> As far as having them next to each other, or one on the far right and one
> on the far left, we'll we've studied both and haven't seen a significant
> difference or advantage. We've seen theoretical differences and advantages,
> but in actual use, we haven't found a significant difference.
>
>
> Cheers!
>
> Todd Zaki Warfel
> President, Design Researcher
> Messagefirst | Designing Information. Beautifully.
> ----------------------------------
> *Contact Info*
> Voice: (215) 825-7423Email: todd at messagefirst.com
> AIM: twarfel at mac.com
> Blog: http://toddwarfel.com <http://toddwarfel/>
> Twitter: zakiwarfel
> ----------------------------------
> In theory, theory and practice are the same.
> In practice, they are not.
>
>

--
Brett Lutchman
Web Slinger.

17 Sep 2008 - 5:07pm
Jack L. Moffett
2005

Brett,

Just to be clear, previous = left / next = right doesn't only apply to
mass-public websites. I too design applications that are industry,
rather than consumer, focused. Of course, a number of the apps I've
worked on are tablet-based with finger and/or stylus input, so
keyboard is barely a consideration there.

Best,
Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

You could design a process to catch
everything, but then you're overprocessing.
You kill creativity. You kill productivity.
By definition, a culture like ours that
drives innovation is managed chaos.

-Alex Lee
President, OXO International

17 Sep 2008 - 8:31pm
netwiz
2010

I sent this to Brett earlier rather than the list. He did reply to me,
but I'll leave it to him whether he wants to forward it to the list.

I'm getting really confused by what shows up on the list, what on the
webpage, and wotnot. I sent this post earlier from the webpage, but it
hasn't shown up yet.

Brett, I'm surprised that in your previous post you would say

'But regardless of tests, for the reasons that I listed, the chances
for disrupted usability and flow is much greater when the 'Previous'
button is on the left..'

I'm assuming that you are basing your recommendations on testing and
research rather than personal opinion.

brettlutchman at gmail.com wrote:
> Having conducted multiple studies and tests on this very process, the 'Next'
> button must be on the left side while the 'Previous' button needs to be on
> the right.
> There are several reasons as to why this is but I will focus on the 2 main
> ones.
> 1. One thing I hate when entering serial numbers for a new software is when
> I have to manually press the 'Tab' button rather then the cursor
> automatically 'tabbing' to the right. Many developers who are sharp enough
> to pick up on this have automated the process. This being said, some
> developers have automated the process to 'tab' to the next button or field.
> If the last field that precedes the 'Next' button is completed, the 'Next'
> button is the most logical action and feature in regards to keeping a
> consistent flow for the user to complete the task at hand. There is nothing
> more aggravating then having a process flow being interrupted.

I agree for that circumstance. There are a couple of considerations in
reply.

1) Tab order doesn't have to follow visual order, as someone else
pointed out. In html you can specify the tab order, which you would
sometimes do differently for users with disabilities. I think a key
point is that you are specifying a visual layout here to cater for
people not using the visual cues.

2) Leading on from that, is everyone like you? The design you go for
would differ for different audiences and purposes. If you are
registering some software for developers, you might well find that
most people tab. If you are installing a kindergarten programme, you
might well find that most users don't tab, and are confused by the
cursor jumping to the next field without them noticing. In years of
observation of customers using ba.com, I do know that relatively few
our customers tab.

> 2. Users who are Net savvy tend to be quick with their left pinky finger
> (for 'Tab') their right pinky finger (for 'Enter') followed by their right
> then left thumb with both pointer fingers locked on the 'F' and 'J' buttons
> for bearing.
> These users who use the keyboard extensively rather then relying solely on
> the mouse know how to rip through form fields using the 'Tab' and Space Bar.
> If the cursor does not automatically tab to another field upon completing a
> previous field, the user rapidly 'Tabs' with the left pinky finger and has
> adapted to a learned behaviour. Upon reaching the first button in order
> after completing all required fields, the user is still in 'Tab' and Space
> Bar mode and will automatically Tab to the button and hammer the Space Bar
> to proceed with the task.
> Placing 'Previous' before the 'Next' or 'Submit' buttons breaks user flow
> and I strongly recommend against it.

Erm, is that a different point, or the same one? I would regard myself
as relatively savvy, and do use the tab key, but don't know what
you're using F and J for, and haven't noticed other people using them.
Again, the point is to design for your audience, and there's a danger
in too broad generalisations.

There's another consideration also. On travel commerce websites, the
primary purpose (both business-wise and for visitors) is to sell
tickets. I think it's unlikely that even ardent tabbers would tab
their way through an entire page of flight lists, options, information
links etc. On such a page, the button to confirm your choice and
progress to the next page is typically to the right, indicating
progress. If that's what users of such sites experience the most, then
it would be risky to change the order of buttons on less-used pages
that submit forms. I think the appearance and positioning of actions
buttons on a website is something that is important to have a degree
of internal consistency.

If you take tabbing out of the equation, we've found that the
visibility/obviousness of the continue button (or any button) is
probably more important than the exact positioning. Luke in his book
advises against the use of red buttons due to potential confusion with
error messaging, but I've never seen this happen in practice, and red
stands out the most. I'd also caution against the use of red and green
as contrasting colours, as red/green is the most common form of colour
blindness (I'm red/green blind).

It's an interesting discussion.
* Nick Gassman - Usability and Standards Manager - http://ba.com *
* I vote for reply-to to go to the list*

17 Sep 2008 - 9:02pm
Todd Warfel
2003

On Sep 17, 2008, at 9:31 PM, Nick Gassman wrote:

> I'm assuming that you are basing your recommendations on testing and
> research rather than personal opinion.

And that would be a mistake. I really can't imagine valid tests
showing the Prev button on the left being more usable.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

17 Sep 2008 - 11:07pm
Jack L. Moffett
2005

On Sep 17, 2008, at 7:41 PM, Brett Lutchman wrote:

> Ok everyone jump on the bandwagon we're leaving in 10 minutes.

Hey, I'm not trying to gang up on you, Brett. I was already sitting on
the bus when you stepped on. I'm sorry if I offended, but it sounded
as if you were brushing everyone off that was disagreeing by saying,
"well, you're all designing websites, and that's different." I think
the issue is pretty fundamental.

> Another 100 people could jump in the convo and say the same about
> the Previous being on the left and Next on the right, it's not going
> to change the my past usability tests and a decade of interaction
> design experience- although I will always be a student of usability.

I wasn't trying to convince you that you're wrong. You know your users
better than I do. But your test results and experience don't mean that
your solution applies everywhere else.

> A common mistake that many amateur North American usability
> 'experts' make is assuming everyone goes from left to right.

I think the majority of us probably are aware that the left to right,
top to bottom flow only applies to cultures that read in that
direction. The users of all of the applications I have designed thus
far happen to fall into that bucket.

> Whether the Next link is an actual button and the Previous is a
> hyperlink, it is commonly already understood that the user knows
> that some form of moving forward is at the bottom. If they look
> bottom/right and see that it's not there, Low and Behold, they
> simply look to the left and the Next button smacks them right in the
> face...no harm done and the user simply moves on.

But isn't that a break in the flow as you're trying to avoid? For many
of us, that would be the flow for the majority of our users.

> Especially when a form is Left Justified for readability, users will
> naturally look to the left to proceed forward.

I must disagree. Perhaps your users do, but I cannot believe that this
is in any way "natural" for "North American" users. There would have
to be other elements at play to direct the user's attention.

Speaking of top and bottom, I just happened to think of a UI I
designed not long ago that placed the previous and next buttons above
the content. Why? Because that was the place that made the most sense
for them given the rest of the UI. Of course, in that particular case,
they were not the primary means of navigation.

There are many things that can influence the direction of attention. I
would suggest that reading direction is a good starting place for
deciding where to place previous and next buttons, but the designer
must consider all of the influences to determine the best location.

Best,
Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

Design is like California.
No one is born there.

-Dick Buchanan

17 Sep 2008 - 6:41pm
Anonymous

Ok everyone jump on the bandwagon we're leaving in 10 minutes.
Another 100 people could jump in the convo and say the same about the
Previous being on the left and Next on the right, it's not going to change
the my past usability tests and a decade of interaction design experience-
although I will always be a student of usability.
The fact remains that the next logical primary action is to move forward
with the process. A web page is not a book. There is no going back a few
chapters or moving past the boring parts to get ahead.
A common mistake that many amateur North American usability 'experts' make
is assuming everyone goes from left to right.
My task is simply to provide an intuitive path for the user to accomplish
their task and to bring whatever steps are necessary in moving them forward
to the forefront.
Again, (I feel like a recording) having the Next on the left followed by
Previous reduces the changes for interrupting the user's flow.
Again, in the tests that I have conducted and as others here have stated as
well, this is not merely based on opinion or whether or not user's tend to
look at the bottom right, it's based on the studies that I have conducted.
Many designers default to the right because Search is followed by a button,
upload, browse, etc., are followed by a button to the right or beneath.
The North American mindset 'assumes' that the right side means forward.
True IA and Usability Specialists know otherwise. (not saying that no one
here is not a true IA- I'm just implying that learned IAs think universally
and holistically in regards to digital design and not just left to right and
top to bottom)
Whether the Next link is an actual button and the Previous is a hyperlink,
it is commonly already understood that the user knows that some form of
moving forward is at the bottom. If they look bottom/right and see that it's
not there, Low and Behold, they simply look to the left and the Next button
smacks them right in the face...no harm done and the user simply moves on.
Especially when a form is Left Justified for readability, users will
naturally look to the left to proceed forward.
Any questions.

On Wed, Sep 17, 2008 at 6:07 PM, Jack Leon Moffett <jackmoffett at mac.com>wrote:

> Brett,
>
> Just to be clear, previous = left / next = right doesn't only apply to
> mass-public websites. I too design applications that are industry, rather
> than consumer, focused. Of course, a number of the apps I've worked on are
> tablet-based with finger and/or stylus input, so keyboard is barely a
> consideration there.
>
> Best,
> Jack
>
>
>
> Jack L. Moffett
> Interaction Designer
> inmedius
> 412.459.0310 x219
> http://www.inmedius.com
>
>
> You could design a process to catch
> everything, but then you're overprocessing.
> You kill creativity. You kill productivity.
> By definition, a culture like ours that
> drives innovation is managed chaos.
>
> -Alex Lee
> President, OXO International
>
>
> ________________________________________________________________
> 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
>

--
Brett Lutchman
Web Slinger.

18 Sep 2008 - 7:19am
Todd Warfel
2003

Sorry, Brett, had to jump in because you're contradicting yourself a
bit here. I think your approach is starting to lose credit. Let me see
if I can help below.

On Sep 17, 2008, at 7:41 PM, Brett Lutchman wrote:

> The fact remains that the next logical primary action is to move
> forward with the process.

Absolutely. Keep in mind that people may theoretically be logical, but
practically not.

> A common mistake that many amateur North American usability
> 'experts' make is assuming everyone goes from left to right.

Well I'm not an amateur N. American usability expert (feel free to
google me, I'm not going to list my pedigree here). The majority of
the world we design for on-line does read left to right. However, when
designing for cultures that read right to left, then design accordingly.

> My task is simply to provide an intuitive path for the user to
> accomplish their task and to bring whatever steps are necessary in
> moving them forward to the forefront.

As is any good designer worth their weight. Intuitive!=logical. There
are a lot of things that impact intuition, like culture, past
experience, visual design, etc.

> Again, (I feel like a recording) having the Next on the left
> followed by Previous reduces the changes for interrupting the user's
> flow.

I just don't buy this, not globally anyway. Over a decade of testing
both models has shown me otherwise. And I'm not the only one. Speak to
just about any HCI professional who's been doing this for a long time
and they'll tell you otherwise. Yes, we read left to right, however,
when we reach the end of a form, our expectation is that the form
actions are at the bottom right corner. Want evidence, just watch
where people move their mouse. Not to mention that their mouse is
typically there as well from having scrolled down — Fitz's law.

I'm not saying some people won't look for the first button at the
left, then right. But I am saying that what you're claiming isn't what
"most non right to left reading on-line users actually do in real
life." Perhaps that's what your audience does, but then your audience
wouldn't equal to the average non-right-to-left-reading on-line user.

> Again, in the tests that I have conducted and as others here have
> stated as well, this is not merely based on opinion or whether or
> not user's tend to look at the bottom right, it's based on the
> studies that I have conducted.

I'd really be interested to know more about these studies you've run.
W/o the context of the audience, the tasks, and some background, it
makes it really difficult, and frankly dangerous, to apply your logic
here globally.

As a design researcher, I know that when seeing the results of a
study, the first question is "how was it run?" I'm not saying your
evidence is false, I'm saying that w/o real context, it doesn't really
help as much. Sorry, that's just the nature of true, experienced
research.

> Many designers default to the right because Search is followed by a
> button, upload, browse, etc., are followed by a button to the right
> or beneath. The North American mindset 'assumes' that the right side
> means forward.

Hmm, that's odd, because most designers I know put the default button
to the right, because it's been accepted as best practice based on
over a decade of HCI research. Guess we know different designers.

> Whether the Next link is an actual button and the Previous is a
> hyperlink, it is commonly already understood that the user knows
> that some form of moving forward is at the bottom. If they look
> bottom/right and see that it's
> not there, Low and Behold, they simply look to the left and the Next
> button smacks them right in the face...no harm done and the user
> simply moves on.

But this breaks your theory of "most intuitive." Now you're making
them hunt. If they're automatically looking bottom left, then just put
it there. Eventually finding it doesn't equal intuitive and not
breaking their flow in my book. But maybe that's just me.

> Especially when a form is Left Justified for readability, users will
> naturally look to the left to proceed forward.

To the next field, but not necessarily for the final action button.
You're failing to notice, or acknowledge that there's a difference
between a processing/call to action and filling in a form field. These
are slightly different mental processes cognitively.

As always, know your audience and design accordingly. Oh, and when
you're making research claims or sharing findings, it's helpful to
share some background and context.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

18 Sep 2008 - 1:35pm
netwiz
2010

On Wed, 17 Sep 2008 21:45:23 -0400, Brett wrote:

Nick, I take that as a personal attack. You replied to me personally and I did the same. If you do it publicly, I'll do the same.

Part of being an Expert is going against the North American-Mindset
and setting Trends based on Tests, Human Factors, Holistic Design,
Best Practices and Personal Conviction. I will never back down from
anything based on my Findings and Non-Biased Logical and Scientific
Conclusions. I will ALWAYS have a reason for the Logic of how I think
and for what my Users are saying and implying in my Studies.

I can't imagine why. When I posted to you privately by mistake, I
intended to post to the list. It wasn't a secret, and in that post I
did point out that I found the posting confusing. Having discovered my
mistake, I then sent the message to the list as I intended. What I
didn't do was to forward on your reply to the list - as I said, that's
up to you.

So I sent you a message, then sent the same message to the list, and
you take that as a personal attack?

We're having a debate here. We don't all agree. If we did, there
wouldn't be the same value. You're entitled to your opinion, and your
idiosyncractic use of capitalisation, but you shouldn't take
disagreement, debate, and mis-routed emails as personal attacks.
* Nick Gassman - Usability and Standards Manager - http://ba.com *
* I vote for reply-to to go to the list*

18 Sep 2008 - 1:37pm
Oleh Kovalchuke
2006

Interesting question indeed.

How about adding context and separating these two actions along vertical
axis?
Here is what I mean:

1. Show summary of completed steps at the top of the wizard screen with
"Edit" button -- this is your "Back" button.
2. Put only one "Next" button at the bottom of the screen (aligned with the
left edge of the fields per Luke's recommendation).
This is optimal solution, IMO.

For small screens (iPhone), putting "Back" button at the top of the screen
and "Next" at the bottom should do the trick.

--
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

On Mon, Sep 15, 2008 at 9:40 AM, Tamlyn Rhodes <tamlyn at tamlyn.org> wrote:

> As discussed by LukeW in Web Form Design, it's best to have the primary
> action of a form be the first button that the user sees. For left-to-right
> languages this means having the primary action on the left and any
> secondary
> actions on the right (see A in this illustration
> http://www.flickr.com/photos/rosenfeldmedia/2366430953/ ). In a multi-page
> 'wizard' style form, the primary action is usually 'next' or 'continue' and
> the secondary action is 'back' or 'previous' but at the same time the
> conceptual model for such forms is that the screens are arranged
> progressively from left to right (the ipod/iphone interfaces even animate
> the transition).
>
> In such situations is it better to have the secondary action, 'back', to
> the
> left or the right of the primary action, 'next'? Or is there a better
> solution?
>
> Cheers,
>
> Tamlyn.
> ________________________________________________________________
> 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
>

18 Sep 2008 - 11:15pm
Elizabeth Bacon
2003

One aspect of "previous" and "next" that bears mention here is
that conceptually they could be considered a pair. If the design
situation calls for both regularly, it's sort of like the situation
with "rewind" "play/pause" and "forward" wherein they're
hardly even separate controls. (And of course time moves on to the
right.) Multiple control options within a set could be visually
designed to appear as much like one as possible, and placed together
in the best optimal-for-the-user-to-see location.

This thread is fairly ludicrous because of the lack of context for
both the original question and additional inputs. Still, both amusing
and educational as long as we stay polite! :)

Cheers,
Liz

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

19 Sep 2008 - 2:08am
netwiz
2010

lists at elizabethbacon.com (Liz) wrote:
> One aspect of "previous" and "next" that bears mention here is
> that conceptually they could be considered a pair. If the design
> situation calls for both regularly, it's sort of like the situation
> with "rewind" "play/pause" and "forward" wherein they're
> hardly even separate controls. (And of course time moves on to the
> right.) Multiple control options within a set could be visually
> designed to appear as much like one as possible, and placed together
> in the best optimal-for-the-user-to-see location.
>
It's worth reflecting that that's what the browser controls are like.

As an aside, I'm sending this from my web-based version of home email (it gets complicated). I fill in a text field to write this, then if I go bottom left, the most obvious button is actually 'inbox', which loses my inputs. I've done that more than once. So why am I looking to the bottom left? I don't think I do that on other forms.

The 'send' button is placed more to the right. They are both html buttons. If the 'send' button had a stronger design to make it stand out, then I think it would work better. It goes to show that often you can't just take individual dimensions, but it's the interaction between elements that makes the whole (e.g. positioning, colour, size, etc)

Nick

19 Sep 2008 - 5:07am
tamlyn
2008

Wow, I never expected my question to spark such an intense discussion
but I've been reading all the replies with great interest.

As regards context, I was deliberately a bit vague because I was
looking for general rules rather than a solution to a specific
situation but we are currently designing a three-page form where the
choice on the first page affects the options available on the second
page and the third page is a summary/confirmation of the first two
choices. Therefore "Continue" is very much the primary action but
"Back" is useful in order to change previous choices.

I like Oleh's suggestion of showing a summary of previous choices with
an option to edit each. That's something we do elsewhere on the site
and it seems to work.

Otherwise I think the most sensible option, as suggested by the
majority in this thread, is a bold "Continue" button in the bottom
right and a lighter "Back" link in the bottom left - the form is only
about 550 pixels wide so they won't be too far apart. The only reason
I didn't go straight for this solution is LukeW & Etre's eye-tracking
study which showed that a form works best when the primary action is
on the left, aligned with the form fields.
http://www.lukew.com/resources/articles/PSactions.asp But I guess, as
usual, it depends!

Thanks for all the great insights,

Tamlyn.

19 Sep 2008 - 7:16am
Anders Ljung
2008

I was personally a bit confused when i installed Firefox 3 and used
the Find feature for the first time. The widget order is:

Find: (? search string) [Next] [Previous]

This broke my mental model of the direction in the document.

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

19 Sep 2008 - 7:29am
Todd Warfel
2003

On Sep 19, 2008, at 6:07 AM, Tamlyn Rhodes wrote:

> I didn't go straight for this solution is LukeW & Etre's eye-
> tracking study which showed that a form works best when the primary
> action is on the left, aligned with the form fields.

That's also just one study, which contradicts years of HCI research. I
would interpret this to mean that either it's an unusual case, or that
time are changing. It's difficult to know w/o follow up studies.

A few cautions about eye-tracking, having done a few studies myself,
it only measures where people look and for how long. It doesn't tell
you why they looked there or where they clicked. It doesn't measure
hand-eye coordination. Where people look is important, but ultimately,
it's important to know where they looked, where they clicked, and why.
Eye-tracking only provides part of that answer, just like web log
analytics only provide part of that answer.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

19 Sep 2008 - 7:50am
bminihan
2007

I can't help but think in pictures, so I mocked up two more or less
efficient ways that both perspectives could work well, here:
http://tinyurl.com/3k2d92

Obviously, they're 5 minute mockups, but perhaps it might help
clarify the two different views. In the first case, it would seem
pretty silly to put the Previous button to the left of Next, while in
cases 2 and 3, Previous *could* go to the right of Next, but that
doesn't seem to flow as well in those layouts.

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

19 Sep 2008 - 8:09am
Jack L. Moffett
2005

Brian,

But wouldn't this layout work better than any of those three?

http://gallery.me.com/jackmoffett#100025

On Sep 19, 2008, at 1:50 AM, Bryan Minihan wrote:

> In the first case, it would seem
> pretty silly to put the Previous button to the left of Next, while in
> cases 2 and 3, Previous *could* go to the right of Next, but that
> doesn't seem to flow as well in those layouts.

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

In our society,
the scarce factor is not information,
it is time to attend to information.

- Herb Simon

19 Sep 2008 - 8:19am
bminihan
2007

Jack,

Yeah, that's probably the design I would wind up with, myself =]

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

19 Sep 2008 - 7:33am
Kordian Piotr Klecha
2008

Anders,

this is interesting case, because mental model collides with action
primacy here. In most of cases you are searching documents from top
to bottom - so pressing "next" is main and most often realized
action after typing a phrase and pressing ENTER. This, connected with
horizontal layout of search-box, leads directly to problem you have
mentioned. I don't know if there is any best solution.

Greetings,
Kordian

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

19 Sep 2008 - 12:44pm
netwiz
2010

On Fri, 19 Sep 2008 11:07:12 +0100, Tamlyn wrote:

>I like Oleh's suggestion of showing a summary of previous choices with
>an option to edit each. That's something we do elsewhere on the site
>and it seems to work.

I think that speaks to what I think is a generally accepted principle
of user reassurance, which includes playing back selections that have
been made, both to let people know that their inputs have been
correctly recorded, and to allow them to correct any wrong inputs.

>Otherwise I think the most sensible option, as suggested by the
>majority in this thread, is a bold "Continue" button in the bottom
>right and a lighter "Back" link in the bottom left - the form is only
>about 550 pixels wide so they won't be too far apart.

The way we do this is to use different colours, where another option
is to use strong and light of the same colour. I think that both
options should be visible and obvious, but it should also be obvious
which is the primary option.

* Nick Gassman - Usability and Standards Manager - http://ba.com *

19 Sep 2008 - 12:49pm
netwiz
2010

On Fri, 19 Sep 2008 05:50:23, Bryan wrote:

>I can't help but think in pictures, so I mocked up two more or less
>efficient ways that both perspectives could work well, here:
>http://tinyurl.com/3k2d92

Bryan, that's great. It's been pointed out more than once that we're
discussing the issues outside of context, and without examples. This
really helps. We should do more of it.

The first dimension that I would add to your designs would be colour.
You are using (I think) standard html buttons, and elements of
additional design that many websites use can impact usability. If the
primary action had a strong colour, it could do a lot to counter
position, and fit better with the mental models that others have
referenced.

* Nick Gassman - Usability and Standards Manager - http://ba.com *

Syndicate content Get the feed