179
votes
Accepted
At what point does a user lose trust in a Busy Spinner?
Jakob Nielsen wrote an article called Response times - 3 important limits.
The basic advice regarding response times has been about the same for thirty years [Miller 1968; Card et al. 1991]. He wrote ...
79
votes
At what point does a user lose trust in a Busy Spinner?
Imagine you and I are talking to each other in the street. You've asked me if I have the time and with barely any hesitation I look at my watch and tell you. You don't give it a second thought. You ...
64
votes
When do users understand that a wizard navigation bar is clickable?
Note: when this answer was written, the question talked about a "progress bar". The question was later changed to mean "wizard". I am leaving this answer as is because it is still being voted up ...
59
votes
Accepted
Progress - When should I go from 100% to 0%, or vice versa?
TLDR: Never, unless you are not making any progress (losing progress)
A progress-bar in UX has one simple feature, show progress to a user. Progress is a forward motion/movement. This is I ...
37
votes
At what point does a user lose trust in a Busy Spinner?
Scott Klemmer's rule of thumb is:
Answer shorter than a second: No feedback
Answer between 1 and 5 seconds: BusySpinner
Answer longer than 5 seconds: Progress bar
10 seconds is a long time. You ...
35
votes
When do users understand that a wizard navigation bar is clickable?
I believe you need to rely on icons in this case.
The pencil is associated with the edit action, which if I understood correctly is the reason why the step is clickable, while a check icon implies ...
33
votes
When do users understand that a wizard navigation bar is clickable?
A lot has been discussed here already, and I think we can take an advantage of user's Mental Model by using border-bottom which will indicate that the step in wizard is clickable.
I've never used ...
29
votes
When do users understand that a wizard navigation bar is clickable?
Real good discussion happening here. Some thoughts and ideas below.
Consider the design attached and multiple scenarios mentioned:
1) Introducing a status message that suggests that the data is ...
21
votes
Accepted
When do users understand that a wizard navigation bar is clickable?
Going off Simon Richter's answer and O. R. Mapper's comment, what about something that looks sort of tab-like to help indicate it's clickable, but has an arrow shape communicating the flow of the ...
18
votes
When do users understand that a wizard navigation bar is clickable?
Deutsche Bahn are using a tabbed interface, adding tabs as the user progresses along the wizard, and with green lines indicating that the respective pages contain valid data. The user can go back by ...
12
votes
At what point does a user lose trust in a Busy Spinner?
According to this article from NNGroup based on cognitive psychology studies:
after 1 second the user might start to lose his flow of thought about the current process.
after 10 seconds the user will ...
12
votes
The rationale of progress indicators for online articles
It think it's just an additional feature that may not be used by majority of users, because as you start reading the content; your focus remains on the content, when you scroll slowly (as anyone would ...
10
votes
Progress - When should I go from 100% to 0%, or vice versa?
You might want to go out to the warehouse and show the people there what the app currently looks like and what other ideas you have.
That way, your end user can give you insight as to what they would ...
10
votes
Accepted
Should progress bars accurately reflect how close the operation is to completion during long operations?
Depends on the context, but I would go a step further to say a 15 minute operation should run asynchronously (disappear into the background and let you get on with something else). Then you only need ...
10
votes
How to indicate spend limit?
Ignoring there's missing data at the image of the question, the representation of the figures is actually a past-present-future diagram where:
Past = money spent
Present = money to spend
Future = ...
9
votes
Accepted
Progress bar design with text overlay
You could try making the bar thinner. right now, the thick bar almost looks like a button, or some kind of slider control.
You can place the text just above. This way you don't have to worry about ...
8
votes
How to show progress bar and percentage value in a compact space?
Increase the contrast so users can see the values at a glance. The progress bar can visually support the number without taking up additional visual space.
By trying to keep the number in the bar, ...
7
votes
What do the three bars in old installers mean?
I have installed a few games with this in it and I personally couldn't find any evidence to support my explanation online after quite a brief search but here's what my thinking is:
1. File Transfer ...
7
votes
At what point does a user lose trust in a Busy Spinner?
Ten seconds and after that I start thinking "this is not working" and I worry in about my credit card being or not being processed or being processed twice if I have to do this again.
It is good to ...
7
votes
Accepted
How to display progress from one stop to the next stop on a continuous scale?
As far as fulfilling the requirements of progress bar functionality both ideas probably work ok:
How long a particular activity will take?
What’s the current status now?
How close the user is to ...
7
votes
Accepted
Compact way to represent a progress with many sub-operations?
If users really want (and need) the loading details of child elements, show them when they ask for it.
If users aren't getting value out of more data in the majority of use cases, why not give them ...
6
votes
Is it a good idea to show progress indicator inside a button?
Go for it. One of the added benefits of showing immediate feedback in the button being interacted with is a reduction in duplicate form submissions. This can be really helpful in ecommerce instances ...
6
votes
Accepted
Status Bar with several Stage
I personally prefer the visual progress bar than the percentage number info. This is an example design combining both possibilities in the same space:
5
votes
Accepted
Best message to display when migrating data?
Please wait while we copy your data to the new app.
This may take a few minutes.
use simple language
make sure they wait just in case they do something that could jeopardise the transfer (e.g. turn ...
5
votes
How to distinguish between progress and consumption visually?
Why not try an hour glass? Almost everyone understands how an hour glass works, even small children, and it seems to fit your situation unique. The user has an particular amount of time which is ...
5
votes
How do you visually represent "progress" on a negative (lower is better) goal?
Consider using the bullet graph.
A bullet graph takes a traditional bar graph and add additional elements to concisely represent target and range info. It is especially designed for dashboards.
How ...
5
votes
How do you visually represent "progress" on a negative (lower is better) goal?
What I feel is that you are trying to design an KPI (Key Performance Indicators) dashboard. Each element regarding the positive and negative results can be communicated with the colors like green, ...
5
votes
At what point does a user lose trust in a Busy Spinner?
Sorry you're all quoting old research. Google has updated this.
125ms the user expects a response of some kind like a loading icon showing up after click.
250ms user starts to notice the action is ...
4
votes
Accepted
Progress bar in a multi-page form in an app
Presently your idea is great but if you want to show the number of screens in a minimal way then one way to do this is to segment it into different screens and provide the link at every checkpoint.
...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
progress-bar × 157gui-design × 19
loading × 18
usability × 12
user-behavior × 12
info-visualisation × 12
progress × 11
forms × 10
feedback × 9
status × 8
interaction-design × 7
user-expectation × 7
website-design × 6
perception × 6
indicator × 6
multi-step × 6
mobile × 5
buttons × 5
design-patterns × 5
android × 4
desktop-application × 4
wizard × 4
visual-design × 4
response-time × 4
games × 4