What Do We Know Wrong About Using Loading in Apps? | by Ali ÇORAK | Aug, 2021


What is the Loading on Apps? Why Do We Use?

Ali ÇORAK

Mobile apps need a loading state if they’re not completely static — which they usually don’t. Because an action occurs in every transaction in mobile applications. One of these actions is loading.

Loadings take a certain amount of time depending on the mobile app and internet speed. We should keep this period as short as possible, I will talk about it later in the article. During loading, the user may not understand what is happening. It may think that the screen is frozen or the app is crashing. It really looks that way if we don’t use the loading state.

Use of progress when loading is not enough

We taught users the difference between a frozen screen and a loaded screen: spinners. Spinner is a simple animation that most clearly shows us that there is a loading screen. But nowadays, using the only spinner doesn’t really work anymore. Because now the content size in mobile applications has increased. Today’s users avoid slow content. If we cannot keep the user on the screen, they will leave the app.

Using a spinner is just one example. Animations, graphics, blurs, and skeleton screens are designs that inform the user while loading. These designs I mentioned can be used with each other. Especially spinner and skeleton screen are often used together.

Even more beautiful and effective use is the color change and wave animation of the skeleton screen.

For example, Twitter has a great loading design for photos and videos. If you have slow internet, the skeleton screen first shows where the images will appear. Then the dominant color in the image covers the area where the photo will appear. In the next step, blur comes into play. Finally, the actual image is uploaded.

Twitter loading

If this is a video, the procedures are still the same. Only after blur, a spinner appears and the video starts playing (unless autoplay is disabled).

Using the dominant color in the photo is used by many apps (placeholder image). The first ones that come to mind are Pinterest and Chrome.

Google (left) — Pinterest (right)

Undoubtedly, games design the best loading screen for the user. Dependencies must be loaded when opening a game screen. Scenes from the game are shown during this long process.

Scenes from the game are playing while the game is loading (Asphalt 8 Airborne)

Here we have to be creative so as not to bore the user. At this point, there is no single recommendation for each app. Because each app has its own special details and is separate from each other.

If the application has long loading times, a custom loading design will be better. But for apps with low load times, the current solutions I mentioned above can be used.

Image placeholder
Image placeholder and wave animation
Skeleton screen
Loading and also splash screen
Skeleton screen
Skeleton screen

Sometimes everything goes wrong. We can see progress bars that never fill, spinners that spin forever. There are some very patient users and they may wait for a long time for the page to load. But if there is no internet connection or if there is an installation error caused by the app, it is more user-friendly to inform the user.

In short, if the page is not loaded, show the error on the screen and inform the user instead of using the endless spinner.

Thanks for reading.



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here