Client Side Development - In Process/Completed Indicator Preferences?

Question

Hello,

I have been doing more client-side development, managing the UI on the client and submitting data to the server via web service calls. I'm not looking for implementation details, but was curious on developer preferences for displaying an operation in process and what to display when completed or even failed.

As a for instance, just for clarification sake, what if you are submitting a profile form's data to a web service. I want to display that something's happening to the user, and give them a message that the form submitted successfully.

I've in the past used a twitter-style message (that appears at the top), modal dialogs... I was curious what worked for others and any advice (what did the users like/not like, etc.).

Again, technical details aren't needed.

Thanks.

Answer 1

Personally, I have some resentment for built-in pop-ups and dialog boxes, maybe because they block browser completely (including other tabs). A site employing them will likely never see me again.

Never used twitter, but gmail message style seems very balanced to me. You always notice them, but they never distract too much.

As another option, overlay windows are often helpful for showing important message or requesting decision, especially in ajax-based application. Some nice touches: graying out rest of the page to grab attention and dismissing message window when user clicks anywhere outside of it. Nice big buttons also help: I hate to practice in sharpshooting with my mouse :p

Progress bar or 'busy' indicator is obviously needed, although I don't see two principally different ways to implement it.

My two cents.

Answer 2

I find an animated GIF image of a translucent circle turning is a very common indicator that something on the page is loading.

A green checkmark is a common indicated of a successful task, and a big red X is good at telling the user that something he did (or the server didn't do) isn't right. Of course, you also need to offer an explanation as to why there is an error.

This method is fairly straightforward, and easy to implement.