Building out UI for Org to kick off Remote Process, How to Display Feedback?

Question

In Unix, the correct procedure is to be quiet when your process successfully works.

In modern Graphical User Interfaces, the Unix standard does not apply.

We're piloting and releasing updates almost daily for a new application for internal users at work.

I just released a UI update that gives no feedback when the user clicks an interface much like a hyperlink that indicates a remote process should be started. We have not specified yet what the feedback should be if any, but I'm thinking we should have something along the lines of an "action requested" pop-up, otherwise we're likely to have users repeatedly clicking the link and looking for an indication that the action has started (which might take minutes to appear).

After the action has started and before it either fails or successfully completes, we show that the action is "in flight." I want to propose an elegant and satisfying solution, but I am not sure I can model this on anything else we're doing at the moment. I'm thinking maybe the best solution is to look for it in the action queue and describe the action as "in queue", but that will take a bit more programming.

What is an elegant solution to this problem?

Answer 1

Two simple suggestions for you:

1. Display some form of loading image at the side of the button, indicating that there is some processing going on. This will ensure that the user does not click on the button multiple times for fear that the button is not working. Once done, you can easily hide this loading image.

2. Change the text of the button to 'loading...' during the processing period. Something like what Google does when you hover on the 'I'm feeling lucky' button on their homepage. Once done, you can follow up with a text change or some animation indicating success or failure as required.

Answer 2

Ideas for you:

• User clicks on a link and a mini "request sent" status gets displayed next to the link

• If user stays on the page/page gets refreshed, the status next to the link updates to show the current status

• If user performs a lot of these long process time actions, consider putting together a dashboard where they can review status of all processes in one place.

I've used this before dealing with a system where the user can associate video files to items. The videos must undergo encoding which takes a while. On individual item pages, user can upload video files and observe the status of videos associated to the item. Then there's another dashboard page where the user can review the status of all video uploads to confirm successful encoding or act on errors if they occur.

Answer 3

Some ideas:

• After clicking the link, disable it so it can't be clicked again. Enable it again when it makes sense for it to be clicked again (if the process completes or fails).
• Display an indicator near the link to show that the process is in progress. This could be a simple spinner or throbber, a loading bar, a "please wait" message, etc.
• When the process completes or fails, display a message indicating the result. If it failed, try to explain why and what can be done to fix it (if anything).

Answer 4

This question is similar to something I recently implemented which has had success.

Because I am unaware of the time required to process the request your users are clicking - I will try to give a few broad options. I will try to give answers that do not require building a dashboard or a completely new UI. Cost can drive up quickly doing so.

1. The link when clicked will change the link to state, "Processing". This can then update to "In Flight" or further stages should the length of time extend itself.

2. Link click could display "Processing" to the right of the link in a grey italicized font. Next to the gray font you can show a pre-loader/animated gif that displays the process is underway.

3. I do not highly recommend this, but you can try creating badges. A badge can indicate stages of processing the request. When the user clicks the link, you can load a badge through AJAX onto the page by the header/title the link belongs to. The badge can change based on stage so - orange may signify processing, blue means 'in flight', green means completed.

These should be relatively low cost and easy to implement. Always a plus from a business perspective! Good luck and hope this helps.