How to properly guide a user not to cause an error?

Question

We're developing a web application which has a feature to upload local files to a server. The application is developed using a rich web application framework called Vaadin

The framework is very capable as a whole but I've discovered a problem for users using Firefox. If a user that uses Firefox double clicks in the file browser window (something I always do when selecting files in a file browser dialogue) there is a bug in the framework which will forward one click in the double click to the application which is in the background.

The forwarded click may have some unsettling effects such as the view switching and sometimes the application crashing.

This is a very serious problem since it will make the application look unreliable.

The bug is reported to Vaadin but hasn't really caught enough attention, so the problem will persist for some time.

The problem is avoided if the user simply selects a file and clicks "Ok" or selects a file and clicks "Enter", it's only when double clicking that the problem appears.

My question now is how I should adjust to this. There is a risk of error and we know it, how should I communicate this to the user in a way that it's registered and observed?

Answer 1

You can't really communicate this since this will be habitual. It's like trying to stop halfway in sneezing - yuo can do it but it takes enermous concentration.

Instead, what you can do, is to leverage cognitive speeds on this habit: you know that double click occurs within about 100-200 ms (I don't remember the exact timing), and that it's far lower than the user's ability to switch between tasks: that is, if you've got a click in 200 ms when using a file selector in Firefox, it's pretty unlikely it was deliberate.

So, if you can detect when the file dialog is opened, do the following algo:

if browser=='firefox':
     add transparent fullscreen div to window
     on(transparent div).clicked:
          remove transparent div
     on(file).selected):
        wait 200ms
        remove transperent div
    on(filewindow).cancelled:
        remove transparent div

The only problem here is when the framework doesn't allow you to handle cancel, so the user can close the window and click elsewhere instead.

For this, you could create a modal dialog with a gray semi-transparent background (meaning that the interface behind is temporary disabled), which would express the system state. The modal dialog can have any texts basically, the users will hit "OK" anyway.

You should still hide this dialog along with the disabling layer after the user has clicked anywhere, or 200 ms after the file was chosen.

If you can't grab the "file selected" event, you could try to grab it with starting a timer and check at every 100ms if a file was already selected.

Edit A javascript solution for those who're in need for it.

Answer 2

If you think it's worth the effort, you can develop a custom file upload dialog. Either a basic one, mimicking the standard dialog, or, since you're already investing the time in it, you could do something smarter, with multiple selection, drag and drop or other supportive features. With drag&drop you don't need to worry about clicks in either case.

EDIT Thanks to Aadaam for pointing it out to me that it can't really be done. But the drag&drop solution holds :). When users click on "upload file", you can open a region encouraging them to drag&drop their files onto it, like many advanced webapps do (gmail and dropbox among others). As backup, you also provide a link to use the standard uploader, which is also common practice in such cases. This won't terminate the problem you're having with the standard uploader, but it will make it much less common, because less users will ever reach the standard uploader. Also, you will have added a useful, usable and cool feature to your product :).

Answer 3

Can you get an 'instruction' message into the workflow:

To Upload: Select a file and click "Ok" - (Do not double click)