2

Note: Due to the constraints of this project, I can only touch the CSS. Basically, we're being hacky and styling this desktop site so that it's halfway usable on mobile.

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

Improve this question
7
  • 2
    Does "save draft" quit immediatly? Because that might be a bigger problem than the layout (two actions behind one button). You could also have "Quit" and "Continue" only. A click on "Quit" will automatically save for later. When the user starts the app again, you could ask if he likes to start from the last saved question or start all new.
    – Lovis
    Sep 19, 2013 at 20:45
  • This question might also help a little bit ux.stackexchange.com/questions/44787/… (not saying it's a duplicate)
    – greenforest
    Sep 19, 2013 at 20:50
  • 1
    @DonL. Both 'Quit' and 'Save Draft' (which is more like save and quit) ask for confirmation. We're working with a database that's already in place, though, so while I like your suggestion, we can't implement it.
    – Daniel Cortes
    Sep 19, 2013 at 20:52
  • If you are asking for confirmation anyway, maybe just remove the "save" and add a third option to the "quit" confirmation
    – Lovis
    Sep 19, 2013 at 20:53
  • 1
    All we can do is style it, it's a really messed up project. We're basically taking the output of a CMS and slapping some CSS on it. We can move things around and change how it looks and that's about it :-(
    – Daniel Cortes
    Sep 19, 2013 at 21:03

3 Answers 3

Reset to default
2

What I propose is this:

enter image description here

  • "Save Draft" functionality (saving the progress of user) could easily be replicated when user clicks on "Continue" and hence there is apparently no need for a separate "Save Draft" button.
  • "Save and Quit" can be used by user when he wants to leave in the middle but also wants to save the progress. There will be no confirmation dialog box when user clicks on it.
  • "Exit" button is self descriptive and tells the user that he can exit this whole thing by clicking here and as such he wouldn't be expecting the software to save his progress.
    Here, you could have a confirmation dialog box asking user for his willingness to exit the application and not save the progress. It could say "Do you want to save the progress? Yes or No". If user clicks on "No", he exits without saving and if he clicks "Yes", he will exit while saving the progress much like the functionality of the button "Save and Quit".
Improve this answer
1
  • Is it ok that continue saves without the user's knowledge? Will they become confused about whether their data is saved?
    – Gray
    Sep 20, 2013 at 16:53
1

A few insights on your design:

  • You are placing a Quit button in a close proximity to the Continue button - meaning some may hit it by mistake. Specifically as Continue is the prime business goal. I would move the quit to be a small X icon on the top of the page. Also bear in mind that for forgiveness sake, you should offer a cancel option after quit is pressed.

  • With both Quit and Save Draft the users would not wish to continue. So you can compact these two action into one, simply called Quit (or the X icon on top), when the user clicks it, offer:

    • Delete Draft (delete is better than just quit as it signifies some loss of work may be involved).
    • Save Draft.
    • Cancel (in case someone clicked Quit by mistake).

This how the mail app on the iPhone deals with the delete request:

A Screen Shot of the menu showing after you press delete in the iphone mail application

Improve this answer
0

How many questions do users have to answer? If it's just a handful of them, and they're not too complex, maybe saving a draft isn't that necessary.

Could they just click/tap on the answer and proceed automatically to the next question? That would allow you to have the back at the top left (as iOS usually has it) if they want to change it. That way you'd only have 2 buttons to worry about: "Cancel" and "Save Draft" (if my previous question hasn't discarded that already).

Could you have a "Next" and a "Previous" question buttons and save the session automatically with every "next"?

Improve this answer

Your Answer

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

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