Question

We are currently using a meta refresh to initiate a download on a page, I read on Wikipedia that using this is not UX (user experience) friendly. So what is the way to have a download start after a few seconds when landing on a download page.

Answer 1

User interface-friendly way would:

1. Not spring an unannounced surprise to the user. So postpone the download by X seconds and clearly announce that.

   This is done by setting up JavaScript logic to display a changing countdown to download. See below for details on implementation.

2. Allow user to control this by allowing immediate download

   This is done by having the download timer announcement provide a widget (button or a link) to download immediately.

3. Keep the current page, by opening the download in a new window/tab.

   The “kick off the download” logic should preferably be – instead of the obvious setting of window.location.href – something which opens a new window for the download. This way you allow the user to keep the main download landing page intact.

4. If possible, present a nice download widget

   Instead of just pushing the URL of the download target, consider using custom download wisget like jQuery’s jDownload plugin

---

To implement the changing countdown, do something like this:

• Set up a variable for how long till download starts:

  var DownloadIn = 10;

• Set up a timer in JavaScript using setTimeout()`:

  setTimeout("shouldWeDownload()", DownloadIn * 1000);

• Subroutine shouldWeDownload() called from a timer will:

  • check if time period (stored in DownloadIn variable) is greater than zero.

  • If the time is NOT up (greater than zero), it will:

    a. Check if a special “AlreadyDownloading” variable is set to true – this variable will be explained later. If true, simply exit.

    b. print to a special DIV on the page – something very obvious and visible to the user – a message “XXX seconds left till the start of download. Click on this link to start the download”.

    c. Decrement DownloadIn variable

    d. Set the timer again using the same setTimeout

  • If the time’s up, kick off the download.

• In addition, the “this link” link in the message would also immediately kick off the download. To make things clean, the “immediate dowload” onClick JS handler should set a special “AlreadyDownloading” variable which is checked in the logic above should be set to true, so we don’t start a second download due to minor race conditions.