SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Zealot marcoBR's Avatar
    Join Date
    Jun 2002
    Location
    Brazil
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Buttons Positions and Usability

    A) What's the good way to dispose buttons on one step form pages for better usability???

    1) Submit - Reset - Cancel

    2) Submit - Cancel - Reset

    3) Reset - Cancel - Submit

    4) Cancel - Reset - Submit


    b) Also what's the good way for multiple step forms???

    1) Next - Cancel

    2) Cancel - Next
    Last edited by marcoBR; Jun 21, 2003 at 16:30.

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd go for:

    A) 1) Submit - Reset - Cancel
    B) Cancel | Back - Next

    A) because that is the order of power: submot does the buisness, reset clears to let you startt again, cancel gets you out of there
    B) again, feels logical: ^ | < - >
    Hello World

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Submit - Reset - Cancel, but using both reset and cancel may lead to confusion as to which button does what.

    Make sure you make it clear what will happen when each button is pressed.
    Wavelan

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, Submit - Reset - Cancel would be my choice as well.

    Re the multiple step forms, the Next button should be wrapped to the right of the DIV/Table Cell, and the Back/Cancel button should be over to the left. That is, with as big a gap as possible in between

    Like an installation program on a computer.

    -Sam
    Sam Hastings

  5. #5
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say, Submit and Reset centered or to the left, and Cancel (maybe with an [x]) off to the right. If there's a lot of data or if it's a complex form, have them confirm that they really want to clear out the whole form on reset, and it might not be a bad idea to have a way to only clear certain sections while leaving others intact.

    For multi-page forums, I think it's important to show where someone is in the process:

    [Submit] [Reset]
    <BACK | Daytime Contact - Night Contact - Emergency Contact - Personal Details | NEXT>
    [Cancel]


    Just a few thoughts. :-)

    ~~Ian

  6. #6
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree too with: Submit - Reset - Cancel

  7. #7
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ian Glass
    I'd say, Submit and Reset centered or to the left, and Cancel (maybe with an [x]) off to the right. If there's a lot of data or if it's a complex form, have them confirm that they really want to clear out the whole form on reset, and it might not be a bad idea to have a way to only clear certain sections while leaving others intact.

    For multi-page forums, I think it's important to show where someone is in the process:

    [Submit] [Reset]
    <BACK | Daytime Contact - Night Contact - Emergency Contact - Personal Details | NEXT>
    [Cancel]
    Just a few thoughts. :-)

    ~~Ian
    Ian in respect to your thoughts, I would like to mention here, that I cannot see the good usability here, when the user should move with his mouse over that distance, while the reason or target of this movement is absolutely redundant.
    Hardcore usability? Its up to you. [img]images/smilies/smile.gif[/img]

  8. #8
    Matt Williams revsorg's Avatar
    Join Date
    Jun 2002
    Location
    Planet Vorcon-5 in sector cx-37-b
    Posts
    1,136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoever invented the reset button should be shot. How many times have you carefully crafted your entries in a form and then wiped them all clean by accident by clicking a reset button?
    work: revs | ecru
    reviews: films | mp3s
    projects: Glastonbury Tor | London IT support

  9. #9
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the reset button still holds some value.

    I believe it is the designer's responsibility to position the button accordingly as to minimize the number of people who accidentally click it.
    Wavelan

  10. #10
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wavelan
    I think the reset button still holds some value.

    I believe it is the designer's responsibility to position the button accordingly as to minimize the number of people who accidentally click it.
    I tend to agree with Revs: Why do we need a reset button? If you want to change something, just go back and change it, no?

    Later,
    Douglas
    Hello World

  11. #11
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you just want to change something then it is best to go back and change it; however, if you would like to delete all contents of the form the reset button is much more practical.
    Wavelan

  12. #12
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wavelan
    If you just want to change something then it is best to go back and change it; however, if you would like to delete all contents of the form the reset button is much more practical.
    OK, refrase: Why would someone want to reset a form?

    Douglas
    Hello World

  13. #13
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by marcoBR
    A) What's the good way to dispose buttons on one step form pages for better usability???

    1) Submit - Reset - Cancel

    2) Submit - Cancel - Reset

    3) Reset - Cancel - Submit

    4) Cancel - Reset - Submit


    b) Also what's the good way for multiple step forms???

    1) Next - Cancel

    2) Cancel - Next
    I would like to suggest you, to have a look here, if you serious about usable forms.

    "Lose the “reset” button, it’s a common mistake for a user to hit this by accident".

    http://www.7nights.com/asterisk/arch...able_forms.php

  14. #14
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I absolutely agree with Webnauts, I don't recall ever using the reset button (I am sure some do of course), but I do recall resetting the form by accident. If I want to exit the form I'll use the back button or close the browser. I would however include a help link near the submit button with instructions (including accessibility intrucitons) on how to use the form.

    I am not sure about cancel and next, I would put the cancel button somewhere else on the page unless you need it to keep your DB clean.

    In short, I'd keep it simple and progressive, if I am there I want to submit, I want to proceed with the form, etc.

    DH

  15. #15
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    The most frustrating thing is filling in a long form and accidentally pressing the Esc key. Does exactly what Reset does.


    -Sam
    Sam Hastings

  16. #16
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by revs_org
    Whoever invented the reset button should be shot. How many times have you carefully crafted your entries in a form and then wiped them all clean by accident by clicking a reset button?
    This is always fun too:
    HTML Code:
    <input type="submit" name="submit" value="Reset" />
    <input type="reset" name="reset" value="Submit" />

  17. #17
    SitePoint Wizard davidjmedlock's Avatar
    Join Date
    Dec 2002
    Location
    Nashville, TN USA
    Posts
    1,688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're cruel Vinnie...

    I say Submit - Reset - Cancel, but as was mentioned make sure you tell them what is going to happen when they click Reset/Cancel.

    As for sequential pages:

    Back | Cancel | Next

    in a forward progression.

    Also, try this on your reset button:
    HTML Code:
    <input type="reset" value="Reset" onClick="return confirm('Are you sure you want to clear your information from the form?');">
    I just wrote it off the top of my head, but that should prevent your users from losing all their info if they hit the wrong button.

  18. #18
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    David, I think you want "confirm" instead of "prompt".

  19. #19
    SitePoint Wizard davidjmedlock's Avatar
    Join Date
    Dec 2002
    Location
    Nashville, TN USA
    Posts
    1,688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh! A little rusty on those functions, but yes, you're correct Vinnie.

  20. #20
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess the option of David is a cool idea!!!
    But is that 100% accessible? An option to make it accessible would be, to add "onKeyPress".

    But I still think that the link I have previously provided, would be the best option: "PREVIEW" button before submitting. Or?

    Once again, see the form here if you have not done so already:

    http://www.7nights.com/asterisk/arch...able_forms.php

  21. #21
    SitePoint Zealot marcoBR's Avatar
    Join Date
    Jun 2002
    Location
    Brazil
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by marcoBR
    b) Also what's the good way for multiple step forms???

    1) Next - Cancel

    2) Cancel - Next
    New model:

    1) Next - Previous - Cancel

    2) Cancel - Previous - Next

    What's your preferred?

  22. #22
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Reset and Cancel Buttons
    Reset and cancel buttons cause errors when users click the reset button instead of submit. Using the back button to cancel/reset a choice is enough for most users. Exception: Provide a way to delete products from shopping carts.

    Read more: http://www.useit.com/alertbox/20000416.html

  23. #23
    SitePoint Zealot
    Join Date
    May 2002
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I may be the odd ball here but I would do a reset-submit-cancel. Just because I would like the button that actuall do the job to be in the middle (of the screen, page, etc..). And cancel to be the right side of the submit. It's just more logical to me. just my 2 cents.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •