2 of 3
edited title

How should 'Quit', 'Save Draft', and 'Continue' be positioned on mobile web?

I'm working on a web app where users must answer some questions, then continue to the next page. They also have the option leaving the question process but saving their place (Save Draft) or just leaving the process without saving their place (Quit).

Given that the primary action is 'Continue', I'm suggesting it be full-width and a prominent color. 'Safe Draft' and 'Quit' would be placed either above or below it, and that's where my question comes in.

I think it makes more sense to put 'Save Draft' and 'Quit' above, as I believe that would prevent fat fingering when trying to hit 'Continue'. The other designer says to put 'Save Draft' and 'Quit' below continue, given that as a primary action, it should come first. Is there a best practice when laying out these actions, or are there any insights you guys may have?

Options