Improve 104 HR Service Website Menu Loading Experience
Introduction
As a front-end engineer, I often observe flaws present on web pages, so I created a new article category Challenge to challenge and rethink how to create a better website experience.
Recently, I frequently use Taiwan’s most famous job platform: 104 Job Bank, where the personal data menu experience has potential issues worth exploring.
Problem
When logged in to the Taiwan version of the 104 website, you will find that the personal data menu in the upper right corner can be opened:
However, every time the list is first opened, the data initially displayed will be “0”. This is because a lazy-loading logic is applied, where the default data status is displayed as 0, and a data request is only sent if the menu is opened and no data has been requested before. This means that even when the network status is good, users will still see a row of 0s when they first open the menu, leading to a confusing experience.
Why do the data suddenly become 0? What do these 0s represent? Is it appropriate to display 0 as a placeholder when data has not loaded yet?
This is a request of about 3kb in size. Lazy loading is meant to save unnecessary resources, but the lack of a good accompanying experience causes misunderstandings.
Interestingly, if resources are being saved for lazy loading, it seems odd that the request for the “profile picture” in the menu still gets sent immediately even before the menu is opened. This is a 360x360 image that costs 20kb, which clearly shows that focusing only on saving the former does not align with efficiency, and there are other issues as well:
- The current use case only requires an image of about
55pxin width and height; a larger image increases the web page’s load. - The image also does not consider a loading style, and there isn’t even an alt text, leading to issues with image interpretation.
- Not specifying the image dimensions could lead to CLS
Improvement
The first step is to determine when to load the data. Even if a small amount of data might not be needed, preloading it during the browser’s idle time to enhance the experience is one approach, even if it means requesting unnecessary resources.
The second step is to accept that things that might fail are likely to fail; always provide feedback for errors or loading states (loading skeleton, loading text) to avoid bad experiences.
From my current experience with 104, I have no complaints, although it would be clearer if this 0 could be changed to - or loading, which would represent no data more clearly! It is similar to 0 and null; they are related but their meanings are different.
