Next & previous button order (long)

19 Sep 2008 - 6:52am
1 year ago
3 replies
1837 reads
Caroline Jarrett
2007

Nick wrote:

> 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.

Here's what I've learned from many years of usability testing and some
eye-tracking studies of forms.

What users really do is look for 'next box for me to type in'. They'll also
recognise, but not quite so strongly, 'next control for me to interact with'
(radio buttons, check boxes, drop downs).

At each step, the eyes (mostly) drop vertically from the box just filled in,
turn left to read the label, back to the box, fill in (or interact with
control), drop vertically again.

(Exceptions: sometimes the eyes will read a few labels and then track back
to fill in a few boxes, e.g. if the labels are extremely predictable as in a
name/address block, or if the questions are strange or invasive. Sometimes
the eyes will read a few boxes e.g. if the boxes are pre-filled. Sometimes
users just do inexplicable things. So now back to the general pattern).

At some point, the boxes to type into run out but users don't know that
until it happens. The eyes have dropped vertically, and look: no more boxes.
Ideally, at this point, the vertical drop puts you directly onto the button
that finishes this page of the form: send, submit, next, ok, whatever is
appropriate in the context.

If the button isn't just there in the vertical column, then the eyes hunt
around a bit, looking for the correct button.

If the button vertically under the left-hand end of the form fields, or the
closest to that position, happens to be 'Reset' or 'Cancel', or in Nick's
example 'Inbox' - then oops, a lot of people will click it reflexively
because the 'button' visual quality overrides the text written on it.

If the user doesn't WANT to finish the form, then the hunting pattern
varies. That's when the general convention of 'next' being on the right and
'previous' being on the left kicks in.

I think Brett's result of 'next' working better on the left is happening not
so much because 'next' is on the left, but because that puts 'next' directly
under the left-hand edge of the form fields. Would be handy to see s few
examples, please Brett, so that I can verify this guess.

If you read Luke's discussion on this topic with this information in mind,
then it's obvious why his separated Cancel and Submit buttons didn't work.
It's because in that design, Cancel was placed most directly under the
left-hand edge of the form fields. Would have been fine if the buttons were
the other way around.

http://www.lukew.com/resources/articles/PSactions.asp

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

Comments

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

Caroline,

great explanation; I've got only one doubt - your thesis assumes
that users in every moment see only one thing they are just looking
at. They notice button when they look directly on button.

I have the impression that - at least more advanced - users notice
distinctive, characteristic elements even without spotting: when only
that elements appears in sight. That's why in general case visual
distinction between actions (i.e. using green color button for
"accept" and only text-link for "cancel"), linked with proper
tab-indexing looks for me as the most important thing; far more
important than placing button on the left or right.

Best,
Kordian

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

21 Sep 2008 - 9:32pm
LukeW
2004

To chime in here. Caroline lays it out exactly right in terms of when
and how people come to the end of the answering the questions they
need to on a form. Hence the the principle of putting the action that
allows them to make forward progress right in their "line of fire".

One of the reasons there may be so much debate about this topic is
that often designers/developers assume they are making a "wizard" and
that people will need to move back and forward through a series of
steps. In the vast majority of Web forms, people just want to get
through them and move on. I've seen this reinforced in many form
analytics.

anyhow, the conversation prompted me to write up my two cents on this
topic:
http://www.lukew.com/ff/entry.asp?730

thanks to everyone's contributions on this list! it helps makes the
Web better when we all get together and fix the design of forms!

On Sep 19, 2008, at 4:52 AM, Caroline Jarrett wrote:
>
> At some point, the boxes to type into run out but users don't know
> that
> until it happens. The eyes have dropped vertically, and look: no
> more boxes.
> Ideally, at this point, the vertical drop puts you directly onto the
> button
> that finishes this page of the form: send, submit, next, ok,
> whatever is
> appropriate in the context.
>
> If the button isn't just there in the vertical column, then the eyes
> hunt
> around a bit, looking for the correct button.

::
:: Luke Wroblewski -[ www.lukew.com ]
:: Principal/Founder, LukeW Ideation & Design
:: luke at lukew.com | 408.513.7207
::
:: Blog: http://www.lukew.com/ff/
:: New Book: http://www.lukew.com/resources/web_form_design.asp
:: Book: http://www.lukew.com/resources/site_seeing.html
::

26 Oct 2012 - 5:34am
Dennis Williams
2008

why not use vertical space for forward / backward actions (cant recall that I've ever seen next/back buttons stacked vertically?) - in the case of primary actions vs secondary actions? If I understand the theory and analytics above - users follow a vertical line down to see what input/action the form is offering next.. so will it not be an option to have only one button in the row (the primary choice to completion) - and in the next line or row the secondary option for back? They can both be in the left-edge-aligned visual downward path? 

Syndicate content Get the feed