Spinner and Progress/Loading Bar


#1

hi all,

we are working on guidelines regarding the UX about system performances.
In most of our apps, users have to launch several queries to have back results to work with.
Some of those queries are quite “brutal” and they require time to be executed.

We were thinking to develop two type of UI components:

  • spinner for web-form controls
  • progress bars for views, dialogues and tables

What we would like to achieve is to deliver a dedicated element for a specific scenario.
Spinner= actions that require not more than 4 sec
Progress/Loading Bars= actions that require more than 5 sec

Did u have any experience on such topic and if yes what is your approach about it?

Thanks in advance for your reply


#2

When I started at my current gig, all that we really used was a spinner-- even when some of our more brutal queries had execution times of 30 seconds or longer. Due to the nature of our business, size of data sets we were working with, and back-end components, speeding up the query wasn’t an option, but it was clear from our research that the lack of feedback we were giving on our longer queries was causing frustration and task abandonment.

We ended up setting up some guidelines that tested well with our users:

  • Regardless of spinner or progress bar display, all animations got a label of some sort, sometimes as simple as “Loading results.”
  • Actions averaging less than 10 seconds wait got our old spinner, unless there were multiple documents being processed.
  • Actions averaging more than 10 seconds or where multiple documents were being processed got a progress/loading bar. In the case of multiple documents, we gave a label of “Processing document X of Y” loading message; in the case of a loading bar, we gave a “This may take up to A (minutes/seconds) /n B% loaded” label. We devised a percentage calculation that displayed the progress percentage at a slightly slower pace than actually occurring, and a time estimate slightly more than expected, with a “jump” to completion that resolved the difference between or our calculations, the display, and actual query completion. This helped mitigate issues where a task would get “hung” on a percentage or unit of time remaining.

We based our design on recommendations from the Nielsen-Norman group, summarized here: https://www.nngroup.com/articles/progress-indicators/


#3

These are some great tips! I’m working on a project in a similar situation and I’ve been figuring out how we are going to make the load issues ‘seem’ less long for customers.

Unfortunately, we can’t get a time estimate from the server on the time that the task will take, but some of these suggestions migt help. Thanks!


#4

hey @dougcollins
thanks for your reply

what GIG is? :slight_smile:

We have already such messages and customers complain they’re not enough, often they believe something is wrong/=broken

Do you have any feedback about this threshold? I mean is it ok for the user to wait 10 sec with a spinner?

That’s fine. What about search fields?
For instance, we have a look-up field that searches a huge amount of data and if:
1- there’s only one match it will be placed into the field (in this case, we freeze the field and we provide the spinner)
2 -there is more than one match it will open a dialog to show the results (in this case we display a loading bar within the table of results)

In case #1 we are not sure if we want to keep the field locked until the system reply to the query.
I have the impression that users will be frustrated by waiting for the result.


#5

My current “gig” is as a UX Engineer for a company that offers trading and client management software to investment advisors.

I’ve generally seen the figure of 8-10 seconds, based on who you ask. Our users are a bit more patient given they’re used to certain aspects of our system being a bit slower, and 10 seconds tested well for us. It was also in the nngroup.com recommendations to which I linked.

We don’t have this particular issue in our system, but it is intriguing. I think your concerns about point one are valid.


#6

I was wondering what GIG actually means, I google it and I found only "Global Information Grid"
I do believe is not the right solution for this acronym :grinning:


#7

Lol oooooh, apologies! It’s slang in the musical world for a job or show, either permanently or a one-time setup. Very uncool people like me occasionally use it to describe their current place of employment, whether they’re in the music industry or not.


#8

It’s commonly used the same way in my part of the world.


#9

@HAWK I’m not alone! Woot!


#10

in my eternal fight against the DEV acronyms, I will use GIG as the lethal weapon!