Visibility of system status is one of the most important principles in user interface design. Users want to feel in control of the system they’re using, which means they want to know and understand their current context at any given time, and especially when a system is busy doing work. A wait-animation progress indicator is the most common form of providing a system status for users when something is happening or loading.
For consistency, the following 4 types of loading animation are recommended to be applied for different usages on MySolidWorks, two for button animation and another two for page content loading.
| Loader Animation | Usage | Main Properties |
|---|---|---|
| This loading indicator is applied for an action to trigger launching an external web application. Currently used in "Launch" button on the page of Try SOLIDWORK when the user clicks on it to trigger the loading of SOLIDWORKS Oneline Trial. |
background-color: #da291c border-radius: 4px; font-family: 3ds_regular-webfont animation font: fa-refresh fa-spin |
|
| This loading indicator is applied for an action to trigger launching an internal feature on MySolidWork site. |
background-color: #da291c border-radius: 4px; font-family: 3ds_regular-webfont animation font: fa-refresh fa-spin |
|
|
Processing...
|
This loading indicator is currently used for content loading/refreshing on MySolidWork site. It can be on transparent overlay in gray or white depending on the loading content. |
animation font: fa-spinner fa-spin |
|
Loading...
|
animation font: fa-spinner fa-spin |
|
|
Loading... |
This loading indicator is introduced to be used for content/page loading on an external site or web application platform (e.g. 3DExperience). It can be on transparent overlay in gray or white depending on the loading content. |
Customized CSS animation CSS class = "loading_bar_white" |
|
Loading... |
Customized CSS animation CSS class = "loading_bar_black" |
|
|
Loader progress bar with percentage indicator 5% |
Define the UI Style according to the page loading sample specified in 3DS UI Kit. Progress bar CSS: height:2px; gray-background-color: #ebebeb; blue-background-color: #239de8 |
|
|
Loader progress bar with remaining time and percentage |
Progress bar CSS: height:2px; gray-background-color: #ebebeb; blue-background-color: #239de8; font-size:12px; color:#666 |
|
No matter how fast we make our app and sites, there will often be something that takes time to process. Wait animations, such as loading spinners and percent-done indicators, reduce uncertainty by informing users of the current working state and increase the likelihood that the user will stay and wait for the information to load, and they can improve the feel of any action taking longer than a few milliseconds .
While an instant response from an app is the best, there are times when your app won’t be able to comply with the guidelines for speed. A slow response could be caused by a bad internet connection, or an operation itself can take a long time (e.g. install an update for OS). For such cases, in order to minimize user tension, you must reassure the users that the app is working on their request and that actual progress is being made. Thus, you should provide feedback to the user about what is happening with the app within a reasonable amount of time.
A user’s wait time begins the moment they initiate an action, and the worst case is when they don’t have any indicator the system has received it. When an app fails to notify users that it’s taking time to complete an action, users often think the app didn’t receive the request, and they try again. Plenty of extra clicks and taps have resulted due to a lack of feedback.
Any action, such as clicking a button or pulling to refresh, should have an immediate reaction. It’s essential to give some visual feedback immediately after receiving the request from the user to indicate that the process has initiated.
A user’s wait time begins the moment they initiate an action, and the worst case is when they don’t have any indicator the system has received it. When an app fails to notify users that it’s taking time to complete an action, users often think the app didn’t receive the request, and they try again. Plenty of extra clicks and taps have resulted due to a lack of feedback.
In order to reduce a user’s uncertainty, offer a reason to wait with a progress indicator for any action that takes longer than about one second (Note: the use of animation isn’t recommended for anything that takes less than one second to load, because users might feel anxious about what just flashed on the screen). Animated progress indicators mitigate the negative effects of waiting and prolong the user’s attention on the site or in the app.