0

I was asked to add autofocus to the confirm button:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Works great, there are lot of confirmation info text. When testing on small screen or a mobile device the screen jumps to the button skipping all of the information text. This behaviour is not good for the user, they don't know what they are confirming.

Is there a better way to select the button, or is it better to make it tabindex 1?

3
  • Is the question about how to prevent the screen jumping (an implementation question) or whether you should give focus to the button at all (a UX question)?
    – Matt Obee
    Feb 18, 2014 at 12:55
  • @MattObee UX question.
    – Igor-G
    Feb 18, 2014 at 13:41
  • Are you allowed to change the screen around? For example put the buttons at the top, above the text? Feb 18, 2014 at 22:05

3 Answers 3

7

you should NOT auto-focus in this situation, you are increasing the chance of accidental confirmation.

If the scenario is that "confirm" has to be clicked in order to proceed then you have already indicated "Confirm" as the primary action and "Cancel" as the secondary.

0

I often go even further than @user43457 and us Javascript to disable the enter key (this also stops any issues with more than one button on a page)

Part of any program is guiding the client into best practice and explaining how their client/potential customer,i.e. 'the money', might be upset if they in effect sign something without reading it first, accidentally or otherwise.

0

Making the button an early tabindex is one of the best options you have.

Also, since the action is already visibly relevant, it's the option the users are going to tap/click the most, just by default action.

Also, if what they are acknowledging is a license, conditions, general terms or similar text, users will tap/click/accept by default because there is no other way to keep going on the application. Even when they haven't read what they are acknowledging. So you can count on that defective behaviour.

If the text and the confirmation are really necessary, and you want the user to accept it, just make it more visible that the cancel option. You can make it a bit bigger, or make the cancel button look like it is not clickable/tappable. Any option that makes the "confirm" more visible works. Although, in my opinion, both buttons should have the same visual weight since both are as relevant, they both represent the user's option and decision.

Finally, and this is a matter of opinion, I would use a consistent design, if the "confirm" is a button, then cancel should also be one, even if your idea is to direct the user to a page where something is explained.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.