Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
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 at 12:55
    
@MattObee UX question. –  Igor-G Feb 18 at 13:41
    
Are you allowed to change the screen around? For example put the buttons at the top, above the text? –  vincebowdren Feb 18 at 22:05

3 Answers 3

up vote 7 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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