We're hiring!

We're actively seeking developers for our new Detroit location. Learn more

AJAX Interactions Need Activity Indicators

Activity Indicators

AJAX interactions from the client to the server are wonderful for user experiences. With a little JavaScript magic, form submissions, data loading, and any other interaction of the server can be done without reloading the page. Web applications can be built all on one page with JavaScript frameworks like Backbone.js and Ember.js. The magic of AJAX data transmission is beautiful — until you have to wait.

Remembering the User

When you’re developing an application on the local machine, the client and server tend to communicate very quickly. The interaction of submitting forms and loading new data is so instantaneous that feedback of data transmission isn’t needed.

But don’t forget, this is not the users’ experience. They will probably have to wait a few seconds while AJAX communicates with the server. But since AJAX works in the background, they won’t get a load bar in the browser or cursor changes to let them know the computer is working. To the user, it just looks like nothing is happening.

Activity indicators may be small and easily forgotten, but they provide valuable experiences. If there’s no indication of something happening, the user could interact with other elements or even change the page before a crucial operation is complete.

Showing Activity in AJAX

There are many ways to show that there’s activity happening in the background:

  • Add a simple message to the page when activity is occurring. This can be a simple fix like a flash message at the top of the screen or a label next to the submit button that you can clear after the data has been transferred.
  • Put a class on the body, and have the mouse change to a waiting cursor. A simple body.waiting{ cursor: wait; } can be an easy fix too. However, this doesn’t give a good indication of activity if the user doesn’t have the window in focus (e.g., if it’s on a second monitor, or if another application is in front).
  • Put loading spinners on elements that are sending or “waiting” for data. Using a library like Spin.js or a simple loading spinner gif on certain elements can tell the user that something is happening with certain elements on the screen. Doing this can provide both feedback of activity and show where the crucial interaction points are on the page.

Activity indicators don’t take much work and can relieve pains the users may encounter on slow connections.

Jared Sartin (30 Posts)

Web and mobile developer. Works in Ruby/RoR and JavaScript frameworks.

Strong passion for game development, UI design, and general UX.

This entry was posted in Development Practices and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.