1

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,

enter image description here

OR

File Add + Save

Here are a couple of ideas.

enter image description hereRadio button solution

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.enter image description here

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. Gmail Filter Popup enter image description here

2
  • 4
    Welcome to the site, @jelaplan! Your first post is well thought out, but it's not entirely clear what your question is. Can you clarify your question? (It'll probably be something like "which of these options is better for {a particular context with particular requirements}") The answer will largely come down to how important it is for people to see the option before clicking the button. Aug 29, 2014 at 19:16
  • So your question is: How do I make the checkbox visible enough to make users notice it? Aug 29, 2014 at 20:23

4 Answers 4

0

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.

1

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();
    }
}
6
  • 1
    Quite a long post here, and much of it is really comment on the question and other answers rather than a unique answer in its own right (after all, this is a Q&A site, not a forum). But you make some interesting points really. However I would dispute your assurance that modals are the best thing to do here. They're not very accessible, and they aren't really that mobile friendly either. I am also not sure they add to the general UX as it adds in a whole extra dialog to what is really a simple process. Are you sure that forcing a modal on people is what they want?
    – JonW
    Sep 1, 2014 at 7:57
  • TL;DR : Modal dialogs FTW. Did it have to be this long though...?
    – Vince C
    Sep 1, 2014 at 12:10
  • @JonW, I apologize for the lengthy post, as I didn't really consider how long I would be writing. I only just wrote about what I thought until I felt like I had written what I thought was enough for myself. Once again, I do see why you might think that modals aren't that mobile friendly, but if a user is uploading files, it is most likely that they are on a full-fledged computer. Also, the majority of modern phones that support files and uploading, as well as web browsing are well-equipped to handle modals.
    – andrewgu
    Sep 2, 2014 at 4:05
  • Keep in mind that these situation usually arise from a 'oh by the way' opportunity to give the user some extra nuance. I'm not enthusiastic about the modal dialog approach because it is onerous to force the user to take action. If I want to force the user, I could make the checkbox or other option a required field. The radio buttons approach is also heavy considering it is a convenience option. I agree that adding an extra button is slightly awkward.
    – jelaplan
    Sep 2, 2014 at 16:40
  • I agree that adding an extra button is slightly awkward but least worst to me. Maybe mute it visually.
    – jelaplan
    Sep 2, 2014 at 16:48
0

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1
  • The recommendation to avoid the question by just taking the action is a good general purpose solution in many cases to this class of problem. I was hoping to get this kind of answer since I see this problem repeatedly. In the case of save I am going to see if this can be our go to. That said, the previous post that raised storage is valid so I'll see. This answer will not always work but great to keep it in mind.
    – jelaplan
    Sep 2, 2014 at 16:32
0

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.

2
  • "user would rather have a dialog than see multiple buttons on the same page" - Why do you say this?
    – JonW
    Sep 1, 2014 at 7:58
  • Sorry, I made that comment considering mobile UX where the screen area is limited and the user would rather like to have a conversation.. Sep 1, 2014 at 17:06

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.