Forms with Remember Me or Save for Later

Question

A reoccurring form appears where a user is presented with a short form followed by small checkbox and then a submit button. My personal experience using these things is that I don't notice the checkbox until I've already clicked the button. This forum discusses aspects of these forms but my issue is that folks miss it. There are three elements in this form - (1) the main form, (2) the submit button, and (3) the checkbox. Folks go directly from (1) to (2). My thought is that the checkbox (3) is not prominent relative to the submit button and to address this problem make make (3) more prominent. The linked post suggests using radio buttons and force the user to pick on or the other which I guess could work too.

For example,

OR

Here are a couple of ideas.

Another, more complicated example appears below. My thought is to pull that checkbox out of the file list and put it as a main button labeled Upload + Save.

Another approach to this problem is to let folks save or remember post submit. For example, in the case of files, have a save button elsewhere in the interface so if folks want to later save, they can do it then.

---

A couple of other examples of this situation occur with Gmail and Outlook rules. The latter resembles the suggestion to use a modal dialog. In the case of Gmail, I usually miss the opportunity to apply the rule to existing messages and would prefer either the Outlook approach or the second button.

Answer 1

There's only one idea that's clearly different from the other ones, B.

I often too, overlook the checkbox entirely (not that I really miss it, with chrome storing all my passwords). It's the most common design pattern yet, to me (and you), it just doesn't feel like good UX.

As I mentioned, my choice would be B. Checkboxes are easy to miss as they might not always be required. A button is the final (and arguably most important) step of the process. Having 2 (clearly labeled) buttons let's the users put some thought in it before clicking the right button.

This, of course, isn't suitable for every web form. Larger forms or forms with sensitive data are more carefully read than, say, login forms. In those forms, a checkbox will often suffice.

Answer 2

EDIT: Check the end for the final verdict, and my favorite option.

If it doesn't impact site performance or otherwise negatively influence anything on your site, and you're not worried about server space, you could simply have the checkbox with a default checked state/attribute, and the user would have to uncheck the box in order for the file not to be saved.

Sorry jelaplan, but I don't mean just to shoot down your work and opinions, I just wanted to get my thoughts and ideas out here. Anyways, here are my (honest) takes on the other proposed options you have:

---

A) Subtle. I'd just skip over that one as easily as I would the original "keep me logged in" image. Just because you accent the checkbox and label doesn't make sure the user will see and read it.

---

B) Redundant, awkward. Having two separate buttons, both with the "Upload" function is a bit unnecessary and weird. In addition, these two buttons are slightly unwieldy and might be both subtle and confusing.

---

C) Confusing. The slider looks somewhat like it could be a styled button. I remember using this iPhone-styled checkbox in one of my previous sites, but it was just so uncooperative and unpopular that I switched back to more regular, styled checkboxes instead. I found that this option also isn't very cross-browser compatible, and takes too much work to get working.

---

D) Optional, not flexible. These radios might be ignored (as a survey would), and a user might become frustrated and turn away as a result of not being able to figure out why a file won't upload and the form won't submit. Also, it's not very flexible in case you have many different locations to save files to.

---

Another, more complicated example appears below. My thought is to pull that checkbox out of the file list and put it as a main button labeled Upload + Save.

I didn't really like this option because the same reasons as A and B. This would be pretty subtle (even with animations, which take time), and it might be pretty confusing and ignorable if the user just wants to quickly drop and run.

---

Another approach to this problem is to let folks save or remember post submit. For example, in the case of files, have a save button elsewhere in the interface so if folks want to later save, they can do it then.

This option would either require saving all files, which brings up two issues:

• Users won't like it for privacy and security reasons. You won't like because it increases server space requirements exponentially, and makes databases incredibly difficult to manage.
• If you don't save all files to allow users to save/reorganize them later, this option would require a reupload, which is troublesome for large files and would definitely turn users away. Also you'd need a way to find the same file on a user's drive, which may have changed since the last upload.

---

The Verdict

Those are all good options. How about just "Save" and on click of Save, show user a dialog box to save the files for future use (with remember this option). User would rather have a dialog than see multiple buttons on the same page and most likely will not notice.

Yes Balaji Natarajan, finally someone who thinks just like me! I was going to suggest this option myself! Wonderfully, showing a modal dialog would have several advantages over all the other options:

• Obvious: Modal dialogs are incredibly difficult to ignore, unless you neglect to remember that closing the dialog is an unacceptable option in your case and build in a close button, or if the user edits the page. Rather than simple alerts, confirms, or prompts that JavaScript would use and possibly be skipped over, a hand-crafted modal would make the user read options and act before they can submit a file.

• Not Redundant: Show only one modal with many different options. Basically, a separate form with whatever you care to put there, and an obvious separation from the rest of the page. Here, even just a checkbox would work, since you've already grabbed your user's attention.

• Simple: There's no room for confusion! Very simple language and short options should suffice, and in this separated modal context, almost anything should work and fit in.

• Flexible: You can change anything to your heart's content. Feel free to allow your user to specify where to save their file, or any other options you or they could possibly ask for.

• Privacy: With an unignorable choice ahead, users can't focus on anything else or ignore it. Therefore, their decision is made on the spot, and you don't have to worry about saving their files and organizing massive databases. Also, users can be assured that only the files they are sure will be needed again are on your servers, and that their information isn't being mined or sold off to some third party. Similarly, reuploads are unnecessary.

• Let's Be Real: Making a modal dialog and having everything linked up is a lot of work. If you're looking for simplicity, are willing to implement another library, and are okay with using JavaScript client-side scripting, I would suggest Hakim El Hattab's Avgrund modal dialog option. It's pretty simple, beautiful, and flexible. All you need to do is disable interaction with the background page while the modal is open. This could easily be done with JavaScript's event.preventDefault(); function, which doesn't even require jQuery!

Code Snippet for "Let's Be Real": (probably requires modification)

document.body.addEventListener(ignoreEvent);
function ignoreEvent(event) {
    if (modal.showing) {
        event.preventDefault();
    }
}

Answer 3

To decrease the upfront cognitive load, and guide the user on optimal course, I would recommend the initial upload dialog not having a prompt about file saving at all.

Rather have the confirmation message explain system state, and allow for fine grained control if required.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

Those are all good options. How about just "Save" and on click of Save, show user a dialog box to save the files for future use (with remember this option). Especially in a mobile experience, user would rather have a dialog than see multiple buttons on the same page that he most likely will not notice.