5

I've simple password change form. I'm wondering where to place call to action buttons.

1 option:

enter image description here

  • big blue call to action is placed under the text fields
  • focus on the first text field - we display "next" button on the keyboard bringing user to the next text field
  • focus on the third text field - we display "save" button on the keyboard

2 option:

enter image description here

  • link save is placed on the right side of the header
  • focus on the first text field - we display "next" button on the keyboard bringing user to the next text field
  • focus on the third text field - we display "save" button on the keyboard

3 option:

enter image description here

  • there aren't any other call to action, excluding call to actions on the keyboard
  • focus on the first text field - we display "next" button on the keyboard bringing user to the next text field
  • focus on the third text field - we display "save" button on the keyboard

Best solution:

I think that the best solution is the the first one, because it would be easier for the user reaching call to action button "Save". If call to action is on the keyboard or on the right side of header it's harder to reach CTA according to this:

enter image description here

6
  • 2
    Seems like you've already answered your own question in your question =D Apr 2, 2014 at 15:00
  • ;) This is only my point of view, maybe I'm wrong, who knows? Apr 2, 2014 at 15:15
  • 1
    I don't know that I'd use the term 'call to action' for that. The action is the page itself...fill out the form. The 'call' to action should have happened before the user gets to this page.
    – DA01
    Apr 2, 2014 at 17:38
  • (also: can you customize the button on the keyboard? I wasn't aware that you could.)
    – DA01
    Apr 2, 2014 at 17:40
  • 1
    @DA01 One can customise everything on an iOS keyboard :)
    – grg
    Apr 20, 2014 at 10:03

6 Answers 6

1

I wouldn't opt for any of presented options. Two latter fall out of question, because CTA is too far and detached from the action it submits. First option has a doubled CTA, and doubling essential controls confuses users.

There is also no need to show "Next": users know when it comes to confirmation, it's a sequence, a wizard of a sort. You cannot jump to last step without completing all that comes before, and in certain order: 1. enter existing password, 2. enter new password, 3. confirm new password, 4. submit.

All you need to do is to deactivate Save button until all other forms are filled in correctly.

enter image description here

1

The 2nd option is the best, and complies with apple's UI guidelines. In my own words; the centre of the navigation controller should contain the name of the view; the right button should indicate anything important related to the view, like a '+' to create something or done to save

This is followed by many popular applications. For example:

instagram password change view twitter edit profile view

My answer ends here, below is a different user flow I think you could use.

Different approach:

Now if you want to change this a little bit. Don't ask the user to retype the password in the form. Your form will include only the old and new password fields. On clicking next/submit after the new password field, open a modal box with the input as confirm password. This way your submit button is right in front of the user and and hidden anywhere.

I saw this in an application, and found it pretty interesting. You could try it. But I'm not sure of usability advantages. It's just a different method.

0

I like option 1 as it is very clear what the user should do, and as you stated it is the only option that fits right in the easy-reach zone for both right- and left-handed users. I often find forms that use option 2 confusing because the CTA isn't where my eyes are when I reach the bottom of the form, so I have to search for it. It's also difficult for lefties to reach unless they have absurdly long thumbs. IMO, option 3 also falls into the same traps as option 2.

0

The first one is the best choice, at it is the most expected location for this type of view. On the other two, I'm looking for the "finish" button and not finding it right away, making me think someone made a boo boo.

0

I think second option is slightly better than the others. The first one is pretty good, but if you have form with more than 2-3 inputs, the "Save" button will be hidden under keyboard. And on iPhone 4 or Android phones, the height of display could be even shorter.

0

The first one is the best option: easy to reach and the colour makes it very easy to see where the 'save' options are. Option 2 is okay - but someone not as familiar with iOS may not see the button straight away as it isn't quite as obvious as the blocks of blue. Third one is a big no no for me - will take the user too long to find the button/if they can find it at all.

3
  • Welcome to the site, @lg365. Is there any evidence (such as standards or studies) you can cite to support your post? Dec 11, 2014 at 13:46
  • What makes you say that "someone not as familiar with iOS may not see the button straight away"? (Can you shown what makes the OS impact the layout?) Dec 11, 2014 at 13:46
  • I haven't found a study - but when we have been doing user testing with the iOS6 and iOS7 we found that users, when first opening the app, expected buttons to have a defined shape rather than just text. If the colour was distinguished (such as the blue above) they were more likely to tap it. But using the grey which blends in with the background is not even used in any of the preset apps in the iPhone: they use the blue. This is just my experience though so please disregard if there are studies against this.
    – lg365
    Dec 11, 2014 at 14:10

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.