Affirmative button placement when buttons are stacked

Question

I am working on an app where I have two call-to-actions stacked. I currently have 'Cancel' on top and 'Delete' underneath. Usually, when the call-to-actions are side by side I'd have 'Cancel' on the left and 'Delete' on the right, as in this case delete is the affirmative action. Should 'cancel' appear first and 'delete' second when the buttons are stacked?

Thanks for your help in advance!

Answer 1

I'd place the delete button on top for two reasons:

1. As you said it is the affirmative action, it's the more important one so it needs to be higher in the button hierarchy.
2. If it is placed on top it requires more effort from the user to tap it compared to the cancel button which is placed beneath it, so we're making sure that the user won't touch it by mistake.

And as always the best way to make sure that it is the best choice you should perform a user test and see their behavior and whether they touch the wrong button or they have to think twice before tapping the one they want.

Answer 2

What a great question - this gave me the opportunity to do a quick check of some of the apps I use a lot to get an idea of how others handle this.

I pulled screenshots from a banking app and Dropbox and they both put the more important or requested action up top and the cancel/back/undo beneath the top button.