Wednesday, April 13, 2016

How do you tell users "something is going on"?

Consider the following 3 different actions a user could take while on a form:
  1. Entering a new value in a field and tabbing out of that field.
  2. Pressing the save button.
  3. Pressing the submit button.
Each action will have an effect. For instance:
  1. When entering a new value, that new value might need to be validated, or another field re-calculated based on this new value.
  2. When saving, a round trip to the database is typically needed.
  3. When submitting, the data might need to be sent to another backend system, and a new page sent to the user.
Whatever the effect of the action is, there might be a period of time between the instant when the action is performed and the time the result of that action is ready to be shown to users. We hope that this period can be so short that it is close to imperceptible (say, < 100 ms). But in practice, this can't always be done, which means that we should provide users with some indication that "something is happening":
  1. While the form is updated in response to users changing a value, starting with version 4.11, Orbeon Forms shows a non-intrusive slim loading bar at the top of the page, as done natively by Safari when loading a page, and by popular websites like YouTube and GitHub during Ajax requests. This replaces the red "Loading..." indicator shown at the top-right of the page in Orbeon Forms 4.10 and earlier.
  2. When a button like save is pressed, you want to give users immediate feedback that something is happening, without preventing users from interacting with the rest of the page. (If they do a change while data is saved, that change just won't be saved, and users will get a chance to save it later.) Starting with version 4.11, when buttons like save are pressed, a spinner inside the button, as in the animation below.
  3. When users hit submit, they are often taken to another page. If they manage to change the value of a field after they hit submit, but before the next page loads, should they expect that change to be taken into account? Even if you can find plenty of websites that allow fields to be changed after the submit button is pressed, we think this practice is as at best confusing, and should be avoided. This is why, out-of-the-box, when a button like submit is pressed, while the action is performed, a spinner is shown at the center of the page, and the page is greyed-out preventing any user input. You can also see this in the animation below.

Finally, starting with version 4.11, you can configure, for each button, which loading indicator you'd like Orbeon Forms to use:
  • a spinner inside the button, without blocking user's input, called the inline loading indicator;
  • a spinner in the middle of the page, blocking user's input, called the modal loading indicator;
  • no spinner at all.
We think that those improvements go towards keeping users better informed of what is going on as they interact with a form, and allow form authors to have more control over how users are informed of what is happening.

No comments:

Post a Comment