HN Explorer

Ask HN: any suggestions for this form usability problem?

4 points by westiseast ↗ HN
I have a form usability issue, but I'm not sure how to solve it. Any suggestions hugely welcome!

THE CONTEXT OF THE FORM:

It's a form on an ecommerce store, as part of the ordering process, and I'm asking for name, email and address. This is the minimum amount of information required, so I can't reduce the number of fields.

The form fields are arranged vertically, use a large font-size, and are relatively well spaced. I don't really want to reduce the height of the fields or the spacing of them - I've intentionally made it big and simple.

In a right-hand-column, at the top of the page, is the 'Submit' button.

THE PROBLEM: The submit button is above the fold, but once the user has finished filling in the form fields, they're now scrolled down the page, and they can't see the submit button at the top.

I thought of a couple of possible solutions:

(a) A position:fixed CSS property, so the button scrolls.... but I hate scrolling elements, they look like pop-up ads. (b) I repeat the Submit button at the bottom of the form... but then will users get confused about why there are two buttons, which should I click etc.? (c) Only put the submit button at the bottom... but then when users first arrive on the page, they don't see an 'action' button.

Any new suggestions, or favourites from the above?

(ps. I haven't included the link because I don't want you to think I'm chasing traffic for my site. But if you want to see the form in action, I'll post a URL)

8 comments

[ 3.1 ms ] story [ 34.4 ms ] thread
realize
Put the button on the right in the middle - see it from the top and the bottom.
westiseast
Doh! Sometimes the obvious is staring you in the face... I'll try it and see
nantes
One of my favorite ways to avoid user confusion is to use visual cues. So, maybe, when all three fields meet some sort of client-side validation rules then a button fades into view below the last field.

Or, you could highlight the field in focus, including the button.

The fallback for no Javascript would just be two buttons or the 'scrolling' button.

Alternatively, maybe some subtle pathways in the graphics of the pages. Maybe something as simple as a arrow or path that leads the user from one field to another and then finally to the button.

westiseast
I'm aiming for no JS, so the visual clues sound OK. There's two obvious fieldsets, so I'll try something with an arrow leading you from one, to the other, then to the submit button. Thanks!
nantes
Normally, I would make an argument that the amount of use without Javascript is very low. However, given the ecommerce nature, I can understand the desire to reduce Javascript dependencies.

You might give <http://reference.sitepoint.com/css/pseudoclass-focus>; a try. It's CSS2 and appears to work on IE>=8 and all other major browsers.

I could see a scenario where :focus and Javascript could be the default behavior, falling back to just :focus, then falling back again to just two buttons, could work.

Good luck!

splatcollision
First thing to think of is this: Why do you need the submit button to be in another column at the top?

Put the submit button on the bottom, after the last form field. That's where people expect it to be.

Forms for checkout experiences are not the place to do radical things with user interfaces...

westiseast
good point. I've got it in the top right on the 'basket' page so it's super obvious how to proceed (it's a huge big "Checkout" button), and so wanted it to be in a consistent position so the user doesn't need to 'relearn' where the button is on the next page. But I'll take that on board - maybe it is more logical at the bottom of each page...
splatcollision
No shame in having multiple checkout buttons either - didn't know of course what else you had in your right column!