To provide services at the highest level, we use cookies as described in our cookie policy. By using our website, cookies will be placed on your device. You can change your browser settings at any time. Check our cookie policy.
Authors
- Izabela Łaszczuk
Authors
- Izabela Łaszczuk
Content
Categories
Have you ever received a mockup with loading and error handling? Me neither.
Mostly with a first design you will get a “happy path”. I can understand why. It’s the fastest way to deliver something for developers to start coding. But is “something” enough to start? Developers start their work on a project from designing separate components. They need to be well designed so they can be reusable. You could say that components are like bricks. First you need to “make” all of the bricks and then you can build a building.
If developers start working on a project and won’t wait for the rest of the information, loading, error etc. they will soon find out that it’s impossible to finish components properly. They won’t be fully functioning and they will waste a lot of time later trying to find all the places that are not handled properly. Not to mention that it could require changes in the whole structure. So, my advice? Wait for the design team to deliver finished mockups.
Mostly with a first design you will get a “happy path”. I can understand why. It’s the fastest way to deliver something for developers to start coding. But is “something” enough to start? Developers start their work on a project from designing separate components. They need to be well designed so they can be reusable. You could say that components are like bricks. First you need to “make” all of the bricks and then you can build a building.
If developers start working on a project and won’t wait for the rest of the information, loading, error etc. they will soon find out that it’s impossible to finish components properly. They won’t be fully functioning and they will waste a lot of time later trying to find all the places that are not handled properly. Not to mention that it could require changes in the whole structure. So, my advice? Wait for the design team to deliver finished mockups.
Why do we need a loading screen?
Loading a page is a moment that can test our patience. That's why loading screens are such crucial elements. They aim to inform users about ongoing operations, prevent frustration, and enhance the waiting experience. We can address this "issue" in several ways.
Loading Screens: They appear during the initialization of an application or content loading. They may include animations, logos, or brand-related graphics that alleviate user anticipation and provide information about the loading process.
Loading Indicators: These are animations or graphics that inform the user about the ongoing process. They can be rotating circles, progress bars, flashing icons, or other elements that visually represent progress.
Loading Messages: This can be a simple message, such as "Please wait, data is loading."
Loading Screens: They appear during the initialization of an application or content loading. They may include animations, logos, or brand-related graphics that alleviate user anticipation and provide information about the loading process.
Loading Indicators: These are animations or graphics that inform the user about the ongoing process. They can be rotating circles, progress bars, flashing icons, or other elements that visually represent progress.
Loading Messages: This can be a simple message, such as "Please wait, data is loading."
Loading blocking the interface
The interface should remain responsive even during loading. Users should have the ability to interact with certain interface elements if they are unrelated to the loading process. If possible, provide context to the user about what is being loaded. This helps in understanding why there is a delay and what is happening.
It's also essential to provide appropriate messages in case of loading errors, so the user knows that something went wrong and what action to take.
Blocking actions during loading in an application is a significant mistake. It frustrates users, limits their control, and reduces efficiency.
.png&w=3840&q=75)
A better approach is to allow users to continue with other actions while simultaneously displaying loading indicators. This improves the user experience, minimizing frustration.
.png&w=3840&q=75)
If it's not possible to navigate to the next page because something is still loading, we can block only the button with a loader, preventing the user from executing the same action multiple times.
Such a state should be shown in the mockup and explained in detail.
It's also essential to provide appropriate messages in case of loading errors, so the user knows that something went wrong and what action to take.
Blocking actions during loading in an application is a significant mistake. It frustrates users, limits their control, and reduces efficiency.
A better approach is to allow users to continue with other actions while simultaneously displaying loading indicators. This improves the user experience, minimizing frustration.
If it's not possible to navigate to the next page because something is still loading, we can block only the button with a loader, preventing the user from executing the same action multiple times.
Such a state should be shown in the mockup and explained in detail.
Loading success/error
Loading completed, but what’s next? It would be appropriate to either celebrate the loading outcome or display an error.
Most commonly, a "snackbar" is utilized for this purpose. It's a small, interface-independent window with information that disappears relatively quickly.
Let's look at the example below. We filled in a table and clicked a button to save our data. After a moment of loading, a success or error message appears.
.png&w=3840&q=75)
Most commonly, a "snackbar" is utilized for this purpose. It's a small, interface-independent window with information that disappears relatively quickly.
Let's look at the example below. We filled in a table and clicked a button to save our data. After a moment of loading, a success or error message appears.
Loading state
The choice of presenting information about the ongoing loading process should be made at the beginning of the design process. After all, we want the application to be consistent. The decision regarding the choice of the solution depends on the context, the specific nature of the application, user preferences, and so on.
Loading indicator Progress indicators, such as rotating circles, progress bars, or icons, are a popular way of informing users about background processes. They can be placed in the area being loaded or as separate elements.
Loading bar
Top loading bars, positioned at the top of the page above the navigation bar, remain visible even during scrolling. They typically provide information about the page loading state or the progress of an operation.
Skeleton
Skeleton screens are views that reflect the structure of future content but remain empty. They use shapes representing interface elements (e.g., rectangles shaped like cards) in the locations where content will appear. This shows that the page is in the process of loading, but the user sees the anticipated structure.
.gif&w=1920&q=75)
Loading indicator Progress indicators, such as rotating circles, progress bars, or icons, are a popular way of informing users about background processes. They can be placed in the area being loaded or as separate elements.
Loading bar
Top loading bars, positioned at the top of the page above the navigation bar, remain visible even during scrolling. They typically provide information about the page loading state or the progress of an operation.
Skeleton
Skeleton screens are views that reflect the structure of future content but remain empty. They use shapes representing interface elements (e.g., rectangles shaped like cards) in the locations where content will appear. This shows that the page is in the process of loading, but the user sees the anticipated structure.
Error
During the application design process, we must not forget the possibility of encountering errors. Therefore, it is important not to overlook designing the interface for potential issues.
In most cases, the design aspect helps us determine how the interface should appear when data in forms is not validated correctly.
However, that's not all. Equally important is providing clear guidelines for developers regarding what should happen when the server does not accept, for example, a submitted form. Should the user see only a message like "Something went wrong"? Or would it be better to display a modal with a more detailed error description and tips on how to correct it?
Such matters should be treated with equal priority as the rest of the application project and should be considered at the very beginning of the creation process, so it can be implemented right away to components. This way, we can avoid user frustration and facilitate the work of developers by providing clear instructions on error handling. It's worth noting that effective error handling can significantly improve the quality of our application and enhance usability.
In most cases, the design aspect helps us determine how the interface should appear when data in forms is not validated correctly.
However, that's not all. Equally important is providing clear guidelines for developers regarding what should happen when the server does not accept, for example, a submitted form. Should the user see only a message like "Something went wrong"? Or would it be better to display a modal with a more detailed error description and tips on how to correct it?
Such matters should be treated with equal priority as the rest of the application project and should be considered at the very beginning of the creation process, so it can be implemented right away to components. This way, we can avoid user frustration and facilitate the work of developers by providing clear instructions on error handling. It's worth noting that effective error handling can significantly improve the quality of our application and enhance usability.
404
Of course we do everything in our power so our application will always work perfectly, but sometimes it won’t. Sometimes it doesn’t even have to be our fault, maybe the user mistyped something? That’s why we need a good 404 page. I mentioned a few times users' frustration already, but only because it is really important not to make clients mad. Well designed 404 page can help with that. It will inform the user that the page doesn’t exist, show them where they can go, but it can also make them laugh, or at least smile. It shows company creativity and personality. And people tend to remember the company better if they have positive memories connected to it.
This is how our 404 looks like:
.png&w=3840&q=75)
The same rule goes for other errors, the most popular example will be googles’ “no internet connection”. I think everybody has played dinosaur game at least once in their life.
.png&w=3840&q=75)
Suddenly having no internet doesn't seem that bad.
This is how our 404 looks like:
The same rule goes for other errors, the most popular example will be googles’ “no internet connection”. I think everybody has played dinosaur game at least once in their life.
Suddenly having no internet doesn't seem that bad.
Conclusion
If something goes wrong, at least make people laugh.
No, but seriously, waiting for finished mockups before starting development ensures that components are well-crafted and avoids later inefficiencies. Effective loading screens, indicators, and error handling contribute to user satisfaction and application usability. Balancing user interaction during loading, celebrating loading outcomes, and addressing errors proactively enrich the overall application quality.
Happy coding/ happy designing!
No, but seriously, waiting for finished mockups before starting development ensures that components are well-crafted and avoids later inefficiencies. Effective loading screens, indicators, and error handling contribute to user satisfaction and application usability. Balancing user interaction during loading, celebrating loading outcomes, and addressing errors proactively enrich the overall application quality.
Happy coding/ happy designing!